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

Removes unnecessary useEffect's on search sorts (#1124)

Browse Source
This commit is contained in:
Kai Hao 2023-07-29 00:19:13 +08:00 committed by GitHub
parent 61b134a66c
commit 049d903a5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/layout/search/filter/item.tsx
View File

@ -5,22 +5,17 @@ import { SortFilterItem } from 'lib/constants';
import { createUrl } from 'lib/utils'; import { createUrl } from 'lib/utils';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation'; import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import type { ListItem, PathFilterItem } from '.'; import type { ListItem, PathFilterItem } from '.';
function PathFilterItem({ item }: { item: PathFilterItem }) { function PathFilterItem({ item }: { item: PathFilterItem }) {
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [active, setActive] = useState(pathname === item.path); const active = pathname === item.path;
const newParams = new URLSearchParams(searchParams.toString()); const newParams = new URLSearchParams(searchParams.toString());
const DynamicTag = active ? 'p' : Link; const DynamicTag = active ? 'p' : Link;
newParams.delete('q'); newParams.delete('q');
useEffect(() => {
setActive(pathname === item.path);
}, [pathname, item.path]);
return ( return (
<li className="mt-2 flex text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-black dark:text-white" key={item.title}>
<DynamicTag <DynamicTag
@ -41,7 +36,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
function SortFilterItem({ item }: { item: SortFilterItem }) { function SortFilterItem({ item }: { item: SortFilterItem }) {
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [active, setActive] = useState(searchParams.get('sort') === item.slug); const active = searchParams.get('sort') === item.slug;
const q = searchParams.get('q'); const q = searchParams.get('q');
const href = createUrl( const href = createUrl(
pathname, pathname,
@ -52,10 +47,6 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
); );
const DynamicTag = active ? 'p' : Link; const DynamicTag = active ? 'p' : Link;
useEffect(() => {
setActive(searchParams.get('sort') === item.slug);
}, [searchParams, item.slug]);
return ( return (
<li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
<DynamicTag <DynamicTag