useSyncExternalStore

src/components/profile/profile.tsx

@@ -13,11 +13,13 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
-import { getFeatures, getAllFeatures } from '@brojs/cli'
-import React, { memo, useState } from 'react'
+import { getFeatures } from '@brojs/cli'
+import React, { memo, useCallback, useContext, useState } from 'react'
 
 import { FormTest } from './from'
 import { Stars } from '../stars'
+import { stars as starsContext } from '../../__data__/context'
+import { useUsers } from '../../hooks'
 
 type User = Record<string, unknown> & {
   id: string
@@ -29,8 +31,6 @@ type User = Record<string, unknown> & {
 
 const features = getFeatures('nav2')
 
-
-
 export const Profile = ({
   user,
   isLink,
@@ -40,7 +40,7 @@ export const Profile = ({
   isLink?: boolean
   title?: string
 }) => {
-  const [rated, setRated] = useState(user.rated || 0)
+  // const [rated, setRated] = useState(user.rated || 0)
 
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
@@ -60,14 +60,23 @@ export const Profile = ({
             {features['stars'] && (
               <Stars
                 count={Number(features['stars']?.value) * 2}
-                rated={rated}
-                setRated={setRated}
+                userId={user.id}
+                // rated={rated}
+                // setRated={setRated}
               />
             )}
           </CardFooter>
         </Card>
       </Box>
-      {!isLink && features['buttons'] && <Counter value={rated} setValue={setRated} />}
+      {!isLink &&
+        features['buttons'] &&
+        user.friends?.map((friend) => (
+          <Counter
+            key={friend.id}
+            // value={rated} setValue={setRated}
+            userId={friend.id}
+          />
+        ))}
     </Box>
   )
 }
@@ -116,17 +125,44 @@ const Form = memo<{ initialState: string; onSubmit(value: string): void }>(
 
 Form.displayName = 'FormMemo'
 
-const Counter = ({ value, setValue, horiaontal = false }) => {
-  const Wrapper = horiaontal ? HStack : VStack
+const withStars =
+  (Component) =>
+  ({ userId }) => {
+    const { stars, setStar } = useContext(starsContext)
+
+    const addStar = useCallback(
+      () => setStar(userId, stars[userId] + 1),
+      [userId, setStar],
+    )
+    const subStar = useCallback(
+      () => setStar(userId, stars[userId] - 1),
+      [userId, setStar],
+    )
+
+    return (
+      <Component
+        userId={userId}
+        stars={stars[userId]}
+        addStar={addStar}
+        subStar={subStar}
+      />
+    )
+  }
+
+const Counter = ({ stars, addStar, subStar, userId }) => {
+  const { rate, setUserRate } = useUsers((state) => state[userId].rated)
+  console.log(userId)
 
   return (
     <Center>
-      <Wrapper>
-        <Heading>{value}</Heading>
+      <VStack>
+        <Heading>{rate}</Heading>
 
-        <Button onClick={() => setValue(value + 1)}>+</Button>
-        <Button onClick={() => setValue(value - 1)}>-</Button>
-      </Wrapper>
+        <Button onClick={() => setUserRate(userId, rate + 1)}>+</Button>
+        <Button onClick={() => setUserRate(userId, rate - 1)}>-</Button>
+      </VStack>
     </Center>
   )
 }
+
+const CounterWithStars = withStars(Counter)