fix(404): add button for searches #869
Conversation
1. duplicate infobar to not found layout 2. export styles from infobar so it's kept in sync 3. add client component for search button
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
packages/components/src/templates/next/layouts/NotFound/SearchButton.tsx
Outdated
Show resolved
Hide resolved
| it("should preserve `=` in the original permalink", () => { | ||
| // Arrange | ||
| const singleLevelPermalink = "/this-._single=level|" | ||
| const expected = "this+single+level" | ||
|
|
||
| // Act | ||
| const actual = getWordsFromPermalink(singleLevelPermalink) | ||
|
|
||
| // Assert | ||
| expect(actual).toBe(expected) | ||
| }) |
There was a problem hiding this comment.
unsure if i understand the test description correctly but = isn't preserve but converted?
There was a problem hiding this comment.
this is my bad, i was flipflopping on whether we should keep this due to query params but i decided teh = wasn't going to impact the search results much - i'll just remove this test and add a = character ot the other permalinks
| }: NotFoundSearchButtonProps) => { | ||
| const [permalink, setPermalink] = useState("") | ||
|
|
||
| useLayoutEffect(() => { |
There was a problem hiding this comment.
why do we need useLayoutEffect here? iirc, the use of this hook is discouraged in favour of useEffect
| const [permalink, setPermalink] = useState("") | ||
|
|
||
| useLayoutEffect(() => { | ||
| // The check for typeof window and navigator ensures this only runs in browser environments, not during server-side rendering |
There was a problem hiding this comment.
this will never be server-side rendered due to "use client" declarative at top
There was a problem hiding this comment.
it's not server-side rendered but nextjs will transpile then serve the js at runtime. this led to compile errors as window is undefined when transpiling
| @@ -0,0 +1,15 @@ | |||
| export const getWordsFromPermalink = (permalink: string): string => { | |||
There was a problem hiding this comment.
checking understanding:
so https://example.com/some-page_name+ will yield some+page+name right
Problem
on the 404 page, users are not able to take action to self-resolve the issue
Solution