init redux

bro.config.js

@@ -26,6 +26,6 @@ module.exports = {
     },
   },
   config: {
-    'nav2.api': '/api',
+    "dry-wash.api.url": "/api"
   },
 }

eslint.config.mjs

@@ -1,39 +1,45 @@
-import globals from "globals"
+import globals from 'globals'
-import pluginJs from "@eslint/js"
+import pluginJs from '@eslint/js'
-import tseslint from "typescript-eslint"
+import tseslint from 'typescript-eslint'
-import pluginReact from "eslint-plugin-react"
+import pluginReact from 'eslint-plugin-react'
 import stylistic from '@stylistic/eslint-plugin'
 
 export default [
-  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
   { languageOptions: { globals: globals.browser } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
   {
     plugins: {
-      '@stylistic': stylistic
+      '@stylistic': stylistic,
     },
-    "rules": {
+    rules: {
-      "no-unused-vars": "off",
+      'no-unused-vars': 'off',
-      "react/prop-types": "off",
+      'react/prop-types': 'off',
-      "@typescript-eslint/no-unused-vars": [
+      '@typescript-eslint/no-unused-vars': [
-        "warn", // or "error"
+        'warn', // or "error"
         {
-          "argsIgnorePattern": "^_",
+          argsIgnorePattern: '^_',
-          "varsIgnorePattern": "^_",
+          varsIgnorePattern: '^_',
-          "caughtErrorsIgnorePattern": "^_"
+          caughtErrorsIgnorePattern: '^_',
-        }
+        },
       ],
-      "sort-imports": ["error", {
+      'sort-imports': [
-        "ignoreCase": false,
+        'error',
-        "ignoreDeclarationSort": true,
+        {
-        "ignoreMemberSort": false,
+          ignoreCase: false,
-        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+          ignoreDeclarationSort: true,
-        "allowSeparatedGroups": true
+          ignoreMemberSort: false,
-      }],
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-      semi: ["error", "never"],
+          allowSeparatedGroups: true,
+        },
+      ],
+      semi: ['error', 'never'],
       '@stylistic/indent': ['error', 2],
     },
-  }
+  },
+  {
+    ignores: ['stubs/'],
+  },
 ]

package-lock.json

@@ -24,7 +24,9 @@
                 "react-dom": "^18.3.1",
                 "react-hook-form": "^7.53.1",
                 "react-icons": "^5.3.0",
+                "react-redux": "^9.2.0",
                 "react-router-dom": "^6.23.1",
+                "redux": "^5.0.1",
                 "typescript-eslint": "^8.6.0"
             }
         },
@@ -2566,6 +2568,12 @@
                 "@types/react": "*"
             }
         },
+        "node_modules/@types/use-sync-external-store": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+            "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+            "license": "MIT"
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.6.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz",
@@ -8392,6 +8400,29 @@
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
             "license": "MIT"
         },
+        "node_modules/react-redux": {
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+            "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/use-sync-external-store": "^0.0.6",
+                "use-sync-external-store": "^1.4.0"
+            },
+            "peerDependencies": {
+                "@types/react": "^18.2.25 || ^19",
+                "react": "^18.0 || ^19",
+                "redux": "^5.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "redux": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-remove-scroll": {
             "version": "2.6.0",
             "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
@@ -8564,6 +8595,12 @@
                 "recursive-watch": "bin.js"
             }
         },
+        "node_modules/redux": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+            "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+            "license": "MIT"
+        },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -9976,6 +10013,15 @@
                 }
             }
         },
+        "node_modules/use-sync-external-store": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+            "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -31,7 +31,9 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.1",
         "react-icons": "^5.3.0",
+        "react-redux": "^9.2.0",
         "react-router-dom": "^6.23.1",
+        "redux": "^5.0.1",
         "typescript-eslint": "^8.6.0"
     }
 }

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) =>
+  const updateStar = useCallback(
-    setStar((state) => ({ ...state, [userId]: rate })), [setStar])
+    (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/profile/from.tsx

@@ -1,5 +1,5 @@
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Input } from '@chakra-ui/react'
+import { Box, Button, Input } from '@chakra-ui/react'
 import React, { useEffect, useRef } from 'react'
 
 type Inputs = {
@@ -7,7 +7,7 @@ type Inputs = {
   age: string
 }
 
-export const FormTest = () => {
+export const FormTest = ({ name }) => {
   const {
     register,
     control,
@@ -16,45 +16,51 @@ export const FormTest = () => {
     reset,
     setValue,
     formState: { errors },
-  } = useForm<Inputs>()
+  } = useForm<Inputs>({
-
+    mode: 'onChange',
-  const [name, setName] = React.useState('')
+    defaultValues: {
-  const [age, setAge] = React.useState('12')
+      name: name,
-  const ageRef = useRef(null)
+      age: '12',
-
+    },
-  useEffect(() => {
+  })
-    ageRef.current.focus()
-  }, [])
 
   const onSibmit = ({ name, age }) => {
     // console.log(1111111, name, age)
   }
 
   return (
-    <Box
+    <>
-      as="form"
+      <Box
-      flexDirection="column"
+        as="form"
-      display="flex"
+        flexDirection="column"
-      onSubmit={handleSubmit(onSibmit)}
+        display="flex"
-    >
+        onSubmit={handleSubmit(onSibmit)}
-      <label>
+      >
-        Name:
+        <label>
-        <Controller
+          Name:
-          control={control}
+          <Controller
-          name="name"
+            control={control}
-          rules={{
+            name="name"
-            required: 'required 4 now',
+            rules={{
-            minLength: { value: 4, message: 'min 4 now' },
+              required: 'required 4 now',
-          }}
+              minLength: { value: 4, message: 'min 4 now' },
-          render={({ field, fieldState, formState }) => <Input {...field} />}
+            }}
-        />
+            render={({ field, fieldState, formState }) => <Input {...field} />}
-      </label>
+          />
+        </label>
 
-      <label>
+        <label>
-        Age:
+          Age:
-        <input type="number" ref={ageRef} defaultValue={age} />
+          <Controller
-      </label>
+            control={control}
-      <button type="submit">Submit</button>
+            name="age"
-    </Box>
+            render={({ field, fieldState, formState }) => (
+              <Input type="number" {...field} />
+            )}
+          />
+        </label>
+        <Button type="submit">Submit</Button>
+      </Box>
+    </>
   )
 }

src/components/profile/profile.tsx

@@ -41,10 +41,12 @@ export const Profile = ({
   title?: string
 }) => {
   // const [rated, setRated] = useState(user.rated || 0)
+  const [editProfile, setEditProfile] = useState(false)
 
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
-      {!isLink && <FormTest />}
+      {!isLink && editProfile && <FormTest name={user.name} />}
+      {!editProfile && <Button onClick={() => setEditProfile(true)}>Редактировать</Button>}
       <Heading as="h2">{title || 'Данные профиля'}</Heading>
       <Box m={3}>
         <Card width={'fit-content'} shadow="2xl">
@@ -59,7 +61,7 @@ export const Profile = ({
           <CardFooter>
             {features['stars'] && (
               <Stars
-                count={Number(features['stars']?.value) * 2}
+                count={Number(features['stars']?.value)}
                 userId={user.id}
                 // rated={rated}
                 // setRated={setRated}
@@ -68,15 +70,15 @@ export const Profile = ({
           </CardFooter>
         </Card>
       </Box>
-      {!isLink &&
+      {/* {!isLink &&
         features['buttons'] &&
-        user.friends?.map((friend) => (
+        user.friends?.map((friend) => ( */}
           <Counter
-            key={friend.id}
+            key={user.id}
             // value={rated} setValue={setRated}
-            userId={friend.id}
+            userId={user.id}
           />
-        ))}
+        {/* ))} */}
     </Box>
   )
 }

src/components/stars.tsx

@@ -1,9 +1,13 @@
 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(
@@ -33,7 +37,22 @@ 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', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        userId,
+        stars,
+      }),
+    })
+  }
 
   return (
     <HStack>
@@ -43,7 +62,7 @@ export const Stars = ({
             key={index}
             color="orange.400"
             cursor="pointer"
-            onClick={() => setUserRate(userId, index + 1)}
+            onClick={() => handleStarsClick(index + 1)}
           >
             <FaRegStar />
           </Icon>
@@ -52,7 +71,7 @@ export const Stars = ({
             key={index}
             color="orange.400"
             cursor="pointer"
-            onClick={() => setUserRate(userId, index + 1)}
+            onClick={() => handleStarsClick(index + 1)}
           >
             <FaStar />
           </Icon>

src/pages/by.tsx

@@ -1,5 +1,5 @@
 import { Container, Heading } from '@chakra-ui/react'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { Profile } from '../components'
@@ -47,6 +47,24 @@ const users = {
 
 export const ByPage = () => {
   const params = useParams()
+  const [isLoading, setIsLoading] = useState(null)
+  const [data, setData] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const getUser = async () => {
+      try {
+        const response = await fetch('/api/users/' + params.userId)
+
+        const data = await response.json()
+      } catch (e) {
+        alert(e.message)
+      }
+    }
+
+    getUser()
+  }, [])
+  
 
   if (!users[params.userId]) {
     return <Heading as="h2">Пользователь не найден</Heading>

src/pages/friends.tsx

@@ -1,14 +1,51 @@
 import { HStack } from '@chakra-ui/react'
-import React, { memo } from '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 () => {
+      setIsLoading(true)
+
+      try {
+        const response = await fetch('/api/users/')
+
+        if (response.ok) {
+          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 {
+        setIsLoading(false)
+      }
+    }
+
+    getUser()
+  }, [])
+
+  if(!data || isLoading) return <h1>loading...</h1>
+  
   return (
     <HStack>
-      <Profile user={users['some-user-id']} />
+      <Profile user={data['some-user-id']} />
-      <Profile user={users['2']} />
+      <Profile user={data['2']} />
     </HStack>
   )
 })

stubs/api/index.js

@@ -1,8 +1,53 @@
 const router = require('express').Router();
+const router2 = require('express').Router();
+const path = require('node:path')
+const fs = require('node:fs')
 
-const timer = (time = 300) => (req, res, next) => setTimeout(next, time);
+let stubs = {
+    users: 'success'
+}
 
-router.use(timer());
+const timer = (time) => (req, res, next) => {
+    setTimeout(next, time)
+}
 
+timer.slow = timer(5000)
+timer.fast = timer(300)
+
+// router.use(timer.fast)
+
+router.post('/user-rate', (req, res) => {
+    console.log(req.body)
+    res.status(500).send({ ok: false })
+})
+
+router.use('/admin', router2)
+
+router.get('/users',
+    (req, res, next) => {
+    res.status(stubs.users.includes('error') ? 400 : 200).send(require(`../json/users/${stubs.users}.json`))
+})
+
+router2.get('/', (req, res) => {
+    res.send(`
+        <h2>Users</h2>
+        <ul>
+            <li><button onclick="fetch('/api/admin/users/success')" style="background-color: ${stubs.users === 'success' ? 'green' : '#ccc'}">success</button></li>
+            <li><button onclick="fetch('/api/admin/users/error')" style="background-color: ${stubs.users === 'error' ? 'green' : '#ccc'}">error</button></li>
+        </ul>
+
+        <h2>Users</h2>
+        <ul>
+            <li><button onclick="fetch('/api/admin/users/success')" style="background-color: ${stubs.users === 'success' ? 'green' : '#ccc'}">success</button></li>
+            <li><button onclick="fetch('/api/admin/users/error')" style="background-color: ${stubs.users === 'error' ? 'green' : '#ccc'}">error</button></li>
+        </ul>
+`)
+})
+
+router2.get('/:stubName/:value', (req, res) => {
+    const { stubName, value } = req.params
+
+    stubs[stubName] = value
+})
 
 module.exports = router;

stubs/json/users/empty.json

@@ -0,0 +1,6 @@
+{
+  "success": false,
+  "body": {
+    
+  }
+}

stubs/json/users/success.json

@@ -0,0 +1,41 @@
+{
+  "success": false,
+  "body": {
+    "some-user-id": {
+      "id": "some-user-id",
+      "name": "alexandr",
+      "surname": null,
+      "email": null,
+      "rated": 4,
+      "avatar": "https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash",
+      "friends": [
+        {
+          "id": "2",
+          "name": "not alexandr",
+          "surname": null,
+          "email": null,
+          "rated": 2,
+          "avatar": "https://www.gravatar.com/avatar/6e?d=robohash"
+        }
+      ]
+    },
+    "2": {
+      "id": "2",
+      "name": "not alexandr",
+      "surname": null,
+      "email": null,
+      "rated": 5,
+      "avatar": "https://www.gravatar.com/avatar/6e?d=robohash",
+      "friends": [
+        {
+          "id": "some-user-id",
+          "name": "alexandr",
+          "surname": null,
+          "email": null,
+          "rated": 3,
+          "avatar": "https://www.gravatar.com/avatar/6529e885535ef67a3fad810ad71167c2c03f79480936e9b3a714731753cbb47e?d=robohash"
+        }
+      ]
+    }
+  }
+}