createReducer & createAction

package-lock.json

@@ -12,6 +12,7 @@
                 "@brojs/cli": "1.6.1",
                 "@chakra-ui/react": "^2.10.3",
                 "@eslint/js": "^9.11.0",
+                "@redux-devtools/extension": "^3.3.0",
                 "@stylistic/eslint-plugin": "^2.8.0",
                 "@types/react": "^18.3.12",
                 "@types/react-dom": "^18.3.1",
@@ -2437,6 +2438,19 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@redux-devtools/extension": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.3.0.tgz",
+            "integrity": "sha512-X34S/rC8S/M1BIrkYD1mJ5f8vlH0BDqxXrs96cvxSBo4FhMdbhU+GUGsmNYov1xjSyLMHgo8NYrUG8bNX7525g==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.23.2",
+                "immutable": "^4.3.4"
+            },
+            "peerDependencies": {
+                "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
+            }
+        },
         "node_modules/@remix-run/router": {
             "version": "1.16.1",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
@@ -6348,6 +6362,12 @@
                 "url": "https://opencollective.com/immer"
             }
         },
+        "node_modules/immutable": {
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+            "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+            "license": "MIT"
+        },
         "node_modules/import-fresh": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",

package.json

@@ -19,6 +19,7 @@
         "@brojs/cli": "1.6.1",
         "@chakra-ui/react": "^2.10.3",
         "@eslint/js": "^9.11.0",
+        "@redux-devtools/extension": "^3.3.0",
         "@stylistic/eslint-plugin": "^2.8.0",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",

src/__data__/actions/stars.ts

@@ -1,23 +1,26 @@
 import * as types from '../const'
 
-export const setStars = (userId: string, value: number) => ({
-  type: types.SET_STARS,
-  payload: {
-    id: userId,
-    value,
-  },
-})
+const createAction = <Payload>(type: string) => (payload?: Payload) => ({ type, payload })
 
-export const incrementStart = (userId: string) => ({
-  type: types.INCREMENT_STARS,
-  payload: {
-    id: userId
-  }
-})
+export const setStars = createAction<{ id: string, value: number }>(types.SET_STARS)
+export const incrementStars = createAction<{ id: string }>(types.INCREMENT_STARS)
+export const decrementStars = createAction<{ id: string }>(types.DECREMENT_STARS)
 
-export const decrementStart = (userId: string) => ({
-  type: types.INCREMENT_STARS,
-  payload: {
-    id: userId
-  }
-})
+// export const setStarsOld = (payload) => ({
+//   type: types.SET_STARS,
+//   payload,
+// })
+
+// 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__/reducers/stars.ts

@@ -5,34 +5,30 @@ const initialState = {
   user: {},
 }
 
-export const starsReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case types.SET_STARS:
-      return {
+const setStars = (state, action) => ({
   ...state,
   friends: {
     ...state.friends,
     [action.payload.id]: action.payload.value,
   },
-      }
-    case types.INCREMENT_STARS:
-      return {
+})
+
+const changeStars = (value) => (state, action) => ({
   ...state,
   friends: {
     ...state.friends,
-          [action.payload.id]: state[action.payload.id] + 1,
+    [action.payload.id]: state.friends[action.payload.id] + value,
   },
-      }
+})
 
-    case types.DECREMENT_STARS:
-      return {
-        ...state,
-        friends: {
-          ...state.friends,
-          [action.payload.id]: state[action.payload.id] - 1,
-        },
-      }
-
-    default: return state
-  }
+const createReducer = (initialState, reducers) => (state = initialState, action) => {
+  const reducer = reducers[action.type]
+  if (!reducer) return state
+  return reducer(state, action)
 }
+
+export const starsReducer = createReducer(initialState, {
+  [types.SET_STARS]: setStars,
+  [types.INCREMENT_STARS]: changeStars(1),
+  [types.DECREMENT_STARS]: changeStars(-1),
+})

src/__data__/store.ts

@@ -1,4 +1,5 @@
 import { combineReducers, legacy_createStore } from 'redux'
+import { devToolsEnhancer } from '@redux-devtools/extension'
 
 import { starsReducer } from './reducers/stars'
 
@@ -6,7 +7,9 @@ export const store = legacy_createStore(
   combineReducers({
     stars: starsReducer,
   }),
-);
-
-(window as unknown as { redux: string }).redux = store as unknown as string
+  devToolsEnhancer({
+    name: 'nav2',
+  }),
+)
 
+;(window as unknown as { redux: string }).redux = store as unknown as string

src/components/profile/from.tsx

@@ -1,13 +1,14 @@
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Button, Input } from '@chakra-ui/react'
+import { Box, Button, Input, Stack } from '@chakra-ui/react'
 import React, { useEffect, useRef } from 'react'
+import { useDispatch } from 'react-redux'
 
 type Inputs = {
   name: string
   age: string
 }
 
-export const FormTest = ({ name }) => {
+export const FormTest = ({ name, age, onOpenModal, onCancel }) => {
   const {
     register,
     control,
@@ -20,12 +21,20 @@ export const FormTest = ({ name }) => {
     mode: 'onChange',
     defaultValues: {
       name: name,
-      age: '12',
+      age: age,
     },
   })
 
   const onSibmit = ({ name, age }) => {
-    // console.log(1111111, name, age)
+    // console.log(name, age)
+  }
+
+  const dispatch = useDispatch()
+
+  const handleOpenModalClick = () => {
+    const data = watch()
+    dispatch({ type: 'OPEN_MODAL', payload: data })
+    onOpenModal()
   }
 
   return (
@@ -34,7 +43,7 @@ export const FormTest = ({ name }) => {
         as="form"
         flexDirection="column"
         display="flex"
-        onSubmit={handleSubmit(onSibmit)}
+        onSubmit={handleSubmit(console.log)}
       >
         <label>
           Name:
@@ -45,7 +54,7 @@ export const FormTest = ({ name }) => {
               required: 'required 4 now',
               minLength: { value: 4, message: 'min 4 now' },
             }}
-            render={({ field, fieldState, formState }) => <Input {...field} />}
+            render={({ field }) => <Input {...field} />}
           />
         </label>
 
@@ -54,12 +63,22 @@ export const FormTest = ({ name }) => {
           <Controller
             control={control}
             name="age"
-            render={({ field, fieldState, formState }) => (
+            render={({ field }) => (
               <Input type="number" {...field} />
             )}
           />
         </label>
-        <Button type="submit">Submit</Button>
+        <Stack gap={4} pt={8}>
+          <Button variant="solid" type="submit">
+            Submit
+          </Button>
+          <Button variant="outline" type="button" onClick={handleOpenModalClick}>
+            Продолжить в модальном окне
+          </Button>
+          <Button variant="ghost" type="button" onClick={onCancel}>
+            Cancel
+          </Button>
+        </Stack>
       </Box>
     </>
   )

src/components/profile/profile.tsx

@@ -20,10 +20,13 @@ import { FormTest } from './from'
 import { Stars } from '../stars'
 import { stars as starsContext } from '../../__data__/context'
 import { useUsers } from '../../hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import { decrementStars, incrementStars } from '../../__data__/actions/stars'
 
 type User = Record<string, unknown> & {
   id: string
   name: string
+  age: number
   avatar?: string
   rated: number
   friends?: User[]
@@ -35,18 +38,29 @@ export const Profile = ({
   user,
   isLink,
   title,
+  onOpenModal,
 }: {
   user: User
   isLink?: boolean
   title?: string
+  onOpenModal?: () => void
 }) => {
   // const [rated, setRated] = useState(user.rated || 0)
   const [editProfile, setEditProfile] = useState(false)
 
   return (
     <Box mt={3} borderWidth="1px" p={3} overflowX="hidden">
-      {!isLink && editProfile && <FormTest name={user.name} />}
-      {!editProfile && <Button onClick={() => setEditProfile(true)}>Редактировать</Button>}
+      {!isLink && editProfile && (
+        <FormTest
+          onCancel={() => setEditProfile(false)}
+          onOpenModal={onOpenModal}
+          age={user.age}
+          name={user.name}
+        />
+      )}
+      {onOpenModal && !editProfile && (
+        <Button onClick={() => setEditProfile(true)}>Редактировать</Button>
+      )}
       <Heading as="h2">{title || 'Данные профиля'}</Heading>
       <Box m={3}>
         <Card width={'fit-content'} shadow="2xl">
@@ -127,43 +141,50 @@ const Form = memo<{ initialState: string; onSubmit(value: string): void }>(
 
 Form.displayName = 'FormMemo'
 
-const withStars =
-  (Component) =>
-  ({ userId }) => {
-    const { stars, setStar } = useContext(starsContext)
+// 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],
-    )
+//     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}
-      />
-    )
-  }
+//     return (
+//       <Component
+//         userId={userId}
+//         stars={stars[userId]}
+//         addStar={addStar}
+//         subStar={subStar}
+//       />
+//     )
+//   }
 
-const Counter = ({ stars, addStar, subStar, userId }: { userId: 'some-user-id' | '2'}) => {
-  const { rate, setUserRate } = useUsers((state) => state[userId].rated)
+const Counter = ({
+  // stars, addStar, subStar,
+  userId,
+}: {
+  userId: string
+}) => {
+  // const { rate, setUserRate } = useUsers((state) => state[userId].rated)
+  const rate = useSelector((store) => store.stars.friends[userId]) ?? 0
+  const dispatch = useDispatch()
 
   return (
     <Center>
       <VStack>
         <Heading>{rate}</Heading>
 
-        <Button onClick={() => setUserRate(userId, rate + 1)}>+</Button>
-        <Button onClick={() => setUserRate(userId, rate - 1)}>-</Button>
+        <Button onClick={() => dispatch(incrementStars({ id: userId }))}>+</Button>
+        <Button onClick={() => dispatch(decrementStars({ id: userId }))}>-</Button>
       </VStack>
     </Center>
   )
 }
 
-const CounterWithStars = withStars(Counter)
+// const CounterWithStars = withStars(Counter)

src/components/profileEdit/index.ts

@@ -0,0 +1 @@
+export { ProfileEditModal } from './profileEdit'

src/components/profileEdit/profileEdit.tsx

@@ -0,0 +1,114 @@
+import { Box, Button, Input, Stack } from '@chakra-ui/react'
+import React from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+
+type Inputs = {
+  name: string
+  lastName: string
+
+  age: string
+}
+
+export const ProfileEditModal = ({ onClose }) => {
+  const {
+    register,
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<Inputs>({
+    mode: 'onChange',
+    defaultValues: {
+      name: 'name',
+      lastName: 'string',
+      age: '12',
+    },
+  })
+
+  const onSibmit = ({ name, age }) => {
+    // console.log(1111111, name, age)
+  }
+
+  return (
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Modal Title</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box
+            as="form"
+            flexDirection="column"
+            display="flex"
+            gap={3}
+            onSubmit={handleSubmit(onSibmit)}
+          >
+            <label>
+              Name:
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: 'required 4 now',
+                  minLength: { value: 4, message: 'min 4 now' },
+                }}
+                render={({ field }) => (
+                  <Input isInvalid={Boolean(errors.name)} {...field} />
+                )}
+              />
+            </label>
+
+            <label>
+              Age:
+              <Controller
+                control={control}
+                name="age"
+                rules={{
+                  required: 'required 4 now',
+                }}
+                render={({ field }) => (
+                  <Input
+                    isInvalid={Boolean(errors.age)}
+                    type="number"
+                    {...field}
+                  />
+                )}
+              />
+            </label>
+            <label>
+              lastName:
+              <Controller
+                control={control}
+                name="lastName"
+                render={({ field }) => (
+                  <Input type="number" {...field} />
+                )}
+              />
+            </label>
+            <Stack gap={4} pt={8}>
+              <Button variant="solid" type="submit">
+                Submit
+              </Button>
+            </Stack>
+          </Box>
+          <ModalFooter>
+            <Button variant="outline" type="button" onClick={onClose}>
+              Отмена
+            </Button>
+          </ModalFooter>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

src/components/stars.tsx

@@ -2,10 +2,11 @@ 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 { useDispatch, useSelector } from 'react-redux'
 
 import { stars } from '../__data__/context'
 import { useUsers } from '../hooks'
+import { setStars } from '../__data__/actions/stars'
 
 
 const useStars = (currentRated, starsCount) => {
@@ -29,7 +30,7 @@ export const Stars = ({
   userId,
 }: {
   count: number
-  userId: 'some-user-id' | '2'
+  userId: string
   // rated: number
   // setRated: (rate: number) => void
 }) => {
@@ -37,21 +38,23 @@ export const Stars = ({
   //   stars,
   //   setRated: starsSetRated
   // } = useStars(rated, count)
-  const { setUserRate } = useUsers(state => state[userId].rated)
+  // const { setUserRate } = useUsers(state => state[userId].rated)
   const rate = useSelector((store) => store.stars.friends[userId]) ?? 0
+  const dispatch = useDispatch()
 
-  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,
-      }),
-    })
+  const handleStarsClick = (value: number) => {
+    dispatch(setStars({ id: userId, value }))
+    // setUserRate(userId, stars)
+    // fetch(getConfigValue('dry-wash.api.url') + '/user-rate', {
+    //   method: 'POST',
+    //   headers: {
+    //     'Content-Type': 'application/json',
+    //   },
+    //   body: JSON.stringify({
+    //     userId,
+    //     stars,
+    //   }),
+    // })
   }
 
   return (

src/pages/friends.tsx

@@ -5,12 +5,14 @@ import { useDispatch } from 'react-redux'
 import { Profile } from '../components'
 import { users } from '../__data__/users'
 import { setStars } from '../__data__/actions/stars'
+import { ProfileEditModal } from '../components/profileEdit'
 
 export const Friends = memo(() => {
   const [isLoading, setIsLoading] = useState(false)
   const [data, setData] = useState(null)
   const [error, setError] = useState(null)
   const dispatch = useDispatch()
+  const [showModal, setShowModal] = useState(false)
 
   useEffect(() => {
     const getUser = async () => {
@@ -24,7 +26,7 @@ export const Friends = memo(() => {
           setData(data)
 
           Object.keys(data).forEach(userId => {
-            dispatch(setStars(userId, data[userId].rated))
+            dispatch(setStars({ id: userId, value: data[userId].rated }))
           })
         } else {
           throw 'Что-то пошло не так'
@@ -43,10 +45,13 @@ export const Friends = memo(() => {
   if(!data || isLoading) return <h1>loading...</h1>
   
   return (
+    <>
+      {showModal && <ProfileEditModal onClose={() => setShowModal(false)} />}
       <HStack>
-      <Profile user={data['some-user-id']} />
-      <Profile user={data['2']} />
+        <Profile onOpenModal={() => setShowModal(true)} user={data['some-user-id']} />
+        <Profile onOpenModal={() => setShowModal(true)} user={data['2']} />
       </HStack>
+    </>
   )
 })
 

stubs/api/index.js

@@ -17,7 +17,6 @@ timer.fast = timer(300)
 // router.use(timer.fast)
 
 router.post('/user-rate', (req, res) => {
-    console.log(req.body)
     res.status(500).send({ ok: false })
 })
 

stubs/json/users/success.json

@@ -4,6 +4,7 @@
     "some-user-id": {
       "id": "some-user-id",
       "name": "alexandr",
+      "age": 38,
       "surname": null,
       "email": null,
       "rated": 4,
@@ -24,6 +25,7 @@
       "name": "not alexandr",
       "surname": null,
       "email": null,
+      "age": 24,
       "rated": 5,
       "avatar": "https://www.gravatar.com/avatar/6e?d=robohash",
       "friends": [