Merge pull request #38 from wednesday-solutions/fix/add-performance-o…

…ptimizations fix: add performance optimisations
wednesday-solutions · May 9, 2024 · 8b0ef35 · 8b0ef35
2 parents 036985e + a969791
commit 8b0ef35
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 83 deletions.
diff --git a/jest.config.ts b/jest.config.ts
@@ -6,16 +6,7 @@ const createJestConfig = nextJest({ dir: "./" });
 const jestConfig: Config = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
-  collectCoverageFrom: [
-    "./common/**/*.{js,jsx,ts,tsx}",
-    "./containers/**/*.{js,jsx,ts,tsx}",
-    "./features/**/*.{js,jsx,ts,tsx}",
-    "./pages/**/*.{js,jsx,ts,tsx}",
-    "./store/**/*.{js,jsx,ts,tsx}",
-    "./styles/**/*.{js,jsx,ts,tsx}",
-    "./themes/**/*.{js,jsx,ts,tsx}",
-    "./utils/**/*.{js,jsx,ts,tsx}",
-  ],
+  collectCoverageFrom: ["src/**/**/*.{js,jsx,ts,tsx}"],
   reporters: [
     "default",
     [
@@ -42,19 +33,19 @@ const jestConfig: Config = {
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
     "^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$": `<rootDir>/__mocks__/fileMock.js`,
-    "@styles(.*)": "<rootDir>/styles",
-    "@logger(.*)": "<rootDir>/logger",
-    "@constants(.*)": "<rootDir>/constants",
-    "services(.*)": "<rootDir>/services",
-    "^@features(.*)": "<rootDir>/features/$1",
-    "^@store(.*)": "<rootDir>/store/$1",
-    "^@containers(.*)": "<rootDir>/containers/$1",
-    "^@hooks(.*)": "<rootDir>/hooks/$1",
-    "^@shared(.*)": "<rootDir>/features/sharedComponents/$1",
-    "^@themes(.*)": "<rootDir>/themes/$1",
-    "^@utils(.*)": "<rootDir>/utils/$1",
-    "^@slices(.*)": "<rootDir>/store/slices/$1",
-    "^@app(.*)": "<rootDir>/$1",
+    "@styles(.*)": "<rootDir>/src/styles",
+    "@logger(.*)": "<rootDir>/src/logger",
+    "@constants(.*)": "<rootDir>/src/constants",
+    "@services(.*)": "<rootDir>/src/services",
+    "^@features(.*)": "<rootDir>/src/features/$1",
+    "^@store(.*)": "<rootDir>/src/store/$1",
+    "^@containers(.*)": "<rootDir>/src/containers/$1",
+    "^@hooks(.*)": "<rootDir>/src/hooks/$1",
+    "^@shared(.*)": "<rootDir>/src/features/sharedComponents/$1",
+    "^@themes(.*)": "<rootDir>/src/themes/$1",
+    "^@utils(.*)": "<rootDir>/src/utils/$1",
+    "^@slices(.*)": "<rootDir>/src/store/slices/$1",
+    "^@app(.*)": "<rootDir>/src/$1",
   },
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   testPathIgnorePatterns: [

diff --git a/src/common/T/tests/__snapshots__/index.test.tsx.snap b/src/common/T/tests/__snapshots__/index.test.tsx.snap
@@ -3,11 +3,10 @@
 exports[`<T /> should render and match the snapshot 1`] = `
 .emotion-0 {
   margin: 0;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-family: fontFamily;
   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,7 +24,6 @@ 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, Link, OutlinedInput, Pagination } from "@mui/material";
+import { Box, Divider, 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,68 +8,82 @@ 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>("react");
+  const [repoName, setRepoName] = useState<string>("");
   const [page, setPage] = useState<number>(1);
 
   const { data, error, isLoading, isFetching } = useFetchRecommendationQuery(
     isEmpty(repoName)
       ? skipToken
       : {
-          repoName,
-          page: Number(page),
-        },
+        repoName,
+        page,
+      },
     { skip: router.isFallback }
   );
 
   const handlePageChange = (_: React.ChangeEvent<unknown>, pageNumber: number) => {
     setPage(pageNumber);
-    router.push(`/?search=${repoName}&page=${pageNumber}`, undefined, {
-      shallow: true,
-      scroll: true,
-    });
+    updateUrlParams(repoName, pageNumber);
   };
 
   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) {
-      setRepoName(router.query?.search as string);
-      setPage(router.query?.page as unknown as number);
+      const searchParam = router.query?.search as string;
+      setRepoName(searchParam || "");
+      setPage(Number(router.query?.page) || 1);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
   useEffect(() => {
     if (!isEmpty(repoName)) {
-      router.push(`/?search=${repoName}&page=${page}`);
+      updateUrlParams(repoName, page);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   return (
     <Container padding={20} maxwidth={500}>
       <Box>
-        <T variant="h5">
+        <T>
           <Trans>Recommendation</Trans>
         </T>
       </Box>
       <Box justifyContent="space-between">
-        <Link href="https://www.iamawesome.com/">
+        <StyledLink href="https://www.iamawesome.com/">
           <T>
-            <Trans>You Are Awesome</Trans>
+            <Trans>
+              <StyledSpan>You Are Awesome</StyledSpan>
+            </Trans>
           </T>
-        </Link>
+        </StyledLink>
       </Box>
       <Divider />
       <CustomCard maxwidth={maxwidth}>

diff --git a/src/features/repos/components/ErrorState/index.tsx b/src/features/repos/components/ErrorState/index.tsx
@@ -9,6 +9,7 @@ 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;
@@ -23,9 +24,8 @@ const ErrorState: React.FC<ErrorStateProps> = ({ reposData, reposError, loading
   } else if (!get(reposData, "totalCount", 0)) {
     repoError = t`Search Default`;
   }
-
   return !loading && repoError ? (
-    <CustomCard color={reposError ? "red" : "grey"} data-testid="error-state">
+    <CustomCard color={reposError ? `${theme.palette.error.main}` : `${theme.palette.customColor.main[500]}`} 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,33 +15,30 @@ exports[`<ErrorState /> should render and match the snapshot 1`] = `
   margin: 20px 0;
   padding: 1rem;
   max-width: px;
-  color: grey;
-  color: grey;
+  color: #f44336;
 }
 
 .emotion-1 {
   margin: 0;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-family: fontFamily;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.57;
-  letter-spacing: 0.00714em;
 }
 
 .emotion-2 {
   margin: 0;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-family: fontFamily;
   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="grey"
+      color="#f44336"
       data-testid="error-state"
     >
       <h6
@@ -54,7 +51,7 @@ exports[`<ErrorState /> should render and match the snapshot 1`] = `
         class="MuiTypography-root MuiTypography-body1 emotion-2"
         data-testid="t"
       >
-        Search Default
+        Internal Service Error
       </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: undefined,
+    reposError: "Internal Service Error",
   };
 
   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,20 +53,18 @@ exports[`<RepoList /> should render and match the snapshot 1`] = `
 
 .emotion-2 {
   margin: 0;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-family: fontFamily;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5;
-  letter-spacing: 0.00938em;
 }
 
 .emotion-3 {
   margin: 0;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-family: fontFamily;
   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,6 +1,10 @@
 import styles from "./styles";
-import { theme, font, palette } from "./mui";
+import { theme, CustomPalette, font, palette } from "./mui";
 
 export { styles, font, palette };
 
-export default theme;
+const customTheme = theme as Omit<typeof theme, "palette"> & {
+    palette: typeof theme.palette & CustomPalette
+}
+
+export default customTheme;
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 } from "./palette";
+import { palette, CustomPalette } from "./palette";
 import { typography, font } from "./typography";
 import { breakpoints } from "./breakpoints";
 
@@ -10,3 +10,4 @@ const theme = createTheme({
 });
 
 export { font, theme, palette };
+export type {CustomPalette}
diff --git a/src/themes/mui/palette.ts b/src/themes/mui/palette.ts
@@ -1,14 +1,23 @@
 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 = {
+export const palette: PaletteOptions & CustomPalette = {
   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,6 +13,10 @@ 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"
@@ -21,15 +25,15 @@ msgstr "Back to Search"
 msgid "Forks: {forks}"
 msgstr "Forks: {forks}"
 
-#: src/containers/Repos/index.tsx:80
+#: src/containers/Repos/index.tsx:94
 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:64
+#: src/containers/Repos/index.tsx:76
 msgid "Recommendation"
 msgstr "Recommendation"
 
@@ -45,15 +49,15 @@ msgstr "Repository List"
 msgid "Repository Name: {0}"
 msgstr "Repository Name: {0}"
 
-#: src/containers/Repos/index.tsx:77
+#: src/containers/Repos/index.tsx:91
 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:24
+#: src/features/repos/components/ErrorState/index.tsx:25
 msgid "Search Default"
 msgstr "Search Default"
 
@@ -78,10 +82,6 @@ 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