Refactor loading actions

Author: adityagarg06

client/constants.js

@@ -137,9 +137,6 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
-export const START_LOADING = 'START_LOADING';
-export const STOP_LOADING = 'STOP_LOADING';
-
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 

client/modules/IDE/actions/assets.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';
 
 const { setAssets, deleteAsset } = assetsActions;

client/modules/IDE/actions/collections.js

@@ -1,7 +1,7 @@
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;

client/modules/IDE/actions/loader.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 // eslint-disable-next-line
 export function getProjects(username) {

client/modules/IDE/actions/projects.js

@@ -33,9 +33,9 @@ describe('projects action creator tests', () => {
     store = mockStore(initialTestState);
 
     const expectedActions = [
-      { type: ActionTypes.START_LOADING },
+      { type: 'loading/startLoader' },
       { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
-      { type: ActionTypes.STOP_LOADING }
+      { type: 'loading/stopLoader' }
     ];
 
     return store

client/modules/IDE/actions/projects.unit.test.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,6 +13,7 @@ import {
 import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
 import { remSize } from '../../../theme';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 export const CollectionAddSketchWrapper = styled.div`
   width: ${remSize(600)};
@@ -29,20 +30,14 @@ export const QuickAddWrapper = styled.div`
 
 const AddToCollectionList = ({ projectId }) => {
   const { t } = useTranslation();
-
   const dispatch = useDispatch();
-
   const username = useSelector((state) => state.user.username);
-
   const collections = useSelector(getSortedCollections);
-
-  // TODO: improve loading state
   const loading = useSelector((state) => state.loading);
-  const [hasLoadedData, setHasLoadedData] = useState(false);
-  const showLoader = loading && !hasLoadedData;
 
   useEffect(() => {
-    dispatch(getCollections(username)).then(() => setHasLoadedData(true));
+    dispatch(startLoader());
+    dispatch(getCollections(username)).then(() => dispatch(stopLoader()));
   }, [dispatch, username]);
 
   const handleCollectionAdd = (collection) => {
@@ -60,7 +55,7 @@ const AddToCollectionList = ({ projectId }) => {
   }));
 
   const getContent = () => {
-    if (showLoader) {
+    if (loading) {
       return <Loader />;
     } else if (collections.length === 0) {
       return t('AddToCollectionList.Empty');

client/modules/IDE/components/AddToCollectionList.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
@@ -12,23 +12,18 @@ import {
   CollectionAddSketchWrapper,
   QuickAddWrapper
 } from './AddToCollectionList';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 const AddToCollectionSketchList = ({ collection }) => {
   const { t } = useTranslation();
-
   const dispatch = useDispatch();
-
   const username = useSelector((state) => state.user.username);
-
   const sketches = useSelector(getSortedSketches);
-
-  // TODO: improve loading state
   const loading = useSelector((state) => state.loading);
-  const [hasLoadedData, setHasLoadedData] = useState(false);
-  const showLoader = loading && !hasLoadedData;
 
   useEffect(() => {
-    dispatch(getProjects(username)).then(() => setHasLoadedData(true));
+    dispatch(startLoader());
+    dispatch(getProjects(username)).then(() => dispatch(stopLoader()));
   }, [dispatch, username]);
 
   const handleCollectionAdd = (sketch) => {
@@ -48,7 +43,7 @@ const AddToCollectionSketchList = ({ collection }) => {
   }));
 
   const getContent = () => {
-    if (showLoader) {
+    if (loading) {
       return <Loader />;
     } else if (sketches.length === 0) {
       // TODO: shouldn't it be NoSketches? -Linda

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -1,14 +1,13 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
-const loading = (state = false, action) => {
-  switch (action.type) {
-    case ActionTypes.START_LOADING:
-      return true;
-    case ActionTypes.STOP_LOADING:
-      return false;
-    default:
-      return state;
+const loadingSlice = createSlice({
+  name: 'loading',
+  initialState: false,
+  reducers: {
+    startLoader: () => true,
+    stopLoader: () => false
   }
-};
+});
 
-export default loading;
+export const { startLoader, stopLoader } = loadingSlice.actions;
+export default loadingSlice.reducer;

client/modules/IDE/reducers/loading.js

@@ -4,12 +4,14 @@ import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
+import { useDispatch, useSelector } from 'react-redux';
 import RouterTab from '../../../common/RouterTab';
 import RootPage from '../../../components/RootPage';
 import { remSize } from '../../../theme';
 import Loader from '../../App/components/loader';
 import Nav from '../../IDE/components/Header/Nav';
 import PolicyContainer from '../components/PolicyContainer';
+import { startLoader, stopLoader } from '../../IDE/reducers/loading';
 
 const StyledTabList = styled.nav`
   display: flex;
@@ -24,15 +26,17 @@ const StyledTabList = styled.nav`
 
 function Legal({ policyFile, title }) {
   const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useState(true);
+  const loading = useSelector((state) => state.loading);
+  const dispatch = useDispatch();
   const [policy, setPolicy] = useState('');
 
   useEffect(() => {
+    dispatch(startLoader());
     axios.get(policyFile).then((response) => {
+      dispatch(stopLoader());
       setPolicy(response.data);
-      setIsLoading(false);
     });
-  }, [policyFile]);
+  }, [dispatch, policyFile]);
 
   return (
     <RootPage>
@@ -51,7 +55,7 @@ function Legal({ policyFile, title }) {
         </ul>
       </StyledTabList>
       <PolicyContainer policy={policy} />
-      {isLoading && <Loader />}
+      {loading && <Loader />}
     </RootPage>
   );
 }