feat(search): use new Orama components #8175
Conversation
Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>
Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>
Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>
Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>
Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Aileen Villanueva Lecuona <[email protected]>
Thanks @avivkeller. So I've updated the HTML element targeted as search-results wrapper (I've targeted the wrong one before by mistake). I tried to run the playwright tests locally, and they're passing. |
github-actions
bot
removed
the
github_actions:pull-request
|
Can you update https://github.com/nodejs/nodejs.org/blob/main/.github/workflows/sync-orama.yml to use the new API keys? See https://github.com/nodejs/nodejs.org/actions/runs/18316807448/job/52159169199?pr=8175 |
| setIsMobileScreen(window.innerWidth < 1024); | ||
| }; | ||
| checkScreenSize(); | ||
| window.addEventListener('resize', checkScreenSize); |
There was a problem hiding this comment.
Shouldn't these be passive listeners?
| setOpen(!open); | ||
| }; | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
@canerakdas is there any Radix component we could use for handling these? Maybe Dialog? https://www.radix-ui.com/primitives/docs/components/dialog
I'd like to avoid wiring manual useEffects and hardcoding these.
| {!isMobileScreen && mode === 'chat' && ( | ||
| <SlidingChatPanel | ||
| open={isChatOpen} | ||
| onClose={() => { |
There was a problem hiding this comment.
Feels like we should use React Reducers to manage the lifecycle of the SearchBox and Dialog IMO, could we do that?
| } | ||
| }; | ||
|
|
||
| const handleChatOpened = (): void => { |
There was a problem hiding this comment.
All of these feel like lifecycle hooks that could be done either via Hooks or Reducers.
| const displaySearch = | ||
| !isMobileScreen || (isMobileScreen && mode === 'search'); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
Could you please use this? https://github.com/nodejs/nodejs.org/blob/main/apps/site/hooks/react-client/useMediaQuery.ts using resize effects is inefficient.
| }; | ||
| }, []); | ||
|
|
||
| const handleSelectMode = (newMode: 'search' | 'chat') => { |
| import { Search } from './Search'; | ||
| import { SlidingChatPanel } from './SlidingChatPanel'; | ||
|
|
||
| const orama = |
There was a problem hiding this comment.
I feel orama should be instantiated somewhere else and not inside a component. It should probably be provided by a React Provider so that you wrap the search box with <OramaProvider> and then use const orama = useOrama()
| @@ -0,0 +1,11 @@ | |||
| export const uppercaseFirst = (word: string) => | |||
| > | ||
| <DocumentTextIcon /> | ||
| <div> | ||
| {typeof hit.document?.pageSectionTitle === |
There was a problem hiding this comment.
Can you extract this to a proper function? Too much complexity in a single component.
| } = useSearch(); | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const clearAll = useCallback(() => { |
| dispatch({ type: 'SET_RESULTS', payload: { results: [] } }); | ||
| }, [dispatch]); | ||
|
|
||
| useEffect(() => { |
| }; | ||
| }, [clearAll]); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
I'm strongly against using querySelectors within React, it breaks the nature of React.
There was a problem hiding this comment.
This component is just too big, please break it down into smaller parts 🙇
|
|
||
| const oramaLogo = `https://website-assets.oramasearch.com/orama-when-${resolvedTheme}.svg`; | ||
|
|
||
| const clearAll = useCallback(() => { |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Searching on this branch is broken?
There are a few things here and there I believe need to be addressed. Some components are too big, some have way too many Effects that can become React Reducers for Lifecycle management.
I genuinely appreciate the effort done here ❤️ and 100% value the effort and time Orama team is spending on this PR 🙇
This PR supersedes #7971 and integrates the new Orama components, powered by the new OramaCore backend.
Description
New components - React-based to replace the old WebComponents-based ones. New backend (OramaCore instead of old Orama Cloud), all hosted and maintained on https://app.orama.com. Credentials have been shared privately with the repository maintainers on Slack.
Validation
Tested locally and on remote demo environment.
Related Issues
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.