friends page

bro.config.js

@@ -12,7 +12,7 @@ module.exports = {
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
     'nav2.main': '/nav2',
-    'link.nav2.by': '/by/:userId'
+    'link.nav2.by': '/by/:userId',
   },
   features: {
     'nav2': {

package-lock.json

@@ -22,6 +22,7 @@
                 "lottie-react": "^2.4.0",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
+                "react-hook-form": "^7.53.1",
                 "react-icons": "^5.3.0",
                 "react-router-dom": "^6.23.1",
                 "typescript-eslint": "^8.6.0"
@@ -8477,6 +8478,22 @@
                 }
             }
         },
+        "node_modules/react-hook-form": {
+            "version": "7.53.1",
+            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz",
+            "integrity": "sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/react-hook-form"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17 || ^18 || ^19"
+            }
+        },
         "node_modules/react-i18next": {
             "version": "15.1.0",
             "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.0.tgz",

package.json

@@ -29,6 +29,7 @@
         "lottie-react": "^2.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.1",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.23.1",
         "typescript-eslint": "^8.6.0"

src/components/profile/from.tsx

@@ -0,0 +1,61 @@
+import { useForm, Controller } from 'react-hook-form'
+import { Box, Input } from '@chakra-ui/react'
+import React, { useEffect, useRef } from 'react'
+
+type Inputs = {
+  name: string
+  age: string
+}
+
+export const FormTest = () => {
+  const {
+    register,
+    control,
+    handleSubmit,
+    watch,
+    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()
+  }, [])
+
+  const onSibmit = ({ name, age }) => {
+    console.log(1111111, name, age)
+  }
+  console.log(1111111, 22222, watch().name)
+
+  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>
+
+      <label>
+        Age:
+        <input type="number" ref={ageRef} defaultValue={age} />
+      </label>
+      <button type="submit">Submit</button>
+    </Box>
+  )
+}

src/components/profile/profile.tsx

@@ -14,12 +14,11 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
-import { useTranslation } from 'react-i18next'
 import { FaRegStar, FaStar } from 'react-icons/fa6'
-import { Link, generatePath } from 'react-router-dom'
-import React, { memo, useCallback, useState } from 'react'
+import React, { memo, useState } from 'react'
 
-import { URLs } from '../../__data__/urls'
+import { FormTest } from './from'
+import { Stars } from '../stars'
 
 type User = Record<string, unknown> & {
   id: string
@@ -39,15 +38,10 @@ export const Profile = ({
   title?: string
 }) => {
   const [rated, setRated] = useState(user.rated || 0)
-  const [isTrue, setTrue] = useState(false)
-  const { t } = useTranslation()
-
-  const handleSubmit = useCallback(() => {
-    fetch('/#')
-  }, [])
 
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
+      {!isLink && <FormTest />}
       <Heading as="h2">{title || 'Данные профиля'}</Heading>
       <Box m={3}>
         <Card width={'fit-content'} shadow="2xl">
@@ -57,53 +51,14 @@ export const Profile = ({
             </Center>
           </CardHeader>
           <CardBody>
-            {isLink ? (
-              <Link to={generatePath(URLs.by.url, { userId: user.id })}>
-                Имя: {user.name.toUpperCase()}
-                {t('key.to.override', { name: user.name.toUpperCase() })}
-              </Link>
-            ) : (
-              <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
-            )}
+            <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
           </CardBody>
           <CardFooter>
-            <HStack>
-              {Array.from({ length: 5 }).map((_, index) =>
-                index + 1 > rated ? (
-                  <Icon
-                    key={index}
-                    color="orange.400"
-                    cursor="pointer"
-                    onClick={() => setRated(index + 1)}
-                  >
-                    <FaRegStar />
-                  </Icon>
-                ) : (
-                  <Icon
-                    key={index}
-                    color="orange.400"
-                    cursor="pointer"
-                    onClick={() => setRated(index + 1)}
-                  >
-                    <FaStar />
-                  </Icon>
-                )
-              )}
-            </HStack>
+            <Stars rated={rated} setRated={setRated} />
           </CardFooter>
         </Card>
-        {!isLink && <Form initialState="" onSubmit={handleSubmit} />}
-        <Box mt={3}>
-          {user.friends &&
-            user.friends.map((friend) => (
-              <Profile title="Друг" key={user.id} user={friend} isLink />
-            ))}
-        </Box>
       </Box>
-      {!isLink && (
-        <Box mt={3}>{isTrue ? <Counter key={1} /> : <Counter key={2} />}</Box>
-      )}
-      <Button onClick={() => setTrue(!isTrue)}>Switch</Button>
+      {!isLink && <Counter value={rated} setValue={setRated} />}
     </Box>
   )
 }
@@ -152,15 +107,17 @@ const Form = memo<{ initialState: string; onSubmit(value: string): void }>(
 
 Form.displayName = 'FormMemo'
 
-const Counter = () => {
-  const [value, setValue] = useState(0)
+const Counter = ({ value, setValue, horiaontal = false }) => {
+  const Wrapper = horiaontal ? HStack : VStack
 
   return (
-    <VStack>
-      <Heading>{value}</Heading>
+    <Center>
+      <Wrapper>
+        <Heading>{value}</Heading>
 
-      <Button onClick={() => setValue(value + 1)}>+</Button>
-      <Button onClick={() => setValue(value - 1)}>-</Button>
-    </VStack>
+        <Button onClick={() => setValue(value + 1)}>+</Button>
+        <Button onClick={() => setValue(value - 1)}>-</Button>
+      </Wrapper>
+    </Center>
   )
 }

src/components/stars.tsx

@@ -0,0 +1,40 @@
+import {
+  HStack,
+  Icon,
+} from '@chakra-ui/react'
+import { FaRegStar, FaStar } from 'react-icons/fa6'
+import React from 'react'
+
+export const Stars = ({
+  rated,
+  setRated,
+}: {
+  rated: number
+  setRated: (rate: number) => void
+}) => {
+  return (
+    <HStack>
+      {Array.from({ length: 5 }).map((_, index) =>
+        index + 1 > rated ? (
+          <Icon
+            key={index}
+            color="orange.400"
+            cursor="pointer"
+            onClick={() => setRated(index + 1)}
+          >
+            <FaRegStar />
+          </Icon>
+        ) : (
+          <Icon
+            key={index}
+            color="orange.400"
+            cursor="pointer"
+            onClick={() => setRated(index + 1)}
+          >
+            <FaStar />
+          </Icon>
+        ),
+      )}
+    </HStack>
+  )
+}

src/dashboard.tsx

@@ -6,13 +6,15 @@ import { URLs } from './__data__/urls'
 
 import { NotFound } from './pages/not-found'
 import { ByPage } from './pages/by'
+import { Friends } from './pages/friends'
 
 export const Dashboard = () => {
   return (
     <Routes>
       <Route
         path={URLs.baseUrl}
-        element={<Navigate replace to={URLs.toNotFound.url} />}
+        // element={<Navigate replace to={URLs.toNotFound.url} />}
+        element={<Friends />}
       />
       <Route path={URLs.by.url} element={<Container maxW="container.xl"><ByPage /></Container>} />
       <Route path="*" element={<NotFound />} />

src/pages/friends.tsx

@@ -0,0 +1,33 @@
+import { HStack } from '@chakra-ui/react'
+import React from 'react'
+
+import { Profile } from '../components'
+
+const users = {
+  'some-user-id': {
+    id: 'some-user-id',
+    name: 'alexandr',
+    surname: null,
+    email: null,
+    rated: 3,
+    avatar:
+      'https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash',
+  },
+  '2': {
+    id: '2',
+    name: 'not alexandr',
+    surname: null,
+    email: null,
+    rated: 2,
+    avatar: 'https://www.gravatar.com/avatar/6e?d=robohash',
+  },
+}
+
+export const Friends = () => {
+  return (
+    <HStack>
+      <Profile user={users['some-user-id']} />
+      <Profile user={users['2']} />
+    </HStack>
+  )
+}