refactor: code refactoring

raccoongang · Feb 29, 2024 · 4daa89e · 4daa89e
1 parent 2de784f
commit 4daa89e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 19 deletions.
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -142,7 +142,7 @@ const CourseUnit = ({ courseId }) => {
               )}
               {staticFileNotices && (
                 <PasteNotificationAlert
-                  staticFileNotices={JSON.parse(staticFileNotices)}
+                  staticFileNotices={staticFileNotices}
                   courseId={courseId}
                 />
               )}

diff --git a/src/course-unit/course-sequence/Sequence.jsx b/src/course-unit/course-sequence/Sequence.jsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
@@ -22,16 +21,6 @@ const Sequence = ({
   const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
   const { sequenceStatus, sequenceMightBeUnit } = useSelector(state => state.courseUnit);
 
-  useEffect(() => {
-    const staticFileNotices = localStorage.getItem('staticFileNotices');
-
-    return () => {
-      if (staticFileNotices) {
-        localStorage.removeItem('staticFileNotices');
-      }
-    };
-  }, []);
-
   const defaultContent = (
     <div className="sequence-container d-inline-flex flex-row">
       <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>

diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
@@ -1,5 +1,6 @@
 export const getCourseUnitData = (state) => state.courseUnit.unit;
 export const getCanEdit = (state) => state.courseUnit.canEdit;
+export const getStaticFileNotices = (state) => state.courseUnit.staticFileNotices;
 export const getSavingStatus = (state) => state.courseUnit.savingStatus;
 export const getLoadingStatus = (state) => state.courseUnit.loadingStatus;
 export const getSequenceStatus = (state) => state.courseUnit.sequenceStatus;

diff --git a/src/course-unit/data/slice.js b/src/course-unit/data/slice.js
@@ -19,6 +19,7 @@ const slice = createSlice({
     courseSectionVertical: {},
     courseVerticalChildren: {},
     clipboardData: null,
+    staticFileNotices: {},
   },
   reducers: {
     fetchCourseItemSuccess: (state, { payload }) => {
@@ -100,6 +101,9 @@ const slice = createSlice({
     updateClipboardData: (state, { payload }) => {
       state.clipboardData = payload;
     },
+    fetchStaticFileNoticesSuccess: (state, { payload }) => {
+      state.staticFileNotices = payload;
+    },
     reorderXBlockList: (state, { payload }) => {
       // Create a map for payload IDs to their index for O(1) lookups
       const indexMap = new Map(payload.map((id, index) => [id, index]));
@@ -129,6 +133,7 @@ export const {
   deleteXBlock,
   duplicateXBlock,
   updateClipboardData,
+  fetchStaticFileNoticesSuccess,
   reorderXBlockList,
 } = slice.actions;
 

diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
@@ -38,6 +38,7 @@ import {
   updateQueryPendingStatus,
   deleteXBlock,
   duplicateXBlock,
+  fetchStaticFileNoticesSuccess,
   reorderXBlockList,
 } from './slice';
 import { getNotificationMessage } from './utils';
@@ -75,6 +76,8 @@ export function fetchCourseSectionVerticalData(courseId, sequenceId) {
         modelType: 'units',
         models: courseSectionVerticalData.units,
       }));
+      dispatch(fetchStaticFileNoticesSuccess(JSON.parse(localStorage.getItem('staticFileNotices'))));
+      localStorage.removeItem('staticFileNotices');
       dispatch(updateClipboardData(courseSectionVerticalData.userClipboard));
       dispatch(fetchSequenceSuccess({ sequenceId }));
       return true;

diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
@@ -21,6 +21,7 @@ import {
   getLoadingStatus,
   getSavingStatus,
   getSequenceStatus,
+  getStaticFileNotices,
   getCanEdit,
 } from './data/selectors';
 import { changeEditTitleFormOpen, updateQueryPendingStatus } from './data/slice';
@@ -40,7 +41,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const sequenceStatus = useSelector(getSequenceStatus);
   const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
   const courseVerticalChildren = useSelector(getCourseVerticalChildren);
-  const staticFileNotices = localStorage.getItem('staticFileNotices');
+  const staticFileNotices = useSelector(getStaticFileNotices);
   const navigate = useNavigate();
   const isEditTitleFormOpen = useSelector(state => state.courseUnit.isEditTitleFormOpen);
   const isQueryPending = useSelector(state => state.courseUnit.isQueryPending);
@@ -105,12 +106,6 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     dispatch(setXBlockOrderListQuery(blockId, xblockListIds, restoreCallback));
   };
 
-  useEffect(() => {
-    if (staticFileNotices) {
-      localStorage.removeItem('staticFileNotices');
-    }
-  }, []);
-
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
       dispatch(updateQueryPendingStatus(true));