refactor: more use cases with useToggle

2025-08-10 18:29:48 +03:30
parent 389ac492c2
commit 7fca4375fc
45 changed files with 155 additions and 133 deletions
@@ -8,6 +8,7 @@ import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
 import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
 import { Skeleton } from '@/components/ui/skeleton';
+import useToggle from '@/hooks/helpers/useToggle';

 const CustomMap = dynamic(
    () => import('@/components/map/CustomMap'),
@@ -60,8 +61,8 @@ function OrderTrackingPage() {
    const [markers, setMarkers] = useState<MarkerData[]>([]);
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
-    const [bottomSheet1State, setBottomSheet1State] = useState<boolean>(false);
-    const [bottomSheet2State, setBottomSheet2State] = useState<boolean>(false);
+    const { state: confirmModal, toggle: toggleConfirmModal, set: setConfirmModal } = useToggle();
+    const { state: detailsModal, toggle: _toggleDetailsModal, set: setDetailsModal } = useToggle();

    // Example initial position (Tehran)
    const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
@@ -97,8 +98,8 @@ function OrderTrackingPage() {
            setSelectedAddress(null);
            return position;
        });
-        setBottomSheet1State(position && true);
-        setBottomSheet2State(false);
+        setConfirmModal(position && true);
+        setDetailsModal(false);
        // You can handle the selected position here
        console.log('Selected position:', position);
    };
@@ -111,19 +112,16 @@ function OrderTrackingPage() {
        console.log('Map clicked at:', e.latlng);
    };

-    const toggleBottomSheet1 = () => {
-        setBottomSheet1State((prev) => !prev);
-    }

-    const toggleBottomSheet2 = async () => {
+    const toggleDetailsModal = async () => {
        if (!selectedPosition) {
-            setBottomSheet1State(false);
-            setBottomSheet2State(false);
+            setConfirmModal(false);
+            setDetailsModal(false);
            return;
        }
-        setBottomSheet1State(false);
-        setBottomSheet2State((prev) => !prev);
-        if (!bottomSheet2State) {
+        setConfirmModal(false);
+        _toggleDetailsModal();
+        if (!detailsModal) {
            const address = await fetchAddressFromCoordinates(selectedPosition[0], selectedPosition[1]);
            setSelectedAddress(address);
        }
@@ -148,6 +146,32 @@ function OrderTrackingPage() {
        console.log(formData);
    }

+    const getSelectedAddress = () => {
+        if (!selectedAddress) {
+            return "آدرس یافت نشد"
+        }
+        try {
+            return [
+                selectedAddress.address.state ?? selectedAddress.address.province,
+                selectedAddress.address.city,
+                selectedAddress.address.neighbourhood,
+                !selectedAddress.address.road.startsWith('میدان') &&
+                    !selectedAddress.address.road.startsWith('بلوار') &&
+                    !selectedAddress.address.road.startsWith('خیابان') &&
+                    !selectedAddress.address.road.startsWith('کوچه') ?
+                    selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` :
+                        selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` :
+                            selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` :
+                                selectedAddress.address.road : selectedAddress.address.road
+            ].filter(x => x).join('، ')
+        } catch {
+            if (selectedAddress.display_name)
+                return selectedAddress.display_name;
+            else 
+                return "آدرس یافت نشد"
+        }
+    }
+
    return (
        <div className="fixed inset-0 bg-gray-50">

@@ -175,19 +199,19 @@ function OrderTrackingPage() {
                        inDuration={0}
                        blurOpacity={null}
                        noBlur
-                        visible={bottomSheet1State}
+                        visible={confirmModal}
                        showCloseButton={false}
                        showTitle={false}
                        overrideClassName='!pt-6 bg-container!'
                    >
                        <div className='grid grid-cols-2 gap-4 px-4'>
                            <Button
-                                onClick={toggleBottomSheet2}
+                                onClick={toggleDetailsModal}
                            >
                                انتخاب
                            </Button>
                            <Button
-                                onClick={toggleBottomSheet1}
+                                onClick={toggleConfirmModal}
                                className='bg-disabled! text-foreground!'
                            >
                                انصراف
@@ -200,9 +224,9 @@ function OrderTrackingPage() {
                        inDuration={0}
                        blurOpacity={null}
                        noBlur
-                        visible={bottomSheet2State}
+                        visible={detailsModal}
                        title='آدرس'
-                        onClick={toggleBottomSheet2}
+                        onClick={toggleDetailsModal}
                        overrideClassName='bg-container!'
                    >
                        <form onSubmit={submitAddressAction}>
@@ -214,19 +238,7 @@ function OrderTrackingPage() {
                                                className='h-6 w-full'
                                            />
                                            :
-                                            [
-                                                selectedAddress.address.state ?? selectedAddress.address.province,
-                                                selectedAddress.address.city,
-                                                selectedAddress.address.neighbourhood,
-                                                !selectedAddress.address.road.startsWith('میدان') &&
-                                                    !selectedAddress.address.road.startsWith('بلوار') &&
-                                                    !selectedAddress.address.road.startsWith('خیابان') &&
-                                                    !selectedAddress.address.road.startsWith('کوچه') ?
-                                                    selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` :
-                                                        selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` :
-                                                            selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` :
-                                                                selectedAddress.address.road : selectedAddress.address.road
-                                            ].filter(x => x).join('، ')
+                                            getSelectedAddress()
                                        }
                                    </span>
                                    <hr className='border border-border mt-3 mb-10 ' />
@@ -252,7 +264,7 @@ function OrderTrackingPage() {
                                    </Button>
                                    <Button
                                        type='button'
-                                        onClick={toggleBottomSheet2}
+                                        onClick={toggleDetailsModal}
                                        className='bg-disabled! text-foreground!'
                                    >
                                        انصراف