cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

add layout keying

Browse Source
This commit is contained in:
Zack Tanner 2024-08-01 10:24:50 -07:00
parent 6bfd0b1bd9
commit f29a16de5c
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/search/children-wrapper.tsx Normal file
View File

@ -0,0 +1,8 @@
'use client';
import { useSearchParams } from 'next/navigation';
import { Fragment } from 'react';
export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
const searchParams = useSearchParams();
return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
}

5
app/search/layout.tsx
View File

@ -2,6 +2,7 @@ import Footer from 'components/layout/footer';
import Collections from 'components/layout/search/collections';
import FilterList from 'components/layout/search/filter';
import { sorting } from 'lib/constants';
import ChildrenWrapper from './children-wrapper';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
@ -10,7 +11,9 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
<div className="order-first w-full flex-none md:max-w-[125px]">
<Collections />
</div>
<div className="order-last min-h-screen w-full md:order-none">{children}</div>
<div className="order-last min-h-screen w-full md:order-none">
<ChildrenWrapper>{children}</ChildrenWrapper>
</div>
<div className="order-none flex-none md:order-last md:w-[125px]">
<FilterList list={sorting} title="Sort by" />
</div>