04.03.2023 14:20

js/Project/project/src/components/feed/index.js

@@ -20,7 +20,7 @@ const Item = styled(Paper)(({ theme }) => ({
     width: 500
 }))
 
-function Feed({ posts = [] }) {
+function Feed({ feed = [] }) {
     return (
         <Box sx={{
             width: '500',
@@ -29,7 +29,7 @@ function Feed({ posts = [] }) {
         }}>
             {/* spacing - это отступ между карточками в ленте */}
             <Stack spacing={1}>
-                {posts.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
+                {feed.map(post => <Item key={post._id}><Card postData={post} /></Item>)}
             </Stack>
         </Box >
     )
@@ -37,4 +37,7 @@ function Feed({ posts = [] }) {
 
 store.dispatch(actionfindPosts())
 
-export const ReduxFeed = connect(state => ({ posts: state.PostsFind.payload }))(Feed)
+// export const ReduxFeed = connect(state => ({ posts: state.PostsFind.payload }))(Feed)
+
+// 4 изменение 
+export const ReduxFeed = connect(state => ({ feed: state?.promise?.PostsFind?.payload }))(Feed)

js/Project/project/src/components/post/index.js

@@ -23,5 +23,7 @@ function Comments({ post = {}, loadPost }) {
     )
 }
 
+// export const CComments = connect(state => ({ post: state?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
 
-export const CComments = connect(state => ({ post: state?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
+// 3 изменение
+export const CComments = connect(state => ({ post: state?.promise?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)

js/Project/project/src/components/redux/index.js

@@ -1,19 +1,23 @@
 import { createStore, combineRedusers, applyMiddleware } from 'redux';
 import thunk from "redux-thunk";
 
-import { promiseReducer, localStoredReducer } from "./redusers";
+import { promiseReducer, localStoredReducer, totalReducer, authReducer } from "./reducers";
 
 import { actionPending, actionFulfilled, actionRejected, actionPromise } from "./action";
 
 // объект со всеми редьюсерами
 const reducers = {
     promise: localStoredReducer(promiseReducer, 'promise'),
-    // auth: localStoredReducer(authReducer, 'auth'),
+    auth: localStoredReducer(authReducer, 'auth'),
     // cart: localStoredReducer(cartReducer, 'cart'),
 }
 
 // const totalReducer = combineRedusers(reducers)
 
 // создаем store для редьюсера
-export const store = createStore(promiseReducer, applyMiddleware(thunk))
+// export const store = createStore(promiseReducer, applyMiddleware(thunk))
+// store.subscribe(() => console.log(store.getState()))
+
+// 2 изменение
+export const store = createStore(totalReducer, applyMiddleware(thunk))
 store.subscribe(() => console.log(store.getState()))

js/Project/project/src/components/redux/reducers.js

@@ -0,0 +1,74 @@
+// promiseReducer
+import { combineReducers } from "redux"
+
+export function promiseReducer(state = {}, { type, status, payload, error, nameOfPromise }) {
+    if (type === 'PROMISE') {
+        return {
+            ...state,
+            [nameOfPromise]: { status, payload, error }
+        }
+    }
+    return state
+}
+
+// localStoredReducer
+export function localStoredReducer(originalReducer, localStorageKey) {
+    function wrapper(state, action) {
+        if (!state) {
+            try {
+                return JSON.parse(localStorage[localStorageKey])
+            }
+            catch (error) {
+
+            }
+        }
+        const newState = originalReducer(state, action)
+        localStorage[localStorageKey] = JSON.stringify(newState)
+
+        return newState
+    }
+
+    return wrapper
+}
+
+// authReducer
+// раскодируем JWT-токен
+const jwtDecode = function (token) {
+    try {
+        let parseData = token.split('.')[1]
+        return JSON.parse(atob(parseData))
+    }
+    catch (e) {
+        return undefined
+    }
+}
+
+export function authReducer(state = {}, { type, token }) {
+    if (type === 'AUTH_LOGIN') {
+
+        let payload = jwtDecode(token)
+
+        return state = {
+            token,
+            payload
+        }
+    }
+
+    if (type === 'AUTH_LOGOUT') {
+        localStorage.removeItem('authToken')
+        return {}
+    }
+
+    return state
+}
+
+
+// 1 изменение 
+export const reducers = {
+    promise: localStoredReducer(promiseReducer, 'promise'),
+    auth: localStoredReducer(authReducer, 'auth'),
+    // cart: localStoredReducer(cartReducer, 'cart'),
+}
+
+export const totalReducer = combineReducers(reducers)
+

js/Project/project/src/components/redux/redusers.js

@@ -1,32 +0,0 @@
-// promiseReducer
-export function promiseReducer(state = {}, { type, status, payload, error, nameOfPromise }) {
-    if (type === 'PROMISE') {
-        return {
-            ...state,
-            [nameOfPromise]: { status, payload, error }
-        }
-    }
-    return state
-}
-
-// localStoredReducer
-export function localStoredReducer(originalReducer, localStorageKey) {
-    function wrapper(state, action) {
-        if (!state) {
-            try {
-                return JSON.parse(localStorage[localStorageKey])
-            }
-            catch (error) {
-
-            }
-        }
-        const newState = originalReducer(state, action)
-        localStorage[localStorageKey] = JSON.stringify(newState)
-
-        return newState
-    }
-
-    return wrapper
-}
-
-

js/Project/project/src/components/user/index.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+// import { useParams } from 'react-router';
 import { connect } from 'react-redux';
 
 import Box from '@mui/material/Box';
@@ -62,5 +63,5 @@ function User({ user = {}, loadUser }) {
     );
 }
 
-export const CUser = connect(state => ({ user: state?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)
+export const CUser = connect(state => ({ user: state?.promise?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)