Merge pull request #32 from xyzith/feature/reducerFix

Feature/reducer fix

src/App.jsx

@@ -12,7 +12,7 @@ import Forget from "./containers/AccountPortal/forget";
 import EmailVerifyPage from "./containers/EmailVerifyPage";
 import Loading from "./containers/Loading";
 import PostPage from "./containers/PostPage";
-import { fetchUserState } from './slices';
+import { fetchUserState } from './features/actions';
 import { toast, ToastContainer } from 'react-toastify';
 import "react-toastify/dist/ReactToastify.css";
 import 'sweetalert2/src/sweetalert2.scss';

src/containers/AccountPortal/login.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import { setLoading } from '../../slices';
+import { setLoading } from '../../features/actions';
 import React from 'react';
 import UserApi from '../../utils/UserAPI';
 import { sleep } from '../../utils/commonUtils';
@@ -48,13 +48,13 @@ const Login = () => {
         }
     };
 
-    
+
     useEffect(() => {
         (async () => {
             await UserApi.waitUntilLoaded();
             setLoaded(true);
-        })()
-    })
+        })();
+    });
 
     useEffect(() =>{
         if (loginStatus) {
@@ -66,31 +66,31 @@ const Login = () => {
 
     return (
         <div className="page" ref={pageRef}>
-                {loaded && <div ref={unloginElementContainer} className="login-page unlogin">
+            {loaded && <div ref={unloginElementContainer} className="login-page unlogin">
                 <TransitionTriangle active={loginSuccess} text="登入成功" redirectTo='/' />
-                    <h1><b>登入</b></h1>
-                    <span>
-                        <input
-                            type="text"
-                            name="username"
-                            placeholder="使用者名稱"
-                            value={username}
-                            autoComplete='off'
-                            onChange={(e) => setUsername(e.target.value)}
-                        />
-                    </span>
-                    <span>
-                        <input
-                            type="password"
-                            name="password"
-                            placeholder="密碼"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                        />
-                    </span>
-                    <button onClick={handleSubmit}>登入</button>
-                    {error && <p className="error">{error}</p>}
-                </div>}
+                <h1><b>登入</b></h1>
+                <span>
+                    <input
+                        type="text"
+                        name="username"
+                        placeholder="使用者名稱"
+                        value={username}
+                        autoComplete='off'
+                        onChange={(e) => setUsername(e.target.value)}
+                    />
+                </span>
+                <span>
+                    <input
+                        type="password"
+                        name="password"
+                        placeholder="密碼"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+                </span>
+                <button onClick={handleSubmit}>登入</button>
+                {error && <p className="error">{error}</p>}
+            </div>}
         </div>
     );
 };

src/containers/ArticlePage/CommentContainer.jsx

@@ -6,7 +6,7 @@ import ReactionButtons from './ReactionButtons';
 import { toast, Bounce } from 'react-toastify';
 import ReplyArea from './ReplyArea';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchReplies } from '../../slices';
+import { fetchReplies } from '../../features/actions';
 import { replyTagCheck } from '../../utils/commonUtils';
 import UserAPI from '../../utils/UserAPI';
 import LoadMore from './LoadMore';
@@ -95,7 +95,7 @@ const CommentContainer = ({ articleId, commentData, level, parentReply = null, p
             await comment.bp(articleId, id);
         }
         catch (e) {
-            console.error(e)
+            console.error(e);
             setLock(false);
             return toast.error('此事件交互失敗', {
                 position: "bottom-right",
@@ -126,14 +126,14 @@ const CommentContainer = ({ articleId, commentData, level, parentReply = null, p
     const toggleReply = () => {
         if (level == 1) {
             // console.log(parentReply)
-            const [text, setText] = parentReply
+            const [text, setText] = parentReply;
             if (replyTagCheck(text)) {
-                var msg = text.split(" ")
-                msg.shift()
+                var msg = text.split(" ");
+                msg.shift();
                 // console.log(msg)
-                setText(msg.join(" "))
+                setText(msg.join(" "));
             }
-            setText(`@${by} ${text}`)
+            setText(`@${by} ${text}`);
             return;
         }
         setReplyEnabled(!replyEnabled);

src/containers/ArticlePage/LoadMore.jsx

@@ -1,18 +1,18 @@
 import { useDispatch } from "react-redux";
-import { fetchReplies } from "../../slices";
+import { fetchReplies } from "../../features/actions";
 
 
-const LoadMore = ({articleId = 0, level, parentId, commentList})=>{
+const LoadMore = ({ articleId = 0, level, parentId, commentList })=>{
     var dispatch = useDispatch();
 
     var style = {
         "--level": level,
     };
 
     var loadMoreHandler = ()=>{
-        dispatch(fetchReplies({ articleId, commentId: parentId, lastId: commentList[commentList.length - 1].id}));
-    }
-    
+        dispatch(fetchReplies({ articleId, commentId: parentId, lastId: commentList[commentList.length - 1].id }));
+    };
+
     return (
         <div style={style} className="reply-area">
             <label>
@@ -21,6 +21,6 @@ const LoadMore = ({articleId = 0, level, parentId, commentList})=>{
             </label>
         </div>
     );
-}
+};
 
-export default LoadMore;
+export default LoadMore;

src/containers/ArticlePage/ReplyArea.jsx

@@ -2,13 +2,13 @@ import { useState } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchComments, fetchReplies } from '../../slices';
+import { fetchComments, fetchReplies } from '../../features/actions';
 import { toast, Bounce } from 'react-toastify';
 import './ReplyArea.scss';
 import { article, comment } from '../../utils/ArticleAPI';
 
 
-const ReplyArea = ({ level, parentId, textState = useState('')}) => {
+const ReplyArea = ({ level, parentId, textState = useState('') }) => {
     if (level > 1) {
         level = 1;
     }

src/containers/ArticlePage/index.jsx

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import ArticleContainer from './ArticleContainer';
 import CommentContainer from './CommentContainer';
 
-import { fetchArticle, fetchComments, clearComment } from '../../slices';
+import { fetchArticle, fetchComments, clearComment } from '../../features/actions';
 import './ArticlePage.scss';
 
 const ArticlePage = () => {

src/containers/IndexPage/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { fetchArticleList } from '../../slices';
+import { fetchArticleList } from '../../features/actions';
 import IdeaShow from './IdeaShow';
 import IndexContentContainer from './IndexContentContainer';
 

src/features/actions.js

@@ -0,0 +1,8 @@
+export * from './articleListSlice';
+export * from './articleSlice';
+export * from './commentsSlice';
+export * from './loadingSlice';
+export * from './userStateSlice';
+
+
+export default {};

src/slices/articleList.js → src/features/articleListSlice.js

@@ -3,7 +3,7 @@ import { article } from '../utils/ArticleAPI';
 
 const initialState = [];
 
-export const fetchArticleList = createAsyncThunk('articleList/fetchArticleList', async (sortBy, lastId) => {
+export const fetchArticleList = createAsyncThunk('articleList/fetchArticleList', async ({ sortBy, lastId } = {}) => {
     var lastId = 0;
     const response = await article.getArticleList(sortBy, lastId);
     return response?.data?.articles;

src/features/index.js

@@ -0,0 +1,3 @@
+export * from './actions';
+
+export default {};

src/features/reducers.js

@@ -0,0 +1,13 @@
+import articleList from './articleListSlice';
+import article from './articleSlice';
+import comments from './commentsSlice';
+import loading from './loadingSlice';
+import userState from './userStateSlice';
+
+export default {
+    articleList,
+    article,
+    comments,
+    loading,
+    userState,
+};

src/store.js

@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import reducers from './slices';
+import reducers from './features/reducers';
 
 export default configureStore({
     reducer: reducers,