update: cleanup 🧹

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": {

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',

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',

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<HTMLDivElement>(null);
 
   /**

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;

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;

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;
   }
 `;

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`

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 (
     <>

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(<Page />);
+
+    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(<Page />);
+
+    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(<Page />);
+
+    expect(screen.getByText('Video Search')).toBeInTheDocument();
+  });
+});

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');
+  });
+});

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<Params>();
 
-  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';
 }