createReducer & createAction

2025-01-17 09:22:59 +03:00
parent 2d2ed497ca
commit 67fa902c75
13 changed files with 300 additions and 113 deletions
@@ -0,0 +1,114 @@
+import { Box, Button, Input, Stack } from '@chakra-ui/react'
+import React from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+
+type Inputs = {
+  name: string
+  lastName: string
+
+  age: string
+}
+
+export const ProfileEditModal = ({ onClose }) => {
+  const {
+    register,
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<Inputs>({
+    mode: 'onChange',
+    defaultValues: {
+      name: 'name',
+      lastName: 'string',
+      age: '12',
+    },
+  })
+
+  const onSibmit = ({ name, age }) => {
+    // console.log(1111111, name, age)
+  }
+
+  return (
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Modal Title</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box
+            as="form"
+            flexDirection="column"
+            display="flex"
+            gap={3}
+            onSubmit={handleSubmit(onSibmit)}
+          >
+            <label>
+              Name:
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: 'required 4 now',
+                  minLength: { value: 4, message: 'min 4 now' },
+                }}
+                render={({ field }) => (
+                  <Input isInvalid={Boolean(errors.name)} {...field} />
+                )}
+              />
+            </label>
+
+            <label>
+              Age:
+              <Controller
+                control={control}
+                name="age"
+                rules={{
+                  required: 'required 4 now',
+                }}
+                render={({ field }) => (
+                  <Input
+                    isInvalid={Boolean(errors.age)}
+                    type="number"
+                    {...field}
+                  />
+                )}
+              />
+            </label>
+            <label>
+              lastName:
+              <Controller
+                control={control}
+                name="lastName"
+                render={({ field }) => (
+                  <Input type="number" {...field} />
+                )}
+              />
+            </label>
+            <Stack gap={4} pt={8}>
+              <Button variant="solid" type="submit">
+                Submit
+              </Button>
+            </Stack>
+          </Box>
+          <ModalFooter>
+            <Button variant="outline" type="button" onClick={onClose}>
+              Отмена
+            </Button>
+          </ModalFooter>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}