test commit

client/src/pages/me/ui/sections/AddressesPage.tsx

@@ -3,17 +3,10 @@ import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Chip from '@mui/material/Chip'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogTitle from '@mui/material/DialogTitle'
-import FormControlLabel from '@mui/material/FormControlLabel'
 import Stack from '@mui/material/Stack'
-import Switch from '@mui/material/Switch'
-import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Controller, useForm } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import {
   createMyAddress,
   deleteMyAddress,
@@ -22,7 +15,18 @@ import {
   updateMyAddress,
 } from '@/entities/user/api/address-api'
 import type { ShippingAddress } from '@/entities/user/model/types'
-import { AddressMapPicker } from '@/features/address-map-picker'
+import { AddressFormDialog, type AddressFormValues } from '@/features/address-form'
+
+const defaultAddressForm = (isDefault: boolean): AddressFormValues => ({
+  label: '',
+  recipientName: '',
+  recipientPhone: '',
+  addressLine: '',
+  comment: '',
+  lat: null,
+  lng: null,
+  isDefault,
+})
 
 export function AddressesPage() {
   const queryClient = useQueryClient()
@@ -34,26 +38,8 @@ export function AddressesPage() {
     queryFn: fetchMyAddresses,
   })
 
-  const form = useForm<{
-    label: string
-    recipientName: string
-    recipientPhone: string
-    addressLine: string
-    comment: string
-    lat: number | null
-    lng: number | null
-    isDefault: boolean
-  }>({
-    defaultValues: {
-      label: '',
-      recipientName: '',
-      recipientPhone: '',
-      addressLine: '',
-      comment: '',
-      lat: null,
-      lng: null,
-      isDefault: false,
-    },
+  const form = useForm<AddressFormValues>({
+    defaultValues: defaultAddressForm(false),
     mode: 'onChange',
   })
 
@@ -115,16 +101,7 @@ export function AddressesPage() {
 
   const openCreate = () => {
     setEditing(null)
-    form.reset({
-      label: '',
-      recipientName: '',
-      recipientPhone: '',
-      addressLine: '',
-      comment: '',
-      lat: null,
-      lng: null,
-      isDefault: items.length === 0,
-    })
+    form.reset(defaultAddressForm(items.length === 0))
     setOpen(true)
   }
 
@@ -143,6 +120,11 @@ export function AddressesPage() {
     setOpen(true)
   }
 
+  const handleSubmit = () => {
+    if (editing) updateMut.mutate()
+    else createMut.mutate()
+  }
+
   return (
     <Box>
       <Typography variant="h4" gutterBottom>
@@ -226,93 +208,14 @@ export function AddressesPage() {
         )}
       </Stack>
 
-      <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth="md">
-        <DialogTitle>{editing ? 'Редактировать адрес' : 'Новый адрес'}</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2} sx={{ mt: 1 }}>
-            <Controller
-              control={form.control}
-              name="label"
-              render={({ field }) => <TextField label="Метка (например: Дом/Работа)" fullWidth {...field} />}
-            />
-            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-              <Controller
-                control={form.control}
-                name="recipientName"
-                render={({ field }) => <TextField label="ФИО получателя" fullWidth required {...field} />}
-              />
-              <Controller
-                control={form.control}
-                name="recipientPhone"
-                render={({ field }) => <TextField label="Телефон получателя" fullWidth required {...field} />}
-              />
-            </Stack>
-
-            <Controller
-              control={form.control}
-              name="addressLine"
-              render={({ field }) => <TextField label="Адрес" fullWidth required {...field} />}
-            />
-            <Controller
-              control={form.control}
-              name="comment"
-              render={({ field }) => <TextField label="Комментарий (необязательно)" fullWidth {...field} />}
-            />
-
-            <Controller
-              control={form.control}
-              name="lat"
-              render={({ field: latField }) => (
-                <Controller
-                  control={form.control}
-                  name="lng"
-                  render={({ field: lngField }) => (
-                    <AddressMapPicker
-                      value={
-                        latField.value !== null && lngField.value !== null
-                          ? { lat: latField.value, lng: lngField.value }
-                          : null
-                      }
-                      onChange={(v) => {
-                        latField.onChange(v.lat)
-                        lngField.onChange(v.lng)
-                        if (v.addressLine) form.setValue('addressLine', v.addressLine, { shouldDirty: true })
-                      }}
-                    />
-                  )}
-                />
-              )}
-            />
-
-            <Controller
-              control={form.control}
-              name="isDefault"
-              render={({ field }) => (
-                <FormControlLabel
-                  control={<Switch checked={Boolean(field.value)} onChange={(_, v) => field.onChange(v)} />}
-                  label="Адрес по умолчанию"
-                />
-              )}
-            />
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpen(false)}>Отмена</Button>
-          <Button
-            variant="contained"
-            onClick={() => (editing ? updateMut.mutate() : createMut.mutate())}
-            disabled={
-              createMut.isPending ||
-              updateMut.isPending ||
-              !form.watch('recipientName').trim() ||
-              !form.watch('recipientPhone').trim() ||
-              !form.watch('addressLine').trim()
-            }
-          >
-            Сохранить
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <AddressFormDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        editing={Boolean(editing)}
+        form={form}
+        onSubmit={handleSubmit}
+        isPending={createMut.isPending || updateMut.isPending}
+      />
     </Box>
   )
 }