fix/projects.unit.test and reverting changes made in AddToCollectionList, AddToCollectionSketchList and Legal components

Author: adityagarg06

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

@@ -5,6 +5,7 @@ import { rest } from 'msw';
 
 import * as ProjectActions from './projects';
 import * as ActionTypes from '../../../constants';
+import { startLoader, stopLoader } from '../reducers/loading';
 import {
   initialTestState,
   mockProjects
@@ -33,9 +34,9 @@ describe('projects action creator tests', () => {
     store = mockStore(initialTestState);
 
     const expectedActions = [
-      { type: 'loading/startLoader' },
+      { type: startLoader.type },
       { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
-      { type: 'loading/stopLoader' }
+      { type: stopLoader.type }
     ];
 
     return store

client/modules/IDE/components/AddToCollectionList.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,7 +13,6 @@ 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)};
@@ -30,14 +29,20 @@ 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(startLoader());
-    dispatch(getCollections(username)).then(() => dispatch(stopLoader()));
+    dispatch(getCollections(username)).then(() => setHasLoadedData(true));
   }, [dispatch, username]);
 
   const handleCollectionAdd = (collection) => {
@@ -55,7 +60,7 @@ const AddToCollectionList = ({ projectId }) => {
   }));
 
   const getContent = () => {
-    if (loading) {
+    if (showLoader) {
       return <Loader />;
     } else if (collections.length === 0) {
       return t('AddToCollectionList.Empty');

client/modules/IDE/components/AddToCollectionSketchList.jsx

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

client/modules/Legal/pages/Legal.jsx

@@ -4,14 +4,12 @@ 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;
@@ -26,17 +24,15 @@ const StyledTabList = styled.nav`
 
 function Legal({ policyFile, title }) {
   const { t } = useTranslation();
-  const loading = useSelector((state) => state.loading);
-  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(true);
   const [policy, setPolicy] = useState('');
 
   useEffect(() => {
-    dispatch(startLoader());
     axios.get(policyFile).then((response) => {
-      dispatch(stopLoader());
       setPolicy(response.data);
+      setIsLoading(false);
     });
-  }, [dispatch, policyFile]);
+  }, [policyFile]);
 
   return (
     <RootPage>
@@ -55,7 +51,7 @@ function Legal({ policyFile, title }) {
         </ul>
       </StyledTabList>
       <PolicyContainer policy={policy} />
-      {loading && <Loader />}
+      {isLoading && <Loader />}
     </RootPage>
   );
 }