edit address

src/app/[name]/(Profile)/profile/address/new/page.tsx

@@ -10,6 +10,7 @@ import { ConfirmPositionModal } from './components/ConfirmPositionModal';
 import { AddressDetailsModal } from './components/AddressDetailsModal';
 import { useAddressForm } from './hooks/useAddressForm';
 import { fetchAddressFromCoordinates } from './utils/fetchAddress';
+import { useGetAddressById } from '../hooks/useAddressData';
 
 const CustomMap = dynamic(
     () => import('@/components/map/CustomMap'),
@@ -17,15 +18,30 @@ const CustomMap = dynamic(
 );
 
 function OrderTrackingPage() {
+
     const params = useSearchParams();
+    const id = params.get('id');
+    const editMode = !!id;
+
+    const { data: addressResponse, isLoading: isLoadingAddress } = useGetAddressById(id);
+    const address = addressResponse?.data;
     const user = useAuthStore((state) => state.user);
     const [selectedPosition, setSelectedPosition] = useState<[number, number] | null>(null);
     const [selectedAddress, setSelectedAddress] = useState<NominatimReverseGeocodingResponse | null>(null);
     const [markers, setMarkers] = useState<MarkerData[]>([]);
-    const [mapCenter] = useState<[number, number]>([
-        Number(params?.get('lat')) || 35.6892,
-        Number(params?.get('lon')) || 51.3890
-    ]);
+    const [initialPositionSet, setInitialPositionSet] = useState(false);
+
+    const getInitialMapCenter = (): [number, number] => {
+        if (editMode && address) {
+            return [address.latitude, address.longitude];
+        }
+        return [
+            Number(params?.get('lat')) || 35.6892,
+            Number(params?.get('lon')) || 51.3890
+        ];
+    };
+
+    const [mapCenter, setMapCenter] = useState<[number, number]>(getInitialMapCenter());
     const { state: confirmModal, toggle: toggleConfirmModal, set: setConfirmModal } = useToggle();
     const { state: detailsModal, toggle: _toggleDetailsModal, set: setDetailsModal } = useToggle();
 
@@ -33,8 +49,26 @@ function OrderTrackingPage() {
         selectedPosition,
         selectedAddress,
         initialPhone: user?.number || '',
+        editMode,
+        addressData: address || null,
     });
 
+    useEffect(() => {
+        if (editMode && address && !initialPositionSet) {
+            const position: [number, number] = [address.latitude, address.longitude];
+            setMapCenter(position);
+            setSelectedPosition(position);
+            setInitialPositionSet(true);
+
+            fetchAddressFromCoordinates(address.latitude, address.longitude).then((addr) => {
+                if (addr) {
+                    setSelectedAddress(addr);
+                    setDetailsModal(true);
+                }
+            });
+        }
+    }, [editMode, address, initialPositionSet, setDetailsModal]);
+
     useEffect(() => {
         const initializeMarkers = async () => {
             const L = (await import('leaflet')).default;
@@ -65,14 +99,16 @@ function OrderTrackingPage() {
 
     const handlePositionSelect = (position: [number, number]) => {
         setSelectedPosition((prev) => {
-            if (prev === position) {
+            if (prev && prev[0] === position[0] && prev[1] === position[1]) {
                 return prev;
             }
             setSelectedAddress(null);
             return position;
         });
+        if (editMode && detailsModal) {
+            setDetailsModal(false);
+        }
         setConfirmModal(position && true);
-        setDetailsModal(false);
     };
 
     const handleZoomChange = (zoom: number) => {
@@ -100,6 +136,20 @@ function OrderTrackingPage() {
         }
     };
 
+    const handleChangePosition = () => {
+        setDetailsModal(false);
+        setSelectedPosition(null);
+        setSelectedAddress(null);
+    };
+
+    if (editMode && isLoadingAddress) {
+        return (
+            <div className="fixed inset-0 bg-gray-50 flex items-center justify-center">
+                <p className="text-sm2 text-disabled-text">در حال بارگذاری...</p>
+            </div>
+        );
+    }
+
     return (
         <div className="fixed inset-0 bg-gray-50">
             <div className="absolute inset-0">
@@ -126,7 +176,9 @@ function OrderTrackingPage() {
                         selectedAddress={selectedAddress}
                         formData={formData}
                         isPending={isPending}
+                        editMode={editMode}
                         onClose={toggleDetailsModal}
+                        onChangePosition={handleChangePosition}
                         onFormDataChange={handleFormDataChange}
                         onSubmit={submitAddress}
                     />