refactor: more use cases with useToggle

src/app/[name]/(Main)/about/AboutPage.tsx

@@ -6,11 +6,12 @@ import TabContainer from '@/components/tab/TabContainer';
 import { TabHeader } from '@/components/tab/TabHeader';
 import Comment from '@/components/utils/Comment';
 import RateBar from '@/components/utils/RateBar';
+import useToggle from '@/hooks/helpers/useToggle';
 import { AboutDataModel } from '@/lib/api/info/getAboutData';
 import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from 'iconsax-react';
 import { useQueryState } from 'next-usequerystate';
 import Image from 'next/image';
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 
 const sortings = [
   'جدیدترین',
@@ -18,12 +19,8 @@ const sortings = [
 ]
 
 function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
-  const [sortingModal, setSortingModal] = useState(false);
   const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
-
-  const toggleSortingModal = useCallback(() => {
-    setSortingModal((state) => !state);
-  }, []);
+  const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle();
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
@@ -31,6 +28,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
   }
 
   const firstTab = () => {
+
     return (
       <section aria-labelledby="about-title" className='py-4'>
         <section

src/app/[name]/(Main)/chat/page.tsx

@@ -35,7 +35,7 @@ function ChatIndex({ }: Props) {
     const [search, setSearch] = useState('');
     const [selectedChats, setSelectedChats] = useState<Array<string>>([]);
     const router = useRouter();
-    const { active: deleteModal, onToggle: onToggleDeleteModal } = useToggle();
+    const { state: deleteModal, toggle: toggleDeleteModal } = useToggle();
 
     const [chatsList, setChatList] = useState<Array<ChatEntryModel>>([
         {
@@ -106,7 +106,7 @@ function ChatIndex({ }: Props) {
         if (deleteModal) {
             setSelectedChats([]);
         }
-        onToggleDeleteModal()
+        toggleDeleteModal()
     };
 
     const deleteSelectedChats = () => {
@@ -153,7 +153,7 @@ function ChatIndex({ }: Props) {
                 <SearchBox placeholder={t('InputSearch.Placeholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
 
                 {selectedChats.length > 0 ?
-                    <span onClick={onToggleDeleteModal} className='bg-container p-2 rounded-xl active:bg-gray-50'>
+                    <span onClick={toggleDeleteModal} className='bg-container p-2 rounded-xl active:bg-gray-50'>
                         <Trash size={24} className='stroke-primary' />
                     </span>
                     :

src/app/[name]/(Main)/page.tsx

@@ -22,6 +22,7 @@ import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRe
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
+import useToggle from "@/hooks/helpers/useToggle";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -148,8 +149,9 @@ const MenuIndex = () => {
     { id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' },
   ]
 
-  const [filterModal, setFilterModal] = useState(false);
-  const [sortingModal, setSortingModal] = useState(false);
+  const { state: filterModal, toggle: toggleFilterModal } = useToggle();
+  const { state: sortingModal, toggle: toggleSortingModal } = useToggle();
+
   const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
   const [search, setSearch] = useQueryState("q", { defaultValue: '' });
   const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' });
@@ -191,14 +193,6 @@ const MenuIndex = () => {
     setSelectedCategory(String(id));
   }, [setSelectedCategory]);
 
-  const toggleFilterModal = useCallback(() => {
-    setFilterModal((state) => !state);
-  }, []);
-
-  const toggleSortingModal = useCallback(() => {
-    setSortingModal((state) => !state);
-  }, []);
-
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
   }