feat: libraryselector.js api update

openedx · Nov 15, 2023 · 5d2f783 · 5d2f783
1 parent 3d8d5b0
commit 5d2f783
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 90 deletions.
diff --git a/src/editors/containers/LibraryContentEditor/LibrarySelector.jsx b/src/editors/containers/LibraryContentEditor/LibrarySelector.jsx
@@ -9,32 +9,23 @@ import { actions, selectors } from './data';
 import { useLibrarySelectorHook } from './hooks';
 
 export const LibrarySelector = ({
-  studioEndpointUrl,
   // redux
   libraries,
-  loadLibrary,
   selectedLibraryId,
   settings,
-  unloadLibrary,
 }) => {
   const {
     initializeLibrary,
     onSelectedLibraryChange,
+    selectionName,
     setSelectedLibrary,
-    title,
   } = useLibrarySelectorHook({
     libraries,
-    loadLibrary,
     selectedLibraryId,
     settings,
-    studioEndpointUrl,
-    unloadLibrary,
   });
 
-  if (!!selectedLibraryId) {
-    initializeLibrary(selectedLibraryId);
-  }
-
+  initializeLibrary(selectedLibraryId);
   onSelectedLibraryChange(selectedLibraryId);
 
   return (
@@ -45,17 +36,16 @@ export const LibrarySelector = ({
           <Dropdown.Toggle
             className='w-100'
             id='library-selector'
-            title={title}
             variant='outline-primary'
           >
-            {title}
+            {selectionName}
           </Dropdown.Toggle>
           <Dropdown.Menu>
-            <Dropdown.Item onClick={() => setSelectedLibrary(null)}>
+            <Dropdown.Item key={-1} onClick={() => setSelectedLibrary(null)}>
               <FormattedMessage {...messages.librarySelectorDropdownDefault} />
             </Dropdown.Item>
             {libraries.map((library, index) => (
-              <Dropdown.Item onClick={() => setSelectedLibrary(index)}>
+              <Dropdown.Item key={index} onClick={() => setSelectedLibrary(index)}>
                 {library.display_name}
               </Dropdown.Item>
             ))}
@@ -77,12 +67,9 @@ LibrarySelector.defaultProps = {
 };
 
 LibrarySelector.propTypes = {
-  studioEndpointUrl: PropTypes.string.isRequired,
   // redux
   libraries: PropTypes.array,
-  loadLibrary: PropTypes.func.isRequired,
   settings: PropTypes.object,
-  unloadLibrary: PropTypes.func.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -91,10 +78,7 @@ export const mapStateToProps = (state) => ({
   settings: selectors.settings(state),
 });
 
-export const mapDispatchToProps = {
-  loadLibrary: actions.loadLibrary,
-  unloadLibrary: actions.unloadLibrary,
-};
+export const mapDispatchToProps = { };
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LibrarySelector));
 

diff --git a/src/editors/containers/LibraryContentEditor/LibrarySettings.jsx b/src/editors/containers/LibraryContentEditor/LibrarySettings.jsx
@@ -25,7 +25,7 @@ export const LibrarySettings = ({
             libraryId: selectedLibraryId,
             mode: e.target.value,
           })}
-          value={settings[selectedLibraryId]?.mode}
+          value={settings[selectedLibraryId]?.mode ?? 0}
         >
           <Form.Radio value={modes.random.value}>
             <FormattedMessage {...modes.random.description} />
@@ -45,7 +45,7 @@ export const LibrarySettings = ({
                 libraryId: selectedLibraryId,
                 count: e.target.value,
               })}
-              value={settings[selectedLibraryId]?.count}
+              value={settings[selectedLibraryId]?.count ?? -1}
               type="number"
             />
             <label className='col pt-2'>
@@ -58,7 +58,7 @@ export const LibrarySettings = ({
       <div className='row mb-2 p-3 border-top'>
         <div className='col p-0'>
           <Form.Switch
-            checked={settings[selectedLibraryId]?.showReset}
+            checked={settings[selectedLibraryId]?.showReset ?? false}
             onChange={(e) => onShowResetChange({
               libraryId: selectedLibraryId,
               showReset: e.target.checked,

diff --git a/src/editors/containers/LibraryContentEditor/hooks.js b/src/editors/containers/LibraryContentEditor/hooks.js
@@ -2,13 +2,18 @@ import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { modes } from './constants';
-import { actions, selectors } from './data';
+import { actions } from '../../data/redux';
 import api from './data/api';
 import * as requests from './data/requests';
 import { RequestKeys } from '../../data/constants/requests';
 
 const getLibraryIndex = (libraries, libraryId) => {
-  return libraries.findIndex(library => library.library_key === libraryId);
+  const index = libraries.findIndex(library => library.library_key === libraryId);
+  if (index >= 0) {
+    return index;
+  } else {
+    return null;
+  }
 };
 
 export const useLibraryHook = ({
@@ -19,7 +24,7 @@ export const useLibraryHook = ({
   const fetchLibraryList = () => useEffect(() => {
     dispatch(requests.fetchContentStore({
       onSuccess: (response) => {
-        dispatch(actions.loadLibraryList({
+        dispatch(actions.library.loadLibraryList({
           libraries: response?.data?.libraries,
         }));
       },
@@ -47,7 +52,7 @@ export const useLibraryHook = ({
         },
       };
     }
-    dispatch(actions.initializeFromBlockValue({ selectedLibraryId, settings }));
+    dispatch(actions.library.initializeFromBlockValue({ selectedLibraryId, settings }));
   }, [blockValue]);
 
   return {
@@ -61,81 +66,83 @@ export const useLibraryHook = ({
 
 export const useLibrarySelectorHook = ({
   libraries,
-  loadLibrary,
   selectedLibraryId,
   settings,
-  studioEndpointUrl,
-  unloadLibrary,
 }) => {
   const dispatch = useDispatch();
   const [ selectedLibrary, setSelectedLibrary ] = useState(
     getLibraryIndex(libraries, selectedLibraryId)
   );
 
   const fetchLibraryVersion = (selectedLibraryId) => useEffect(() => {
-    dispatch(requests.fetchLibraryProperty({
-      libraryId: selectedLibraryId,
-      onSuccess: (response) => {
-        console.log('testlibprop', response)
-        dispatch(actions.setLibraryVersion({
-          version: response?.data?.version,
-        }));
-      },
-      onFailure: (error) => {
-        dispatch(actions.requests.failRequest({
-          requestKey: RequestKeys.fetchLibraryProperty,
-          error,
-        }));
-      },
-    }))
+    if (!!selectedLibraryId) {
+      dispatch(requests.fetchLibraryProperty({
+        libraryId: selectedLibraryId,
+        onSuccess: (response) => {
+          console.log('testlibprop', response)
+          dispatch(actions.library.setLibraryVersion({
+            version: response?.data?.version,
+          }));
+        },
+        onFailure: (error) => {
+          dispatch(actions.requests.failRequest({
+            requestKey: RequestKeys.fetchLibraryProperty,
+            error,
+          }));
+        },
+      }));
+    }
   }, [selectedLibraryId]);
 
   const fetchLibraryBlocks = (selectedLibraryId) => useEffect(() => {
-    dispatch(requests.fetchLibraryContent({
-      libraryId: selectedLibraryId,
-      onSuccess: (response) => {
-        console.log('testlibblock', response)
-        dispatch(actions.setLibraryBlocks({
-          blocks: response?.data?.results,
-        }));
-      },
-      onFailure: (error) => {
-        dispatch(actions.requests.failRequest({
-          requestKey: RequestKeys.fetchLibraryProperty,
-          error,
-        }));
-      },
-    }))
+    if (!!selectedLibraryId) {
+      dispatch(requests.fetchLibraryContent({
+        libraryId: selectedLibraryId,
+        onSuccess: (response) => {
+          console.log('testlibblock', response)
+          dispatch(actions.library.setLibraryBlocks({
+            blocks: response?.data?.results,
+          }));
+        },
+        onFailure: (error) => {
+          dispatch(actions.requests.failRequest({
+            requestKey: RequestKeys.fetchLibraryProperty,
+            error,
+          }));
+        },
+      }));
+    }
   }, [selectedLibraryId]);
 
-  const onSelectedLibraryChange = (selectedLibraryId) => useEffect(() => {
+  const onSelectedLibraryChange = () => useEffect(() => {
     if (selectedLibrary !== null) {
       const selectedLibraryId = libraries[selectedLibrary].library_key;
-      const libraryProperties = api.fetchLibraryProperty({
-        studioEndpointUrl,
-        libraryId: selectedLibraryId,
-      });
-      const blocks = api.fetchLibraryContent({
-        studioEndpointUrl,
-        libraryId: selectedLibraryId,
-      })?.results;
-      loadLibrary({
-        id: selectedLibraryId,
-        version: libraryProperties?.version,
-        blocks: blocks ? blocks : [],
-        settings: settings[selectedLibraryId]
-          ? settings[selectedLibraryId]
-          : {
-              mode: modes.random.value,
-              count: -1,
-              showReset: false,
-              candidates: {},
-            },
-      });
+      // const libraryProperties = api.fetchLibraryProperty({
+      //   studioEndpointUrl,
+      //   libraryId: selectedLibraryId,
+      // });
+      // const blocks = api.fetchLibraryContent({
+      //   studioEndpointUrl,
+      //   libraryId: selectedLibraryId,
+      // })?.results;
+      dispatch(actions.library.setLibraryId({ selectedLibraryId }));
+      // loadLibrary({
+      //   id: selectedLibraryId,
+      //   version: libraryProperties?.version,
+      //   blocks: blocks ? blocks : [],
+      //   settings: settings[selectedLibraryId]
+      //     ? settings[selectedLibraryId]
+      //     : {
+      //         mode: modes.random.value,
+      //         count: -1,
+      //         showReset: false,
+      //         candidates: {},
+      //       },
+      // });
     } else {
-      unloadLibrary();
+      dispatch(actions.library.unloadLibrary());
     }
-  }, [selectedLibraryId]);
+  }, [selectedLibrary]);
   console.log('testselectedlib', selectedLibrary)
 
   return {
@@ -147,9 +154,9 @@ export const useLibrarySelectorHook = ({
     fetchLibraryBlocks,
     onSelectedLibraryChange,
     setSelectedLibrary,
-    title: (selectedLibrary >= 0)
-      ? libraries[selectedLibrary]?.display_name
-      : 'Select a library',
+    selectionName: (selectedLibrary === null)
+      ? 'Select a library'
+      : libraries[selectedLibrary]?.display_name,
   };
 };
 

diff --git a/src/editors/containers/LibraryContentEditor/index.jsx b/src/editors/containers/LibraryContentEditor/index.jsx
@@ -53,7 +53,7 @@ export const LibraryContentEditor = ({
 
   const loaded = () => (
     <div>
-      <LibrarySelector studioEndpointUrl={studioEndpointUrl} />
+      <LibrarySelector />
       <LibrarySettings />
       <BlocksSelector
         candidates={settings[selectedLibraryId]?.candidates}