From d545e3e65e4a4351b90f8da7f59d526496d643cb Mon Sep 17 00:00:00 2001
From: Nix13 <nix1304@gmail.com>
Date: Tue, 13 Oct 2020 14:37:25 +0300
Subject: [PATCH] redux ducks

---
 src/pages/ActivateAccount.tsx                 |  6 ++--
 src/pages/AdminPanel/News/APModifyPost.tsx    |  5 +--
 src/pages/AdminPanel/Users/ModifyUser.tsx     |  4 +--
 src/pages/App/App.tsx                         |  6 ++--
 src/pages/Comments/Comments.tsx               | 14 ++++----
 src/pages/Modals/LoginModal.tsx               |  4 ++-
 src/pages/Modals/RegisterModal.tsx            |  3 +-
 src/pages/Navbar/Navbar.tsx                   |  3 +-
 src/pages/Novel/Novel.tsx                     |  4 +--
 src/pages/User/Settings/Appearance.tsx        | 17 +++++++--
 src/pages/User/Settings/Settings.tsx          |  4 +--
 src/pages/User/User.tsx                       |  5 ++-
 src/store/actionTypes.ts                      |  9 -----
 src/store/actions.ts                          | 27 --------------
 src/store/{reducers => ducks}/currentUser.ts  | 26 +++++++++-----
 src/store/ducks/index.ts                      |  6 ++++
 src/store/ducks/modal.ts                      | 36 +++++++++++++++++++
 .../{reducers => ducks}/notifications.ts      | 24 +++++++++----
 src/store/reducers/modal.ts                   | 21 -----------
 src/store/reducers/reducers.ts                |  6 ----
 src/store/store.ts                            |  2 +-
 src/ui/ConfirmPopout/ConfirmPopout.tsx        |  4 +--
 src/ui/Modal/Modal.tsx                        |  2 +-
 23 files changed, 124 insertions(+), 114 deletions(-)
 delete mode 100644 src/store/actionTypes.ts
 delete mode 100644 src/store/actions.ts
 rename src/store/{reducers => ducks}/currentUser.ts (55%)
 create mode 100644 src/store/ducks/index.ts
 create mode 100644 src/store/ducks/modal.ts
 rename src/store/{reducers => ducks}/notifications.ts (50%)
 delete mode 100644 src/store/reducers/modal.ts
 delete mode 100644 src/store/reducers/reducers.ts

diff --git a/src/pages/ActivateAccount.tsx b/src/pages/ActivateAccount.tsx
index 621e2ac..06791b4 100644
--- a/src/pages/ActivateAccount.tsx
+++ b/src/pages/ActivateAccount.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import {activateAccount} from "../api/users";
 import {connect} from "react-redux";
-import {addNotification} from "../store/actions";
 import errors from "../api/errors";
 import Loading from "../ui/Loading";
+import {addNotification} from "../store/ducks/notifications";
 
 type Props = {
     history: { push: (path: string) => void }
     match: { params: { token: string } }
-    addNotification: (notification: React.ReactNode) => void
+    addNotification: AddNotification
 };
 
 type State = {
@@ -64,4 +64,4 @@ export default connect(null,
     dispatch => ({
         addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification))
     })
-)(ActivateAccount);
\ No newline at end of file
+)(ActivateAccount);
diff --git a/src/pages/AdminPanel/News/APModifyPost.tsx b/src/pages/AdminPanel/News/APModifyPost.tsx
index 6174ff1..aa2c66f 100644
--- a/src/pages/AdminPanel/News/APModifyPost.tsx
+++ b/src/pages/AdminPanel/News/APModifyPost.tsx
@@ -11,9 +11,10 @@ import BBEditor from "../../../ui/BBEditor/BBEditor";
 import parser from 'bbcode-to-react';
 import Title from "../../../ui/Title/Title";
 import {connect} from "react-redux";
-import {addNotification, setModal} from "../../../store/actions";
 import ConfirmPopout from "../../../ui/ConfirmPopout/ConfirmPopout";
 import NotificationMessage from "../../../ui/Notifications/NotificationMessage";
+import {setModal} from "../../../store/ducks/modal";
+import {addNotification} from "../../../store/ducks/notifications";
 
 type Props = {
     postId: number
@@ -147,4 +148,4 @@ export default connect(null,
         setPopout: (modal: React.ReactNode | null) => dispatch(setModal(modal)),
         addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification))
     })
-)(APModifyPost);
\ No newline at end of file
+)(APModifyPost);
diff --git a/src/pages/AdminPanel/Users/ModifyUser.tsx b/src/pages/AdminPanel/Users/ModifyUser.tsx
index e76f527..7b75980 100644
--- a/src/pages/AdminPanel/Users/ModifyUser.tsx
+++ b/src/pages/AdminPanel/Users/ModifyUser.tsx
@@ -3,9 +3,9 @@ import {connect} from "react-redux";
 import {fetchUser, updateUser} from "../../../api/users";
 import Loading from "../../../ui/Loading";
 import './APUser.sass';
-import {addNotification} from "../../../store/actions";
 import NotificationMessage from "../../../ui/Notifications/NotificationMessage";
 import Button from "../../../ui/Button/Button";
+import {addNotification} from "../../../store/ducks/notifications";
 
 type Props = {
     userId: number
@@ -90,4 +90,4 @@ export default connect(
             dispatch(addNotification(notification))
         }
     })
-)(ModifyUser);
\ No newline at end of file
+)(ModifyUser);
diff --git a/src/pages/App/App.tsx b/src/pages/App/App.tsx
index 6fbde8e..eae012d 100644
--- a/src/pages/App/App.tsx
+++ b/src/pages/App/App.tsx
@@ -8,7 +8,6 @@ import Main from "../Main/Main"
 import NotFoundError from "../NotFoundError";
 import {fetchCurrentUser, fetchUserSettings} from "../../api/users";
 import {connect} from "react-redux";
-import {setUser} from "../../store/actions";
 import Character from "../Character/Character";
 // @ts-ignore
 import parser from 'bbcode-to-react';
@@ -26,6 +25,7 @@ import PasswordRestore from "../PasswordRestore/PasswordRestore";
 import Users from "../Users/Users";
 import {getVersion, version} from "../../api/api";
 import Settings from "../User/Settings/Settings";
+import {setUser} from "../../store/ducks/currentUser";
 
 type Props = {
     notifications: React.ReactNode[]
@@ -130,8 +130,6 @@ export default connect(
         modal: state.modal
     }),
     dispatch => ({
-        setUser: (userData: UserType) => {
-            dispatch(setUser(userData))
-        }
+        setUser: (userData: UserType) => dispatch(setUser(userData))
     })
 )(App);
diff --git a/src/pages/Comments/Comments.tsx b/src/pages/Comments/Comments.tsx
index 961394b..759a14e 100644
--- a/src/pages/Comments/Comments.tsx
+++ b/src/pages/Comments/Comments.tsx
@@ -6,9 +6,9 @@ import './Comments.sass';
 import Loading from "../../ui/Loading";
 import {fetchUser} from "../../api/users";
 import {connect} from "react-redux";
-import {addNotification} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
 import Button from "../../ui/Button/Button";
+import {addNotification} from "../../store/ducks/notifications";
 
 type Props = {
     comments: CommentType[]
@@ -48,7 +48,7 @@ class Comments extends React.Component<Props, State> {
         event.preventDefault();
         const { sendComment, addNotification } = this.props;
         const { commentText } = this.state;
-        
+
         if(commentText === '') {
             const notification = (
                 <NotificationMessage level={"error"}>
@@ -84,7 +84,7 @@ class Comments extends React.Component<Props, State> {
         const { users, commentText } = this.state;
         if(!user) return <Loading/>;
 
-        return (            
+        return (
             <div className="Comments">
             {user.authorized &&
             <form onSubmit={this.sendComment}>
@@ -96,7 +96,7 @@ class Comments extends React.Component<Props, State> {
                     <FontAwesomeIcon onClick={event => this.addTagToComment(event, 'spoiler')} icon={faExclamationTriangle}/>
                     <FontAwesomeIcon onClick={event => this.addTagToComment(event, 'color', 'white')} icon={faTint}/>
                 </div>
-                <textarea 
+                <textarea
                     className={'Comments_TextArea'}
                     placeholder={'Текст комментария'}
                     value={commentText}
@@ -126,8 +126,6 @@ class Comments extends React.Component<Props, State> {
 
 export default connect(null,
     dispatch => ({
-        addNotification: (notification: React.ReactNode) => {
-            dispatch(addNotification(notification))
-        }
+        addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification))
     })
-)(Comments);
\ No newline at end of file
+)(Comments);
diff --git a/src/pages/Modals/LoginModal.tsx b/src/pages/Modals/LoginModal.tsx
index dd91a6d..e549914 100644
--- a/src/pages/Modals/LoginModal.tsx
+++ b/src/pages/Modals/LoginModal.tsx
@@ -2,7 +2,6 @@ import React, {FormEvent, ChangeEvent} from "react";
 import Modal from "../../ui/Modal/Modal";
 import {login} from "../../api/auth";
 import {connect} from "react-redux";
-import {addNotification, hideModal, setModal, setUser} from "../../store/actions";
 import './LoginModal.sass'
 import {Link} from "react-router-dom";
 import errors from "../../api/errors";
@@ -11,6 +10,9 @@ import Recaptcha from '../../ui/Recaptcha/Recaptcha'
 import Button from "../../ui/Button/Button";
 import RegisterModal from "./RegisterModal";
 import Input from "../../ui/Input/Input";
+import {setUser} from "../../store/ducks/currentUser";
+import {addNotification} from "../../store/ducks/notifications";
+import {hideModal, setModal} from "../../store/ducks/modal";
 
 type Props = {
     setUser: (user: UserType) => void
diff --git a/src/pages/Modals/RegisterModal.tsx b/src/pages/Modals/RegisterModal.tsx
index 8fefa30..62d3ba6 100644
--- a/src/pages/Modals/RegisterModal.tsx
+++ b/src/pages/Modals/RegisterModal.tsx
@@ -4,10 +4,11 @@ import Recaptcha from '../../ui/Recaptcha/Recaptcha'
 import './RegisterModal.sass'
 import {registerUser} from "../../api/auth";
 import {connect} from "react-redux";
-import {addNotification, setModal} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
 import Button from "../../ui/Button/Button";
 import Input from "../../ui/Input/Input";
+import {addNotification} from "../../store/ducks/notifications";
+import {setModal} from "../../store/ducks/modal";
 
 type Props = {
     addNotification: (notification: React.ReactNode) => void
diff --git a/src/pages/Navbar/Navbar.tsx b/src/pages/Navbar/Navbar.tsx
index cd03237..032405b 100644
--- a/src/pages/Navbar/Navbar.tsx
+++ b/src/pages/Navbar/Navbar.tsx
@@ -3,12 +3,13 @@ import './Navbar.sass'
 import {connect} from "react-redux";
 import {userLogout} from "../../api/auth";
 import {Link} from "react-router-dom";
-import {logout, setModal} from "../../store/actions";
 import {hasAccessToAdminPanel} from "../../utils";
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faBars} from '@fortawesome/free-solid-svg-icons';
 import RegisterModal from "../Modals/RegisterModal";
 import LoginModal from "../Modals/LoginModal";
+import {logout} from "../../store/ducks/currentUser";
+import {setModal} from "../../store/ducks/modal";
 
 type Props = {
     setModal: SetModal
diff --git a/src/pages/Novel/Novel.tsx b/src/pages/Novel/Novel.tsx
index 02c81e0..14723d4 100644
--- a/src/pages/Novel/Novel.tsx
+++ b/src/pages/Novel/Novel.tsx
@@ -13,10 +13,10 @@ import {
 } from "../../api/novels";
 import {Link} from "react-router-dom";
 import Loading from "../../ui/Loading";
-import {TranslateExitStatus, TranslatePlatform, TranslateStatus} from "../../api/api";
+import {TranslateExitStatus, TranslateStatus} from "../../api/api";
 import Comments from "../Comments/Comments";
-import {hideModal, setModal} from "../../store/actions";
 import LoadingModal from "../Modals/LoadingModal";
+import {hideModal, setModal} from "../../store/ducks/modal";
 
 type Props = {
     currentUser: UserType
diff --git a/src/pages/User/Settings/Appearance.tsx b/src/pages/User/Settings/Appearance.tsx
index 6740c5d..28c6cd6 100644
--- a/src/pages/User/Settings/Appearance.tsx
+++ b/src/pages/User/Settings/Appearance.tsx
@@ -2,13 +2,18 @@ import Button from "../../../ui/Button/Button";
 import Group from "../../../ui/Group/Group";
 import React, {FormEvent} from "react";
 import {fetchUserSettings, updateUserAppearanceSettings} from "../../../api/users";
-import {setUser} from "../../../store/actions";
+import {connect} from "react-redux";
+import {setUser} from "../../../store/ducks/currentUser";
+
+type Props = {
+    setUser: SetUser
+}
 
 type State = {
     theme: Theme
 }
 
-class Appearance extends React.Component<{}, State> {
+class Appearance extends React.Component<Props, State> {
     state: State = {
         theme: 'dark'
     }
@@ -23,6 +28,8 @@ class Appearance extends React.Component<{}, State> {
         event.preventDefault();
 
         const { theme } = this.state;
+        const { setUser } = this.props;
+
         updateUserAppearanceSettings(theme).then(user => {
             setUser(user);
 
@@ -52,4 +59,8 @@ class Appearance extends React.Component<{}, State> {
     }
 }
 
-export default Appearance;
+export default connect(null,
+    dispatch => ({
+        setUser: (user: UserType) => dispatch(setUser(user))
+    })
+)(Appearance);
diff --git a/src/pages/User/Settings/Settings.tsx b/src/pages/User/Settings/Settings.tsx
index 2752ecd..d92ef05 100644
--- a/src/pages/User/Settings/Settings.tsx
+++ b/src/pages/User/Settings/Settings.tsx
@@ -3,12 +3,12 @@ import Group from "../../../ui/Group/Group";
 import {connect} from "react-redux";
 import NotFoundError from "../../NotFoundError";
 import './Settings.sass';
-import {setUser} from "../../../store/actions";
 import Tabs from "../../../ui/Tabs/Tabs";
 import TabItem from "../../../ui/Tabs/TabItem";
 import Appearance from "./Appearance";
 import General from "./General";
 import Security from "./Security";
+import {setUser} from "../../../store/ducks/currentUser";
 
 enum TabsNames {
     General,
@@ -32,7 +32,7 @@ class Settings extends React.Component<Props, State> {
     }
 
     render() {
-        const { currentUser, match: { params: { userId } } } = this.props;
+        const { currentUser, match: { params: { userId } }, setUser } = this.props;
         const { currentTab } = this.state
 
         if(parseInt(userId) !== currentUser.id) return <NotFoundError/>;
diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx
index e4c849c..5933388 100644
--- a/src/pages/User/User.tsx
+++ b/src/pages/User/User.tsx
@@ -7,8 +7,8 @@ import Loading from "../../ui/Loading";
 import NovelItem from "../../ui/NovelItem/NovelItem";
 import {connect} from "react-redux";
 import Button from "../../ui/Button/Button";
-import {addNotification} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
+import {addNotification} from "../../store/ducks/notifications";
 
 type Props = {
     match: { params: { userId: string } }
@@ -69,8 +69,7 @@ class User extends React.Component<Props, State> {
                 </NotificationMessage>
             );
             this.props.addNotification(notification);
-
-        })
+        });
     }
 
     render() {
diff --git a/src/store/actionTypes.ts b/src/store/actionTypes.ts
deleted file mode 100644
index 7a5e101..0000000
--- a/src/store/actionTypes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-enum ActionTypes {
-    SET_USER = 'SET_USER',
-    LOGOUT = 'LOGOUT',
-    ADD_NOTIFICATION = 'ADD_NOTIFICATION',
-    SET_MODAL = 'SET_MODAL',
-    HIDE_MODAL = 'HIDE_MODAL'
-}
-
-export default ActionTypes;
diff --git a/src/store/actions.ts b/src/store/actions.ts
deleted file mode 100644
index 1d699b0..0000000
--- a/src/store/actions.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import ActionTypes from "./actionTypes";
-import React from "react";
-
-const setUser = (userData: UserType) => ({
-    type: ActionTypes.SET_USER,
-    userData
-});
-const logout = () => ({
-    type: ActionTypes.LOGOUT
-});
-
-const addNotification = (notification: React.ReactNode) => ({
-    type: ActionTypes.ADD_NOTIFICATION,
-    notification
-});
-
-const setModal = (modal: React.ReactNode | null) => ({
-    type: ActionTypes.SET_MODAL,
-    modal
-});
-const hideModal = () => ({
-    type: ActionTypes.HIDE_MODAL
-})
-
-export { setUser, logout,
-         addNotification,
-         setModal, hideModal };
\ No newline at end of file
diff --git a/src/store/reducers/currentUser.ts b/src/store/ducks/currentUser.ts
similarity index 55%
rename from src/store/reducers/currentUser.ts
rename to src/store/ducks/currentUser.ts
index 3184263..922fc77 100644
--- a/src/store/reducers/currentUser.ts
+++ b/src/store/ducks/currentUser.ts
@@ -1,23 +1,22 @@
-import ActionTypes from "../actionTypes";
+const SET_USER = 'unmei/currentUser/SET_USER';
+const LOGOUT = 'unmei/currentUser/LOGOUT';
 
 const initialState = {
     authorized: false
 };
-
 type Action = {
     type: string
     userData: UserType
-}
-
-export default (state = initialState, action: Action) => {
+};
+const reducer = (state = initialState, action: Action) => {
     switch (action.type) {
-        case ActionTypes.SET_USER:
+        case SET_USER:
             if(action.userData) {
                 state = Object.assign({}, state, action.userData);
                 state.authorized = true;
             }
             return state;
-        case ActionTypes.LOGOUT:
+        case LOGOUT:
             state = {
                 authorized: false
             };
@@ -25,4 +24,15 @@ export default (state = initialState, action: Action) => {
         default:
             return state
     }
-}
\ No newline at end of file
+}
+
+const setUser = (userData: UserType) => ({
+    type: SET_USER,
+    userData
+});
+const logout = () => ({
+    type: LOGOUT
+});
+
+export default reducer;
+export { setUser, logout }
diff --git a/src/store/ducks/index.ts b/src/store/ducks/index.ts
new file mode 100644
index 0000000..daa3c02
--- /dev/null
+++ b/src/store/ducks/index.ts
@@ -0,0 +1,6 @@
+import {combineReducers} from "redux";
+import currentUser from './currentUser'
+import modal from "./modal";
+import notifications from './notifications'
+
+export default combineReducers({ currentUser, modal, notifications })
diff --git a/src/store/ducks/modal.ts b/src/store/ducks/modal.ts
new file mode 100644
index 0000000..a3db2ec
--- /dev/null
+++ b/src/store/ducks/modal.ts
@@ -0,0 +1,36 @@
+import React from "react";
+
+// Actions
+const SET_MODAL = 'unmei/modal/SET_MODAL';
+const HIDE_MODAL = 'unmei/modal/HIDE_MODAL';
+
+// Reducer
+const initialState: React.ReactNode | null = null;
+type Action = {
+    type: string
+    modal: React.ReactNode | null
+}
+const reducer = (state=initialState, action: Action) => {
+    switch (action.type) {
+        case SET_MODAL: {
+            return action.modal;
+        }
+        case HIDE_MODAL: {
+            return null;
+        }
+        default: return state;
+    }
+}
+
+// Action creators
+const setModal = (modal: React.ReactNode | null) => ({
+    type: SET_MODAL,
+    modal
+});
+
+const hideModal = () => ({
+    type: HIDE_MODAL
+});
+
+export default reducer;
+export { setModal, hideModal }
diff --git a/src/store/reducers/notifications.ts b/src/store/ducks/notifications.ts
similarity index 50%
rename from src/store/reducers/notifications.ts
rename to src/store/ducks/notifications.ts
index c2d9e74..03bee03 100644
--- a/src/store/reducers/notifications.ts
+++ b/src/store/ducks/notifications.ts
@@ -1,20 +1,30 @@
 import React from "react";
-import ActionTypes from "../actionTypes";
 
+// Actions
+const ADD_NOTIFICATION = 'unmei/notifications/ADD_NOTIFICATION';
+
+// Reducer
 const initialState: React.ReactNode[] = [];
-
 type Action = {
     type: string
     notification: React.ReactNode
-}
-
-export default (state = initialState, action: Action) => {
+};
+const reducer = (state = initialState, action: Action) => {
     switch (action.type) {
-        case ActionTypes.ADD_NOTIFICATION: {
+        case ADD_NOTIFICATION: {
             if(state.length === 3)
                 return [...state.slice(1), action.notification];
             return [...state, action.notification];
         }
         default: return state;
     }
-}
\ No newline at end of file
+}
+
+// Actions creator
+const addNotification = (notification: React.ReactNode) => ({
+    type: ADD_NOTIFICATION,
+    notification
+});
+
+export default reducer;
+export { addNotification };
diff --git a/src/store/reducers/modal.ts b/src/store/reducers/modal.ts
deleted file mode 100644
index 5889896..0000000
--- a/src/store/reducers/modal.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import ActionTypes from "../actionTypes";
-
-const initialState: React.ReactNode | null = null;
-
-type Action = {
-    type: string
-    modal: React.ReactNode | null
-}
-
-export default (state=initialState, action: Action) => {
-    switch (action.type) {
-        case ActionTypes.SET_MODAL: {
-            return action.modal;
-        }
-        case ActionTypes.HIDE_MODAL: {
-            return null;
-        }
-        default: return state;
-    }
-}
diff --git a/src/store/reducers/reducers.ts b/src/store/reducers/reducers.ts
deleted file mode 100644
index ea3aca4..0000000
--- a/src/store/reducers/reducers.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {combineReducers} from "redux";
-import currentUser from "./currentUser";
-import notifications from "./notifications";
-import modal from "./modal";
-
-export default combineReducers({ currentUser, notifications, modal })
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
index 3926944..fb17c29 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,6 +1,6 @@
 import {createStore} from "redux";
 import {composeWithDevTools} from "redux-devtools-extension";
-import reducers from "./reducers/reducers";
+import reducers from "./ducks/index";
 
 const composeEnhancers = composeWithDevTools({
     trace: true
diff --git a/src/ui/ConfirmPopout/ConfirmPopout.tsx b/src/ui/ConfirmPopout/ConfirmPopout.tsx
index 52afd1c..2060a6d 100644
--- a/src/ui/ConfirmPopout/ConfirmPopout.tsx
+++ b/src/ui/ConfirmPopout/ConfirmPopout.tsx
@@ -3,7 +3,7 @@ import Button from "../Button/Button";
 import './ConfirmPopout.sass'
 import '../Modal/Modal.sass';
 import {connect} from "react-redux";
-import {hideModal} from "../../store/actions";
+import {hideModal} from "../../store/ducks/modal";
 
 type Props = {
     hideModal: () => void
@@ -50,4 +50,4 @@ export default connect(null,
     dispatch => ({
         hideModal: () => dispatch(hideModal())
     })
-)(ConfirmPopout);
\ No newline at end of file
+)(ConfirmPopout);
diff --git a/src/ui/Modal/Modal.tsx b/src/ui/Modal/Modal.tsx
index 460e096..99886f8 100644
--- a/src/ui/Modal/Modal.tsx
+++ b/src/ui/Modal/Modal.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import './Modal.sass'
 import {connect} from "react-redux";
-import {setModal} from "../../store/actions";
+import {setModal} from "../../store/ducks/modal";
 
 type Props = {
     setModal: (modal: React.ReactNode | null) => void