|
|
@@ -4,7 +4,7 @@ import { SORT, SortOrderTypes } from "@/utils/constants";
|
|
|
import { createUrl } from "@/utils/helper";
|
|
|
import { Select, SelectItem } from "@heroui/select";
|
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
|
-import { FC, useState, useEffect } from "react";
|
|
|
+import { FC } from "react";
|
|
|
import {
|
|
|
Drawer,
|
|
|
DrawerContent,
|
|
|
@@ -27,11 +27,7 @@ const SortOrder: FC<{
|
|
|
const sort = searchParams.get(SORT) || "name-asc";
|
|
|
|
|
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
|
|
- const [tempSort, setTempSort] = useState(sort);
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- setTempSort(sort);
|
|
|
- }, [sort]);
|
|
|
|
|
|
const handleSortChange = (value: string) => {
|
|
|
const newParams = new URLSearchParams(searchParams.toString());
|
|
|
@@ -42,10 +38,7 @@ const SortOrder: FC<{
|
|
|
router.replace(newUrl);
|
|
|
};
|
|
|
|
|
|
- const applySort = () => {
|
|
|
- handleSortChange(tempSort);
|
|
|
- onOpenChange();
|
|
|
- };
|
|
|
+
|
|
|
|
|
|
const clearFilters = () => {
|
|
|
const q = searchParams.get("q");
|
|
|
@@ -57,50 +50,9 @@ const SortOrder: FC<{
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
- {/* Desktop View */}
|
|
|
- <section className="hidden md:flex w-64 items-center gap-x-2.5">
|
|
|
- <p
|
|
|
- id="sort-label"
|
|
|
- className="leading-0 text-nowrap min-[1300]:block hidden"
|
|
|
- >
|
|
|
- {title}
|
|
|
- </p>
|
|
|
- <Select
|
|
|
- defaultOpen={false}
|
|
|
- aria-label={title}
|
|
|
- aria-labelledby="sort-label"
|
|
|
- selectedKeys={[sort]}
|
|
|
- isMultiline={false}
|
|
|
- items={sortOrders}
|
|
|
- placeholder="Select a Sort Order"
|
|
|
- classNames={{
|
|
|
- value: "text-neutral-800 dark:text-neutral-200",
|
|
|
- }}
|
|
|
- renderValue={(items) => (
|
|
|
- <div className="flex items-center gap-1.5 overflow-x-auto pb-1.5 pt-1">
|
|
|
- {items.map((item) => (
|
|
|
- <p key={item.key} className="text-neutral-800 dark:text-neutral-200">{item.data?.title}</p>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- size="md"
|
|
|
- variant="flat"
|
|
|
- onSelectionChange={(e) => handleSortChange(e.currentKey as string)}
|
|
|
- >
|
|
|
- {(order) => (
|
|
|
- <SelectItem
|
|
|
- key={order.value}
|
|
|
- textValue={order.value}
|
|
|
- className="text-neutral-800 dark:text-neutral-200"
|
|
|
- >
|
|
|
- {order.title}
|
|
|
- </SelectItem>
|
|
|
- )}
|
|
|
- </Select>
|
|
|
- </section>
|
|
|
-
|
|
|
+
|
|
|
{/* Mobile View Toggle */}
|
|
|
- <div className="md:hidden flex flex-wrap gap-3">
|
|
|
+ <div className="flex flex-wrap gap-3">
|
|
|
<Button
|
|
|
size="md"
|
|
|
variant="flat"
|
|
|
@@ -135,15 +87,7 @@ const SortOrder: FC<{
|
|
|
Clear all filters
|
|
|
</button>
|
|
|
)}
|
|
|
- <Button
|
|
|
- color="primary"
|
|
|
- radius="full"
|
|
|
- size="md"
|
|
|
- className="px-6 font-semibold"
|
|
|
- onPress={applySort}
|
|
|
- >
|
|
|
- Apply Filter
|
|
|
- </Button>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</DrawerHeader>
|
|
|
@@ -154,7 +98,7 @@ const SortOrder: FC<{
|
|
|
</p>
|
|
|
<Select
|
|
|
aria-label="Sort options"
|
|
|
- selectedKeys={[tempSort]}
|
|
|
+ selectedKeys={[sort]}
|
|
|
className="w-full"
|
|
|
variant="flat"
|
|
|
size="lg"
|
|
|
@@ -162,9 +106,10 @@ const SortOrder: FC<{
|
|
|
value: "text-neutral-800 dark:text-neutral-200",
|
|
|
trigger: "dark:bg-neutral-800",
|
|
|
}}
|
|
|
- onSelectionChange={(e) =>
|
|
|
- setTempSort(e.currentKey as string)
|
|
|
- }
|
|
|
+ onSelectionChange={(e) => {
|
|
|
+ handleSortChange(e.currentKey as string);
|
|
|
+ onOpenChange();
|
|
|
+ }}
|
|
|
>
|
|
|
{sortOrders.map((order) => (
|
|
|
<SelectItem
|