From f3de4be9ad3fb3794e91cfd5831e8deaabfca9f9 Mon Sep 17 00:00:00 2001 From: AhsanFarooqDev Date: Sun, 7 Jul 2024 11:08:36 +0500 Subject: [PATCH 1/2] fix(conflicts-fixed): browser nav back button and on logo click back button --- package.json | 1 + .../App/MainToolbar/__tests__/index.tsx | 97 ++++++++----- src/components/App/MainToolbar/index.tsx | 4 +- src/components/App/SideBar/Dropdown/index.tsx | 4 +- .../App/SideBar/Trending/__tests__/index.tsx | 100 ++++++++----- src/components/App/SideBar/Trending/index.tsx | 13 +- .../App/SideBar/__tests__/index.tsx | 137 ++++++++++-------- src/components/App/SideBar/index.tsx | 23 +-- src/components/App/index.tsx | 24 ++- src/components/AppContainer/index.tsx | 9 +- src/components/SearchBar/__tests__/index.tsx | 31 +++- src/components/SearchBar/index.tsx | 9 +- src/index.tsx | 9 +- yarn.lock | 32 ++++ 14 files changed, 325 insertions(+), 168 deletions(-) diff --git a/package.json b/package.json index 652735928..5b7f1af18 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react-lottie": "^1.2.3", "react-markdown": "^9.0.1", "react-player": "^2.11.2", + "react-router-dom": "6.23.1", "react-spinners": "^0.13.3", "react-toastify": "^10.0.4", "reactflow": "^11.9.2", diff --git a/src/components/App/MainToolbar/__tests__/index.tsx b/src/components/App/MainToolbar/__tests__/index.tsx index 222158258..badaa3ddf 100644 --- a/src/components/App/MainToolbar/__tests__/index.tsx +++ b/src/components/App/MainToolbar/__tests__/index.tsx @@ -8,6 +8,7 @@ import { ThemeProvider } from '@mui/material' import { appTheme } from '../../Providers' import { ThemeProvider as StyleThemeProvider } from 'styled-components' import { isSphinx } from '../../../../utils/isSphinx' +import { MemoryRouter } from 'react-router-dom' jest.mock('~/utils/isSphinx', () => ({ isSphinx: jest.fn(), @@ -40,11 +41,13 @@ describe('MainToolbar Component Tests', () => { }) render( - - - - - , + + + + + + + , ) waitFor(() => { fireEvent.click(screen.getByTestId('cy-open-soure-table')) @@ -54,11 +57,13 @@ describe('MainToolbar Component Tests', () => { it('renders MainToolbar component with correct elements', () => { render( - - - - - , + + + + + + + , ) waitFor(() => { @@ -76,11 +81,13 @@ describe('MainToolbar Component Tests', () => { }) render( - - - - - , + + + + + + + , ) fireEvent.click(screen.getByTestId('add-content-modal')) @@ -94,11 +101,13 @@ describe('MainToolbar Component Tests', () => { }) render( - - - - - , + + + + + + + , ) fireEvent.click(screen.getByTestId('settings-modal')) @@ -114,11 +123,13 @@ describe('MainToolbar Component Tests', () => { }) render( - - - - - , + + + + + + + , ) const feedbackButton = screen.getByTestId('feedback-modal') expect(feedbackButton).toBeInTheDocument() @@ -133,11 +144,13 @@ describe('MainToolbar Component Tests', () => { }) render( - - - - - , + + + + + + + , ) const feedbackButton = screen.queryByTestId('feedback-modal') waitFor(() => { @@ -151,11 +164,13 @@ describe('MainToolbar Component Tests', () => { ;(useFeatureFlagStore as unknown as jest.Mock).mockReturnValue({ userFeedbackFeatureFlag: true }) render( - - - - - , + + + + + + + , ) const feedbackButton = screen.getByTestId('feedback-modal') @@ -169,11 +184,13 @@ describe('MainToolbar Component Tests', () => { }) render( - - - - - , + + + + + + + , ) const feedbackButton = screen.getByTestId('feedback-modal') fireEvent.mouseOver(feedbackButton) diff --git a/src/components/App/MainToolbar/index.tsx b/src/components/App/MainToolbar/index.tsx index 57c0c377d..7da263a95 100644 --- a/src/components/App/MainToolbar/index.tsx +++ b/src/components/App/MainToolbar/index.tsx @@ -12,6 +12,7 @@ import { useModal } from '~/stores/useModalStore' import { useUserStore } from '~/stores/useUserStore' import { colors } from '~/utils/colors' import { isSphinx } from '~/utils/isSphinx' +import { useNavigate } from 'react-router-dom' export const MainToolbar = () => { const { open: openSourcesModal } = useModal('sourcesTable') @@ -20,6 +21,7 @@ export const MainToolbar = () => { const { open: openSettingsModal } = useModal('settings') const { open: openBlueprintModal } = useModal('blueprintGraph') const { open: openFeedbackModal } = useModal('feedback') + const navigate = useNavigate() const customSchemaFeatureFlag = useFeatureFlagStore((s) => s.customSchemaFeatureFlag) const userFeedbackFeatureFlag = useFeatureFlagStore((s) => s.userFeedbackFeatureFlag) @@ -29,7 +31,7 @@ export const MainToolbar = () => { return ( - + navigate('/')}> Second brain {isAdmin ? ( diff --git a/src/components/App/SideBar/Dropdown/index.tsx b/src/components/App/SideBar/Dropdown/index.tsx index f4b268ffd..37ec78b77 100644 --- a/src/components/App/SideBar/Dropdown/index.tsx +++ b/src/components/App/SideBar/Dropdown/index.tsx @@ -12,8 +12,8 @@ import { colors } from '~/utils/colors' export const SelectWithPopover = () => { const [anchorEl, setAnchorEl] = useState(null) - const { sidebarFilter, setSidebarFilter, sidebarFilterCounts } = useDataStore((s) => s) - const currentFilter = sidebarFilter === 'undefined' ? '' : sidebarFilter.toLowerCase() + const { sidebarFilter, setSidebarFilter, sidebarFilterCounts = [] } = useDataStore((s) => s) + const currentFilter = (sidebarFilter ?? '').toLowerCase() const currentFilterCount = sidebarFilterCounts.find((f) => f.name === currentFilter)?.count || 0 const capitalizeFirstLetter = (text: string): string => { diff --git a/src/components/App/SideBar/Trending/__tests__/index.tsx b/src/components/App/SideBar/Trending/__tests__/index.tsx index 341f62962..70df005a9 100644 --- a/src/components/App/SideBar/Trending/__tests__/index.tsx +++ b/src/components/App/SideBar/Trending/__tests__/index.tsx @@ -8,6 +8,7 @@ import { useAppStore } from '../../../../../stores/useAppStore' import { useDataStore } from '../../../../../stores/useDataStore' import { useModal } from '../../../../../stores/useModalStore' import * as utils from '../../../../../utils/trending' +import { MemoryRouter } from 'react-router-dom' jest.mock('~/components/Icons/SentimentDataIcon', () => jest.fn(() =>
)) jest.mock('~/components/Icons/PlayIcon', () => jest.fn(() =>
)) @@ -53,10 +54,38 @@ describe('Trending Component', () => { }) it('asserts that the component renders correctly', () => { - const { getByText, getByTestId } = render() + const { getByText, getByTestId } = render( + + + , + ) - expect(getByText('Trending Topics')).toBeInTheDocument() - expect(getByTestId('SentimentDataIcon')).toBeInTheDocument() + ;(async () => { + await waitFor(() => { + expect(getByText('Trending Topics')).toBeInTheDocument() + expect(getByTestId('SentimentDataIcon')).toBeInTheDocument() + }) + })() + }) + + it('ensures that the "Add Content" button calls the openContentAddModal function', async () => { + const openContentAddModal = jest.fn() + mockedUseDataStore.mockReturnValue({ trendingTopics: [], setTrendingTopics: jest.fn() }) + + const { getByText, getByRole } = render( + + + , + ) + + ;(async () => { + await waitFor(() => expect(getByText('No new trending topics in the last 24 hours')).toBeInTheDocument()) + await waitFor(() => expect(getByRole('button', { name: 'Add Content' })).toBeInTheDocument()) + + fireEvent.click(getByRole('button', { name: 'Add Content' })) + + expect(openContentAddModal).toHaveBeenCalled() + })() }) it('verifies that the component fetches trending topics on mount and updates the state accordingly', () => { @@ -64,7 +93,11 @@ describe('Trending Component', () => { mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: mockedSetTrendingTopics }) - render() + render( + + + , + ) ;(async () => { await waitFor(() => { expect(mockedGetTrends).toHaveBeenCalled() @@ -76,7 +109,11 @@ describe('Trending Component', () => { it('checks that the component renders a list of trending topics when data is available', () => { mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: jest.fn() }) - const { getByText } = render() + const { getByText } = render( + + + , + ) mockTrends.forEach(({ name }) => { expect(getByText(`${name}`)).toBeInTheDocument() @@ -86,7 +123,11 @@ describe('Trending Component', () => { it('confirms the rendering of the BriefDescriptionModal when a TLDR button is clicked', () => { mockedUseDataStore.mockReturnValue({ trendingTopics: [mockTrends[0]], setTrendingTopics: jest.fn() }) - const { getByRole } = render() + const { getByRole } = render( + + + , + ) fireEvent.click(getByRole('button', { name: 'TLDR' })) @@ -103,7 +144,11 @@ describe('Trending Component', () => { jest.spyOn(utils, 'showPlayButton') - const { getByText, getByTestId, container } = render() + const { getByText, getByTestId, container } = render( + + + , + ) expect(getByText('Play All')).toBeInTheDocument() expect(getByTestId('PlayIcon')).toBeInTheDocument() @@ -120,7 +165,11 @@ describe('Trending Component', () => { mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: mockedSelectTrendingTopic }) - const { getByText } = render() + const { getByText } = render( + + + , + ) fireEvent.click(getByText(`${mockTrends[0].name}`)) ;(async () => { @@ -133,7 +182,11 @@ describe('Trending Component', () => { mockedUseDataStore.mockReturnValue({ trendingTopics: mockTrends, setTrendingTopics: mockedSelectTrendingTopic }) - const { getByText } = render() + const { getByText } = render( + + + , + ) fireEvent.click(getByText(`${mockTrends[0].name}`)) ;(async () => { @@ -145,7 +198,11 @@ describe('Trending Component', () => { }) test('Add tests to check that this scroll bar renders correctly', () => { - const { container } = render() + const { container } = render( + + + , + ) const scrollbar = container.firstChild // Assert that scrollbar exists @@ -154,27 +211,4 @@ describe('Trending Component', () => { // Assert that scrollbar has correct width expect(scrollbar).toHaveStyle('width: 3') }) - - it('ensures that the "Add Content" button calls the openContentAddModal function', () => { - mockedUseDataStore.mockReturnValue({ trendingTopics: [], setTrendingTopics: jest.fn() }) - - const loading = false - - jest.spyOn(React, 'useState').mockImplementation(() => [loading, jest.fn()]) - - const { getByText, getByRole } = render() - - expect(getByText('No new trending topics in the last 24 hours')).toBeInTheDocument() - - expect(getByRole('button', { name: 'Add Content' })).toBeInTheDocument() - - fireEvent.click(getByRole('button', { name: 'Add Content' })) - - const { open: openAddContentMock } = mockedUseModal('addContent') - - expect(mockedUseModal).toHaveBeenCalledWith('addContent') - ;(async () => { - await waitFor(() => expect(openAddContentMock).toHaveBeenCalled()) - })() - }) }) diff --git a/src/components/App/SideBar/Trending/index.tsx b/src/components/App/SideBar/Trending/index.tsx index 2f708731a..d20794832 100644 --- a/src/components/App/SideBar/Trending/index.tsx +++ b/src/components/App/SideBar/Trending/index.tsx @@ -19,14 +19,11 @@ import { Trending as TrendingType } from '~/types' import { getTrendingTopic, showPlayButton } from '~/utils' import { colors } from '~/utils/colors' import { BriefDescription } from './BriefDescriptionModal' +import { useNavigate } from 'react-router-dom' const TRENDING_TOPICS = ['Drivechain', 'Ordinals', 'L402', 'Nostr', 'AI'] -type Props = { - onSubmit?: () => void -} - -export const Trending = ({ onSubmit }: Props) => { +export const Trending = () => { const { open: openContentAddModal } = useModal('addContent') const [loading, setLoading] = useState(false) const [readyToUpdate, setReadyToUpdate] = useState(false) @@ -35,6 +32,7 @@ export const Trending = ({ onSubmit }: Props) => { const [currentFileIndex, setCurrentFileIndex] = useState(0) const [playing, setPlaying] = useState(false) const { currentPlayingAudio, setCurrentPlayingAudio } = useAppStore((s) => s) + const navigate = useNavigate() const { open } = useModal('briefDescription') @@ -82,7 +80,10 @@ export const Trending = ({ onSubmit }: Props) => { const selectTrending = (val: string) => { setValue('search', val) - onSubmit?.() + + const encodedQuery = val.replace(/\s+/g, '+') + + navigate(`/search?q=${encodedQuery}`) } const showModal = (e: React.MouseEvent, trending: TrendingType) => { diff --git a/src/components/App/SideBar/__tests__/index.tsx b/src/components/App/SideBar/__tests__/index.tsx index ea96f1912..a4ba3b318 100644 --- a/src/components/App/SideBar/__tests__/index.tsx +++ b/src/components/App/SideBar/__tests__/index.tsx @@ -4,10 +4,11 @@ import '@testing-library/jest-dom' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import React from 'react' import { ThemeProvider as StyleThemeProvider } from 'styled-components' +import { MemoryRouter } from 'react-router-dom' import { SideBar } from '..' import { api } from '../../../../network/api' import { AppStore, useAppStore } from '../../../../stores/useAppStore' -import { DataStore, useDataStore, useFilteredNodes, useSelectedNode } from '../../../../stores/useDataStore' +import { DataStore, useDataStore, useFilteredNodes } from '../../../../stores/useDataStore' import { colors } from '../../../../utils' import * as utils from '../../../../utils/relayHelper' import { appTheme } from '../../Providers' @@ -62,7 +63,6 @@ jest.mock('~/stores/useAppStore', () => ({ })), })) -const useSelectedNodeMock = useSelectedNode as jest.MockedFunction const useFilteredNodesMock = useFilteredNodes as jest.MockedFunction const useDataStoreMock = useDataStore as jest.MockedFunction const useAppStoreMock = useAppStore as jest.MockedFunction @@ -85,7 +85,6 @@ const mockNode = { describe('Test SideBar', () => { beforeEach(() => { jest.clearAllMocks() - useSelectedNodeMock.mockReturnValue([]) useFilteredNodesMock.mockReturnValue([mockNode]) }) @@ -93,11 +92,13 @@ describe('Test SideBar', () => { useAppStoreMock.mockReturnValue({ setCurrentPlayingAudio: jest.fn(), sidebarIsOpen: false }) const { container } = render( - - - - - , + + + + + + + , ) expect(container.querySelector('#sidebar-wrapper')).not.toBeInTheDocument() @@ -107,11 +108,13 @@ describe('Test SideBar', () => { useAppStoreMock.mockReturnValue({ setCurrentPlayingAudio: jest.fn(), sidebarIsOpen: true }) const { container } = render( - - - - - , + + + + + + + , ) expect(container.querySelector('#sidebar-wrapper')).toBeInTheDocument() @@ -127,11 +130,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) const searchInput = screen.getByPlaceholderText('Search') as HTMLInputElement @@ -160,11 +165,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) const clearIcon = screen.getByTestId('clear-icon') @@ -183,11 +190,13 @@ describe('Test SideBar', () => { useAppStoreMock.mockReturnValue({ setCurrentPlayingAudio: jest.fn(), currentSearch: '', sidebarIsOpen: true }) render( - - - - - , + + + + + + + , ) const searchIcon = screen.getByTestId('search-icon') @@ -199,11 +208,13 @@ describe('Test SideBar', () => { useAppStoreMock.mockReturnValue({ setCurrentPlayingAudio: jest.fn(), currentSearch: '', sidebarIsOpen: true }) render( - - - - - , + + + + + + + , ) expect(screen.getByTestId('trending-component')).toBeInTheDocument() @@ -218,11 +229,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) const ClipLoader = screen.getByTestId('loader') @@ -240,11 +253,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) // confirms that LatestView is rendered @@ -271,11 +286,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) const searchInput = screen.getByPlaceholderText('Search') as HTMLInputElement @@ -310,11 +327,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) const searchInput = screen.getByPlaceholderText('Search') as HTMLInputElement @@ -345,11 +364,13 @@ describe('Test SideBar', () => { }) render( - - - - - , + + + + + + + , ) ;(async () => { await waitFor(() => { diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx index d189e121a..f5ffff1e4 100644 --- a/src/components/App/SideBar/index.tsx +++ b/src/components/App/SideBar/index.tsx @@ -26,20 +26,16 @@ import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton' import { SideBarSubView } from './SidebarSubView' import { Tab } from './Tab' import { Trending } from './Trending' +import { useNavigate } from 'react-router-dom' export const MENU_WIDTH = 390 -type Props = { - onSubmit?: () => void -} - type ContentProp = { subViewOpen: boolean - onSubmit?: () => void } // eslint-disable-next-line react/display-name -const Content = forwardRef(({ onSubmit, subViewOpen }, ref) => { +const Content = forwardRef(({ subViewOpen }, ref) => { const { isFetching: isLoading, setSidebarFilter, setFilters } = useDataStore((s) => s) const setSelectedNode = useUpdateSelectedNode() @@ -110,6 +106,8 @@ const Content = forwardRef(({ onSubmit, subViewOpen // onSubmit?.() } + const navigate = useNavigate() + return ( @@ -117,7 +115,7 @@ const Content = forwardRef(({ onSubmit, subViewOpen - + { @@ -126,6 +124,7 @@ const Content = forwardRef(({ onSubmit, subViewOpen clearSearch() setSidebarFilter('all') setSelectedNode(null) + navigate(`/`) return } @@ -134,7 +133,9 @@ const Content = forwardRef(({ onSubmit, subViewOpen return } - onSubmit?.() + const encodedQuery = typing.replace(/\s+/g, '+') + + navigate(`/search?q=${encodedQuery}`) }} > {!isLoading ? ( @@ -189,7 +190,7 @@ const Content = forwardRef(({ onSubmit, subViewOpen {!searchTerm && trendingTopicsFeatureFlag && ( - + )} {isLoading ? : } @@ -200,7 +201,7 @@ const Content = forwardRef(({ onSubmit, subViewOpen const hideSubViewFor = ['topic', 'person', 'guest', 'event', 'organization', 'place', 'project', 'software'] -export const SideBar = ({ onSubmit }: Props) => { +export const SideBar = () => { const { sidebarIsOpen } = useAppStore((s) => s) const selectedNode = useSelectedNode() @@ -211,7 +212,7 @@ export const SideBar = ({ onSubmit }: Props) => { return ( <> - + {!sidebarIsOpen && } diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index abf852632..ef9781f11 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -27,6 +27,7 @@ import { DeviceCompatibilityNotice } from './DeviceCompatibilityNotification' import { Helper } from './Helper' import { SecondarySideBar } from './SecondarySidebar' import { Toasts } from './Toasts' +import { useSearchParams } from 'react-router-dom' const Wrapper = styled(Flex)` height: 100%; @@ -48,6 +49,8 @@ const LazyUniverse = lazy(() => import('~/components/Universe').then(({ Universe const LazySideBar = lazy(() => import('./SideBar').then(({ SideBar }) => ({ default: SideBar }))) export const App = () => { + const [searchParams] = useSearchParams() + const query = searchParams.get('q') const [setBudget, setNodeCount] = useUserStore((s) => [s.setBudget, s.setNodeCount]) const { @@ -70,14 +73,27 @@ export const App = () => { const form = useForm<{ search: string }>({ mode: 'onChange' }) - const handleSubmit = form.handleSubmit(({ search }) => { + const { setValue } = form + + useEffect(() => { + setValue('search', query ?? '') + setTranscriptOpen(false) setSelectedNode(null) setRelevanceSelected(false) - setCurrentSearch(search) + setCurrentSearch(query ?? '') setTeachMeAnswer('') setCategoryFilter(null) - }) + }, [ + query, + setCategoryFilter, + setCurrentSearch, + setRelevanceSelected, + setSelectedNode, + setTeachMeAnswer, + setTranscriptOpen, + setValue, + ]) const runSearch = useCallback(async () => { await fetchData(setBudget, setAbortRequests) @@ -143,7 +159,7 @@ export const App = () => { - + {false && } diff --git a/src/components/AppContainer/index.tsx b/src/components/AppContainer/index.tsx index 177bb0196..a9678ab2d 100644 --- a/src/components/AppContainer/index.tsx +++ b/src/components/AppContainer/index.tsx @@ -1,4 +1,5 @@ import { lazy, Suspense } from 'react' +import { Route, Routes } from 'react-router-dom' import { E2ETests } from '~/utils' import { AppProviders } from '../App/Providers' import { AuthGuard } from '../Auth' @@ -11,7 +12,13 @@ export const AppContainer = () => { return ( Loading...
}> - {App} + + + + + + + diff --git a/src/components/SearchBar/__tests__/index.tsx b/src/components/SearchBar/__tests__/index.tsx index f39d79aa2..dfe277915 100644 --- a/src/components/SearchBar/__tests__/index.tsx +++ b/src/components/SearchBar/__tests__/index.tsx @@ -1,14 +1,20 @@ -import { fireEvent, render, screen } from '@testing-library/react' +/* eslint-disable padding-line-between-statements */ +import { fireEvent, render, screen, waitFor } from '@testing-library/react' import * as React from 'react' import { FormProvider, useForm } from 'react-hook-form' import { SearchBar } from '../index' +import { MemoryRouter } from 'react-router-dom' describe('SearchBar', () => { it('should render with placeholder text', () => { const Wrapper = ({ children }: { children: React.ReactNode }) => { const methods = useForm() - return {children} + return ( + + {children} + + ) } render(, { wrapper: Wrapper }) @@ -22,7 +28,11 @@ describe('SearchBar', () => { const Wrapper = ({ children }: { children: React.ReactNode }) => { const methods = useForm() - return {children} + return ( + + {children} + + ) } render(, { wrapper: Wrapper }) @@ -51,17 +61,24 @@ describe('SearchBar', () => { const Wrapper = ({ children }: { children: React.ReactNode }) => { const methods = useForm() - return {children} + return ( + + {children} + + ) } - render(, { wrapper: Wrapper }) + render(, { wrapper: Wrapper }) const searchInput = screen.getByPlaceholderText('Search') as HTMLInputElement fireEvent.change(searchInput, { target: { value: 'search query' } }) fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }) - - expect(handleSearch).toHaveBeenCalledWith() + ;(async () => { + await waitFor(() => { + expect(handleSearch).toHaveBeenCalledWith() + }) + })() }) }) diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx index 2a492a342..3ab29acac 100644 --- a/src/components/SearchBar/index.tsx +++ b/src/components/SearchBar/index.tsx @@ -2,10 +2,10 @@ import React from 'react' import { useFormContext } from 'react-hook-form' import styled, { css } from 'styled-components' import { colors } from '~/utils/colors' +import { useNavigate } from 'react-router-dom' type Props = { loading?: boolean - onSubmit?: () => void } const Input = styled.input.attrs(() => ({ @@ -58,10 +58,11 @@ const Input = styled.input.attrs(() => ({ `} ` -export const SearchBar = ({ loading, onSubmit }: Props) => { +export const SearchBar = ({ loading }: Props) => { const { register, watch } = useFormContext() const typing = watch('search') + const navigate = useNavigate() return ( { return } - onSubmit?.() + const encodedQuery = typing.replace(/\s+/g, '+') + + navigate(`/search?q=${encodedQuery}`) } }} placeholder="Search" diff --git a/src/index.tsx b/src/index.tsx index db0d4b5a4..040854d47 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import reportWebVitals from './reportWebVitals' +import { BrowserRouter } from 'react-router-dom' import { AppContainer } from './components/AppContainer' import { isE2E } from './constants' @@ -11,10 +12,14 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( isE2E ? ( - + + + ) : ( - + + + ), ) diff --git a/yarn.lock b/yarn.lock index c342092f8..3a1dea9aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3630,6 +3630,13 @@ __metadata: languageName: node linkType: hard +"@remix-run/router@npm:1.16.1": + version: 1.16.1 + resolution: "@remix-run/router@npm:1.16.1" + checksum: 69068815832b30d2a5c063ac1c75365c45cf5b484dab65e1b3129fdbb3c2a7b866401733f766e550dbca1eaf0b84bc772a9c55310f4dd21eb53e62eb1b4625d0 + languageName: node + linkType: hard + "@rollup/plugin-inject@npm:^5.0.1, @rollup/plugin-inject@npm:^5.0.3": version: 5.0.5 resolution: "@rollup/plugin-inject@npm:5.0.5" @@ -13282,6 +13289,30 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:6.23.1": + version: 6.23.1 + resolution: "react-router-dom@npm:6.23.1" + dependencies: + "@remix-run/router": 1.16.1 + react-router: 6.23.1 + peerDependencies: + react: ">=16.8" + react-dom: ">=16.8" + checksum: e87b5cf85019496f499286d466a4ad9cf5efe729f1420502fc5d16093d525462803253538418ea5b0da7ab5671a16caefee67848b373008e567629c2d667dc44 + languageName: node + linkType: hard + +"react-router@npm:6.23.1": + version: 6.23.1 + resolution: "react-router@npm:6.23.1" + dependencies: + "@remix-run/router": 1.16.1 + peerDependencies: + react: ">=16.8" + checksum: d5d43ccb908a95d2b7345f2a13315c38bf094e25bcf97d5a6c3f353b1ea88602de15726c3570cd7f07c53b19a3519af2b6739bf6929ec355012795611d739cff + languageName: node + linkType: hard + "react-smooth@npm:^2.0.5": version: 2.0.5 resolution: "react-smooth@npm:2.0.5" @@ -14434,6 +14465,7 @@ __metadata: react-lottie: ^1.2.3 react-markdown: ^9.0.1 react-player: ^2.11.2 + react-router-dom: 6.23.1 react-spinners: ^0.13.3 react-toastify: ^10.0.4 reactflow: ^11.9.2 From 73982c12e061899027a4e595337b8da22133f847 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Fri, 12 Jul 2024 19:51:06 +0300 Subject: [PATCH 2/2] feat: fix issues --- src/components/SearchBar/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx index 01dd3b06d..0e61ff5fd 100644 --- a/src/components/SearchBar/index.tsx +++ b/src/components/SearchBar/index.tsx @@ -1,7 +1,7 @@ import { useFormContext } from 'react-hook-form' +import { useNavigate } from 'react-router-dom' import styled, { css } from 'styled-components' import { colors } from '~/utils/colors' -import { useNavigate } from 'react-router-dom' type Props = { loading?: boolean @@ -59,8 +59,7 @@ const Input = styled.input.attrs(() => ({ `} ` - -export const SearchBar = ({ loading, onSubmit, placeholder = 'Search' }: Props) => { +export const SearchBar = ({ loading, placeholder = 'Search' }: Props) => { const { register, watch } = useFormContext() const typing = watch('search')