wednesday-solutions · apurv-wednesday · May 8, 2024 · May 9, 2024 · May 9, 2024 · May 10, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -42,15 +42,16 @@ jobs:
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
           SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
 
-      # Commenting out SonarQube Quality Gate action for now
-      # - uses: sonarsource/sonarqube-quality-gate-action@master
-      #   timeout-minutes: 5
-      #   env:
-      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Test and generate coverage report
+        uses: artiomtr/[email protected]
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          package-manager: yarn
+          custom-title: Jest Coverage Report
 
       - name: Run Lighthouse CI
         run: |
           yarn global add @lhci/[email protected]
           lhci autorun
         env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
diff --git a/jest.config.ts b/jest.config.ts
@@ -6,6 +6,16 @@ const createJestConfig = nextJest({ dir: "./" });
 const jestConfig: Config = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
+  // uncomment later after adding tests 
+  // coverageThreshold: {
+  //   global: {
+  //     statements: 90,
+  //     branches: 90,
+  //     functions: 90,
+  //     lines: 90,
+  //   },
+  // },
+  coverageReporters: ["json-summary", "text", "lcov"],
   collectCoverageFrom: ["src/**/**/*.{js,jsx,ts,tsx}"],
   reporters: [
     "default",
@@ -53,8 +63,8 @@ const jestConfig: Config = {
     "<rootDir>/.next/",
     "<rootDir>/coverage/",
     "<rootDir>/babel.config.js",
-    "<rootDir>/lingui.config.js",
-    "<rootDir>/jest.config.js",
+    "<rootDir>/lingui.config.ts",
+    "<rootDir>/jest.config.ts",
     "<rootDir>/jest.setup.js",
     "<rootDir>/next-env.d.ts",
     "<rootDir>/next.config.js",

diff --git a/src/common/T/tests/__snapshots__/index.test.tsx.snap b/src/common/T/tests/__snapshots__/index.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`<T /> should render and match the snapshot 1`] = `
 .emotion-0 {
   margin: 0;
-  font-family: fontFamily;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5;
+  letter-spacing: 0.00938em;
 }
 
 <body>

diff --git a/src/common/styled/index.tsx b/src/common/styled/index.tsx
@@ -24,6 +24,7 @@ export const CustomCard = styled(Card)<{ maxwidth?: React.CSSProperties["maxWidt
     padding: 1rem;
     max-width: ${props => props.maxwidth}px;
     color: ${props => props.color};
+    ${props => props.color && `color: ${props.color}`};
   }
 `;
 

diff --git a/src/containers/Repos/index.tsx b/src/containers/Repos/index.tsx
@@ -1,5 +1,5 @@
 import { Container, CustomCard, If, T } from "@common";
-import { Box, Divider, OutlinedInput, Pagination } from "@mui/material";
+import { Box, Divider, Link, OutlinedInput, Pagination } from "@mui/material";
 import { ErrorState, RepoList } from "@features/repos/components";
 import { IRepoError } from "@features/repos/types";
 import React, { memo, useEffect, useState } from "react";
@@ -8,82 +8,68 @@ import { useFetchRecommendationQuery } from "@features/repos/api/getRecommendati
 import { useRouter } from "next/router";
 import { Trans } from "@lingui/macro";
 import { skipToken } from "@reduxjs/toolkit/query";
-import styled from "@emotion/styled";
-import Link from "next/link";
 
 interface RepoContainerProps {
   padding?: number;
   maxwidth?: number;
 }
 
-const StyledSpan = styled.span`
-  color: darkblue;
-`;
-
-const StyledLink = styled(Link)`
-  text-decoration: none;
-`;
 const Repos: React.FC<RepoContainerProps> = ({ maxwidth }) => {
   const router = useRouter();
-  const [repoName, setRepoName] = useState<string>("");
+  const [repoName, setRepoName] = useState<string>("react");
   const [page, setPage] = useState<number>(1);
 
   const { data, error, isLoading, isFetching } = useFetchRecommendationQuery(
     isEmpty(repoName)
       ? skipToken
       : {
-        repoName,
-        page,
-      },
+          repoName,
+          page: Number(page),
+        },
     { skip: router.isFallback }
   );
 
   const handlePageChange = (_: React.ChangeEvent<unknown>, pageNumber: number) => {
     setPage(pageNumber);
-    updateUrlParams(repoName, pageNumber);
+    router.push(`/?search=${repoName}&page=${pageNumber}`, undefined, {
+      shallow: true,
+      scroll: true,
+    });
   };
 
   const handleRepoSearch = debounce((repoName: string) => {
     setRepoName(repoName);
     setPage(1);
-    updateUrlParams(repoName, 1); // Update URL params immediately
   }, 500);
-  const updateUrlParams = (repoName: string, pageNumber: number) => {
-    router.push(`/?search=${repoName}&page=${pageNumber}`, undefined, {
-      shallow: true,
-      scroll: true,
-    });
-  };
 
   useEffect(() => {
     if (router.isReady) {
-      const searchParam = router.query?.search as string;
-      setRepoName(searchParam || "");
-      setPage(Number(router.query?.page) || 1);
+      setRepoName(router.query?.search as string);
+      setPage(router.query?.page as unknown as number);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
   useEffect(() => {
     if (!isEmpty(repoName)) {
-      updateUrlParams(repoName, page);
+      router.push(`/?search=${repoName}&page=${page}`);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   return (
     <Container padding={20} maxwidth={500}>
       <Box>
-        <T>
+        <T variant="h5">
           <Trans>Recommendation</Trans>
         </T>
       </Box>
       <Box justifyContent="space-between">
-        <StyledLink href="https://www.iamawesome.com/">
+        <Link href="https://www.iamawesome.com/">
           <T>
-            <Trans>
-              <StyledSpan>You Are Awesome</StyledSpan>
-            </Trans>
+            <Trans>You Are Awesome</Trans>
           </T>
-        </StyledLink>
+        </Link>
       </Box>
       <Divider />
       <CustomCard maxwidth={maxwidth}>

diff --git a/src/features/repos/components/ErrorState/index.tsx b/src/features/repos/components/ErrorState/index.tsx
@@ -9,7 +9,6 @@ import get from "lodash/get";
 import { T, CustomCard } from "@common";
 import { IResponse } from "@features/repos/api/getRecommendations";
 import { Trans, t } from "@lingui/macro";
-import theme from "@app/themes";
 
 interface ErrorStateProps {
   loading: boolean;
@@ -24,8 +23,9 @@ const ErrorState: React.FC<ErrorStateProps> = ({ reposData, reposError, loading
   } else if (!get(reposData, "totalCount", 0)) {
     repoError = t`Search Default`;
   }
+
   return !loading && repoError ? (
-    <CustomCard color={reposError ? `${theme.palette.error.main}` : `${theme.palette.customColor.main[500]}`} data-testid="error-state">
+    <CustomCard color={reposError ? "red" : "grey"} data-testid="error-state">
       <T variant="subtitle2">
         <Trans>Repository List</Trans>
       </T>

diff --git a/src/features/repos/components/ErrorState/tests/__snapshots__/index.test.tsx.snap b/src/features/repos/components/ErrorState/tests/__snapshots__/index.test.tsx.snap
@@ -15,30 +15,33 @@ exports[`<ErrorState /> should render and match the snapshot 1`] = `
   margin: 20px 0;
   padding: 1rem;
   max-width: px;
-  color: #f44336;
+  color: grey;
+  color: grey;
 }
 
 .emotion-1 {
   margin: 0;
-  font-family: fontFamily;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.57;
+  letter-spacing: 0.00714em;
 }
 
 .emotion-2 {
   margin: 0;
-  font-family: fontFamily;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5;
+  letter-spacing: 0.00938em;
 }
 
 <body>
   <div>
     <div
       class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root emotion-0"
-      color="#f44336"
+      color="grey"
       data-testid="error-state"
     >
       <h6
@@ -51,7 +54,7 @@ exports[`<ErrorState /> should render and match the snapshot 1`] = `
         class="MuiTypography-root MuiTypography-body1 emotion-2"
         data-testid="t"
       >
-        Internal Service Error
+        Search Default
       </p>
     </div>
   </div>

diff --git a/src/features/repos/components/ErrorState/tests/index.test.tsx b/src/features/repos/components/ErrorState/tests/index.test.tsx
@@ -13,7 +13,7 @@ describe("<ErrorState />", () => {
     intl: {},
     loading: false,
     reposData: undefined,
-    reposError: "Internal Service Error",
+    reposError: undefined,
   };
 
   it("should render and match the snapshot", () => {

diff --git a/src/features/repos/components/RepoList/tests/__snapshots__/index.test.tsx.snap b/src/features/repos/components/RepoList/tests/__snapshots__/index.test.tsx.snap
@@ -53,18 +53,20 @@ exports[`<RepoList /> should render and match the snapshot 1`] = `
 
 .emotion-2 {
   margin: 0;
-  font-family: fontFamily;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5;
+  letter-spacing: 0.00938em;
 }
 
 .emotion-3 {
   margin: 0;
-  font-family: fontFamily;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5;
+  letter-spacing: 0.00938em;
   margin-bottom: 8px;
 }
 

diff --git a/src/themes/index.ts b/src/themes/index.ts
@@ -1,10 +1,6 @@
 import styles from "./styles";
-import { theme, CustomPalette, font, palette } from "./mui";
+import { theme, font, palette } from "./mui";
 
 export { styles, font, palette };
 
-const customTheme = theme as Omit<typeof theme, "palette"> & {
-    palette: typeof theme.palette & CustomPalette
-}
-
-export default customTheme;
+export default theme;
diff --git a/src/themes/mui/index.ts b/src/themes/mui/index.ts
@@ -1,5 +1,5 @@
 import { createTheme } from "@mui/material/styles";
-import { palette, CustomPalette } from "./palette";
+import { palette } from "./palette";
 import { typography, font } from "./typography";
 import { breakpoints } from "./breakpoints";
 
@@ -9,5 +9,4 @@
  breakpoints,
 });
 
 export { font, theme, palette };
-export type {CustomPalette}
diff --git a/src/themes/mui/palette.ts b/src/themes/mui/palette.ts
@@ -1,23 +1,14 @@
 import { PaletteOptions } from "@mui/material/styles";
 import { blue, purple, green, red, amber } from "@mui/material/colors";
-import { Color } from "@mui/material";
 
-export type CustomPalette = {
-  customColor: {
-    main: Color | string;
-  }
-}
 /**
  * @desc Refer documentation for clarity
  * @link https://mui.com/material-ui/customization/palette/
  */
-export const palette: PaletteOptions & CustomPalette = {
+export const palette: PaletteOptions = {
   primary: blue,
   secondary: purple,
   success: green,
   error: red,
   warning: amber,
-  customColor: {
-    main: "#141414",
-  }
 };
diff --git a/src/translations/en.js b/src/translations/en.js
diff --git a/src/translations/en.po b/src/translations/en.po
@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/containers/Repos/index.tsx:82
-msgid "<0>You Are Awesome</0>"
-msgstr "<0>You Are Awesome</0>"
-
 #: src/features/info/components/RepoInfo/index.tsx:20
 msgid "Back to Search"
 msgstr "Back to Search"
@@ -25,15 +21,15 @@ msgstr "Back to Search"
 msgid "Forks: {forks}"
 msgstr "Forks: {forks}"
 
-#: src/containers/Repos/index.tsx:94
+#: src/containers/Repos/index.tsx:80
 msgid "Get details of repositories"
 msgstr "Get details of repositories"
 
 #: src/features/info/components/EmptyResult/index.tsx:8
 msgid "No records found"
 msgstr "No records found"
 
-#: src/containers/Repos/index.tsx:76
+#: src/containers/Repos/index.tsx:64
 msgid "Recommendation"
 msgstr "Recommendation"
 
@@ -49,15 +45,15 @@ msgstr "Repository List"
 msgid "Repository Name: {0}"
 msgstr "Repository Name: {0}"
 
-#: src/containers/Repos/index.tsx:91
+#: src/containers/Repos/index.tsx:77
 msgid "Repository Search"
 msgstr "Repository Search"
 
 #: src/features/repos/components/RepoItem/index.tsx:27
 msgid "Repository stars: {0}"
 msgstr "Repository stars: {0}"
 
-#: src/features/repos/components/ErrorState/index.tsx:25
+#: src/features/repos/components/ErrorState/index.tsx:24
 msgid "Search Default"
 msgstr "Search Default"
 
@@ -82,6 +78,10 @@ msgstr "Total number of matching repos: {totalCount}"
 msgid "Watchers: {watchers}"
 msgstr "Watchers: {watchers}"
 
+#: src/containers/Repos/index.tsx:70
+msgid "You Are Awesome"
+msgstr "You Are Awesome"
+
 #: src/pages/_offline.tsx:7
 msgid "You are Offline!"
 msgstr "You are Offline!"
diff --git a/src/translations/hi.js b/src/translations/hi.js