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(
+
+
+
+ {ui}
+
+
+ ,
+ )
+}
+
+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()
+ expect(setValueMock).toHaveBeenCalledWith('search', QUERY_SEARCH)
+ })
+
+ it('should display the correct search query in the input field', () => {
+ const { queryByTestId } = renderWithProviders()
+ 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)
+ 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 (
{