friends page

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>
   )
 }