4
0
forked from crowetic/commerce

Compare commits

...

4 Commits

Author SHA1 Message Date
Zack Tanner
f29a16de5c add layout keying 2024-08-01 10:24:50 -07:00
Zack Tanner
6bfd0b1bd9 remove full prefetch on search page 2024-08-01 10:14:47 -07:00
Janka Uryga
6e85b80158 update next to https://github.com/vercel/next.js/pull/68340/ 2024-07-31 16:57:21 +02:00
Lee Robinson
8c5f8d8d2a next/form 2024-07-30 17:19:38 -05:00
6 changed files with 669 additions and 983 deletions

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>;
}

View File

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

View File

@ -37,7 +37,7 @@ export async function Navbar() {
<li key={item.title}> <li key={item.title}>
<Link <Link
href={item.path} href={item.path}
prefetch={true} prefetch={item.path === '/search' ? undefined : true}
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300" className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
> >
{item.title} {item.title}

View File

@ -1,35 +1,18 @@
'use client'; 'use client';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { createUrl } from 'lib/utils'; import Form from 'next/form';
import { useRouter, useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
export default function Search() { export default function Search() {
const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const val = e.target as HTMLFormElement;
const search = val.search as HTMLInputElement;
const newParams = new URLSearchParams(searchParams.toString());
if (search.value) {
newParams.set('q', search.value);
} else {
newParams.delete('q');
}
router.push(createUrl('/search', newParams));
}
return ( return (
<form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full"> <Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
<input <input
key={searchParams?.get('q')} key={searchParams?.get('q')}
type="text" type="text"
name="search" name="q"
placeholder="Search for products..." placeholder="Search for products..."
autoComplete="off" autoComplete="off"
defaultValue={searchParams?.get('q') || ''} defaultValue={searchParams?.get('q') || ''}
@ -38,7 +21,7 @@ export default function Search() {
<div className="absolute right-0 top-0 mr-3 flex h-full items-center"> <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" /> <MagnifyingGlassIcon className="h-4" />
</div> </div>
</form> </Form>
); );
} }

View File

@ -17,9 +17,9 @@
"@heroicons/react": "^2.1.5", "@heroicons/react": "^2.1.5",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"geist": "^1.3.1", "geist": "^1.3.1",
"next": "14.2.5", "next": "https://vercel-packages.vercel.app/next/prs/68340/next",
"react": "18.3.1", "react": "19.0.0-rc-3208e73e-20240730",
"react-dom": "18.3.1", "react-dom": "19.0.0-rc-3208e73e-20240730",
"sonner": "^1.5.0" "sonner": "^1.5.0"
}, },
"devDependencies": { "devDependencies": {

1604
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff