From fa25e78b89c5da5a7c7f930b5e7ddca500106429 Mon Sep 17 00:00:00 2001
From: ARREY-ETTA BESSONG EKEP OBASI <arreyettaekep@gmail.com>
Date: Sat, 26 Oct 2024 14:41:34 +0100
Subject: [PATCH] feat: display search query in the input field if present on
 mount

---
 .../SideBar/RegularView/__tests__/index.tsx   | 77 +++++++++++++++++++
 .../App/SideBar/RegularView/index.tsx         |  9 ++-
 src/components/SearchBar/index.tsx            |  1 +
 3 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/components/App/SideBar/RegularView/__tests__/index.tsx

diff --git a/src/components/App/SideBar/RegularView/__tests__/index.tsx b/src/components/App/SideBar/RegularView/__tests__/index.tsx
new file mode 100644
index 000000000..7fe372b7b
--- /dev/null
+++ b/src/components/App/SideBar/RegularView/__tests__/index.tsx
@@ -0,0 +1,77 @@
+import { ThemeProvider } from '@mui/material'
+import { render, renderHook, RenderResult } from '@testing-library/react'
+import React, { ReactElement } from 'react'
+import { FormProvider, useForm, useFormContext } from 'react-hook-form'
+import { MemoryRouter } from 'react-router-dom'
+import { ThemeProvider as StyleThemeProvider } from 'styled-components'
+import { RegularView } from '..'
+import { appTheme } from '../../../Providers'
+
+const QUERY_SEARCH = 'satoshi'
+
+jest.mock('react-hook-form', () => ({
+  ...jest.requireActual('react-hook-form'),
+  useFormContext: jest.fn(),
+}))
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useSearchParams: () => [new URLSearchParams({ q: QUERY_SEARCH })],
+}))
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    matches: false,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  })),
+})
+
+const renderWithProviders = (ui: ReactElement): RenderResult => {
+  const { result } = renderHook(() =>
+    useForm<{ search: string }>({
+      defaultValues: {
+        search: QUERY_SEARCH,
+      },
+    }),
+  )
+
+  return render(
+    <MemoryRouter>
+      <ThemeProvider theme={appTheme}>
+        <StyleThemeProvider theme={appTheme}>
+          <FormProvider {...result.current}>{ui}</FormProvider>
+        </StyleThemeProvider>
+      </ThemeProvider>
+    </MemoryRouter>,
+  )
+}
+
+describe('RegularView Component', () => {
+  let setValueMock: jest.Mock
+
+  beforeEach(() => {
+    setValueMock = jest.fn()
+
+    const useFormContextMock = useFormContext as jest.Mock
+
+    useFormContextMock.mockReturnValue({
+      setValue: setValueMock,
+      register: jest.fn(() => ({ name: 'search', value: QUERY_SEARCH })),
+      watch: jest.fn((field: string) => (field === 'search' ? QUERY_SEARCH : undefined)),
+    })
+  })
+
+  it('should call setValue with "search" and the correct query value on mount', () => {
+    renderWithProviders(<RegularView />)
+    expect(setValueMock).toHaveBeenCalledWith('search', QUERY_SEARCH)
+  })
+
+  it('should display the correct search query in the input field', () => {
+    const { queryByTestId } = renderWithProviders(<RegularView />)
+    const searchInput = queryByTestId('search_input') as HTMLInputElement
+
+    expect(searchInput.value).toBe(QUERY_SEARCH)
+  })
+})
diff --git a/src/components/App/SideBar/RegularView/index.tsx b/src/components/App/SideBar/RegularView/index.tsx
index bc4887847..45eabeae0 100644
--- a/src/components/App/SideBar/RegularView/index.tsx
+++ b/src/components/App/SideBar/RegularView/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { SelectWithPopover } from '~/components/App/SideBar/Dropdown'
@@ -25,7 +25,6 @@ import { Trending } from '../Trending'
 
 export const MENU_WIDTH = 390
 
-// eslint-disable-next-line react/display-name
 export const RegularView = () => {
   const { isFetching: isLoading, setSidebarFilter } = useDataStore((s) => s)
 
@@ -42,10 +41,12 @@ export const RegularView = () => {
   const [isScrolled, setIsScrolled] = useState(false)
   const [isFilterOpen, setIsFilterOpen] = useState(false)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [searchParams] = useSearchParams()
+  const query = searchParams.get('q') ?? ''
 
   useEffect(() => {
-    setValue('search', searchFormValue)
-  }, [setValue, searchFormValue])
+    setValue('search', query || searchFormValue)
+  }, [setValue, searchFormValue, query])
 
   useEffect(() => {
     const component = componentRef.current
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
index 317204140..57620ca04 100644
--- a/src/components/SearchBar/index.tsx
+++ b/src/components/SearchBar/index.tsx
@@ -68,6 +68,7 @@ export const SearchBar = ({ loading, placeholder = 'Search', onSubmit }: Props)
   return (
     <Input
       {...register('search')}
+      data-testid="search_input"
       disabled={loading}
       id="main-search"
       onKeyPress={(event) => {