feat: added isTemplate badge & refactored console.logs (#146)

* feat: template option added husky added for same commit disable console in test \
logger utils added env checked for log modified git ignore

* changed are done as per the suggesstion

* changed style and font

* text color dynamic

* fix border and using .bagde class as common

* simplified the badge svg code through a common method

* chore: updated css & fixed tests

Co-authored-by: anuraghazra <hazru.anurag@gmail.com>

src/fetchRepo.js

@@ -10,6 +10,7 @@ const fetcher = (variables, token) => {
         nameWithOwner
         isPrivate
         isArchived
+        isTemplate
         stargazers {
           totalCount
         }

src/fetchStats.js

@@ -1,4 +1,4 @@
-const { request } = require("./utils");
+const { request, logger } = require("./utils");
 const retryer = require("./retryer");
 const calculateRank = require("./calculateRank");
 require("dotenv").config();
@@ -61,7 +61,7 @@ async function fetchStats(username) {
   let res = await retryer(fetcher, { login: username });
 
   if (res.data.errors) {
-    console.log(res.data.errors);
+    logger.error(res.data.errors);
     throw Error(res.data.errors[0].message || "Could not fetch user");
   }
 

src/fetchTopLanguages.js

@@ -1,4 +1,4 @@
-const { request } = require("./utils");
+const { request, logger } = require("./utils");
 const retryer = require("./retryer");
 require("dotenv").config();
 
@@ -38,7 +38,7 @@ async function fetchTopLanguages(username) {
   let res = await retryer(fetcher, { login: username });
 
   if (res.data.errors) {
-    console.log(res.data.errors);
+    logger.error(res.data.errors);
     throw Error(res.data.errors[0].message || "Could not fetch user");
   }
 

src/renderRepoCard.js

@@ -14,6 +14,7 @@ const renderRepoCard = (repo, options = {}) => {
     primaryLanguage,
     stargazers,
     isArchived,
+    isTemplate,
     forkCount,
   } = repo;
   const {
@@ -49,14 +50,20 @@ const renderRepoCard = (repo, options = {}) => {
   const totalStars = kFormatter(stargazers.totalCount);
   const totalForks = kFormatter(forkCount);
 
-  const archiveBadge = isArchived
-    ? `
-    <g data-testid="archive-badge" class="archive-badge" transform="translate(320, 38)">
+  const getBadgeSVG = (label) => `
+    <g data-testid="badge" class="badge" transform="translate(320, 38)">
       <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
-      <text fill="${textColor}">Archived</text>
+      <text 
+        x="23" y="-5"
+        alignment-baseline="central" 
+        dominant-baseline="central" 
+        text-anchor="middle" 
+        fill="${textColor}"
+      >
+        ${label}
+      </text>
     </g>
-    `
-    : "";
+  `;
 
   const svgLanguage = `
     <g transform="translate(30, 100)">
@@ -90,17 +97,25 @@ const renderRepoCard = (repo, options = {}) => {
       .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
       .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
       .icon { fill: ${iconColor} }
-      .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
-      .archive-badge rect { opacity: 0.2 }
+      .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
+      .badge rect { opacity: 0.2 }
       </style>
+
       <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
       <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         ${icons.contribs}
       </svg>
 
-      ${archiveBadge}
-
       <text x="50" y="38" class="header">${header}</text>
+
+      ${
+        isTemplate
+          ? getBadgeSVG("Template")
+          : isArchived
+          ? getBadgeSVG("Archived")
+          : ""
+      }
+      
       <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
       
       ${svgLanguage}

src/retryer.js

@@ -1,9 +1,11 @@
+const { logger } = require("./utils");
+
 const retryer = async (fetcher, variables, retries = 0) => {
   if (retries > 7) {
     throw new Error("Maximum retries exceeded");
   }
   try {
-    console.log(`Trying PAT_${retries + 1}`);
+    logger.log(`Trying PAT_${retries + 1}`);
 
     // try to fetch with the first token since RETRIES is 0 index i'm adding +1
     let response = await fetcher(
@@ -18,7 +20,7 @@ const retryer = async (fetcher, variables, retries = 0) => {
     // if rate limit is hit increase the RETRIES and recursively call the retryer
     // with username, and current RETRIES
     if (isRateExceeded) {
-      console.log(`PAT_${retries + 1} Failed`);
+      logger.log(`PAT_${retries + 1} Failed`);
       retries++;
       // directly return from the function
       return retryer(fetcher, variables, retries);
@@ -32,7 +34,7 @@ const retryer = async (fetcher, variables, retries = 0) => {
     const isBadCredential = err.response.data && err.response.data.message === "Bad credentials";
 
     if (isBadCredential) {
-      console.log(`PAT_${retries + 1} Failed`);
+      logger.log(`PAT_${retries + 1} Failed`);
       retries++;
       // directly return from the function
       return retryer(fetcher, variables, retries);

src/utils.js

@@ -116,6 +116,10 @@ function getCardColors({
   return { titleColor, iconColor, textColor, bgColor };
 }
 
+const fn = () => {};
+// return console instance based on the environment
+const logger = process.env.NODE_ENV !== "test" ? console : { log: fn, error: fn };
+
 const CONSTANTS = {
   THIRTY_MINUTES: 1800,
   TWO_HOURS: 7200,
@@ -133,5 +137,6 @@ module.exports = {
   FlexLayout,
   getCardColors,
   clampValue,
+  logger,
   CONSTANTS,
 };