Добавил редюсеры

2023-12-15 19:53:17 +04:00 · 2023-12-15 19:53:17 +04:00 · a0b391de56
commit a0b391de56
parent 3b8c199a38
15 changed files with 276 additions and 102 deletions
--- a/Lab5/data.json
+++ b/Lab5/data.json
@ -7,50 +7,56 @@
      "id": 1
    },
    {
-      "handle": "vk1d",
+      "handle": "vk1d2004",
      "email": "vk1d@mail.ru",
      "password": "1234",
-      "id": 3
-    },
-    {
-      "email": "av@gmail.com",
-      "handle": "bor",
-      "password": "123",
-      "id": 4
+      "id": 2
    }
  ],
  "groups": [
    {
-      "name": "asd",
+      "name": "group",
      "memberCount": "2",
-      "userId": 3,
-      "id": 1
+      "userId": 1,
+      "id": 3
    },
    {
-      "name": "wefhhce9 ",
-      "memberCount": "-1",
-      "userId": 4,
-      "id": 2
+      "name": "vk1dgroup",
+      "memberCount": "2",
+      "userId": 2,
+      "id": 4
    }
  ],
  "members": [
    {
-      "name": "dsa",
+      "name": "oleg",
      "handle": "-",
-      "groupId": 1,
-      "id": 1
+      "groupId": 3,
+      "id": 4
    },
    {
-      "name": "casd",
+      "name": "vasya",
      "handle": "-",
-      "groupId": 1,
-      "id": 2
+      "groupId": 3,
+      "id": 5
    },
    {
-      "name": "nigers",
+      "name": "tonya",
      "handle": "-",
-      "groupId": 2,
-      "id": 3
+      "groupId": 3,
+      "id": 6
+    },
+    {
+      "name": "lexa",
+      "handle": "-",
+      "groupId": 4,
+      "id": 7
+    },
+    {
+      "name": "niga",
+      "handle": "-",
+      "groupId": 4,
+      "id": 8
    }
  ]
 }
--- a/Lab5/src/components/navigation/components/ExitComponent/ExitComponent.jsx
+++ b/Lab5/src/components/navigation/components/ExitComponent/ExitComponent.jsx
@ -1,13 +1,11 @@
 import './ExitComponent.css';
 import { Link } from 'react-router-dom';
-import { useContext } from 'react';
-import { UserContext } from '../../../../providers/UserProvider.jsx';
+import useUser from '../../../../providers/hooks/UserHook.jsx';

 const ExitComponent = () => {
-  const { setUser } = useContext(UserContext);
+  const { userLogout } = useUser();
  const makeExit = () => {
-    setUser(null);
-    localStorage.removeItem('user');
+    userLogout();
  };
  return (
    <Link to = '/' onClick = {makeExit}>
--- a/Lab5/src/pages/AddGroupPage/AddGroupPage.jsx
+++ b/Lab5/src/pages/AddGroupPage/AddGroupPage.jsx
@ -2,16 +2,16 @@ import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
-import { AddGroupContext } from '../../providers/AddGroupProvider.jsx';
 import AddGroupApiService from './service/AddGroupApiService/AddGroupApiService.jsx';
 import { UserContext } from '../../providers/UserProvider.jsx';
-import { CurrentGroupContext } from '../../providers/CurrentGroupProvider.jsx';
+import useGroup from '../../providers/hooks/CurrentGroupHook.jsx';
+import useSteps from '../../providers/hooks/AddGroupHook.jsx';

 const AddGroupPage = () => {
-  const { setSteps } = useContext(AddGroupContext);
+  const { stepsChange } = useSteps();
  const { user } = useContext(UserContext);
  console.log(user);
-  const { setGroup } = useContext(CurrentGroupContext);
+  const { groupChange } = useGroup();
  const { register, handleSubmit, formState: { errors } } = useForm();
  console.log(errors);
  const navigate = useNavigate();
@ -25,13 +25,7 @@ const AddGroupPage = () => {
      userId: user.id,
    };
  };
-  return (
-    <main>
-    <div className="container-fluid">
-      <div className="row">
-        <div className="add-group">
-          <div className="form-group col-7">
-            <form className = "form-horizontal" onSubmit = {handleSubmit(async (data) => {
+  const makeSubmit = async (data) => {
    if (isNumeric(data.memberCount) !== true) {
      alert('кол-во участников должно быть числом');
      return;
@ -39,12 +33,19 @@ const AddGroupPage = () => {
    // eslint-disable-next-line radix
    const val = Number.parseInt(data.memberCount);
    console.log(val);
-              setSteps(val);
-              localStorage.setItem('steps', val);
+    stepsChange(val);
    const curGroup = await AddGroupApiService.create(getNewGroup(data));
-              setGroup(curGroup);
-              await localStorage.setItem('group', JSON.stringify(curGroup));
+    groupChange(curGroup);
    navigate('/addmember');
+  };
+  return (
+    <main>
+    <div className="container-fluid">
+      <div className="row">
+        <div className="add-group">
+          <div className="form-group col-7">
+            <form className = "form-horizontal" onSubmit = {handleSubmit(async (data) => {
+              await makeSubmit(data);
            })}>
              <label>название</label>
              <input {...register('name', { required: 'Это поле обязательно' })} className="form-control " type="handle" placeholder="название"></input>
--- a/Lab5/src/pages/AddMember/AddMember.jsx
+++ b/Lab5/src/pages/AddMember/AddMember.jsx
@ -5,10 +5,11 @@ import { useForm } from 'react-hook-form';
 import { AddGroupContext } from '../../providers/AddGroupProvider.jsx';
 import AddMemberApiService from './service/AddMemberApiService/AddMemberApiService.jsx';
 import { CurrentGroupContext } from '../../providers/CurrentGroupProvider.jsx';
+import useSteps from '../../providers/hooks/AddGroupHook.jsx';

 const AddMember = () => {
-  const { steps, setSteps } = useContext(AddGroupContext);
-  localStorage.setItem('steps', steps);
+  const { steps } = useContext(AddGroupContext);
+  const { stepsChange } = useSteps();
  const { group } = useContext(CurrentGroupContext);
  const {
    register, reset, handleSubmit, formState: { errors },
@ -27,16 +28,10 @@ const AddMember = () => {
      groupId: group.id,
    };
  };
-  return (
-<main>
-    <div className="container-fluid">
-      <div className="row">
-        <div className="add-group">
-          <div className="form-group col-7">
-            <form className = 'form-horizontal' onSubmit = {handleSubmit(async (data) => {
-              AddMemberApiService.create(getNewMember(data));
+  const onSubmit = async (data) => {
+    await AddMemberApiService.create(getNewMember(data));
    const cursteps = steps - 1;
-              setSteps(cursteps);
+    stepsChange(cursteps);
    if (cursteps !== 0) {
      console.log(steps);
      navigate('/addmember');
@ -45,6 +40,15 @@ const AddMember = () => {
      navigate('/');
    }
    reset();
+  };
+  return (
+<main>
+    <div className="container-fluid">
+      <div className="row">
+        <div className="add-group">
+          <div className="form-group col-7">
+            <form className = 'form-horizontal' onSubmit = {handleSubmit(async (data) => {
+              await onSubmit(data);
            })}>
              <label>имя участника </label>
              <input {...register('name', { required: 'Это поле обязательно' })} className="form-control " type="handle" placeholder="имя участника"></input>
--- a/Lab5/src/pages/LoginPage/Components/login/login.jsx
+++ b/Lab5/src/pages/LoginPage/Components/login/login.jsx
@ -2,23 +2,15 @@ import './login.css';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { useContext } from 'react';
 import LoginApiService from '../service/loginapiservice';
-import { UserContext } from '../../../../providers/UserProvider.jsx';
+import useUser from '../../../../providers/hooks/UserHook.jsx';

 const Login = () => {
-  const { setUser } = useContext(UserContext);
+  const { userLogin } = useUser();
  const { register, handleSubmit, formState: { errors } } = useForm();
  console.log(errors);
  const navigate = useNavigate();
-  return (
-<main className="d-flex align-items-center">
-    <div className="register-panel container-fluid p-0 m-0 ">
-      <div className="container-fluid d-flex align-items-center">
-
-        <div className="col-md-4 offset-md-4 col-12">
-          <div className="form-container mt-auto">
-            <form className="form-horizontal" onSubmit = {handleSubmit(async (data) => {
+  const makeSubmit = async (data) => {
    const res1 = await LoginApiService.getByHandle(data.handle);
    if (res1.length === 0) {
      alert('Пользователся с таким хэндлом не существует');
@ -28,9 +20,18 @@ const Login = () => {
      alert('Введен неверный пароль');
      return;
    }
-              setUser(res1[0]);
-              localStorage.setItem('user', JSON.stringify(res1[0]));
+    userLogin(res1[0]);
    navigate('/');
+  };
+  return (
+<main className="d-flex align-items-center">
+    <div className="register-panel container-fluid p-0 m-0 ">
+      <div className="container-fluid d-flex align-items-center">
+
+        <div className="col-md-4 offset-md-4 col-12">
+          <div className="form-container mt-auto">
+            <form className="form-horizontal" onSubmit = {handleSubmit(async (data) => {
+              await makeSubmit(data);
            })}>
              <div className="form-group">
                <label>хэндл</label>
--- a/Lab5/src/pages/RegistrationPage/components/reg/reg.jsx
+++ b/Lab5/src/pages/RegistrationPage/components/reg/reg.jsx
@ -2,15 +2,14 @@ import './reg.css';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { useContext } from 'react';
 import RegApiService from '../service/regapiservice';
-import { UserContext } from '../../../../providers/UserProvider.jsx';
+import useUser from '../../../../providers/hooks/UserHook.jsx';

 const Reg = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  console.log(errors);
  const navigate = useNavigate();
-  const { setUser } = useContext(UserContext);
+  const { userLogin } = useUser();
  const getNewUser = (formData) => {
    const emailt = formData.email;
    const handlet = formData.handle;
@ -21,14 +20,7 @@ const Reg = () => {
      password: passwordt,
    };
  };
-  return (
-<main className = "d-flex align-items-center">
-<div className="register-panel container-fluid ">
-  <div className="container-fluid d-flex align-items-center">
-
-      <div className="col-md-4 offset-md-4 col-12">
-        <div className="form-container">
-          <form className="form-horizontal" onSubmit = {handleSubmit(async (data) => {
+  const makeSubmit = async (data) => {
    console.log(data);
    const res1 = await RegApiService.getByHandle(data.handle);
    if (res1.length !== 0) {
@ -42,9 +34,18 @@ const Reg = () => {
    }
    const newUser = getNewUser(data);
    const curUser = await RegApiService.create(newUser);
-            setUser(curUser);
-            localStorage.setItem('user', JSON.stringify(curUser));
+    userLogin(curUser);
    navigate('/registersuccess');
+  };
+  return (
+<main className = "d-flex align-items-center">
+<div className="register-panel container-fluid ">
+  <div className="container-fluid d-flex align-items-center">
+
+      <div className="col-md-4 offset-md-4 col-12">
+        <div className="form-container">
+          <form className="form-horizontal" onSubmit = {handleSubmit(async (data) => {
+            await makeSubmit(data);
          })}>
            <div className="form-group">
              <label>хэндл</label>
--- a/Lab5/src/providers/AddGroupProvider.jsx
+++ b/Lab5/src/providers/AddGroupProvider.jsx
@ -1,12 +1,17 @@
-import { createContext, useState } from 'react';
+import { createContext, useReducer, useEffect } from 'react';
+import { loadSteps, saveSteps, stepsReducer } from './reducers/AddGroupReducer.jsx';

 export const AddGroupContext = createContext(null);

 // eslint-disable-next-line react/prop-types
 export const AddGroupProvider = ({ children }) => {
-  const [steps, setSteps] = useState(localStorage.getItem('steps') || 0);
+  const [steps, dispatch] = useReducer(stepsReducer, null, loadSteps);

-  return <AddGroupContext.Provider value = {{ steps, setSteps }}>
+  useEffect(() => {
+    saveSteps(steps || null);
+  }, [steps]);
+
+  return <AddGroupContext.Provider value = {{ steps, dispatch }}>
    {children}
  </AddGroupContext.Provider>;
 };
--- a/Lab5/src/providers/CurrentGroupProvider.jsx
+++ b/Lab5/src/providers/CurrentGroupProvider.jsx
@ -1,12 +1,17 @@
-import { createContext, useState } from 'react';
+import { createContext, useReducer, useEffect } from 'react';
+import { groupReducer, loadGroup, saveGroup } from './reducers/CurrentGroupReducer.jsx';

 export const CurrentGroupContext = createContext(null);

 // eslint-disable-next-line react/prop-types
 export const CurrentGroupProvider = ({ children }) => {
-  const [group, setGroup] = useState(JSON.parse(localStorage.getItem('group')) || null);
+  const [group, dispatch] = useReducer(groupReducer, null, loadGroup);

-  return <CurrentGroupContext.Provider value = {{ group, setGroup }}>
+  useEffect(() => {
+    saveGroup(group || null);
+  }, [group]);
+
+  return <CurrentGroupContext.Provider value = {{ group, dispatch }}>
    {children}
  </CurrentGroupContext.Provider>;
 };
--- a/Lab5/src/providers/UserProvider.jsx
+++ b/Lab5/src/providers/UserProvider.jsx
@ -1,11 +1,17 @@
-import { createContext, useState } from 'react';
+import { createContext, useReducer, useEffect } from 'react';
+import { loadUser, saveUser, userReducer } from './reducers/UserReduser.jsx';

 export const UserContext = createContext(null);

 // eslint-disable-next-line react/prop-types
 export const UserProvider = ({ children }) => {
-  const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')) || null);
-  return <UserContext.Provider value = {{ user, setUser }}>
+  const [user, dispatch] = useReducer(userReducer, null, loadUser);
+
+  useEffect(() => {
+    saveUser(user || null);
+  }, [user]);
+
+  return <UserContext.Provider value = {{ user, dispatch }}>
    {children}
  </UserContext.Provider>;
 };
--- a/Lab5/src/providers/hooks/AddGroupHook.jsx
+++ b/Lab5/src/providers/hooks/AddGroupHook.jsx
@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { AddGroupContext } from '../AddGroupProvider.jsx';
+import { stepsChange } from '../reducers/AddGroupReducer.jsx';
+
+const useSteps = () => {
+  const { dispatch } = useContext(AddGroupContext);
+
+  return {
+    stepsChange: (steps) => dispatch(stepsChange(steps)),
+  };
+};
+
+export default useSteps;
--- a/Lab5/src/providers/hooks/CurrentGroupHook.jsx
+++ b/Lab5/src/providers/hooks/CurrentGroupHook.jsx
@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { CurrentGroupContext } from '../CurrentGroupProvider.jsx';
+import { groupChange } from '../reducers/CurrentGroupReducer.jsx';
+
+const useGroup = () => {
+  const { dispatch } = useContext(CurrentGroupContext);
+
+  return {
+    groupChange: (group) => dispatch(groupChange(group)),
+  };
+};
+
+export default useGroup;
--- a/Lab5/src/providers/hooks/UserHook.jsx
+++ b/Lab5/src/providers/hooks/UserHook.jsx
@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { UserContext } from '../UserProvider.jsx';
+import { userLogout, userLogin } from '../reducers/UserReduser.jsx';
+
+const useUser = () => {
+  const { dispatch } = useContext(UserContext);
+
+  return {
+    userLogout: () => dispatch(userLogout()),
+    userLogin: (user) => dispatch(userLogin(user)),
+  };
+};
+
+export default useUser;
--- a/Lab5/src/providers/reducers/AddGroupReducer.jsx
+++ b/Lab5/src/providers/reducers/AddGroupReducer.jsx
@ -0,0 +1,34 @@
+const STEPS_KEY = 'steps';
+const STEPS_CHANGE = 'steps/change';
+
+export const saveSteps = (steps) => {
+  localStorage.setItem('steps', JSON.stringify(steps));
+};
+
+export const loadSteps = (initialValue = []) => {
+  const stepsData = localStorage.getItem(STEPS_KEY);
+  if (stepsData) {
+    return JSON.parse(stepsData);
+  }
+  return initialValue;
+};
+
+export const stepsReducer = (prevSteps, action) => {
+  console.log(action);
+  const { steps } = action;
+  switch (action.type) {
+    case STEPS_CHANGE: {
+      return steps;
+    }
+    default: {
+      throw Error(`Unknown action: ${action.type}`);
+    }
+  }
+};
+
+export const stepsChange = (steps) => {
+  console.log(steps);
+  return ({
+    type: STEPS_CHANGE, steps,
+  });
+};
--- a/Lab5/src/providers/reducers/CurrentGroupReducer.jsx
+++ b/Lab5/src/providers/reducers/CurrentGroupReducer.jsx
@ -0,0 +1,34 @@
+const GROUP_KEY = 'group';
+const GROUP_CHANGE = 'group/change';
+
+export const saveGroup = (group) => {
+  localStorage.setItem('group', JSON.stringify(group));
+};
+
+export const loadGroup = (initialValue = []) => {
+  const groupData = localStorage.getItem(GROUP_KEY);
+  if (groupData) {
+    return JSON.parse(groupData);
+  }
+  return initialValue;
+};
+
+export const groupReducer = (prevGroup, action) => {
+  const { group } = action;
+  console.log(group);
+  switch (action.type) {
+    case GROUP_CHANGE: {
+      return group;
+    }
+    default: {
+      throw Error(`Unknown action: ${action.type}`);
+    }
+  }
+};
+
+export const groupChange = (group) => {
+  console.log(group);
+  return ({
+    type: GROUP_CHANGE, group,
+  });
+};
--- a/Lab5/src/providers/reducers/UserReduser.jsx
+++ b/Lab5/src/providers/reducers/UserReduser.jsx
@ -0,0 +1,39 @@
+const USER_KEY = 'user';
+const USER_LOGIN = 'user/login';
+const USER_LOGOUT = 'user/logout';
+
+export const saveUser = (user) => {
+  localStorage.setItem('user', JSON.stringify(user));
+};
+
+export const loadUser = (initialValue = []) => {
+  const userData = localStorage.getItem(USER_KEY);
+  if (userData) {
+    return JSON.parse(userData);
+  }
+  return initialValue;
+};
+
+export const userReducer = (prevUser, action) => {
+  console.log(action);
+  const { user } = action;
+  switch (action.type) {
+    case USER_LOGOUT: {
+      return null;
+    }
+    case USER_LOGIN: {
+      return user;
+    }
+    default: {
+      throw Error(`Unknown action: ${action.type}`);
+    }
+  }
+};
+
+export const userLogout = () => ({
+  type: USER_LOGOUT,
+});
+
+export const userLogin = (user) => ({
+  type: USER_LOGIN, user,
+});