refactor: remove waffleFlags from state management and related selectors

Author: bra-i-am

src/editors/containers/VideoEditor/components/VideoEditorModal.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { useWaffleFlags } from '@src/data/apiHooks';
 import * as appHooks from '../../../hooks';
 import { thunkActions, selectors } from '../../../data/redux';
 import VideoSettingsModal from './VideoSettingsModal';
 import { RequestKeys } from '../../../data/constants/requests';
-import { getWaffleFlags } from '../../../data/redux/app/selectors';
 
 interface Props {
   onReturn?: (() => void);
@@ -42,7 +42,7 @@ const VideoEditorModal: React.FC<Props> = ({
   const isLoaded = useSelector(
     (state) => selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchVideos }),
   );
-  const waffleFlags = useSelector(getWaffleFlags);
+  const { useNewVideoUploadsPage } = useWaffleFlags();
 
   useEffect(() => {
     hooks.initialize(dispatch, selectedVideoId, selectedVideoUrl);
@@ -53,7 +53,7 @@ const VideoEditorModal: React.FC<Props> = ({
       onReturn: onSettingsReturn,
       isLibrary,
       onClose,
-      useNewVideoUploadsPage: waffleFlags?.useNewVideoUploadsPage || false,
+      useNewVideoUploadsPage,
     }}
     />
   );

src/editors/data/redux/app/reducer.ts

@@ -22,7 +22,6 @@ const initialState: EditorState['app'] = {
   courseDetails: {},
   showRawEditor: false,
   isMarkdownEditorEnabledForCourse: false,
-  waffleFlags: {},
 };
 
 // eslint-disable-next-line no-unused-vars
@@ -63,10 +62,6 @@ const app = createSlice({
       ...state,
       showRawEditor: payload.data?.metadata?.editor === 'raw',
     }),
-    setWaffleFlags: (state, { payload }) => ({
-      ...state,
-      waffleFlags: payload,
-    }),
   },
 });
 

src/editors/data/redux/app/selectors.ts

@@ -27,7 +27,6 @@ export const simpleSelectors = {
   videos: mkSimpleSelector(app => app.videos),
   showRawEditor: mkSimpleSelector(app => app.showRawEditor),
   isMarkdownEditorEnabledForCourse: mkSimpleSelector(app => app.isMarkdownEditorEnabledForCourse),
-  waffleFlags: mkSimpleSelector(app => app.waffleFlags),
 };
 
 export const returnUrl = createSelector(
@@ -117,11 +116,6 @@ export const analytics = createSelector(
   ),
 );
 
-export const getWaffleFlags = createSelector(
-  [simpleSelectors.waffleFlags],
-  (waffleFlags) => waffleFlags,
-);
-
 export default {
   ...simpleSelectors,
   isInitialized,

src/editors/data/redux/index.ts

@@ -108,7 +108,6 @@ export interface EditorState {
     courseDetails: Record<string, any>;
     showRawEditor: boolean;
     isMarkdownEditorEnabledForCourse: boolean;
-    waffleFlags: Record<string, boolean>;
   },
   requests: Record<keyof typeof RequestKeys, {
     status: keyof typeof RequestStates;

src/editors/data/redux/thunkActions/app.js

@@ -8,7 +8,6 @@ import * as module from './app';
 import { actions as appActions, selectors } from '../app';
 import { actions as requestsActions } from '../requests';
 import { RequestKeys } from '../../constants/requests';
-import { getWaffleFlags } from '../../../../data/api';
 
 // Similar to `import { actions } from '..';` but avoid circular imports:
 const actions = {
@@ -80,13 +79,6 @@ export const fetchCourseDetails = () => (dispatch) => {
   }));
 };
 
-export function fetchWaffleFlags(courseId) {
-  return async (dispatch) => {
-    const waffleFlags = await getWaffleFlags(courseId);
-    dispatch(appActions.setWaffleFlags(waffleFlags));
-  };
-}
-
 /**
  * @param {string} studioEndpointUrl
  * @param {string} blockId
@@ -112,7 +104,6 @@ export const initialize = (data) => (dispatch) => {
       dispatch(module.fetchImages({ pageNumber: 0 }));
       break;
     case 'video':
-      dispatch(module.fetchWaffleFlags(data.courseId));
       dispatch(module.fetchVideos());
       dispatch(module.fetchStudioView());
       dispatch(module.fetchCourseDetails());

src/editors/data/redux/thunkActions/app.test.js

@@ -303,16 +303,13 @@ describe('app thunkActions', () => {
         fetchImages,
         fetchVideos,
         fetchCourseDetails,
-        fetchWaffleFlags,
       } = thunkActions;
-      const waffleFlagsThunk = jest.fn(() => 'fetchWaffleFlags');
       thunkActions.fetchBlock = () => 'fetchBlock';
       thunkActions.fetchUnit = () => 'fetchUnit';
       thunkActions.fetchStudioView = () => 'fetchStudioView';
       thunkActions.fetchImages = () => 'fetchImages';
       thunkActions.fetchVideos = () => 'fetchVideos';
       thunkActions.fetchCourseDetails = () => 'fetchCourseDetails';
-      thunkActions.fetchWaffleFlags = jest.fn().mockImplementation(() => waffleFlagsThunk);
       const data = {
         ...testValue,
         blockType: 'video',
@@ -326,19 +323,16 @@ describe('app thunkActions', () => {
         [actions.app.initialize(data)],
         [thunkActions.fetchBlock()],
         [thunkActions.fetchUnit()],
-        [waffleFlagsThunk],
         [thunkActions.fetchVideos()],
         [thunkActions.fetchStudioView()],
         [thunkActions.fetchCourseDetails()],
       ]);
-      expect(thunkActions.fetchWaffleFlags).toHaveBeenCalledWith(data.courseId);
       thunkActions.fetchBlock = fetchBlock;
       thunkActions.fetchUnit = fetchUnit;
       thunkActions.fetchStudioView = fetchStudioView;
       thunkActions.fetchImages = fetchImages;
       thunkActions.fetchVideos = fetchVideos;
       thunkActions.fetchCourseDetails = fetchCourseDetails;
-      thunkActions.fetchWaffleFlags = fetchWaffleFlags;
     });
   });
   describe('saveBlock', () => {