From 8b8e8e3056a7e07c4d33982f7ba6bbba362a1b71 Mon Sep 17 00:00:00 2001
From: Gloria Loi <loigloria2001@gmail.com>
Date: Tue, 31 Aug 2021 15:31:45 +0300
Subject: [PATCH 1/3] Replace Redux with React Context

---
 src/app.jsx                                   | 49 +++++++----
 src/components/toast/toast.jsx                | 16 ++--
 src/components/toast/toast.stories.jsx        | 22 ++---
 .../header/components/user-menu/user-menu.jsx | 10 +--
 src/pages/forgot/forgot.jsx                   | 14 ++--
 src/pages/profile/profile.jsx                 | 31 +++----
 src/pages/reset/reset.jsx                     | 13 ++-
 src/pages/sign-in/sign-in.jsx                 | 14 ++--
 src/pages/sign-up/sign-up.jsx                 | 13 ++-
 src/resources/store.js                        | 16 ----
 src/resources/store.jsx                       | 45 ++++++++++
 src/resources/toast/toast.actions.js          | 19 +++++
 src/resources/toast/toast.selectors.js        |  1 -
 src/resources/toast/toast.slice.js            | 54 ------------
 src/resources/user/user.actions.js            | 78 +++++++++++++++++
 src/resources/user/user.handlers.js           | 22 -----
 src/resources/user/user.selectors.js          |  1 -
 src/resources/user/user.slice.js              | 83 -------------------
 18 files changed, 236 insertions(+), 265 deletions(-)
 delete mode 100644 src/resources/store.js
 create mode 100644 src/resources/store.jsx
 create mode 100644 src/resources/toast/toast.actions.js
 delete mode 100644 src/resources/toast/toast.selectors.js
 delete mode 100644 src/resources/toast/toast.slice.js
 create mode 100644 src/resources/user/user.actions.js
 delete mode 100644 src/resources/user/user.handlers.js
 delete mode 100644 src/resources/user/user.selectors.js
 delete mode 100644 src/resources/user/user.slice.js

diff --git a/src/app.jsx b/src/app.jsx
index 6e646e6..ebeeeb4 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,16 +1,14 @@
-import React from 'react';
-import { Provider, useSelector } from 'react-redux';
+import React, { useContext } from 'react';
 import { Router } from 'react-router';
 import { Switch, Route, Redirect } from 'react-router-dom';
 
 import history from 'services/history.service';
 import * as loaderService from 'services/loader.service';
 import * as socketService from 'services/socket.service';
+import api from 'services/api.service';
 
-import store from 'resources/store';
-
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
+import { ContextStoreProvider, StoreContext } from 'resources/store';
+import { userActions } from 'resources/user/user.actions';
 
 import Toast from 'components/toast';
 import Loading from 'components/loading';
@@ -26,19 +24,33 @@ import Reset from 'pages/reset';
 import Home from 'pages/home';
 import NotFound from 'pages/not-found';
 
-import 'resources/user/user.handlers';
-
 import 'styles/main.pcss';
 
 const Profile = React.lazy(() => import('./pages/profile'));
 
 function PrivateScope({ children }) {
-  const user = useSelector(userSelectors.selectUser);
+  const { state, dispatch } = useContext(StoreContext);
+  const { user } = state;
 
   React.useEffect(() => {
     socketService.connect();
+
+    api.on('error', (error) => {
+      if (error.status === 401) {
+        userActions.signOut(dispatch);
+      }
+    });
+
+    socketService.on('connect', () => {
+      socketService.emit('subscribe', `user-${user?._id}`);
+    });
+
+    socketService.on('user:updated', (updatedUser) => {
+      userActions.setUser(dispatch, { user: updatedUser });
+    });
+
     return () => socketService.disconnect();
-  }, []);
+  }, [user?._id, dispatch]);
 
   if (!user) {
     const searchParams = new URLSearchParams({ to: window.location.pathname });
@@ -86,11 +98,12 @@ Object.values(scope).forEach((s, scopeIndex) => {
 
 function App() {
   const [loading, setLoading] = React.useState(true);
+  const { dispatch } = useContext(StoreContext);
 
   React.useEffect(() => {
     async function init() {
       try {
-        await store.dispatch(userActions.getCurrentUser());
+        await userActions.getCurrentUser(dispatch);
       } catch (error) {
         // @todo: add something like sentry
       } finally {
@@ -100,12 +113,12 @@ function App() {
     }
 
     init();
-  }, []);
+  }, [dispatch]);
 
   if (loading) return null;
 
   return (
-    <Provider store={store}>
+    <>
       <Router history={history}>
         <ErrorBoundary fallback={<h1>Error!</h1>}>
           <React.Suspense fallback={<Loading />}>
@@ -135,8 +148,14 @@ function App() {
       </Router>
 
       <Toast />
-    </Provider>
+    </>
   );
 }
 
-export default App;
+const Root = () => (
+  <ContextStoreProvider>
+    <App />
+  </ContextStoreProvider>
+);
+
+export default Root;
diff --git a/src/components/toast/toast.jsx b/src/components/toast/toast.jsx
index 8374d89..0d4df8f 100644
--- a/src/components/toast/toast.jsx
+++ b/src/components/toast/toast.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 import ReactDOM from 'react-dom';
-import { useSelector, useDispatch } from 'react-redux';
 
-import * as toastSelectors from 'resources/toast/toast.selectors';
-import { toastActions } from 'resources/toast/toast.slice';
+import { StoreContext } from 'resources/store';
+import { toastActions } from 'resources/toast/toast.actions';
 
 import Icon from 'components/icon';
 import IconButton from 'components/icon-button';
@@ -39,9 +38,8 @@ function getIconProps(type) {
 }
 
 function RawToast() {
-  const dispatch = useDispatch();
-
-  const messages = useSelector(toastSelectors.selectMessages);
+  const { state, dispatch } = useContext(StoreContext);
+  const { toast: messages } = state;
 
   const element = React.useRef(document.createElement('div'));
 
@@ -59,7 +57,7 @@ function RawToast() {
       <>
         {messages.map((m) => {
           const closeToast = () => {
-            dispatch(toastActions.remove({ id: m.id }));
+            toastActions.removeToast(dispatch, m.id);
           };
 
           const iconProps = getIconProps(m.type);
@@ -74,7 +72,7 @@ function RawToast() {
                   color={iconProps.color}
                   noWrapper
                 />
-                <span>{m.text}</span>
+                <span>{m.message}</span>
               </div>
               <IconButton
                 icon="close"
diff --git a/src/components/toast/toast.stories.jsx b/src/components/toast/toast.stories.jsx
index 367d842..8bcd2df 100644
--- a/src/components/toast/toast.stories.jsx
+++ b/src/components/toast/toast.stories.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Provider, useDispatch } from 'react-redux';
-import store from 'resources/store';
+import React, { useContext } from 'react';
+
+import { ContextStoreProvider, StoreContext } from 'resources/store';
+import { toastActions } from 'resources/toast/toast.actions';
 
-import { toastActions } from 'resources/toast/toast.slice';
 import Button from 'components/button';
 
 export default {
@@ -10,30 +10,30 @@ export default {
   component: Button,
   decorators: [
     (Story) => (
-      <Provider store={store}>
+      <ContextStoreProvider>
         <Story />
-      </Provider>
+      </ContextStoreProvider>
     ),
   ],
 };
 
 export const Template = () => {
-  const dispatch = useDispatch();
+  const { dispatch } = useContext(StoreContext);
 
   const showSuccessToast = () => {
-    dispatch(toastActions.success('This is success toast! This is success toast!'));
+    toastActions.createToast(dispatch, { type: 'success', message: 'This is success toast! This is success toast!' });
   };
 
   const showErrorToast = () => {
-    dispatch(toastActions.error('This is error toast! This is error toast!'));
+    toastActions.createToast(dispatch, { type: 'error', message: 'This is error toast! This is error toast!' });
   };
 
   const showInfoToast = () => {
-    dispatch(toastActions.info('This is info toast! This is info toast!'));
+    toastActions.createToast(dispatch, { type: 'info', message: 'This is info toast! This is info toast!' });
   };
 
   const showWarningToast = () => {
-    dispatch(toastActions.warning('This is warning toast! This is warning toast!'));
+    toastActions.createToast(dispatch, { type: 'warning', message: 'This is warning toast! This is warning toast!' });
   };
 
   return (
diff --git a/src/layouts/main/header/components/user-menu/user-menu.jsx b/src/layouts/main/header/components/user-menu/user-menu.jsx
index 635362e..2649c58 100644
--- a/src/layouts/main/header/components/user-menu/user-menu.jsx
+++ b/src/layouts/main/header/components/user-menu/user-menu.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 import { Link, useHistory } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
 
 import { routes } from 'routes';
 
-import { userActions } from 'resources/user/user.slice';
+import { StoreContext } from 'resources/store';
+import { userActions } from 'resources/user/user.actions';
 
 import styles from './user-menu.styles.pcss';
 
@@ -17,8 +17,8 @@ const linksList = [
 ];
 
 function UserMenu() {
-  const dispatch = useDispatch();
   const history = useHistory();
+  const { dispatch } = useContext(StoreContext);
 
   const [isOpen, setIsOpen] = React.useState(false);
   function toggleIsOpen() {
@@ -36,7 +36,7 @@ function UserMenu() {
   }, []);
 
   async function logout() {
-    await dispatch(userActions.signOut());
+    await userActions.signOut(dispatch);
     history.push(routes.signIn.path);
   }
 
diff --git a/src/pages/forgot/forgot.jsx b/src/pages/forgot/forgot.jsx
index 52a8bdb..f11eeb7 100644
--- a/src/pages/forgot/forgot.jsx
+++ b/src/pages/forgot/forgot.jsx
@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 import { Link, Redirect } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
 
 import { routes } from 'routes';
 
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
+import { StoreContext } from 'resources/store';
+import { userActions } from 'resources/user/user.actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -15,9 +14,8 @@ import Form from 'components/form';
 import styles from './forgot.pcss';
 
 const Forgot = () => {
-  const dispatch = useDispatch();
-
-  const user = useSelector(userSelectors.selectUser);
+  const { state, dispatch } = useContext(StoreContext);
+  const { user } = state;
 
   const [values, setValues] = React.useState({});
   const [pending, setPending] = React.useState(false);
@@ -25,7 +23,7 @@ const Forgot = () => {
 
   const handleSubmit = async (submitValues) => {
     setPending(true);
-    await dispatch(userActions.forgot(submitValues));
+    await userActions.forgot(dispatch, submitValues);
     setValues(submitValues);
     setSubmitted(true);
     setPending(false);
diff --git a/src/pages/profile/profile.jsx b/src/pages/profile/profile.jsx
index 20aa13d..0dff701 100644
--- a/src/pages/profile/profile.jsx
+++ b/src/pages/profile/profile.jsx
@@ -1,11 +1,13 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, {
+  useCallback, useState, useEffect, useContext,
+} from 'react';
 import * as yup from 'yup';
-import { useDispatch, useSelector } from 'react-redux';
 import { useFormContext } from 'react-hook-form';
 
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
-import { toastActions } from 'resources/toast/toast.slice';
+import { StoreContext } from 'resources/store';
+import { userActions } from 'resources/user/user.actions';
+import { toastActions } from 'resources/toast/toast.actions';
+
 import * as filesApi from 'resources/files/files.api';
 
 import Input from 'components/input';
@@ -30,9 +32,8 @@ const schema = yup.object({
     .email('Please enter a valid email address'),
 });
 
-const CancelButton = ({ onCancel }) => { // eslint-disable-line react/prop-types
+const CancelButton = ({ onCancel, user }) => { // eslint-disable-line react/prop-types
   const { reset } = useFormContext();
-  const user = useSelector(userSelectors.selectUser);
 
   const handleClick = () => {
     onCancel();
@@ -52,16 +53,15 @@ const CancelButton = ({ onCancel }) => { // eslint-disable-line react/prop-types
 };
 
 const Profile = () => {
-  const dispatch = useDispatch();
-  const user = useSelector(userSelectors.selectUser);
+  const { state: { user }, dispatch } = useContext(StoreContext);
   const { avatarFileKey: userAvatarFileKey } = user;
 
   const [avatarFileKey, setAvatarFileKey] = useState(userAvatarFileKey);
   const [avatarUrl, setAvatarUrl] = useState(null);
 
   const handleSubmit = useCallback(async (submitValues) => {
-    await dispatch(userActions.updateCurrentUser({ ...submitValues, avatarFileKey }));
-    dispatch(toastActions.success('User info updated!'));
+    await userActions.updateCurrentUser(dispatch, { ...submitValues, avatarFileKey });
+    toastActions.createToast(dispatch, { type: 'success', message: 'User info updated!' });
   }, [dispatch, avatarFileKey]);
 
   const getAvatarUrl = useCallback(async (key) => {
@@ -70,8 +70,8 @@ const Profile = () => {
       if (url) {
         setAvatarUrl(url);
       }
-    } catch (error) {
-      dispatch(toastActions.error(error));
+    } catch ({ data }) {
+      toastActions.createToast(dispatch, { type: 'error', message: data.errors.file[0] });
     }
   }, [dispatch]);
 
@@ -80,8 +80,8 @@ const Profile = () => {
       const file = files[0];
       const { key } = await filesApi.upload(file);
       setAvatarFileKey(key);
-    } catch (error) {
-      dispatch(toastActions.error(error));
+    } catch ({ data }) {
+      toastActions.createToast(dispatch, { type: 'error', message: data.errors.file[0] });
     }
   };
 
@@ -162,6 +162,7 @@ const Profile = () => {
         <div className={styles.buttons}>
           <CancelButton
             onCancel={resetAvatar}
+            user={user}
           />
           <Button
             className={styles.button}
diff --git a/src/pages/reset/reset.jsx b/src/pages/reset/reset.jsx
index 9bf6b76..d778ed6 100644
--- a/src/pages/reset/reset.jsx
+++ b/src/pages/reset/reset.jsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useContext } from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { routes } from 'routes';
 
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
+import { StoreContext } from 'resources/store';
+import { userActions } from 'resources/user/user.actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -14,9 +13,7 @@ import Form from 'components/form';
 import styles from './reset.pcss';
 
 function Reset() {
-  const dispatch = useDispatch();
-
-  const user = useSelector(userSelectors.selectUser);
+  const { state: { user } } = useContext(StoreContext);
 
   const searchParams = new URLSearchParams(window.location.search);
   const token = searchParams.get('token');
@@ -25,7 +22,7 @@ function Reset() {
 
   const handleSubmit = async (submitValues) => {
     setPending(true);
-    await dispatch(userActions.reset(submitValues));
+    await userActions.reset(submitValues);
     setPending(false);
   };
 
diff --git a/src/pages/sign-in/sign-in.jsx b/src/pages/sign-in/sign-in.jsx
index b19c5fe..06bf34e 100644
--- a/src/pages/sign-in/sign-in.jsx
+++ b/src/pages/sign-in/sign-in.jsx
@@ -1,11 +1,9 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 
 import { routes } from 'routes';
-
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
+import { userActions } from 'resources/user/user.actions';
+import { StoreContext } from 'resources/store';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -14,12 +12,10 @@ import Form from 'components/form';
 import styles from './sign-in.pcss';
 
 function SignIn() {
-  const user = useSelector(userSelectors.selectUser);
-
-  const dispatch = useDispatch();
+  const { state: { user }, dispatch } = useContext(StoreContext);
 
   const handleSubmit = async (submitValues) => {
-    await dispatch(userActions.signIn(submitValues));
+    await userActions.signIn(dispatch, submitValues);
   };
 
   if (user) {
diff --git a/src/pages/sign-up/sign-up.jsx b/src/pages/sign-up/sign-up.jsx
index ed5a3e2..b49507a 100644
--- a/src/pages/sign-up/sign-up.jsx
+++ b/src/pages/sign-up/sign-up.jsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 
 import config from 'config';
 import { routes } from 'routes';
 
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
+import { StoreContext } from 'resources/store';
+import { userActions } from 'resources/user/user.actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -15,9 +14,7 @@ import Form from 'components/form';
 import styles from './sign-up.pcss';
 
 function SignUp() {
-  const dispatch = useDispatch();
-
-  const user = useSelector(userSelectors.selectUser);
+  const { state: { user }, dispatch } = useContext(StoreContext);
 
   const [values, setValues] = React.useState({});
   const [registered, setRegistered] = React.useState(false);
@@ -25,7 +22,7 @@ function SignUp() {
   const [signupToken, setSignupToken] = React.useState();
 
   const handleSubmit = async (submitValues) => {
-    const response = await dispatch(userActions.signUp(submitValues));
+    const response = await userActions.signUp(dispatch, submitValues);
     if (response.signupToken) setSignupToken(response.signupToken);
     setRegistered(true);
     setValues(submitValues);
diff --git a/src/resources/store.js b/src/resources/store.js
deleted file mode 100644
index 0e2c7e8..0000000
--- a/src/resources/store.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-
-import history from 'services/history.service';
-
-import user from './user/user.slice';
-import toast from './toast/toast.slice';
-
-export default configureStore({
-  reducer: {
-    user,
-    toast,
-  },
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
-    thunk: { extraArgument: { history } },
-  }),
-});
diff --git a/src/resources/store.jsx b/src/resources/store.jsx
new file mode 100644
index 0000000..642eb56
--- /dev/null
+++ b/src/resources/store.jsx
@@ -0,0 +1,45 @@
+import React, { createContext, useReducer } from 'react';
+
+export const StoreContext = createContext();
+
+export const initialState = {
+  user: null,
+  toast: [],
+};
+
+export const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'SET_USER':
+      return {
+        ...state,
+        user: action.payload,
+      };
+    case 'REMOVE_USER':
+      return {
+        ...state,
+        user: null,
+      };
+    case 'ADD_MESSAGE':
+      return {
+        ...state,
+        toast: [...state.toast, action.payload],
+      };
+    case 'REMOVE_MESSAGE':
+      return {
+        ...state,
+        toast: state.toast.filter((message) => message.id !== action.payload),
+      };
+    default:
+      throw new Error();
+  }
+};
+
+export const ContextStoreProvider = ({ children }) => { // eslint-disable-line react/prop-types
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <StoreContext.Provider value={{ state, dispatch }}>
+      {children}
+    </StoreContext.Provider>
+  );
+};
diff --git a/src/resources/toast/toast.actions.js b/src/resources/toast/toast.actions.js
new file mode 100644
index 0000000..e2b1e22
--- /dev/null
+++ b/src/resources/toast/toast.actions.js
@@ -0,0 +1,19 @@
+import uniqueId from 'lodash/uniqueId';
+
+const ADD_MESSAGE = 'ADD_MESSAGE';
+const REMOVE_MESSAGE = 'REMOVE_MESSAGE';
+
+const createToast = (dispatch, data) => {
+  const id = uniqueId('toast_');
+  dispatch({ type: ADD_MESSAGE, payload: { id, ...data } });
+  setTimeout(() => dispatch({ type: REMOVE_MESSAGE, payload: id }), 3000);
+};
+
+const removeToast = (dispatch, id) => {
+  dispatch({ type: REMOVE_MESSAGE, payload: id });
+};
+
+export const toastActions = {
+  createToast,
+  removeToast,
+};
diff --git a/src/resources/toast/toast.selectors.js b/src/resources/toast/toast.selectors.js
deleted file mode 100644
index e398932..0000000
--- a/src/resources/toast/toast.selectors.js
+++ /dev/null
@@ -1 +0,0 @@
-export const selectMessages = ({ toast }) => toast.messages;
diff --git a/src/resources/toast/toast.slice.js b/src/resources/toast/toast.slice.js
deleted file mode 100644
index dc1a63e..0000000
--- a/src/resources/toast/toast.slice.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import uniqueId from 'lodash/uniqueId';
-
-const initialState = {
-  messages: [],
-};
-
-const toastSlice = createSlice({
-  name: 'toast',
-  initialState,
-  reducers: {
-    add: (state, action) => {
-      state.messages.push(action.payload.message);
-    },
-    remove: (state, action) => ({
-      messages: state.messages.filter((message) => message.id !== action.payload.id),
-    }),
-  },
-});
-
-const { add, remove } = toastSlice.actions;
-
-const createToast = (data) => (dispatch) => {
-  const id = uniqueId('toast_');
-
-  dispatch(add({ message: { id, ...data } }));
-  setTimeout(() => dispatch(remove({ id })), 3000);
-};
-
-const success = (text) => (dispatch) => {
-  dispatch(createToast({ type: 'success', text }));
-};
-
-const info = (text) => (dispatch) => {
-  dispatch(createToast({ type: 'info', text }));
-};
-
-const error = (text) => (dispatch) => {
-  dispatch(createToast({ type: 'error', text }));
-};
-
-const warning = (text) => (dispatch) => {
-  dispatch(createToast({ type: 'warning', text }));
-};
-
-export const toastActions = {
-  remove,
-  success,
-  info,
-  error,
-  warning,
-};
-
-export default toastSlice.reducer;
diff --git a/src/resources/user/user.actions.js b/src/resources/user/user.actions.js
new file mode 100644
index 0000000..f612dae
--- /dev/null
+++ b/src/resources/user/user.actions.js
@@ -0,0 +1,78 @@
+import * as socketService from 'services/socket.service';
+import { routes } from 'routes';
+import * as api from './user.api';
+
+const SET_USER = 'SET_USER';
+const REMOVE_USER = 'REMOVE_USER';
+
+const signIn = async (dispatch, { email, password }) => {
+  const user = await api.signIn({
+    email,
+    password,
+  });
+  dispatch({ type: SET_USER, payload: user });
+
+  return user;
+};
+
+const setUser = async (dispatch, data) => {
+  dispatch({ type: SET_USER, payload: data });
+
+  return data;
+};
+
+const signUp = async (dispatch, {
+  firstName,
+  lastName,
+  email,
+  password,
+}) => {
+  const resp = await api.signUp({
+    firstName,
+    lastName,
+    email,
+    password,
+  });
+
+  return resp;
+};
+
+const forgot = async ({ email }) => {
+  await api.forgot({ email });
+};
+
+const reset = async ({ password, token }) => async (_dispatch, _getState, ctx) => {
+  await api.reset({ password, token });
+  ctx.history.push(routes.signIn.path);
+};
+
+const signOut = async (dispatch) => {
+  await api.signOut();
+  dispatch({ type: REMOVE_USER });
+  socketService.disconnect();
+};
+
+const getCurrentUser = async (dispatch) => {
+  const user = await api.getCurrentUser();
+  dispatch({ type: SET_USER, payload: user });
+
+  return user;
+};
+
+const updateCurrentUser = async (dispatch, data) => {
+  const user = await api.updateCurrentUser(data);
+  dispatch({ type: SET_USER, payload: user });
+
+  return user;
+};
+
+export const userActions = {
+  setUser,
+  signIn,
+  signUp,
+  forgot,
+  reset,
+  signOut,
+  getCurrentUser,
+  updateCurrentUser,
+};
diff --git a/src/resources/user/user.handlers.js b/src/resources/user/user.handlers.js
deleted file mode 100644
index 4e81637..0000000
--- a/src/resources/user/user.handlers.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import api from 'services/api.service';
-import * as socketService from 'services/socket.service';
-
-import store from 'resources/store';
-
-import * as userSelectors from 'resources/user/user.selectors';
-import { userActions } from 'resources/user/user.slice';
-
-api.on('error', (error) => {
-  if (error.status === 401) {
-    store.dispatch(userActions.signOut());
-  }
-});
-
-socketService.on('connect', () => {
-  const user = userSelectors.selectUser(store.getState());
-  socketService.emit('subscribe', `user-${user._id}`);
-});
-
-socketService.on('user:updated', (user) => {
-  store.dispatch(userActions.setUser({ user }));
-});
diff --git a/src/resources/user/user.selectors.js b/src/resources/user/user.selectors.js
deleted file mode 100644
index 8cd058d..0000000
--- a/src/resources/user/user.selectors.js
+++ /dev/null
@@ -1 +0,0 @@
-export const selectUser = ({ user }) => user;
diff --git a/src/resources/user/user.slice.js b/src/resources/user/user.slice.js
deleted file mode 100644
index fb4900b..0000000
--- a/src/resources/user/user.slice.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-import * as socketService from 'services/socket.service';
-
-import { routes } from 'routes';
-
-import * as api from './user.api';
-
-const initialState = null;
-
-const userSlice = createSlice({
-  name: 'user',
-  initialState,
-  reducers: {
-    setUser: (state, action) => action.payload.user,
-    removeUser: () => initialState,
-  },
-});
-
-const { setUser, removeUser } = userSlice.actions;
-
-const signIn = ({ email, password }) => async (dispatch) => {
-  const user = await api.signIn({
-    email,
-    password,
-  });
-  dispatch(setUser({ user }));
-};
-
-const signUp = ({
-  firstName,
-  lastName,
-  email,
-  password,
-}) => async () => {
-  const { signupToken } = await api.signUp({
-    firstName,
-    lastName,
-    email,
-    password,
-  });
-
-  return { signupToken };
-};
-
-const forgot = ({ email }) => async () => {
-  await api.forgot({ email });
-};
-
-const reset = ({ password, token }) => async (_dispatch, _getState, ctx) => {
-  await api.reset({ password, token });
-  ctx.history.push(routes.signIn.path);
-};
-
-const signOut = () => async (dispatch) => {
-  await api.signOut();
-  dispatch(removeUser());
-  socketService.disconnect();
-};
-
-const getCurrentUser = () => async (dispatch) => {
-  const user = await api.getCurrentUser();
-  dispatch(setUser({ user }));
-};
-
-const updateCurrentUser = (data) => async (dispatch) => {
-  const user = await api.updateCurrentUser(data);
-  dispatch(setUser({ user }));
-};
-
-export const userActions = {
-  setUser,
-  removeUser,
-  signIn,
-  signUp,
-  forgot,
-  reset,
-  signOut,
-  getCurrentUser,
-  updateCurrentUser,
-};
-
-export default userSlice.reducer;

From 529b98ec8393ac0764919c4e72c8eb04aad3997f Mon Sep 17 00:00:00 2001
From: Gloria Loi <loigloria2001@gmail.com>
Date: Tue, 31 Aug 2021 17:44:52 +0300
Subject: [PATCH 2/3] Add thunk for dispatch and join actions

---
 src/app.jsx                                   | 11 +++---
 src/components/toast/toast.jsx                | 14 +++----
 src/components/toast/toast.stories.jsx        | 10 ++---
 .../header/components/user-menu/user-menu.jsx |  4 +-
 src/pages/forgot/forgot.jsx                   |  4 +-
 src/pages/profile/profile.jsx                 | 13 +++----
 src/pages/reset/reset.jsx                     |  4 +-
 src/pages/sign-in/sign-in.jsx                 |  4 +-
 src/pages/sign-up/sign-up.jsx                 |  6 +--
 .../{user/user.actions.js => actions.js}      | 38 +++++++++++++------
 src/resources/store.jsx                       | 11 +++++-
 src/resources/toast/toast.actions.js          | 19 ----------
 12 files changed, 71 insertions(+), 67 deletions(-)
 rename src/resources/{user/user.actions.js => actions.js} (52%)
 delete mode 100644 src/resources/toast/toast.actions.js

diff --git a/src/app.jsx b/src/app.jsx
index ebeeeb4..3a23dc7 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -8,7 +8,7 @@ import * as socketService from 'services/socket.service';
 import api from 'services/api.service';
 
 import { ContextStoreProvider, StoreContext } from 'resources/store';
-import { userActions } from 'resources/user/user.actions';
+import actions from 'resources/actions';
 
 import Toast from 'components/toast';
 import Loading from 'components/loading';
@@ -37,7 +37,7 @@ function PrivateScope({ children }) {
 
     api.on('error', (error) => {
       if (error.status === 401) {
-        userActions.signOut(dispatch);
+        dispatch(actions.signOut());
       }
     });
 
@@ -46,7 +46,7 @@ function PrivateScope({ children }) {
     });
 
     socketService.on('user:updated', (updatedUser) => {
-      userActions.setUser(dispatch, { user: updatedUser });
+      dispatch(actions.setUser({ user: updatedUser }));
     });
 
     return () => socketService.disconnect();
@@ -103,7 +103,7 @@ function App() {
   React.useEffect(() => {
     async function init() {
       try {
-        await userActions.getCurrentUser(dispatch);
+        await dispatch(actions.getCurrentUser());
       } catch (error) {
         // @todo: add something like sentry
       } finally {
@@ -113,7 +113,8 @@ function App() {
     }
 
     init();
-  }, [dispatch]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (loading) return null;
 
diff --git a/src/components/toast/toast.jsx b/src/components/toast/toast.jsx
index 0d4df8f..0f4b6fa 100644
--- a/src/components/toast/toast.jsx
+++ b/src/components/toast/toast.jsx
@@ -3,7 +3,7 @@ import cn from 'classnames';
 import ReactDOM from 'react-dom';
 
 import { StoreContext } from 'resources/store';
-import { toastActions } from 'resources/toast/toast.actions';
+import actions from 'resources/actions';
 
 import Icon from 'components/icon';
 import IconButton from 'components/icon-button';
@@ -55,16 +55,16 @@ function RawToast() {
   function list() {
     return (
       <>
-        {messages.map((m) => {
+        {messages.map(({ id, message, type }) => {
           const closeToast = () => {
-            toastActions.removeToast(dispatch, m.id);
+            dispatch(actions.removeToast(id));
           };
 
-          const iconProps = getIconProps(m.type);
+          const iconProps = getIconProps(type);
           return (
             <div
-              key={m.id}
-              className={cn(styles.toast, styles[m.type])}
+              key={id}
+              className={cn(styles.toast, styles[type])}
             >
               <div className={styles.main}>
                 <Icon
@@ -72,7 +72,7 @@ function RawToast() {
                   color={iconProps.color}
                   noWrapper
                 />
-                <span>{m.message}</span>
+                <span>{message}</span>
               </div>
               <IconButton
                 icon="close"
diff --git a/src/components/toast/toast.stories.jsx b/src/components/toast/toast.stories.jsx
index 8bcd2df..153169b 100644
--- a/src/components/toast/toast.stories.jsx
+++ b/src/components/toast/toast.stories.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import { ContextStoreProvider, StoreContext } from 'resources/store';
-import { toastActions } from 'resources/toast/toast.actions';
+import actions from 'resources/actions';
 
 import Button from 'components/button';
 
@@ -21,19 +21,19 @@ export const Template = () => {
   const { dispatch } = useContext(StoreContext);
 
   const showSuccessToast = () => {
-    toastActions.createToast(dispatch, { type: 'success', message: 'This is success toast! This is success toast!' });
+    dispatch(actions.createToast({ type: 'success', message: 'This is success toast! This is success toast!' }));
   };
 
   const showErrorToast = () => {
-    toastActions.createToast(dispatch, { type: 'error', message: 'This is error toast! This is error toast!' });
+    dispatch(actions.createToast({ type: 'error', message: 'This is error toast! This is error toast!' }));
   };
 
   const showInfoToast = () => {
-    toastActions.createToast(dispatch, { type: 'info', message: 'This is info toast! This is info toast!' });
+    dispatch(actions.createToast({ type: 'info', message: 'This is info toast! This is info toast!' }));
   };
 
   const showWarningToast = () => {
-    toastActions.createToast(dispatch, { type: 'warning', message: 'This is warning toast! This is warning toast!' });
+    dispatch(actions.createToast({ type: 'warning', message: 'This is warning toast! This is warning toast!' }));
   };
 
   return (
diff --git a/src/layouts/main/header/components/user-menu/user-menu.jsx b/src/layouts/main/header/components/user-menu/user-menu.jsx
index 2649c58..34e7803 100644
--- a/src/layouts/main/header/components/user-menu/user-menu.jsx
+++ b/src/layouts/main/header/components/user-menu/user-menu.jsx
@@ -5,7 +5,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { routes } from 'routes';
 
 import { StoreContext } from 'resources/store';
-import { userActions } from 'resources/user/user.actions';
+import actions from 'resources/actions';
 
 import styles from './user-menu.styles.pcss';
 
@@ -36,7 +36,7 @@ function UserMenu() {
   }, []);
 
   async function logout() {
-    await userActions.signOut(dispatch);
+    await dispatch(actions.signOut());
     history.push(routes.signIn.path);
   }
 
diff --git a/src/pages/forgot/forgot.jsx b/src/pages/forgot/forgot.jsx
index f11eeb7..8d9f1ea 100644
--- a/src/pages/forgot/forgot.jsx
+++ b/src/pages/forgot/forgot.jsx
@@ -5,7 +5,7 @@ import { Link, Redirect } from 'react-router-dom';
 import { routes } from 'routes';
 
 import { StoreContext } from 'resources/store';
-import { userActions } from 'resources/user/user.actions';
+import actions from 'resources/actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -23,7 +23,7 @@ const Forgot = () => {
 
   const handleSubmit = async (submitValues) => {
     setPending(true);
-    await userActions.forgot(dispatch, submitValues);
+    await dispatch(actions.forgot(submitValues));
     setValues(submitValues);
     setSubmitted(true);
     setPending(false);
diff --git a/src/pages/profile/profile.jsx b/src/pages/profile/profile.jsx
index 0dff701..bc09243 100644
--- a/src/pages/profile/profile.jsx
+++ b/src/pages/profile/profile.jsx
@@ -5,8 +5,7 @@ import * as yup from 'yup';
 import { useFormContext } from 'react-hook-form';
 
 import { StoreContext } from 'resources/store';
-import { userActions } from 'resources/user/user.actions';
-import { toastActions } from 'resources/toast/toast.actions';
+import actions from 'resources/actions';
 
 import * as filesApi from 'resources/files/files.api';
 
@@ -54,14 +53,14 @@ const CancelButton = ({ onCancel, user }) => { // eslint-disable-line react/prop
 
 const Profile = () => {
   const { state: { user }, dispatch } = useContext(StoreContext);
-  const { avatarFileKey: userAvatarFileKey } = user;
+  const { avatarFileKey: userAvatarFileKey } = user || {};
 
   const [avatarFileKey, setAvatarFileKey] = useState(userAvatarFileKey);
   const [avatarUrl, setAvatarUrl] = useState(null);
 
   const handleSubmit = useCallback(async (submitValues) => {
-    await userActions.updateCurrentUser(dispatch, { ...submitValues, avatarFileKey });
-    toastActions.createToast(dispatch, { type: 'success', message: 'User info updated!' });
+    await dispatch(actions.updateCurrentUser({ ...submitValues, avatarFileKey }));
+    dispatch(actions.createToast({ type: 'success', message: 'User info updated!' }));
   }, [dispatch, avatarFileKey]);
 
   const getAvatarUrl = useCallback(async (key) => {
@@ -71,7 +70,7 @@ const Profile = () => {
         setAvatarUrl(url);
       }
     } catch ({ data }) {
-      toastActions.createToast(dispatch, { type: 'error', message: data.errors.file[0] });
+      dispatch(actions.createToast({ type: 'error', message: data.errors.file[0] }));
     }
   }, [dispatch]);
 
@@ -81,7 +80,7 @@ const Profile = () => {
       const { key } = await filesApi.upload(file);
       setAvatarFileKey(key);
     } catch ({ data }) {
-      toastActions.createToast(dispatch, { type: 'error', message: data.errors.file[0] });
+      dispatch(actions.createToast({ type: 'error', message: data.errors.file[0] }));
     }
   };
 
diff --git a/src/pages/reset/reset.jsx b/src/pages/reset/reset.jsx
index d778ed6..1877e76 100644
--- a/src/pages/reset/reset.jsx
+++ b/src/pages/reset/reset.jsx
@@ -4,7 +4,7 @@ import { Redirect } from 'react-router-dom';
 import { routes } from 'routes';
 
 import { StoreContext } from 'resources/store';
-import { userActions } from 'resources/user/user.actions';
+import actions from 'resources/actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -22,7 +22,7 @@ function Reset() {
 
   const handleSubmit = async (submitValues) => {
     setPending(true);
-    await userActions.reset(submitValues);
+    await actions.reset(submitValues);
     setPending(false);
   };
 
diff --git a/src/pages/sign-in/sign-in.jsx b/src/pages/sign-in/sign-in.jsx
index 06bf34e..5de9b5e 100644
--- a/src/pages/sign-in/sign-in.jsx
+++ b/src/pages/sign-in/sign-in.jsx
@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 
 import { routes } from 'routes';
-import { userActions } from 'resources/user/user.actions';
 import { StoreContext } from 'resources/store';
+import actions from 'resources/actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -15,7 +15,7 @@ function SignIn() {
   const { state: { user }, dispatch } = useContext(StoreContext);
 
   const handleSubmit = async (submitValues) => {
-    await userActions.signIn(dispatch, submitValues);
+    await dispatch(actions.signIn(submitValues));
   };
 
   if (user) {
diff --git a/src/pages/sign-up/sign-up.jsx b/src/pages/sign-up/sign-up.jsx
index b49507a..2dda7b0 100644
--- a/src/pages/sign-up/sign-up.jsx
+++ b/src/pages/sign-up/sign-up.jsx
@@ -5,7 +5,7 @@ import config from 'config';
 import { routes } from 'routes';
 
 import { StoreContext } from 'resources/store';
-import { userActions } from 'resources/user/user.actions';
+import actions from 'resources/actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -14,7 +14,7 @@ import Form from 'components/form';
 import styles from './sign-up.pcss';
 
 function SignUp() {
-  const { state: { user }, dispatch } = useContext(StoreContext);
+  const { state: { user } } = useContext(StoreContext);
 
   const [values, setValues] = React.useState({});
   const [registered, setRegistered] = React.useState(false);
@@ -22,7 +22,7 @@ function SignUp() {
   const [signupToken, setSignupToken] = React.useState();
 
   const handleSubmit = async (submitValues) => {
-    const response = await userActions.signUp(dispatch, submitValues);
+    const response = await actions.signUp(submitValues);
     if (response.signupToken) setSignupToken(response.signupToken);
     setRegistered(true);
     setValues(submitValues);
diff --git a/src/resources/user/user.actions.js b/src/resources/actions.js
similarity index 52%
rename from src/resources/user/user.actions.js
rename to src/resources/actions.js
index f612dae..8150ec5 100644
--- a/src/resources/user/user.actions.js
+++ b/src/resources/actions.js
@@ -1,11 +1,25 @@
+import uniqueId from 'lodash/uniqueId';
+
 import * as socketService from 'services/socket.service';
 import { routes } from 'routes';
-import * as api from './user.api';
+import * as api from './user/user.api';
 
+const ADD_MESSAGE = 'ADD_MESSAGE';
+const REMOVE_MESSAGE = 'REMOVE_MESSAGE';
 const SET_USER = 'SET_USER';
 const REMOVE_USER = 'REMOVE_USER';
 
-const signIn = async (dispatch, { email, password }) => {
+const createToast = (data) => (dispatch) => {
+  const id = uniqueId('toast_');
+  dispatch({ type: ADD_MESSAGE, payload: { id, ...data } });
+  setTimeout(() => dispatch({ type: REMOVE_MESSAGE, payload: id }), 3000);
+};
+
+const removeToast = (id) => (dispatch) => {
+  dispatch({ type: REMOVE_MESSAGE, payload: id });
+};
+
+const signIn = ({ email, password }) => async (dispatch) => {
   const user = await api.signIn({
     email,
     password,
@@ -15,58 +29,58 @@ const signIn = async (dispatch, { email, password }) => {
   return user;
 };
 
-const setUser = async (dispatch, data) => {
+const setUser = (data) => (dispatch) => {
   dispatch({ type: SET_USER, payload: data });
 
   return data;
 };
 
-const signUp = async (dispatch, {
+const signUp = async ({
   firstName,
   lastName,
   email,
   password,
 }) => {
-  const resp = await api.signUp({
+  const response = await api.signUp({
     firstName,
     lastName,
     email,
     password,
   });
 
-  return resp;
+  return response;
 };
 
 const forgot = async ({ email }) => {
   await api.forgot({ email });
 };
 
-const reset = async ({ password, token }) => async (_dispatch, _getState, ctx) => {
+const reset = ({ password, token }) => async (_dispatch, _getState, ctx) => {
   await api.reset({ password, token });
   ctx.history.push(routes.signIn.path);
 };
 
-const signOut = async (dispatch) => {
+const signOut = () => async (dispatch) => {
   await api.signOut();
   dispatch({ type: REMOVE_USER });
   socketService.disconnect();
 };
 
-const getCurrentUser = async (dispatch) => {
+const getCurrentUser = () => async (dispatch) => {
   const user = await api.getCurrentUser();
   dispatch({ type: SET_USER, payload: user });
 
   return user;
 };
 
-const updateCurrentUser = async (dispatch, data) => {
+const updateCurrentUser = (data) => async (dispatch) => {
   const user = await api.updateCurrentUser(data);
   dispatch({ type: SET_USER, payload: user });
 
   return user;
 };
 
-export const userActions = {
+export default {
   setUser,
   signIn,
   signUp,
@@ -75,4 +89,6 @@ export const userActions = {
   signOut,
   getCurrentUser,
   updateCurrentUser,
+  createToast,
+  removeToast,
 };
diff --git a/src/resources/store.jsx b/src/resources/store.jsx
index 642eb56..0c4c752 100644
--- a/src/resources/store.jsx
+++ b/src/resources/store.jsx
@@ -1,4 +1,4 @@
-import React, { createContext, useReducer } from 'react';
+import React, { useCallback, createContext, useReducer } from 'react';
 
 export const StoreContext = createContext();
 
@@ -37,8 +37,15 @@ export const reducer = (state = initialState, action) => {
 export const ContextStoreProvider = ({ children }) => { // eslint-disable-line react/prop-types
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const thunk = useCallback((action) => {
+    if (typeof action === 'function') {
+      return action(dispatch, state);
+    }
+    return dispatch(action);
+  }, [state]);
+
   return (
-    <StoreContext.Provider value={{ state, dispatch }}>
+    <StoreContext.Provider value={{ state, dispatch: thunk }}>
       {children}
     </StoreContext.Provider>
   );
diff --git a/src/resources/toast/toast.actions.js b/src/resources/toast/toast.actions.js
deleted file mode 100644
index e2b1e22..0000000
--- a/src/resources/toast/toast.actions.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import uniqueId from 'lodash/uniqueId';
-
-const ADD_MESSAGE = 'ADD_MESSAGE';
-const REMOVE_MESSAGE = 'REMOVE_MESSAGE';
-
-const createToast = (dispatch, data) => {
-  const id = uniqueId('toast_');
-  dispatch({ type: ADD_MESSAGE, payload: { id, ...data } });
-  setTimeout(() => dispatch({ type: REMOVE_MESSAGE, payload: id }), 3000);
-};
-
-const removeToast = (dispatch, id) => {
-  dispatch({ type: REMOVE_MESSAGE, payload: id });
-};
-
-export const toastActions = {
-  createToast,
-  removeToast,
-};

From 66a6d421216c575d2380b44733264b2984bef05c Mon Sep 17 00:00:00 2001
From: Gloria Loi <loigloria2001@gmail.com>
Date: Tue, 31 Aug 2021 18:32:18 +0300
Subject: [PATCH 3/3] Change files structure and remove some actions

---
 src/app.jsx                                   |  4 +--
 src/components/toast/toast.jsx                |  4 +--
 src/components/toast/toast.stories.jsx        |  4 +--
 .../header/components/user-menu/user-menu.jsx |  4 +--
 src/pages/forgot/forgot.jsx                   | 13 ++++----
 src/pages/profile/profile.jsx                 |  4 +--
 src/pages/reset/reset.jsx                     | 10 +++---
 src/pages/sign-in/sign-in.jsx                 |  4 +--
 src/pages/sign-up/sign-up.jsx                 |  7 +++--
 src/resources/{ => store}/actions.js          | 31 +------------------
 src/resources/store/index.js                  |  3 ++
 src/resources/{store.jsx => store/reducer.js} | 21 -------------
 src/resources/store/store.jsx                 | 29 +++++++++++++++++
 13 files changed, 62 insertions(+), 76 deletions(-)
 rename src/resources/{ => store}/actions.js (73%)
 create mode 100644 src/resources/store/index.js
 rename src/resources/{store.jsx => store/reducer.js} (52%)
 create mode 100644 src/resources/store/store.jsx

diff --git a/src/app.jsx b/src/app.jsx
index 3a23dc7..cb928d6 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -7,8 +7,8 @@ import * as loaderService from 'services/loader.service';
 import * as socketService from 'services/socket.service';
 import api from 'services/api.service';
 
-import { ContextStoreProvider, StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import ContextStoreProvider, { StoreContext } from 'resources/store/store';
+import actions from 'resources/store/actions';
 
 import Toast from 'components/toast';
 import Loading from 'components/loading';
diff --git a/src/components/toast/toast.jsx b/src/components/toast/toast.jsx
index 0f4b6fa..e866d56 100644
--- a/src/components/toast/toast.jsx
+++ b/src/components/toast/toast.jsx
@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import ReactDOM from 'react-dom';
 
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+import actions from 'resources/store/actions';
 
 import Icon from 'components/icon';
 import IconButton from 'components/icon-button';
diff --git a/src/components/toast/toast.stories.jsx b/src/components/toast/toast.stories.jsx
index 153169b..93d694a 100644
--- a/src/components/toast/toast.stories.jsx
+++ b/src/components/toast/toast.stories.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
-import { ContextStoreProvider, StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import ContextStoreProvider, { StoreContext } from 'resources/store/store';
+import actions from 'resources/store/actions';
 
 import Button from 'components/button';
 
diff --git a/src/layouts/main/header/components/user-menu/user-menu.jsx b/src/layouts/main/header/components/user-menu/user-menu.jsx
index 34e7803..de8f18d 100644
--- a/src/layouts/main/header/components/user-menu/user-menu.jsx
+++ b/src/layouts/main/header/components/user-menu/user-menu.jsx
@@ -4,8 +4,8 @@ import { Link, useHistory } from 'react-router-dom';
 
 import { routes } from 'routes';
 
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+import actions from 'resources/store/actions';
 
 import styles from './user-menu.styles.pcss';
 
diff --git a/src/pages/forgot/forgot.jsx b/src/pages/forgot/forgot.jsx
index 8d9f1ea..1880797 100644
--- a/src/pages/forgot/forgot.jsx
+++ b/src/pages/forgot/forgot.jsx
@@ -4,8 +4,9 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { routes } from 'routes';
 
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+
+import * as api from 'resources/user/user.api';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -14,17 +15,17 @@ import Form from 'components/form';
 import styles from './forgot.pcss';
 
 const Forgot = () => {
-  const { state, dispatch } = useContext(StoreContext);
+  const { state } = useContext(StoreContext);
   const { user } = state;
 
   const [values, setValues] = React.useState({});
   const [pending, setPending] = React.useState(false);
   const [submitted, setSubmitted] = React.useState(false);
 
-  const handleSubmit = async (submitValues) => {
+  const handleSubmit = async ({ email }) => {
     setPending(true);
-    await dispatch(actions.forgot(submitValues));
-    setValues(submitValues);
+    await api.forgot({ email });
+    setValues({ email });
     setSubmitted(true);
     setPending(false);
   };
diff --git a/src/pages/profile/profile.jsx b/src/pages/profile/profile.jsx
index bc09243..fda80d7 100644
--- a/src/pages/profile/profile.jsx
+++ b/src/pages/profile/profile.jsx
@@ -4,8 +4,8 @@ import React, {
 import * as yup from 'yup';
 import { useFormContext } from 'react-hook-form';
 
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+import actions from 'resources/store/actions';
 
 import * as filesApi from 'resources/files/files.api';
 
diff --git a/src/pages/reset/reset.jsx b/src/pages/reset/reset.jsx
index 1877e76..52f3aba 100644
--- a/src/pages/reset/reset.jsx
+++ b/src/pages/reset/reset.jsx
@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 
 import { routes } from 'routes';
 
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+import * as api from 'resources/user/user.api';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -13,6 +13,7 @@ import Form from 'components/form';
 import styles from './reset.pcss';
 
 function Reset() {
+  const history = useHistory();
   const { state: { user } } = useContext(StoreContext);
 
   const searchParams = new URLSearchParams(window.location.search);
@@ -22,7 +23,8 @@ function Reset() {
 
   const handleSubmit = async (submitValues) => {
     setPending(true);
-    await actions.reset(submitValues);
+    await api.reset(submitValues);
+    history.push(routes.signIn.path);
     setPending(false);
   };
 
diff --git a/src/pages/sign-in/sign-in.jsx b/src/pages/sign-in/sign-in.jsx
index 5de9b5e..51ce0ed 100644
--- a/src/pages/sign-in/sign-in.jsx
+++ b/src/pages/sign-in/sign-in.jsx
@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 
 import { routes } from 'routes';
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+import actions from 'resources/store/actions';
 
 import Input from 'components/input';
 import Button from 'components/button';
diff --git a/src/pages/sign-up/sign-up.jsx b/src/pages/sign-up/sign-up.jsx
index 2dda7b0..bea7af4 100644
--- a/src/pages/sign-up/sign-up.jsx
+++ b/src/pages/sign-up/sign-up.jsx
@@ -4,8 +4,8 @@ import { Link, Redirect } from 'react-router-dom';
 import config from 'config';
 import { routes } from 'routes';
 
-import { StoreContext } from 'resources/store';
-import actions from 'resources/actions';
+import { StoreContext } from 'resources/store/store';
+import * as api from 'resources/user/user.api';
 
 import Input from 'components/input';
 import Button from 'components/button';
@@ -22,7 +22,8 @@ function SignUp() {
   const [signupToken, setSignupToken] = React.useState();
 
   const handleSubmit = async (submitValues) => {
-    const response = await actions.signUp(submitValues);
+    const response = await api.signUp(submitValues);
+
     if (response.signupToken) setSignupToken(response.signupToken);
     setRegistered(true);
     setValues(submitValues);
diff --git a/src/resources/actions.js b/src/resources/store/actions.js
similarity index 73%
rename from src/resources/actions.js
rename to src/resources/store/actions.js
index 8150ec5..bdd5370 100644
--- a/src/resources/actions.js
+++ b/src/resources/store/actions.js
@@ -1,8 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
 
 import * as socketService from 'services/socket.service';
-import { routes } from 'routes';
-import * as api from './user/user.api';
+import * as api from 'resources/user/user.api';
 
 const ADD_MESSAGE = 'ADD_MESSAGE';
 const REMOVE_MESSAGE = 'REMOVE_MESSAGE';
@@ -35,31 +34,6 @@ const setUser = (data) => (dispatch) => {
   return data;
 };
 
-const signUp = async ({
-  firstName,
-  lastName,
-  email,
-  password,
-}) => {
-  const response = await api.signUp({
-    firstName,
-    lastName,
-    email,
-    password,
-  });
-
-  return response;
-};
-
-const forgot = async ({ email }) => {
-  await api.forgot({ email });
-};
-
-const reset = ({ password, token }) => async (_dispatch, _getState, ctx) => {
-  await api.reset({ password, token });
-  ctx.history.push(routes.signIn.path);
-};
-
 const signOut = () => async (dispatch) => {
   await api.signOut();
   dispatch({ type: REMOVE_USER });
@@ -83,9 +57,6 @@ const updateCurrentUser = (data) => async (dispatch) => {
 export default {
   setUser,
   signIn,
-  signUp,
-  forgot,
-  reset,
   signOut,
   getCurrentUser,
   updateCurrentUser,
diff --git a/src/resources/store/index.js b/src/resources/store/index.js
new file mode 100644
index 0000000..9601127
--- /dev/null
+++ b/src/resources/store/index.js
@@ -0,0 +1,3 @@
+import ContextStoreProvider from './store';
+
+export default ContextStoreProvider;
diff --git a/src/resources/store.jsx b/src/resources/store/reducer.js
similarity index 52%
rename from src/resources/store.jsx
rename to src/resources/store/reducer.js
index 0c4c752..42f7dc0 100644
--- a/src/resources/store.jsx
+++ b/src/resources/store/reducer.js
@@ -1,7 +1,3 @@
-import React, { useCallback, createContext, useReducer } from 'react';
-
-export const StoreContext = createContext();
-
 export const initialState = {
   user: null,
   toast: [],
@@ -33,20 +29,3 @@ export const reducer = (state = initialState, action) => {
       throw new Error();
   }
 };
-
-export const ContextStoreProvider = ({ children }) => { // eslint-disable-line react/prop-types
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const thunk = useCallback((action) => {
-    if (typeof action === 'function') {
-      return action(dispatch, state);
-    }
-    return dispatch(action);
-  }, [state]);
-
-  return (
-    <StoreContext.Provider value={{ state, dispatch: thunk }}>
-      {children}
-    </StoreContext.Provider>
-  );
-};
diff --git a/src/resources/store/store.jsx b/src/resources/store/store.jsx
new file mode 100644
index 0000000..da3b2e7
--- /dev/null
+++ b/src/resources/store/store.jsx
@@ -0,0 +1,29 @@
+import React, { useCallback, createContext, useReducer } from 'react';
+import PropTypes from 'prop-types';
+
+import { initialState, reducer } from './reducer';
+
+export const StoreContext = createContext();
+
+const ContextStoreProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const thunk = useCallback((action) => {
+    if (typeof action === 'function') {
+      return action(dispatch, state);
+    }
+    return dispatch(action);
+  }, [state]);
+
+  return (
+    <StoreContext.Provider value={{ state, dispatch: thunk }}>
+      {children}
+    </StoreContext.Provider>
+  );
+};
+
+ContextStoreProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default ContextStoreProvider;