init redux

src/__data__/actions/stars.ts

@@ -0,0 +1,23 @@
+import * as types from '../const'
+
+export const setStars = (userId: string, value: number) => ({
+  type: types.SET_STARS,
+  payload: {
+    id: userId,
+    value,
+  },
+})
+
+export const incrementStart = (userId: string) => ({
+  type: types.INCREMENT_STARS,
+  payload: {
+    id: userId
+  }
+})
+
+export const decrementStart = (userId: string) => ({
+  type: types.INCREMENT_STARS,
+  payload: {
+    id: userId
+  }
+})

src/__data__/const.ts

@@ -0,0 +1,3 @@
+export const SET_STARS = 'SET_STARS'
+export const INCREMENT_STARS = 'INCREMENT_STARS'
+export const DECREMENT_STARS = 'DECREMENT_STARS'

src/__data__/reducers/stars.ts

@@ -0,0 +1,38 @@
+import * as types from '../const'
+
+const initialState = {
+  friends: {} as Record<string, number>,
+  user: {},
+}
+
+export const starsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case types.SET_STARS:
+      return {
+        ...state,
+        friends: {
+          ...state.friends,
+          [action.payload.id]: action.payload.value,
+        },
+      }
+    case types.INCREMENT_STARS:
+      return {
+        ...state,
+        friends: {
+          ...state.friends,
+          [action.payload.id]: state[action.payload.id] + 1,
+        },
+      }
+
+    case types.DECREMENT_STARS:
+      return {
+        ...state,
+        friends: {
+          ...state.friends,
+          [action.payload.id]: state[action.payload.id] - 1,
+        },
+      }
+
+    default: return state
+  }
+}

src/__data__/store.ts

@@ -0,0 +1,12 @@
+import { combineReducers, legacy_createStore } from 'redux'
+
+import { starsReducer } from './reducers/stars'
+
+export const store = legacy_createStore(
+  combineReducers({
+    stars: starsReducer,
+  }),
+);
+
+(window as unknown as { redux: string }).redux = store as unknown as string
+

src/app.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
+import { Provider } from 'react-redux'
 
 import { Dashboard } from './dashboard'
 import { stars as starsContext } from './__data__/context'
 import { users } from './__data__/users'
+import { store } from './__data__/store'
 
 const App = () => {
   const [stars, setStar] = useState(
@@ -14,8 +16,11 @@ const App = () => {
     ),
   )
 
-  const updateStar = useCallback((userId: string, rate: number) =>
-    setStar((state) => ({ ...state, [userId]: rate })), [setStar])
+  const updateStar = useCallback(
+    (userId: string, rate: number) =>
+      setStar((state) => ({ ...state, [userId]: rate })),
+    [setStar],
+  )
   return (
     <starsContext.Provider
       value={{
@@ -25,7 +30,9 @@ const App = () => {
     >
       <ChakraProvider>
         <BrowserRouter>
-          <Dashboard />
+          <Provider store={store}>
+            <Dashboard />
+          </Provider>
         </BrowserRouter>
       </ChakraProvider>
     </starsContext.Provider>

src/components/stars.tsx

@@ -2,9 +2,12 @@ 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 { useSelector } from 'react-redux'
+
 import { stars } from '../__data__/context'
 import { useUsers } from '../hooks'
 
+
 const useStars = (currentRated, starsCount) => {
   const [rated, setRated] = useState(currentRated)
   const stars = useMemo(
@@ -34,7 +37,9 @@ export const Stars = ({
   //   stars,
   //   setRated: starsSetRated
   // } = useStars(rated, count)
-  const { rate, setUserRate } = useUsers(state => state[userId].rated)
+  const { setUserRate } = useUsers(state => state[userId].rated)
+  const rate = useSelector((store) => store.stars.friends[userId]) ?? 0
+
   const handleStarsClick = (stars: number) => {
     setUserRate(userId, stars)
     fetch(getConfigValue('dry-wash.api.url') + '/user-rate', {

src/dashboard.tsx

@@ -20,4 +20,4 @@ export const Dashboard = () => {
       <Route path="*" element={<NotFound />} />
     </Routes>
   )
-}
+}

src/pages/friends.tsx

@@ -1,13 +1,16 @@
 import { HStack } from '@chakra-ui/react'
 import React, { memo, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
 
 import { Profile } from '../components'
 import { users } from '../__data__/users'
+import { setStars } from '../__data__/actions/stars'
 
 export const Friends = memo(() => {
   const [isLoading, setIsLoading] = useState(false)
   const [data, setData] = useState(null)
   const [error, setError] = useState(null)
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const getUser = async () => {
@@ -17,11 +20,16 @@ export const Friends = memo(() => {
         const response = await fetch('/api/users/')
 
         if (response.ok) {
-          setData((await response.json()).body)
+          const data = (await response.json()).body
+          setData(data)
+
+          Object.keys(data).forEach(userId => {
+            dispatch(setStars(userId, data[userId].rated))
+          })
         } else {
           throw 'Что-то пошло не так'
         }
-        
+
       } catch (e) {
         setError(e.message)
       } finally {