danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

add: url state for menu list

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-14 22:52:38 +03:30
parent d0e26239d7
commit 9874d9cfe4
3 changed files with 37 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+22 -3
View File
@@ -23,6 +23,7 @@
"iconsax-react": "^0.0.8",
"lucide-react": "^0.525.0",
"next": "15.3.4",
"next-usequerystate": "^1.20.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^3.3.1",
@@ -1925,7 +1926,7 @@
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
"devOptional": true,
"dev": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
@@ -1935,7 +1936,7 @@
"version": "19.1.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
"devOptional": true,
"dev": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.0.0"
@@ -3086,7 +3087,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"devOptional": true,
"dev": true,
"license": "MIT"
},
"node_modules/damerau-levenshtein": {
@@ -5401,6 +5402,12 @@
"node": ">= 18"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
"license": "MIT"
},
"node_modules/mkdirp": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
@@ -5534,6 +5541,18 @@
}
}
},
"node_modules/next-usequerystate": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/next-usequerystate/-/next-usequerystate-1.20.0.tgz",
"integrity": "sha512-0uXOYkOHXiTwrnBwZ3E6pT2l1HWoqgCxjcJE58TRSbhYjNnpQ9MxzgwoU7z6akQuQodWQffTh+HNLZRwoh1ujQ==",
"license": "MIT",
"dependencies": {
"mitt": "^3.0.1"
},
"peerDependencies": {
"next": ">=13.4 <14.0.2 || ^14.0.3"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
package.json
+1
View File
@@ -24,6 +24,7 @@
"iconsax-react": "^0.0.8",
"lucide-react": "^0.525.0",
"next": "15.3.4",
"next-usequerystate": "^1.20.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^3.3.1",
src/app/[name]/page.tsx
+14 -11
View File
@@ -18,6 +18,7 @@ import { DropdownOption } from "@/components/combobox/Combobox";
import { Switch } from "@/components/ui/switch";
import { TicketPercentIcon } from "lucide-react";
import { MedalStar } from 'iconsax-react'
import { useQueryState } from 'next-usequerystate'
const categories = new Array(13).fill({ title: "خوراک", icon: "" });
@@ -141,20 +142,22 @@ const shippings: Array<DropdownOption> = [
const MenuIndex = () => {
const [search, setSearch] = useState("");
const [selectedCategory, setSelectedCategory] = useState(0);
const [filterModal, setFilterModal] = useState(false);
const [sortingModal, setSortingModal] = useState(false);
const [, setSorting] = useState(0);
const [selectedContentId, setSelectedContentId] = useState('0');
const [selectedShippingId, setSelectedShippingId] = useState('0');
const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
const [search, setSearch] = useQueryState("q", { defaultValue: '' });
const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' });
const [selectedContentId, setSelectedContentId] = useQueryState('contentType', { defaultValue: '0' });
const [selectedShippingId, setSelectedShippingId] = useQueryState('shippingType', { defaultValue: '0' });
const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const updateCategory = useCallback((id: number) => {
setSelectedCategory(id);
setSelectedCategory(String(id));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const toggleFilterModal = useCallback(() => {
@@ -166,7 +169,7 @@ const MenuIndex = () => {
}, []);
const changeSorting = (index: number) => {
setSorting(() => index);
setSorting(() => String(index));
}
const changeSelectedContent = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
@@ -181,7 +184,7 @@ const MenuIndex = () => {
const lowerSearch = search.toLowerCase();
return foods.filter(
(item) =>
item.category === selectedCategory &&
item.category === +selectedCategory &&
item.name.toLowerCase().includes(lowerSearch)
);
}, [selectedCategory, search]);
@@ -194,7 +197,7 @@ const MenuIndex = () => {
{categories.map((item, index) => (
<CategoryItemRenderer
key={index}
className={`${index === selectedCategory ? "bg-white!" : ""}`}
className={`${index === +selectedCategory ? "bg-white!" : ""}`}
onClick={() => updateCategory(index)}
>
<Image
@@ -212,7 +215,7 @@ const MenuIndex = () => {
<section className="w-full">
<div className="flex justify-between items-center">
<span className="text-base font-medium">
{categories[selectedCategory]?.title}
{categories[+selectedCategory]?.title}
</span>
<div className="inline-flex gap-2 justify-around items-center">
<button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
@@ -266,7 +269,7 @@ const MenuIndex = () => {
<Switch />
</div>
</div>
<hr className="text-white/40 mt-12" />
<hr className="text-white/40 mt-12" />
<div className="px-9 pt-6 flex justify-between gap-[22px]">
<div className="w-full">
<Button>اعمال فیلتر</Button>