From 96b3e3c57098112c5678c23c91d7830d7f9dfe5e Mon Sep 17 00:00:00 2001 From: apurv-wednesday Date: Wed, 8 May 2024 11:47:32 +0530 Subject: [PATCH 1/6] fix: optimize repo container render * update the rendering logic * add color constants * update translations --- src/containers/Repos/index.tsx | 52 ++++++++++++------- .../repos/components/ErrorState/index.tsx | 5 +- .../tests/__snapshots__/index.test.tsx.snap | 6 +-- src/themes/mui/palette.ts | 4 ++ src/translations/en.js | 2 +- src/translations/en.po | 18 +++---- src/translations/hi.js | 2 +- src/translations/hi.po | 18 +++---- src/utils/linguiUtils.ts | 1 - 9 files changed, 64 insertions(+), 44 deletions(-) diff --git a/src/containers/Repos/index.tsx b/src/containers/Repos/index.tsx index 2d82f95..9f150ed 100644 --- 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,84 @@ 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 = ({ maxwidth }) => { const router = useRouter(); - const [repoName, setRepoName] = useState("react"); + const [repoName, setRepoName] = useState(""); const [page, setPage] = useState(1); const { data, error, isLoading, isFetching } = useFetchRecommendationQuery( isEmpty(repoName) ? skipToken : { - repoName, - page: Number(page), - }, + repoName, + page, + }, { skip: router.isFallback } ); const handlePageChange = (_: React.ChangeEvent, 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 + // 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 + // eslint-disable-next-line react-hooks/exhaustive-deps }, [data]); return ( - + Recommendation - + - You Are Awesome + + You Are Awesome + - + diff --git a/src/features/repos/components/ErrorState/index.tsx b/src/features/repos/components/ErrorState/index.tsx index 7fb007f..03657bf 100644 --- 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; @@ -25,10 +26,10 @@ const ErrorState: React.FC = ({ reposData, reposError, loading } return !loading && repoError ? ( - + Repository List - + {repoError} ) : null; 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 index 6f3665a..4247607 100644 --- 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,8 +15,8 @@ exports[` should render and match the snapshot 1`] = ` margin: 20px 0; padding: 1rem; max-width: px; - color: grey; - color: grey; + color: [object Object]; + color: [object Object]; } .emotion-1 { @@ -41,7 +41,7 @@ exports[` should render and match the snapshot 1`] = `
, }; diff --git a/src/translations/en.js b/src/translations/en.js index c195aa9..12d5bbe 100644 --- a/src/translations/en.js +++ b/src/translations/en.js @@ -1 +1 @@ -/*eslint-disable*/module.exports={messages:JSON.parse("{\"WDU3y1\":\"Back to Search\",\"r0p32h\":[\"Forks: \",[\"forks\"]],\"a93ona\":\"Get details of repositories\",\"EqGTpW\":\"No records found\",\"R7WSDI\":\"Recommendation\",\"UD9q2J\":[\"Repository full name: \",[\"0\"]],\"8HzLs9\":\"Repository List\",\"LfaRkD\":[\"Repository Name: \",[\"0\"]],\"zSqOVn\":\"Repository Search\",\"uyzu5f\":[\"Repository stars: \",[\"0\"]],\"aJQKDu\":\"Search Default\",\"vS9Vr8\":[\"Search query: \",[\"repoName\"]],\"xqZxK1\":\"Something Went Wrong\",\"TWYokB\":[\"Stars: \",[\"stargazersCount\"]],\"jVytD5\":[\"Total number of matching repos: \",[\"totalCount\"]],\"4HJq+W\":[\"Watchers: \",[\"watchers\"]],\"FTHiRv\":\"You Are Awesome\",\"Z01zNq\":\"You are Offline!\"}")}; \ No newline at end of file +/*eslint-disable*/module.exports={messages:JSON.parse("{\"7SNCOA\":\"<0>You Are Awesome\",\"WDU3y1\":\"Back to Search\",\"r0p32h\":[\"Forks: \",[\"forks\"]],\"a93ona\":\"Get details of repositories\",\"EqGTpW\":\"No records found\",\"R7WSDI\":\"Recommendation\",\"UD9q2J\":[\"Repository full name: \",[\"0\"]],\"8HzLs9\":\"Repository List\",\"LfaRkD\":[\"Repository Name: \",[\"0\"]],\"zSqOVn\":\"Repository Search\",\"uyzu5f\":[\"Repository stars: \",[\"0\"]],\"aJQKDu\":\"Search Default\",\"vS9Vr8\":[\"Search query: \",[\"repoName\"]],\"xqZxK1\":\"Something Went Wrong\",\"TWYokB\":[\"Stars: \",[\"stargazersCount\"]],\"jVytD5\":[\"Total number of matching repos: \",[\"totalCount\"]],\"4HJq+W\":[\"Watchers: \",[\"watchers\"]],\"Z01zNq\":\"You are Offline!\"}")}; \ No newline at end of file diff --git a/src/translations/en.po b/src/translations/en.po index aa87712..db3e174 100644 --- 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:84 +msgid "<0>You Are Awesome" +msgstr "<0>You Are Awesome" + #: src/features/info/components/RepoInfo/index.tsx:20 msgid "Back to Search" msgstr "Back to Search" @@ -21,7 +25,7 @@ msgstr "Back to Search" msgid "Forks: {forks}" msgstr "Forks: {forks}" -#: src/containers/Repos/index.tsx:80 +#: src/containers/Repos/index.tsx:96 msgid "Get details of repositories" msgstr "Get details of repositories" @@ -29,7 +33,7 @@ msgstr "Get details of repositories" msgid "No records found" msgstr "No records found" -#: src/containers/Repos/index.tsx:64 +#: src/containers/Repos/index.tsx:78 msgid "Recommendation" msgstr "Recommendation" @@ -37,7 +41,7 @@ msgstr "Recommendation" msgid "Repository full name: {0}" msgstr "Repository full name: {0}" -#: src/features/repos/components/ErrorState/index.tsx:30 +#: src/features/repos/components/ErrorState/index.tsx:31 msgid "Repository List" msgstr "Repository List" @@ -45,7 +49,7 @@ msgstr "Repository List" msgid "Repository Name: {0}" msgstr "Repository Name: {0}" -#: src/containers/Repos/index.tsx:77 +#: src/containers/Repos/index.tsx:93 msgid "Repository Search" msgstr "Repository Search" @@ -53,7 +57,7 @@ msgstr "Repository Search" 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 index 4553643..aa1719f 100644 --- a/src/translations/hi.js +++ b/src/translations/hi.js @@ -1 +1 @@ -/*eslint-disable*/module.exports={messages:JSON.parse("{\"WDU3y1\":\"खोज में वापस\",\"r0p32h\":[\"फोर्क्स: \",[\"forks\"]],\"a93ona\":\"रिपॉज़िटरी का विवरण प्राप्त करें\",\"EqGTpW\":\"कोई रिकॉर्ड नहीं मिला\",\"R7WSDI\":\"सिफारिश\",\"UD9q2J\":[\"रिपॉज़िटरी पूरा नाम: \",[\"0\"]],\"8HzLs9\":\"रिपॉज़िटरी सूची\",\"LfaRkD\":[\"रिपॉज़िटरी का नाम: \",[\"0\"]],\"zSqOVn\":\"रिपॉज़िटरी खोज\",\"uyzu5f\":[\"रिपॉज़िटरी तारे: \",[\"0\"]],\"aJQKDu\":\"डिफ़ॉल्ट खोज\",\"vS9Vr8\":[\"खोज क्वेरी: \",[\"repoName\"]],\"xqZxK1\":\"कुछ गलत हो गया\",\"TWYokB\":[\"तारे: \",[\"stargazersCount\"]],\"jVytD5\":[\"मिलती रिपॉज़िटरी की कुल संख्या: \",[\"totalCount\"]],\"4HJq+W\":[\"नजरदार: \",[\"watchers\"]],\"FTHiRv\":\"आप अद्भुत हैं\",\"Z01zNq\":\"आप ऑफ़लाइन हैं!\"}")}; \ No newline at end of file +/*eslint-disable*/module.exports={messages:JSON.parse("{\"7SNCOA\":\"<0>आप अद्भुत हैं\",\"WDU3y1\":\"खोज में वापस\",\"r0p32h\":[\"फोर्क्स: \",[\"forks\"]],\"a93ona\":\"रिपॉज़िटरी का विवरण प्राप्त करें\",\"EqGTpW\":\"कोई रिकॉर्ड नहीं मिला\",\"R7WSDI\":\"सिफारिश\",\"UD9q2J\":[\"रिपॉज़िटरी पूरा नाम: \",[\"0\"]],\"8HzLs9\":\"रिपॉज़िटरी सूची\",\"LfaRkD\":[\"रिपॉज़िटरी का नाम: \",[\"0\"]],\"zSqOVn\":\"रिपॉज़िटरी खोज\",\"uyzu5f\":[\"रिपॉज़िटरी तारे: \",[\"0\"]],\"aJQKDu\":\"डिफ़ॉल्ट खोज\",\"vS9Vr8\":[\"खोज क्वेरी: \",[\"repoName\"]],\"xqZxK1\":\"कुछ गलत हो गया\",\"TWYokB\":[\"तारे: \",[\"stargazersCount\"]],\"jVytD5\":[\"मिलती रिपॉज़िटरी की कुल संख्या: \",[\"totalCount\"]],\"4HJq+W\":[\"नजरदार: \",[\"watchers\"]],\"Z01zNq\":\"आप ऑफ़लाइन हैं!\"}")}; \ No newline at end of file diff --git a/src/translations/hi.po b/src/translations/hi.po index 1c0862c..40cdfab 100644 --- a/src/translations/hi.po +++ b/src/translations/hi.po @@ -13,6 +13,10 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" +#: src/containers/Repos/index.tsx:84 +msgid "<0>You Are Awesome" +msgstr "<0>आप अद्भुत हैं" + #: src/features/info/components/RepoInfo/index.tsx:20 msgid "Back to Search" msgstr "खोज में वापस" @@ -21,7 +25,7 @@ msgstr "खोज में वापस" msgid "Forks: {forks}" msgstr "फोर्क्स: {forks}" -#: src/containers/Repos/index.tsx:80 +#: src/containers/Repos/index.tsx:96 msgid "Get details of repositories" msgstr "रिपॉज़िटरी का विवरण प्राप्त करें" @@ -29,7 +33,7 @@ msgstr "रिपॉज़िटरी का विवरण प्राप् msgid "No records found" msgstr "कोई रिकॉर्ड नहीं मिला" -#: src/containers/Repos/index.tsx:64 +#: src/containers/Repos/index.tsx:78 msgid "Recommendation" msgstr "सिफारिश" @@ -37,7 +41,7 @@ msgstr "सिफारिश" msgid "Repository full name: {0}" msgstr "रिपॉज़िटरी पूरा नाम: {0}" -#: src/features/repos/components/ErrorState/index.tsx:30 +#: src/features/repos/components/ErrorState/index.tsx:31 msgid "Repository List" msgstr "रिपॉज़िटरी सूची" @@ -45,7 +49,7 @@ msgstr "रिपॉज़िटरी सूची" msgid "Repository Name: {0}" msgstr "रिपॉज़िटरी का नाम: {0}" -#: src/containers/Repos/index.tsx:77 +#: src/containers/Repos/index.tsx:93 msgid "Repository Search" msgstr "रिपॉज़िटरी खोज" @@ -53,7 +57,7 @@ msgstr "रिपॉज़िटरी खोज" msgid "Repository stars: {0}" msgstr "रिपॉज़िटरी तारे: {0}" -#: src/features/repos/components/ErrorState/index.tsx:24 +#: src/features/repos/components/ErrorState/index.tsx:25 msgid "Search Default" msgstr "डिफ़ॉल्ट खोज" @@ -78,10 +82,6 @@ msgstr "मिलती रिपॉज़िटरी की कुल सं msgid "Watchers: {watchers}" msgstr "नजरदार: {watchers}" -#: src/containers/Repos/index.tsx:70 -msgid "You Are Awesome" -msgstr "आप अद्भुत हैं" - #: src/pages/_offline.tsx:7 msgid "You are Offline!" msgstr "आप ऑफ़लाइन हैं!" diff --git a/src/utils/linguiUtils.ts b/src/utils/linguiUtils.ts index beb266d..865ee93 100644 --- a/src/utils/linguiUtils.ts +++ b/src/utils/linguiUtils.ts @@ -10,7 +10,6 @@ export async function loadCatalog(locale: string) { export function useLinguiInit(messages: Messages) { const router = useRouter(); const locale = router.locale || router.defaultLocale!; - console.log("locale",locale) const isClient = typeof window !== "undefined"; if (!isClient && locale !== i18n.locale) { From 171b20b4b47a705e58fa8a0a15e34f8733e230b0 Mon Sep 17 00:00:00 2001 From: apurv-wednesday Date: Wed, 8 May 2024 11:55:15 +0530 Subject: [PATCH 2/6] fix: correct jest config --- jest.config.ts | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/jest.config.ts b/jest.config.ts index a91e359..d2bf3f3 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -7,14 +7,14 @@ 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}", + "src/common/**/*.{js,jsx,ts,tsx}", + "src/containers/**/*.{js,jsx,ts,tsx}", + "src/features/**/*.{js,jsx,ts,tsx}", + "src/pages/**/*.{js,jsx,ts,tsx}", + "src/store/**/*.{js,jsx,ts,tsx}", + "src/styles/**/*.{js,jsx,ts,tsx}", + "src/themes/**/*.{js,jsx,ts,tsx}", + "src/utils/**/*.{js,jsx,ts,tsx}", ], reporters: [ "default", @@ -42,19 +42,19 @@ const jestConfig: Config = { // Handle image imports // https://jestjs.io/docs/webpack#handling-static-assets "^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$": `/__mocks__/fileMock.js`, - "@styles(.*)": "/styles", - "@logger(.*)": "/logger", - "@constants(.*)": "/constants", - "services(.*)": "/services", - "^@features(.*)": "/features/$1", - "^@store(.*)": "/store/$1", - "^@containers(.*)": "/containers/$1", - "^@hooks(.*)": "/hooks/$1", - "^@shared(.*)": "/features/sharedComponents/$1", - "^@themes(.*)": "/themes/$1", - "^@utils(.*)": "/utils/$1", - "^@slices(.*)": "/store/slices/$1", - "^@app(.*)": "/$1", + "@styles(.*)": "/src/styles", + "@logger(.*)": "/src/logger", + "@constants(.*)": "/src/constants", + "services(.*)": "/src/services", + "^@features(.*)": "/src/features/$1", + "^@store(.*)": "/src/store/$1", + "^@containers(.*)": "/src/containers/$1", + "^@hooks(.*)": "/src/hooks/$1", + "^@shared(.*)": "/src/features/sharedComponents/$1", + "^@themes(.*)": "/src/themes/$1", + "^@utils(.*)": "/src/utils/$1", + "^@slices(.*)": "/src/store/slices/$1", + "^@app(.*)": "/src/$1", }, setupFilesAfterEnv: ["/jest.setup.js"], testPathIgnorePatterns: [ From a5858873a76a87db9947681ef1100e18da44321e Mon Sep 17 00:00:00 2001 From: apurv-wednesday Date: Wed, 8 May 2024 14:24:28 +0530 Subject: [PATCH 3/6] fix: generalise jest source directory --- jest.config.ts | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/jest.config.ts b/jest.config.ts index d2bf3f3..291d778 100644 --- 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: [ - "src/common/**/*.{js,jsx,ts,tsx}", - "src/containers/**/*.{js,jsx,ts,tsx}", - "src/features/**/*.{js,jsx,ts,tsx}", - "src/pages/**/*.{js,jsx,ts,tsx}", - "src/store/**/*.{js,jsx,ts,tsx}", - "src/styles/**/*.{js,jsx,ts,tsx}", - "src/themes/**/*.{js,jsx,ts,tsx}", - "src/utils/**/*.{js,jsx,ts,tsx}", - ], + collectCoverageFrom: ["src/**/**/*.{js,jsx,ts,tsx}"], reporters: [ "default", [ @@ -45,7 +36,7 @@ const jestConfig: Config = { "@styles(.*)": "/src/styles", "@logger(.*)": "/src/logger", "@constants(.*)": "/src/constants", - "services(.*)": "/src/services", + "@services(.*)": "/src/services", "^@features(.*)": "/src/features/$1", "^@store(.*)": "/src/store/$1", "^@containers(.*)": "/src/containers/$1", From 89718fcda2f737dff321df638512aa7e241a8065 Mon Sep 17 00:00:00 2001 From: apurv-wednesday Date: Wed, 8 May 2024 15:50:21 +0530 Subject: [PATCH 4/6] fix: broken color constants --- src/common/styled/index.tsx | 1 - src/containers/Repos/index.tsx | 2 -- src/features/repos/components/ErrorState/index.tsx | 11 +++++++---- .../tests/__snapshots__/index.test.tsx.snap | 5 ++--- src/themes/mui/palette.ts | 5 +---- src/translations/en.po | 12 ++++++------ src/translations/hi.po | 12 ++++++------ 7 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/common/styled/index.tsx b/src/common/styled/index.tsx index 8dacb97..3f5653e 100644 --- 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 index 9f150ed..dcc8357 100644 --- a/src/containers/Repos/index.tsx +++ b/src/containers/Repos/index.tsx @@ -61,14 +61,12 @@ const Repos: React.FC = ({ maxwidth }) => { setRepoName(searchParam || ""); setPage(Number(router.query?.page) || 1); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [router.isReady]); useEffect(() => { if (!isEmpty(repoName)) { updateUrlParams(repoName, page); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [data]); return ( diff --git a/src/features/repos/components/ErrorState/index.tsx b/src/features/repos/components/ErrorState/index.tsx index 03657bf..1ef4985 100644 --- a/src/features/repos/components/ErrorState/index.tsx +++ b/src/features/repos/components/ErrorState/index.tsx @@ -9,7 +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"; +import { useTheme } from '@mui/material/styles'; interface ErrorStateProps { loading: boolean; @@ -18,18 +18,21 @@ interface ErrorStateProps { } const ErrorState: React.FC = ({ reposData, reposError, loading }) => { + const theme = useTheme(); let repoError: string | undefined; if (reposError) { repoError = reposError; } else if (!get(reposData, "totalCount", 0)) { repoError = t`Search Default`; } - return !loading && repoError ? ( - + Repository List - + {repoError} ) : null; 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 index 4247607..2923033 100644 --- 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,8 +15,7 @@ exports[` should render and match the snapshot 1`] = ` margin: 20px 0; padding: 1rem; max-width: px; - color: [object Object]; - color: [object Object]; + color: #1565c0; } .emotion-1 { @@ -41,7 +40,7 @@ exports[` should render and match the snapshot 1`] = `
, }; diff --git a/src/translations/en.po b/src/translations/en.po index db3e174..abde93f 100644 --- a/src/translations/en.po +++ b/src/translations/en.po @@ -13,7 +13,7 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/containers/Repos/index.tsx:84 +#: src/containers/Repos/index.tsx:82 msgid "<0>You Are Awesome" msgstr "<0>You Are Awesome" @@ -25,7 +25,7 @@ msgstr "Back to Search" msgid "Forks: {forks}" msgstr "Forks: {forks}" -#: src/containers/Repos/index.tsx:96 +#: src/containers/Repos/index.tsx:94 msgid "Get details of repositories" msgstr "Get details of repositories" @@ -33,7 +33,7 @@ msgstr "Get details of repositories" msgid "No records found" msgstr "No records found" -#: src/containers/Repos/index.tsx:78 +#: src/containers/Repos/index.tsx:76 msgid "Recommendation" msgstr "Recommendation" @@ -41,7 +41,7 @@ msgstr "Recommendation" msgid "Repository full name: {0}" msgstr "Repository full name: {0}" -#: src/features/repos/components/ErrorState/index.tsx:31 +#: src/features/repos/components/ErrorState/index.tsx:34 msgid "Repository List" msgstr "Repository List" @@ -49,7 +49,7 @@ msgstr "Repository List" msgid "Repository Name: {0}" msgstr "Repository Name: {0}" -#: src/containers/Repos/index.tsx:93 +#: src/containers/Repos/index.tsx:91 msgid "Repository Search" msgstr "Repository Search" @@ -57,7 +57,7 @@ msgstr "Repository Search" msgid "Repository stars: {0}" msgstr "Repository stars: {0}" -#: src/features/repos/components/ErrorState/index.tsx:25 +#: src/features/repos/components/ErrorState/index.tsx:26 msgid "Search Default" msgstr "Search Default" diff --git a/src/translations/hi.po b/src/translations/hi.po index 40cdfab..92e57bd 100644 --- a/src/translations/hi.po +++ b/src/translations/hi.po @@ -13,7 +13,7 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/containers/Repos/index.tsx:84 +#: src/containers/Repos/index.tsx:82 msgid "<0>You Are Awesome" msgstr "<0>आप अद्भुत हैं" @@ -25,7 +25,7 @@ msgstr "खोज में वापस" msgid "Forks: {forks}" msgstr "फोर्क्स: {forks}" -#: src/containers/Repos/index.tsx:96 +#: src/containers/Repos/index.tsx:94 msgid "Get details of repositories" msgstr "रिपॉज़िटरी का विवरण प्राप्त करें" @@ -33,7 +33,7 @@ msgstr "रिपॉज़िटरी का विवरण प्राप् msgid "No records found" msgstr "कोई रिकॉर्ड नहीं मिला" -#: src/containers/Repos/index.tsx:78 +#: src/containers/Repos/index.tsx:76 msgid "Recommendation" msgstr "सिफारिश" @@ -41,7 +41,7 @@ msgstr "सिफारिश" msgid "Repository full name: {0}" msgstr "रिपॉज़िटरी पूरा नाम: {0}" -#: src/features/repos/components/ErrorState/index.tsx:31 +#: src/features/repos/components/ErrorState/index.tsx:34 msgid "Repository List" msgstr "रिपॉज़िटरी सूची" @@ -49,7 +49,7 @@ msgstr "रिपॉज़िटरी सूची" msgid "Repository Name: {0}" msgstr "रिपॉज़िटरी का नाम: {0}" -#: src/containers/Repos/index.tsx:93 +#: src/containers/Repos/index.tsx:91 msgid "Repository Search" msgstr "रिपॉज़िटरी खोज" @@ -57,7 +57,7 @@ msgstr "रिपॉज़िटरी खोज" msgid "Repository stars: {0}" msgstr "रिपॉज़िटरी तारे: {0}" -#: src/features/repos/components/ErrorState/index.tsx:25 +#: src/features/repos/components/ErrorState/index.tsx:26 msgid "Search Default" msgstr "डिफ़ॉल्ट खोज" From 4ef688c6747595ee5a3dced46568e5c8129b9efc Mon Sep 17 00:00:00 2001 From: apurv-wednesday Date: Wed, 8 May 2024 17:47:18 +0530 Subject: [PATCH 5/6] fix: add custom color --- src/features/repos/components/ErrorState/index.tsx | 8 ++------ .../tests/__snapshots__/index.test.tsx.snap | 4 ++-- src/themes/index.ts | 8 ++++++-- src/themes/mui/index.ts | 3 ++- src/themes/mui/palette.ts | 12 ++++++++++-- src/translations/en.po | 4 ++-- src/translations/hi.po | 4 ++-- 7 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/features/repos/components/ErrorState/index.tsx b/src/features/repos/components/ErrorState/index.tsx index 1ef4985..d4219f3 100644 --- a/src/features/repos/components/ErrorState/index.tsx +++ b/src/features/repos/components/ErrorState/index.tsx @@ -9,7 +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 { useTheme } from '@mui/material/styles'; +import theme from "@app/themes"; interface ErrorStateProps { loading: boolean; @@ -18,7 +18,6 @@ interface ErrorStateProps { } const ErrorState: React.FC = ({ reposData, reposError, loading }) => { - const theme = useTheme(); let repoError: string | undefined; if (reposError) { repoError = reposError; @@ -26,10 +25,7 @@ const ErrorState: React.FC = ({ reposData, reposError, loading repoError = t`Search Default`; } return !loading && repoError ? ( - + Repository List 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 index 2923033..45f59c5 100644 --- 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,7 +15,7 @@ exports[` should render and match the snapshot 1`] = ` margin: 20px 0; padding: 1rem; max-width: px; - color: #1565c0; + color: undefined; } .emotion-1 { @@ -40,7 +40,7 @@ exports[` should render and match the snapshot 1`] = `
& { + palette: typeof theme.palette & CustomPalette +} + +export default customTheme; \ No newline at end of file diff --git a/src/themes/mui/index.ts b/src/themes/mui/index.ts index 01b623b..85ccef9 100644 --- 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 index 546bf68..9cece45 100644 --- a/src/themes/mui/palette.ts +++ b/src/themes/mui/palette.ts @@ -1,15 +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.po b/src/translations/en.po index abde93f..971b445 100644 --- a/src/translations/en.po +++ b/src/translations/en.po @@ -41,7 +41,7 @@ msgstr "Recommendation" msgid "Repository full name: {0}" msgstr "Repository full name: {0}" -#: src/features/repos/components/ErrorState/index.tsx:34 +#: src/features/repos/components/ErrorState/index.tsx:30 msgid "Repository List" msgstr "Repository List" @@ -57,7 +57,7 @@ msgstr "Repository Search" msgid "Repository stars: {0}" msgstr "Repository stars: {0}" -#: src/features/repos/components/ErrorState/index.tsx:26 +#: src/features/repos/components/ErrorState/index.tsx:25 msgid "Search Default" msgstr "Search Default" diff --git a/src/translations/hi.po b/src/translations/hi.po index 92e57bd..c911e54 100644 --- a/src/translations/hi.po +++ b/src/translations/hi.po @@ -41,7 +41,7 @@ msgstr "सिफारिश" msgid "Repository full name: {0}" msgstr "रिपॉज़िटरी पूरा नाम: {0}" -#: src/features/repos/components/ErrorState/index.tsx:34 +#: src/features/repos/components/ErrorState/index.tsx:30 msgid "Repository List" msgstr "रिपॉज़िटरी सूची" @@ -57,7 +57,7 @@ msgstr "रिपॉज़िटरी खोज" msgid "Repository stars: {0}" msgstr "रिपॉज़िटरी तारे: {0}" -#: src/features/repos/components/ErrorState/index.tsx:26 +#: src/features/repos/components/ErrorState/index.tsx:25 msgid "Search Default" msgstr "डिफ़ॉल्ट खोज" From a96979113c76ac73a7fe7fd559a31d50455ab7bd Mon Sep 17 00:00:00 2001 From: apurv-wednesday Date: Wed, 8 May 2024 19:47:00 +0530 Subject: [PATCH 6/6] feat: add themeProvider for test render wrapper --- src/common/T/tests/__snapshots__/index.test.tsx.snap | 3 +-- .../tests/__snapshots__/index.test.tsx.snap | 12 +++++------- .../repos/components/ErrorState/tests/index.test.tsx | 2 +- .../RepoList/tests/__snapshots__/index.test.tsx.snap | 6 ++---- src/utils/testUtils.tsx | 8 +++++++- 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/common/T/tests/__snapshots__/index.test.tsx.snap b/src/common/T/tests/__snapshots__/index.test.tsx.snap index 0823830..1d6125c 100644 --- 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[` 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; } 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 index 45f59c5..d42507f 100644 --- 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,32 +15,30 @@ exports[` should render and match the snapshot 1`] = ` margin: 20px 0; padding: 1rem; max-width: px; - color: undefined; + 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; }
should render and match the snapshot 1`] = ` class="MuiTypography-root MuiTypography-body1 emotion-2" data-testid="t" > - Search Default + Internal Service Error

diff --git a/src/features/repos/components/ErrorState/tests/index.test.tsx b/src/features/repos/components/ErrorState/tests/index.test.tsx index 5891423..1f9b2f8 100644 --- 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("", () => { 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 index 62ac7ef..84799c6 100644 --- 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[` 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/utils/testUtils.tsx b/src/utils/testUtils.tsx index 4e5c9c3..be75d4c 100644 --- a/src/utils/testUtils.tsx +++ b/src/utils/testUtils.tsx @@ -6,6 +6,8 @@ import React from "react"; import { Provider as ReduxProvider } from "react-redux"; import { SerializedStyles } from "@emotion/react"; import { store } from "../store"; +import { ThemeProvider } from "@mui/material"; +import theme from "@themes"; /** * Renders the passed in components or tree with all the providers. @@ -16,7 +18,11 @@ import { store } from "../store"; export const WithAllProviders: React.FC<{ children: React.ReactNode }> = ({ children }) => { return ( - {children} + + + {children} + + ); };