From 48c4d9778656d95c93bc6f992a83fc309f8e22a5 Mon Sep 17 00:00:00 2001 From: adityagarg06 Date: Tue, 6 Feb 2024 19:53:24 +0530 Subject: [PATCH 1/2] Refactor loading actions --- client/constants.js | 3 --- client/modules/IDE/actions/assets.js | 2 +- client/modules/IDE/actions/collections.js | 2 +- client/modules/IDE/actions/loader.js | 9 -------- client/modules/IDE/actions/projects.js | 2 +- .../modules/IDE/actions/projects.unit.test.js | 4 ++-- .../IDE/components/AddToCollectionList.jsx | 15 +++++-------- .../components/AddToCollectionSketchList.jsx | 15 +++++-------- client/modules/IDE/reducers/loading.js | 21 +++++++++---------- client/modules/Legal/pages/Legal.jsx | 12 +++++++---- 10 files changed, 33 insertions(+), 52 deletions(-) delete mode 100644 client/modules/IDE/actions/loader.js diff --git a/client/constants.js b/client/constants.js index 9c5f9ae353..608a31a0f9 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/assets.js b/client/modules/IDE/actions/assets.js index 333dfd0ab2..ecd16fb7c6 100644 --- a/client/modules/IDE/actions/assets.js +++ b/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; diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js index e8bda9623f..aa8d5added 100644 --- a/client/modules/IDE/actions/collections.js +++ b/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; diff --git a/client/modules/IDE/actions/loader.js b/client/modules/IDE/actions/loader.js deleted file mode 100644 index f331094c02..0000000000 --- a/client/modules/IDE/actions/loader.js +++ /dev/null @@ -1,9 +0,0 @@ -import * as ActionTypes from '../../../constants'; - -export function startLoader() { - return { type: ActionTypes.START_LOADING }; -} - -export function stopLoader() { - return { type: ActionTypes.STOP_LOADING }; -} diff --git a/client/modules/IDE/actions/projects.js b/client/modules/IDE/actions/projects.js index eb9984cf54..34ca2a35bf 100644 --- a/client/modules/IDE/actions/projects.js +++ b/client/modules/IDE/actions/projects.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) { diff --git a/client/modules/IDE/actions/projects.unit.test.js b/client/modules/IDE/actions/projects.unit.test.js index 6fce08c796..0d87b9361c 100644 --- a/client/modules/IDE/actions/projects.unit.test.js +++ b/client/modules/IDE/actions/projects.unit.test.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 diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx index ecb020ce6f..3b448c184c 100644 --- a/client/modules/IDE/components/AddToCollectionList.jsx +++ b/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 { 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 ; } else if (collections.length === 0) { return t('AddToCollectionList.Empty'); diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/client/modules/IDE/components/AddToCollectionSketchList.jsx index cc5b17379c..b48f667177 100644 --- a/client/modules/IDE/components/AddToCollectionSketchList.jsx +++ b/client/modules/IDE/components/AddToCollectionSketchList.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 ; } else if (sketches.length === 0) { // TODO: shouldn't it be NoSketches? -Linda diff --git a/client/modules/IDE/reducers/loading.js b/client/modules/IDE/reducers/loading.js index 529c5747a3..a1db68d80a 100644 --- a/client/modules/IDE/reducers/loading.js +++ b/client/modules/IDE/reducers/loading.js @@ -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; diff --git a/client/modules/Legal/pages/Legal.jsx b/client/modules/Legal/pages/Legal.jsx index 0e629f789a..7fccf28b6c 100644 --- a/client/modules/Legal/pages/Legal.jsx +++ b/client/modules/Legal/pages/Legal.jsx @@ -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 ( @@ -51,7 +55,7 @@ function Legal({ policyFile, title }) { - {isLoading && } + {loading && } ); } From e8aa08461646bf48b007a7859b915592507941d4 Mon Sep 17 00:00:00 2001 From: adityagarg06 Date: Thu, 8 Feb 2024 23:30:45 +0530 Subject: [PATCH 2/2] fix/projects.unit.test and reverting changes made in AddToCollectionList, AddToCollectionSketchList and Legal components --- client/modules/IDE/actions/projects.unit.test.js | 5 +++-- .../IDE/components/AddToCollectionList.jsx | 15 ++++++++++----- .../IDE/components/AddToCollectionSketchList.jsx | 15 ++++++++++----- client/modules/Legal/pages/Legal.jsx | 12 ++++-------- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/client/modules/IDE/actions/projects.unit.test.js b/client/modules/IDE/actions/projects.unit.test.js index 0d87b9361c..95a6205520 100644 --- a/client/modules/IDE/actions/projects.unit.test.js +++ b/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 diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx index 3b448c184c..ecb020ce6f 100644 --- a/client/modules/IDE/components/AddToCollectionList.jsx +++ b/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 ; } else if (collections.length === 0) { return t('AddToCollectionList.Empty'); diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/client/modules/IDE/components/AddToCollectionSketchList.jsx index b48f667177..cc5b17379c 100644 --- a/client/modules/IDE/components/AddToCollectionSketchList.jsx +++ b/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 ; } else if (sketches.length === 0) { // TODO: shouldn't it be NoSketches? -Linda diff --git a/client/modules/Legal/pages/Legal.jsx b/client/modules/Legal/pages/Legal.jsx index 7fccf28b6c..0e629f789a 100644 --- a/client/modules/Legal/pages/Legal.jsx +++ b/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 ( @@ -55,7 +51,7 @@ function Legal({ policyFile, title }) { - {loading && } + {isLoading && } ); }