From da665d27cd80c0b03381c632397452771f936304 Mon Sep 17 00:00:00 2001 From: emmanuelonah Date: Thu, 20 Jun 2024 08:36:41 +0200 Subject: [PATCH] =?UTF-8?q?update:=20cleanup=20=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ src/design-system/colors/index.test.ts | 1 + src/design-system/colors/index.ts | 1 + .../useDocumentRightclick.ts | 2 +- .../components/history/index.styles.tsx | 4 +-- .../components/search-widget/index.styles.tsx | 2 +- .../layouts/header/mobile/index.styles.tsx | 2 +- .../mobile/widgets/menu-widget.styles.tsx | 11 +++--- .../mobile/widgets/menu-widget.widget.tsx | 2 +- src/views/home/__test__/config.test.tsx | 31 ++++++++++++++++ .../home/__test__/useSearchType.test.tsx | 36 +++++++++++++++++++ src/views/home/useSearchType.ts | 5 +-- 12 files changed, 85 insertions(+), 14 deletions(-) create mode 100644 src/views/home/__test__/config.test.tsx create mode 100644 src/views/home/__test__/useSearchType.test.tsx diff --git a/package.json b/package.json index e053a2e..aaaa7b0 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,12 @@ "sb": "storybook dev -p 6006", "build-storybook": "storybook build", "build:sb": "storybook build", + "deploy": "git checkout main && git pull && pre:deploy", "pkgs:audit": "yarn audit --json > package-audit.json", "performance:audit": "lighthouse http://localhost:3000/", "pre:commit": "yarn run lint", "pre:push": "yarn run test:cv && yarn run build", + "pre:deploy": "pre:commit && pre:push", "prepare": "husky" }, "dependencies": { diff --git a/src/design-system/colors/index.test.ts b/src/design-system/colors/index.test.ts index 71e1b4e..1b8513c 100644 --- a/src/design-system/colors/index.test.ts +++ b/src/design-system/colors/index.test.ts @@ -45,6 +45,7 @@ describe('colors', () => { dark200: '#999999', dark100: '#C9C9C9', + grey400: '#575a7b', grey300: '#242426', grey200: '#4f4e50', grey100: '#cacacb', diff --git a/src/design-system/colors/index.ts b/src/design-system/colors/index.ts index 134ac48..840ed1d 100644 --- a/src/design-system/colors/index.ts +++ b/src/design-system/colors/index.ts @@ -51,6 +51,7 @@ export const colors = { dark200: '#999999', dark100: '#C9C9C9', + grey400: '#575a7b', grey300: '#242426', grey200: '#4f4e50', grey100: '#cacacb', diff --git a/src/shared/components/document-rightclick/useDocumentRightclick.ts b/src/shared/components/document-rightclick/useDocumentRightclick.ts index 8e87935..199999e 100644 --- a/src/shared/components/document-rightclick/useDocumentRightclick.ts +++ b/src/shared/components/document-rightclick/useDocumentRightclick.ts @@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from 'react'; import { useBoolean } from 'shared/hooks'; export function useDocumentRightClick() { - const [open, { toggle }] = useBoolean(false); + const [open, { toggle }] = useBoolean(); const ref = useRef(null); /** diff --git a/src/shared/components/history/index.styles.tsx b/src/shared/components/history/index.styles.tsx index a1574f8..f1f221d 100644 --- a/src/shared/components/history/index.styles.tsx +++ b/src/shared/components/history/index.styles.tsx @@ -23,7 +23,7 @@ const HistoryItemWrapper = styled.div` & time { font-size: 0.8rem; - color: #575a7b; + color: ${({ theme }) => theme.colors.grey400}; } & a { @@ -47,7 +47,7 @@ const HistoryItemWrapper = styled.div` * Styles for index.component.tsx */ const HistoryWrapper = styled(ModalWrapper)` - border: solid 2px #575a7b; + border: solid 2px ${({ theme }) => theme.colors.grey400}; border-radius: 1rem; padding: 1.5rem 1rem; color: #e8eaec; diff --git a/src/shared/components/search-widget/index.styles.tsx b/src/shared/components/search-widget/index.styles.tsx index ab279f6..eb10487 100644 --- a/src/shared/components/search-widget/index.styles.tsx +++ b/src/shared/components/search-widget/index.styles.tsx @@ -52,7 +52,7 @@ const ImageInputLabel = styled.label` const SubmitButton = styled.button` background-color: transparent; - border: solid 2px #575a7b; + border: solid 2px ${({ theme }) => theme.colors.grey400}; color: ${({ theme }) => theme.colors.neutral200}; border-radius: 50%; height: 30px; diff --git a/src/shared/layouts/header/mobile/index.styles.tsx b/src/shared/layouts/header/mobile/index.styles.tsx index 8d2f945..dec9186 100644 --- a/src/shared/layouts/header/mobile/index.styles.tsx +++ b/src/shared/layouts/header/mobile/index.styles.tsx @@ -65,7 +65,7 @@ const TabItem = styled(NavLink)` } &.active { - background-color: #3a3f50; + background-color: ${({ theme }) => theme.colors.grey400}; border-radius: 30px; } `; diff --git a/src/shared/layouts/header/mobile/widgets/menu-widget.styles.tsx b/src/shared/layouts/header/mobile/widgets/menu-widget.styles.tsx index 666fcb5..ed207fb 100644 --- a/src/shared/layouts/header/mobile/widgets/menu-widget.styles.tsx +++ b/src/shared/layouts/header/mobile/widgets/menu-widget.styles.tsx @@ -7,16 +7,19 @@ const Button = styled.button` `; const Content = styled(ModalWrapper)` - background-color: white; - border: solid 3px #eee; + border-top-left-radius: 1rem; + border-top: solid 2px ${({ theme }) => theme.colors.grey400}; + border-left: solid 2px ${({ theme }) => theme.colors.grey400}; + border-bottom: solid 2px ${({ theme }) => theme.colors.grey400}; + padding: 1.5rem 1rem; + color: #e8eaec; + background-color: #171719; width: 80%; position: fixed; z-index: ${({ theme }) => theme.typography.zIndexes.modal}; top: 100px; right: 0; height: 100%; - border-top-left-radius: 10px; - padding: 1.5rem; `; const RunningGiphy = styled.img` diff --git a/src/shared/layouts/header/mobile/widgets/menu-widget.widget.tsx b/src/shared/layouts/header/mobile/widgets/menu-widget.widget.tsx index a496923..86ffaca 100644 --- a/src/shared/layouts/header/mobile/widgets/menu-widget.widget.tsx +++ b/src/shared/layouts/header/mobile/widgets/menu-widget.widget.tsx @@ -13,7 +13,7 @@ type MenuWidgetPropTypes = { }; export function MenuWidget(props: MenuWidgetPropTypes) { - const [open, { toggle }] = useBoolean(props.open || false); + const [open, { toggle }] = useBoolean(props.open); return ( <> diff --git a/src/views/home/__test__/config.test.tsx b/src/views/home/__test__/config.test.tsx new file mode 100644 index 0000000..13f9a1b --- /dev/null +++ b/src/views/home/__test__/config.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import { render, screen } from 'test'; + +import { config } from '../config'; + +describe('config object', () => { + it('should have a textSearch property with a page view that renders correctly', () => { + const Page = config.textSearch.page; + + render(); + + expect(screen.getByText('Text Search')).toBeInTheDocument(); + }); + + it('should have an imageSearch property with a page view that renders correctly', () => { + const Page = config.imageSearch.page; + + render(); + + expect(screen.getByText('Image Search')).toBeInTheDocument(); + }); + + it('should have a videoSearch property with a page view that renders correctly', () => { + const Page = config.videoSearch.page; + + render(); + + expect(screen.getByText('Video Search')).toBeInTheDocument(); + }); +}); diff --git a/src/views/home/__test__/useSearchType.test.tsx b/src/views/home/__test__/useSearchType.test.tsx new file mode 100644 index 0000000..508c392 --- /dev/null +++ b/src/views/home/__test__/useSearchType.test.tsx @@ -0,0 +1,36 @@ +import * as ReactRouterDom from 'react-router-dom'; + +import { renderHook } from 'test'; + +import { useSearchType } from '../useSearchType'; + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useParams: jest.fn(), +})); + +describe('useSearchType', () => { + it('should return the searchType from URL parameters if it exists in config', () => { + jest.spyOn(ReactRouterDom, 'useParams').mockReturnValue({ searchType: 'imageSearch' }); + + const { result } = renderHook(() => useSearchType()); + + expect(result.current).toBe('imageSearch'); + }); + + it('should return "textSearch" if the searchType from URL parameters does not exist in config', () => { + jest.spyOn(ReactRouterDom, 'useParams').mockReturnValue({ searchType: 'randomSearch' }); + + const { result } = renderHook(() => useSearchType()); + + expect(result.current).toBe('textSearch'); + }); + + it('should return "textSearch" if no searchType is provided in URL parameters', () => { + jest.spyOn(ReactRouterDom, 'useParams').mockReturnValue({}); + + const { result } = renderHook(() => useSearchType()); + + expect(result.current).toBe('textSearch'); + }); +}); diff --git a/src/views/home/useSearchType.ts b/src/views/home/useSearchType.ts index 5a6700f..15da7ff 100644 --- a/src/views/home/useSearchType.ts +++ b/src/views/home/useSearchType.ts @@ -1,4 +1,3 @@ -import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; import { config } from './config'; @@ -10,7 +9,5 @@ type Params = { searchType: Type }; export function useSearchType() { const params = useParams(); - return useMemo(() => { - return config[params.searchType as Type] ? (params.searchType as Type) : 'textSearch'; - }, [params.searchType]); + return config[params.searchType as Type] ? (params.searchType as Type) : 'textSearch'; }