forms

src/components/profile/from.tsx

@@ -1,5 +1,5 @@
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Input } from '@chakra-ui/react'
+import { Box, Button, Input } from '@chakra-ui/react'
 import React, { useEffect, useRef } from 'react'
 
 type Inputs = {
@@ -7,7 +7,7 @@ type Inputs = {
   age: string
 }
 
-export const FormTest = () => {
+export const FormTest = ({ name }) => {
   const {
     register,
     control,
@@ -16,45 +16,51 @@ export const FormTest = () => {
     reset,
     setValue,
     formState: { errors },
-  } = useForm<Inputs>()
-
-  const [name, setName] = React.useState('')
-  const [age, setAge] = React.useState('12')
-  const ageRef = useRef(null)
-
-  useEffect(() => {
-    ageRef.current.focus()
-  }, [])
+  } = useForm<Inputs>({
+    mode: 'onChange',
+    defaultValues: {
+      name: name,
+      age: '12',
+    },
+  })
 
   const onSibmit = ({ name, age }) => {
     // console.log(1111111, name, age)
   }
 
   return (
-    <Box
-      as="form"
-      flexDirection="column"
-      display="flex"
-      onSubmit={handleSubmit(onSibmit)}
-    >
-      <label>
-        Name:
-        <Controller
-          control={control}
-          name="name"
-          rules={{
-            required: 'required 4 now',
-            minLength: { value: 4, message: 'min 4 now' },
-          }}
-          render={({ field, fieldState, formState }) => <Input {...field} />}
-        />
-      </label>
+    <>
+      <Box
+        as="form"
+        flexDirection="column"
+        display="flex"
+        onSubmit={handleSubmit(onSibmit)}
+      >
+        <label>
+          Name:
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: 'required 4 now',
+              minLength: { value: 4, message: 'min 4 now' },
+            }}
+            render={({ field, fieldState, formState }) => <Input {...field} />}
+          />
+        </label>
 
-      <label>
-        Age:
-        <input type="number" ref={ageRef} defaultValue={age} />
-      </label>
-      <button type="submit">Submit</button>
-    </Box>
+        <label>
+          Age:
+          <Controller
+            control={control}
+            name="age"
+            render={({ field, fieldState, formState }) => (
+              <Input type="number" {...field} />
+            )}
+          />
+        </label>
+        <Button type="submit">Submit</Button>
+      </Box>
+    </>
   )
 }

src/components/profile/profile.tsx

@@ -41,10 +41,12 @@ export const Profile = ({
   title?: string
 }) => {
   // const [rated, setRated] = useState(user.rated || 0)
+  const [editProfile, setEditProfile] = useState(false)
 
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
-      {!isLink && <FormTest />}
+      {!isLink && editProfile && <FormTest name={user.name} />}
+      {!editProfile && <Button onClick={() => setEditProfile(true)}>Редактировать</Button>}
       <Heading as="h2">{title || 'Данные профиля'}</Heading>
       <Box m={3}>
         <Card width={'fit-content'} shadow="2xl">
@@ -59,7 +61,7 @@ export const Profile = ({
           <CardFooter>
             {features['stars'] && (
               <Stars
-                count={Number(features['stars']?.value) * 2}
+                count={Number(features['stars']?.value)}
                 userId={user.id}
                 // rated={rated}
                 // setRated={setRated}
@@ -68,15 +70,15 @@ export const Profile = ({
           </CardFooter>
         </Card>
       </Box>
-      {!isLink &&
+      {/* {!isLink &&
         features['buttons'] &&
-        user.friends?.map((friend) => (
+        user.friends?.map((friend) => ( */}
           <Counter
-            key={friend.id}
+            key={user.id}
             // value={rated} setValue={setRated}
-            userId={friend.id}
+            userId={user.id}
           />
-        ))}
+        {/* ))} */}
     </Box>
   )
 }

src/components/stars.tsx

@@ -1,6 +1,7 @@
 import { HStack, Icon } from '@chakra-ui/react'
 import { FaRegStar, FaStar } from 'react-icons/fa6'
 import React, { useMemo, useState } from 'react'
+import { getConfigValue } from '@brojs/cli'
 import { stars } from '../__data__/context'
 import { useUsers } from '../hooks'
 
@@ -34,6 +35,19 @@ export const Stars = ({
   //   setRated: starsSetRated
   // } = useStars(rated, count)
   const { rate, setUserRate } = useUsers(state => state[userId].rated)
+  const handleStarsClick = (stars: number) => {
+    setUserRate(userId, stars)
+    fetch(getConfigValue('dry-wash.api.url') + '/user-rate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        userId,
+        stars,
+      }),
+    })
+  }
 
   return (
     <HStack>
@@ -43,7 +57,7 @@ export const Stars = ({
             key={index}
             color="orange.400"
             cursor="pointer"
-            onClick={() => setUserRate(userId, index + 1)}
+            onClick={() => handleStarsClick(index + 1)}
           >
             <FaRegStar />
           </Icon>
@@ -52,7 +66,7 @@ export const Stars = ({
             key={index}
             color="orange.400"
             cursor="pointer"
-            onClick={() => setUserRate(userId, index + 1)}
+            onClick={() => handleStarsClick(index + 1)}
           >
             <FaStar />
           </Icon>

src/pages/by.tsx

@@ -1,5 +1,5 @@
 import { Container, Heading } from '@chakra-ui/react'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { Profile } from '../components'
@@ -47,6 +47,24 @@ const users = {
 
 export const ByPage = () => {
   const params = useParams()
+  const [isLoading, setIsLoading] = useState(null)
+  const [data, setData] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const getUser = async () => {
+      try {
+        const response = await fetch('/api/users/' + params.userId)
+
+        const data = await response.json()
+      } catch (e) {
+        alert(e.message)
+      }
+    }
+
+    getUser()
+  }, [])
+  
 
   if (!users[params.userId]) {
     return <Heading as="h2">Пользователь не найден</Heading>

src/pages/friends.tsx

@@ -1,14 +1,43 @@
 import { HStack } from '@chakra-ui/react'
-import React, { memo } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 
 import { Profile } from '../components'
 import { users } from '../__data__/users'
 
 export const Friends = memo(() => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [data, setData] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const getUser = async () => {
+      setIsLoading(true)
+
+      try {
+        const response = await fetch('/api/users/')
+
+        if (response.ok) {
+          setData((await response.json()).body)
+        } else {
+          throw 'Что-то пошло не так'
+        }
+        
+      } catch (e) {
+        setError(e.message)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    getUser()
+  }, [])
+
+  if(!data || isLoading) return <h1>loading...</h1>
+  
   return (
     <HStack>
-      <Profile user={users['some-user-id']} />
-      <Profile user={users['2']} />
+      <Profile user={data['some-user-id']} />
+      <Profile user={data['2']} />
     </HStack>
   )
 })