diff --git a/src/editors/containers/LibraryContentEditor/LibrarySelector.jsx b/src/editors/containers/LibraryContentEditor/LibrarySelector.jsx index 2573cf8dd..0d2b6e827 100644 --- a/src/editors/containers/LibraryContentEditor/LibrarySelector.jsx +++ b/src/editors/containers/LibraryContentEditor/LibrarySelector.jsx @@ -13,22 +13,30 @@ export const LibrarySelector = ({ // redux libraries, loadLibrary, - selectedLibrary, - onSelectLibrary, + selectedLibraryId, settings, unloadLibrary, }) => { const { + initializeLibrary, + onSelectedLibraryChange, + setSelectedLibrary, title, } = useLibrarySelectorHook({ libraries, loadLibrary, - selectedLibrary, + selectedLibraryId, settings, studioEndpointUrl, unloadLibrary, }); + if (!!selectedLibraryId) { + initializeLibrary(selectedLibraryId); + } + + onSelectedLibraryChange(selectedLibraryId); + return (
{libraries @@ -43,11 +51,11 @@ export const LibrarySelector = ({ {title} - onSelectLibrary({ selectedLibrary: null })}> + setSelectedLibrary(null)}> {libraries.map((library, index) => ( - onSelectLibrary({ selectedLibrary: index })}> + setSelectedLibrary(index)}> {library.display_name} ))} @@ -65,7 +73,6 @@ export const LibrarySelector = ({ LibrarySelector.defaultProps = { libraries: [], - selectedLibrary: 0, settings: {}, }; @@ -74,21 +81,18 @@ LibrarySelector.propTypes = { // redux libraries: PropTypes.array, loadLibrary: PropTypes.func.isRequired, - selectedLibrary: PropTypes.number, - onSelectLibrary: PropTypes.func.isRequired, settings: PropTypes.object, unloadLibrary: PropTypes.func.isRequired, }; export const mapStateToProps = (state) => ({ libraries: selectors.libraries(state), - selectedLibrary: selectors.selectedLibrary(state), + selectedLibraryId: selectors.selectedLibraryId(state), settings: selectors.settings(state), }); export const mapDispatchToProps = { loadLibrary: actions.loadLibrary, - onSelectLibrary: actions.onSelectLibrary, unloadLibrary: actions.unloadLibrary, }; diff --git a/src/editors/containers/LibraryContentEditor/LibrarySelector.test.jsx b/src/editors/containers/LibraryContentEditor/LibrarySelector.test.jsx index 09c0abee8..685bb1562 100644 --- a/src/editors/containers/LibraryContentEditor/LibrarySelector.test.jsx +++ b/src/editors/containers/LibraryContentEditor/LibrarySelector.test.jsx @@ -39,8 +39,6 @@ describe('LibrarySelector',()=>{ studioEndpointUrl: 'eXaMplE.com', libraries: mocklibraries, loadLibrary: jest.fn(), - selectedLibrary: 0, - onSelectLibrary: jest.fn(), settings: { [mocklibraries[0].library_key]: { value: 'SoMethIng' @@ -68,35 +66,7 @@ describe('LibrarySelector',()=>{ const {container, queryByTestId} = renderComponent({ ...props, libraries: null, - selectedLibrary: null, }); expect(queryByTestId('dropdown')).toBeFalsy(); }); - - it('sets the default option to be selected if selectedLibrary is null.',()=>{ - const {container, queryByTestId, queryByText} = renderComponent({ - ...props, - selectedLibrary: null, - }); - expect(queryByTestId('dropdown')).toBeTruthy(); - expect(queryByText('Select a library')).toBeTruthy(); - }); - it('Clicking The default option calls onSelectLibrary with value null and calls unloadlibrary',()=>{ - const {container, queryByTestId, queryByText} = renderComponent({ - ...props, - }); - fireEvent.click(container.querySelector("#library-selector")); - fireEvent.click(queryByText('FormattedMessage')); - expect(props.onSelectLibrary).toHaveBeenCalledWith({selectedLibrary: null}); - expect(props.unloadLibrary).toHaveBeenCalled(); - }); - it('Clicking any other option in dropdown calls onSelectLibrary with value equal to its index and calls loadlibrary',()=>{ - const {container, queryByTestId, queryByText} = renderComponent({ - ...props, - }); - fireEvent.click(container.querySelector("#library-selector")); - fireEvent.click(queryByText(mocklibraries[1].display_name)); - expect(props.onSelectLibrary).toHaveBeenCalledWith({selectedLibrary: 1}); - expect(props.loadLibrary).toHaveBeenCalled(); - }); -}) \ No newline at end of file +}); diff --git a/src/editors/containers/LibraryContentEditor/LibrarySettings.jsx b/src/editors/containers/LibraryContentEditor/LibrarySettings.jsx index fa697feb8..a893c56f7 100644 --- a/src/editors/containers/LibraryContentEditor/LibrarySettings.jsx +++ b/src/editors/containers/LibraryContentEditor/LibrarySettings.jsx @@ -12,11 +12,10 @@ export const LibrarySettings = ({ onCountChange, onModeChange, onShowResetChange, - selectedLibrary, selectedLibraryId, settings, }) => { - if (selectedLibrary === null) return <>; + if (selectedLibraryId === null) return <>; return (
@@ -77,7 +76,6 @@ export const LibrarySettings = ({ }; export const mapStateToProps = (state) => ({ - selectedLibrary: selectors.selectedLibrary(state), selectedLibraryId: selectors.selectedLibraryId(state), settings: selectors.settings(state), }) diff --git a/src/editors/containers/LibraryContentEditor/LibrarySettings.test.jsx b/src/editors/containers/LibraryContentEditor/LibrarySettings.test.jsx index 9d6dddb18..accee5278 100644 --- a/src/editors/containers/LibraryContentEditor/LibrarySettings.test.jsx +++ b/src/editors/containers/LibraryContentEditor/LibrarySettings.test.jsx @@ -34,7 +34,6 @@ describe('LibrarySettings Component', () => { onCountChange: jest.fn(), onModeChange: jest.fn(), onShowResetChange: jest.fn(), - selectedLibrary: 'sOme vAluE', selectedLibraryId: 0, settings: { 0: { mode: 'random', count: 5, showReset: true } }, } diff --git a/src/editors/containers/LibraryContentEditor/data/reducer.js b/src/editors/containers/LibraryContentEditor/data/reducer.js index 6a9019730..311874059 100644 --- a/src/editors/containers/LibraryContentEditor/data/reducer.js +++ b/src/editors/containers/LibraryContentEditor/data/reducer.js @@ -4,7 +4,6 @@ import { StrictDict } from '../../../utils'; const initialState = { libraries: [], - selectedLibrary: null, selectedLibraryId: null, selectedLibraryVersion: null, settings: { @@ -31,18 +30,46 @@ const library = createSlice({ name: 'library', initialState, reducers: { - initialize: (state, { payload }) => ({ + // initialize: (state, { payload }) => ({ + // ...state, + // libraries: payload.libraries, + // selectedLibraryId: payload.selectedLibraryId, + // selectedLibraryVersion: payload.selectedLibraryVersion, + // settings: { + // ...state.settings, + // [payload.selectedLibraryId]: payload.settings, + // }, + // blocksInSelectedLibrary: payload.blocksInSelectedLibrary, + // }), + initializeFromBlockValue: (state, { payload }) => ({ + ...state, + selectedLibraryId: payload.selectedLibraryId, + settings: payload.settings, + }), + loadLibraryList: (state, { payload }) => ({ ...state, libraries: payload.libraries, - selectedLibrary: payload.selectedLibrary, + }), + setLibraryId: (state, { payload }) => ({ + ...state, selectedLibraryId: payload.selectedLibraryId, - selectedLibraryVersion: payload.selectedLibraryVersion, + }), + setLibraryVersion: (state, { payload }) => ({ + ...state, + selectedLibraryVersion: payload.version, + }), + setLibraryBlocks: (state, { payload }) => ({ + ...state, + blocksInSelectedLibrary: payload.blocks, + }), + setLibrarySettings: (state, { payload }) => ({ + ...state, settings: { ...state.settings, - [payload.selectedLibraryId]: payload.settings, + [payload.id]: payload.settings, }, - blocksInSelectedLibrary: payload.blocksInSelectedLibrary, }), + loadLibrary: (state, { payload }) => ({ ...state, selectedLibraryId: payload.id, @@ -59,10 +86,6 @@ const library = createSlice({ selectedLibraryVersion: null, blocksInSelectedLibrary: [], }), - onSelectLibrary: (state, { payload }) => ({ - ...state, - selectedLibrary: payload.selectedLibrary, - }), onModeChange: (state, { payload }) => ({ ...state, settings: { diff --git a/src/editors/containers/LibraryContentEditor/data/reducer.test.js b/src/editors/containers/LibraryContentEditor/data/reducer.test.js index 0fef7130a..10121b521 100644 --- a/src/editors/containers/LibraryContentEditor/data/reducer.test.js +++ b/src/editors/containers/LibraryContentEditor/data/reducer.test.js @@ -17,7 +17,6 @@ describe('app reducer', () => { const libId = 'anOther lIb Id'; const data = { libraries: 'soMe LibS', - selectedLibrary: 'a lIb id', selectedLibraryId: libId, selectedLibraryVersion: 'a lib veRsioN (oFteN an Int)', settings: { @@ -67,13 +66,6 @@ describe('app reducer', () => { blocksInSelectedLibrary: [], }); }); - it(' onSelectLibrary sets the selected library from data.selectedLibrary', () => { - const selectedlib = { selectedLibrary: 'sOmE LiB' }; - expect(reducer(testingState, actions.onSelectLibrary(selectedlib))).toEqual({ - ...testingState, - selectedLibrary: selectedlib.selectedLibrary, - }); - }); }); describe('Library Settings Updates', () => { const testSettingsChanges = { diff --git a/src/editors/containers/LibraryContentEditor/data/requests.js b/src/editors/containers/LibraryContentEditor/data/requests.js new file mode 100644 index 000000000..f9bf02820 --- /dev/null +++ b/src/editors/containers/LibraryContentEditor/data/requests.js @@ -0,0 +1,62 @@ +import { StrictDict } from '../../../utils'; +import { RequestKeys } from '../../../data/constants/requests'; +import { networkRequest } from '../../../data/redux/thunkActions/requests'; + +/* eslint-disable import/no-cycle */ +import { actions, selectors } from '../../../data/redux'; +import api from './api'; + +/** + * Tracked fetchContentStore api method. + * Tracked to the `fetchContentStore` request key. + * @param {[func]} onSuccess - onSuccess method ((response) => { ... }) + * @param {[func]} onFailure - onFailure method ((error) => { ... }) + */ +export const fetchContentStore = ({ ...rest }) => (dispatch, getState) => { + dispatch(networkRequest({ + requestKey: RequestKeys.fetchContentStore, + promise: api.fetchContentStore({ + studioEndpointUrl: selectors.app.studioEndpointUrl(getState()), + }), + ...rest, + })); +}; + +/** + * Tracked fetchLibraryProperty api method. + * Tracked to the `fetchLibraryProperty` request key. + * @param {[func]} onSuccess - onSuccess method ((response) => { ... }) + * @param {[func]} onFailure - onFailure method ((error) => { ... }) + */ +export const fetchLibraryProperty = ({ libraryId, ...rest }) => (dispatch, getState) => { + dispatch(networkRequest({ + requestKey: RequestKeys.fetchLibraryProperty, + promise: api.fetchLibraryProperty({ + studioEndpointUrl: selectors.app.studioEndpointUrl(getState()), + libraryId, + }), + ...rest, + })); +}; + +/** + * Tracked fetchLibraryContent api method. + * Tracked to the `fetchLibraryContent` request key. + * @param {[func]} onSuccess - onSuccess method ((response) => { ... }) + * @param {[func]} onFailure - onFailure method ((error) => { ... }) + */ + export const fetchLibraryContent = ({ libraryId, ...rest }) => (dispatch, getState) => { + dispatch(networkRequest({ + requestKey: RequestKeys.fetchLibraryProperty, + promise: api.fetchLibraryProperty({ + studioEndpointUrl: selectors.app.studioEndpointUrl(getState()), + libraryId, + }), + ...rest, + })); +}; + +export default StrictDict({ + fetchContentStore, + fetchLibraryProperty, +}); diff --git a/src/editors/containers/LibraryContentEditor/data/selectors.js b/src/editors/containers/LibraryContentEditor/data/selectors.js index 2a3a67847..b2e0c9f6d 100644 --- a/src/editors/containers/LibraryContentEditor/data/selectors.js +++ b/src/editors/containers/LibraryContentEditor/data/selectors.js @@ -7,7 +7,6 @@ const mkSimpleSelector = (cb) => createSelector([module.libraryState], cb); export const simpleSelectors = { libraries: mkSimpleSelector(library => library.libraries), - selectedLibrary: mkSimpleSelector(library => library.selectedLibrary), selectedLibraryId: mkSimpleSelector(library => library.selectedLibraryId), selectedLibraryVersion: mkSimpleSelector(library => library.selectedLibraryVersion), settings: mkSimpleSelector(library => library.settings), diff --git a/src/editors/containers/LibraryContentEditor/data/selectors.test.js b/src/editors/containers/LibraryContentEditor/data/selectors.test.js index 3f8b81412..0b8624593 100644 --- a/src/editors/containers/LibraryContentEditor/data/selectors.test.js +++ b/src/editors/containers/LibraryContentEditor/data/selectors.test.js @@ -25,7 +25,6 @@ describe('Library Selectors', () => { describe('simple selectors link their values from app store', () => { [ simpleKeys.libraries, - simpleKeys.selectedLibrary, simpleKeys.selectedLibraryId, simpleKeys.selectedLibraryVersion, simpleKeys.settings, diff --git a/src/editors/containers/LibraryContentEditor/hooks.js b/src/editors/containers/LibraryContentEditor/hooks.js index a3ce11f5c..27f2165f5 100644 --- a/src/editors/containers/LibraryContentEditor/hooks.js +++ b/src/editors/containers/LibraryContentEditor/hooks.js @@ -1,54 +1,60 @@ import { useEffect, useState } from 'react'; +import { useDispatch } from 'react-redux'; + import { modes } from './constants'; +import { actions, selectors } from './data'; 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); +}; export const useLibraryHook = ({ - blockValue, - initialize, libraryPayload, - studioEndpointUrl, }) => { - const useInitialize = () => useEffect(() => { - const libraries = api.fetchContentStore({ studioEndpointUrl }).libraries; + const dispatch = useDispatch(); + + const fetchLibraryList = () => useEffect(() => { + dispatch(requests.fetchContentStore({ + onSuccess: (response) => { + dispatch(actions.loadLibraryList({ + libraries: response?.data?.libraries, + })); + }, + onFailure: (error) => { + dispatch(actions.requests.failRequest({ + requestKey: RequestKeys.fetchContentStore, + error, + })); + }, + })); + }, []); + + const initializeLibraryProperty = (blockValue) => useEffect(() => { + console.log('testinitlibprop', blockValue) const metadata = blockValue?.data?.metadata; - const selectedLibraryId = metadata?.source_library_id; - let selectedLibrary = null; - let selectedLibraryVersion = null; - let blocksInSelectedLibrary = []; - let settings = {}; + const selectedLibraryId = metadata?.source_library_id ?? null; + let settings = {} if (!!selectedLibraryId) { - selectedLibrary = libraries.findIndex(library => { - library.library_key === selectedLibraryId - }); - selectedLibraryVersion = api.fetchLibraryProperty({ - studioEndpointUrl, - libraryId: selectedLibraryId, - }).version; settings = { - [selectedLibrary]: { + [selectedLibraryId]: { mode: metadata?.mode, count: metadata?.count, showReset: metadata?.allow_resetting_children, candidates: metadata?.candidates, }, }; - blocksInSelectedLibrary = api.fetchLibraryContent({ - studioEndpointUrl, - libraryId: selectedLibraryId, - })?.results; } - initialize({ - libraries, - selectedLibrary, - selectedLibraryId: selectedLibraryId ? selectedLibraryId : null, - selectedLibraryVersion, - settings, - blocksInSelectedLibrary: blocksInSelectedLibrary ? blocksInSelectedLibrary : [], - }); - }, []); + dispatch(actions.initializeFromBlockValue({ selectedLibraryId, settings })); + }, [blockValue]); return { - useInitialize, + initializeEditor: (blockValue) => { + fetchLibraryList(); + initializeLibraryProperty(blockValue); + }, getContent: () => libraryPayload, }; }; @@ -56,12 +62,53 @@ export const useLibraryHook = ({ export const useLibrarySelectorHook = ({ libraries, loadLibrary, - selectedLibrary, + selectedLibraryId, settings, studioEndpointUrl, unloadLibrary, }) => { - useEffect(() => { + 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, + })); + }, + })) + }, [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, + })); + }, + })) + }, [selectedLibraryId]); + + const onSelectedLibraryChange = (selectedLibraryId) => useEffect(() => { if (selectedLibrary !== null) { const selectedLibraryId = libraries[selectedLibrary].library_key; const libraryProperties = api.fetchLibraryProperty({ @@ -88,12 +135,21 @@ export const useLibrarySelectorHook = ({ } else { unloadLibrary(); } - }, [selectedLibrary]); + }, [selectedLibraryId]); + console.log('testselectedlib', selectedLibrary) return { - title: selectedLibrary === null - ? 'Select a library' - : libraries[selectedLibrary]?.display_name, + initializeLibrary: (selectedLibraryId) => { + fetchLibraryVersion(selectedLibraryId); + fetchLibraryBlocks(selectedLibraryId); + }, + fetchLibraryVersion, + fetchLibraryBlocks, + onSelectedLibraryChange, + setSelectedLibrary, + title: (selectedLibrary >= 0) + ? libraries[selectedLibrary]?.display_name + : 'Select a library', }; }; diff --git a/src/editors/containers/LibraryContentEditor/index.jsx b/src/editors/containers/LibraryContentEditor/index.jsx index 3de241f5e..ea9c50e7f 100644 --- a/src/editors/containers/LibraryContentEditor/index.jsx +++ b/src/editors/containers/LibraryContentEditor/index.jsx @@ -20,7 +20,6 @@ export const LibraryContentEditor = ({ blockValue, blockFailed, blockFinished, - initialize, libraryPayload, selectedLibraryId, settings, @@ -30,18 +29,15 @@ export const LibraryContentEditor = ({ }) => { console.log("WE GOT THIS FAR"); const { + initializeEditor, getContent, - useInitialize, } = useLibraryHook({ - blockValue, - initialize, libraryPayload, - studioEndpointUrl, }); console.log("WE GOT THIS Hook FAR"); if (blockFinished && !blockFailed) { - useInitialize(); + initializeEditor(blockValue); } const loading = () => ( @@ -98,7 +94,6 @@ LibraryContentEditor.propTypes = { }), blockFailed: PropTypes.bool.isRequired, blockFinished: PropTypes.bool.isRequired, - initialize: PropTypes.func.isRequired, libraryPayload: PropTypes.shape({}), selectedLibraryId: PropTypes.string, settings: PropTypes.shape({}), diff --git a/src/editors/data/constants/requests.js b/src/editors/data/constants/requests.js index 989661420..d746764a8 100644 --- a/src/editors/data/constants/requests.js +++ b/src/editors/data/constants/requests.js @@ -29,4 +29,7 @@ export const RequestKeys = StrictDict({ uploadImage: 'uploadImage', fetchAdvancedSettings: 'fetchAdvancedSettings', fetchVideoFeatures: 'fetchVideoFeatures', + fetchContentStore: 'fetchContentStore', + fetchLibraryProperty: 'fetchLibraryProperty', + fetchLibraryContent: 'fetchLibraryContent', });