From db1fc8e634e50535b30e3c3b58e122fe74d8f7b2 Mon Sep 17 00:00:00 2001 From: Primakov Alexandr Alexandrovich Date: Thu, 7 Nov 2024 18:00:47 +0300 Subject: [PATCH] friends page --- bro.config.js | 2 +- package-lock.json | 17 +++++++ package.json | 1 + src/components/profile/from.tsx | 61 ++++++++++++++++++++++++ src/components/profile/profile.tsx | 75 +++++++----------------------- src/components/stars.tsx | 40 ++++++++++++++++ src/dashboard.tsx | 4 +- src/pages/friends.tsx | 33 +++++++++++++ 8 files changed, 172 insertions(+), 61 deletions(-) create mode 100644 src/components/profile/from.tsx create mode 100644 src/components/stars.tsx create mode 100644 src/pages/friends.tsx diff --git a/bro.config.js b/bro.config.js index d931e3f..dd14bc3 100644 --- a/bro.config.js +++ b/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': { diff --git a/package-lock.json b/package-lock.json index 9ef041b..9f71456 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bba5013..719fee6 100644 --- a/package.json +++ b/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" diff --git a/src/components/profile/from.tsx b/src/components/profile/from.tsx new file mode 100644 index 0000000..98f7ebd --- /dev/null +++ b/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() + + 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 ( + + + + + + + ) +} diff --git a/src/components/profile/profile.tsx b/src/components/profile/profile.tsx index f528539..d1c2c4d 100644 --- a/src/components/profile/profile.tsx +++ b/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 & { 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 ( + {!isLink && } {title || 'Данные профиля'} @@ -57,53 +51,14 @@ export const Profile = ({ - {isLink ? ( - - Имя: {user.name.toUpperCase()} - {t('key.to.override', { name: user.name.toUpperCase() })} - - ) : ( - Имя: {user.name.toUpperCase()} - )} + Имя: {user.name.toUpperCase()} - - {Array.from({ length: 5 }).map((_, index) => - index + 1 > rated ? ( - setRated(index + 1)} - > - - - ) : ( - setRated(index + 1)} - > - - - ) - )} - + - {!isLink &&
} - - {user.friends && - user.friends.map((friend) => ( - - ))} - - {!isLink && ( - {isTrue ? : } - )} - + {!isLink && } ) } @@ -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 ( - - {value} +
+ + {value} - - - + + + +
) } diff --git a/src/components/stars.tsx b/src/components/stars.tsx new file mode 100644 index 0000000..0293e83 --- /dev/null +++ b/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 ( + + {Array.from({ length: 5 }).map((_, index) => + index + 1 > rated ? ( + setRated(index + 1)} + > + + + ) : ( + setRated(index + 1)} + > + + + ), + )} + + ) +} diff --git a/src/dashboard.tsx b/src/dashboard.tsx index 86a0755..f32b15d 100644 --- a/src/dashboard.tsx +++ b/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 ( } + // element={} + element={} /> } /> } /> diff --git a/src/pages/friends.tsx b/src/pages/friends.tsx new file mode 100644 index 0000000..8098c43 --- /dev/null +++ b/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 ( + + + + + ) +}