diff --git a/src/components/form/AddTypeModal.js b/src/components/form/AddTypeModal.js index 106d8d42..71bc11e9 100644 --- a/src/components/form/AddTypeModal.js +++ b/src/components/form/AddTypeModal.js @@ -116,10 +116,9 @@ const validationSchema = Yup.object().shape({ notes: Yup.string(), }) -const AddTypeModal = ({ initialName }) => { +const AddTypeModal = ({ initialName, onTypeAdded }) => { const { i18n } = useTranslation() const dispatch = useDispatch() - const { locationId } = useSelector((state) => state.location) const { isAddTypeModalOpen } = useSelector((state) => state.type) // Initialize state @@ -164,9 +163,10 @@ const AddTypeModal = ({ initialName }) => { addTypeAndUpdate({ submitData, language: i18n.language, - locationId, }), - ) + ).then((action) => { + onTypeAdded(action.payload.newMenuEntry) + }) setSubmitting(false) } diff --git a/src/components/form/TypesSelect.js b/src/components/form/TypesSelect.js index a604dcda..4f2fb62e 100644 --- a/src/components/form/TypesSelect.js +++ b/src/components/form/TypesSelect.js @@ -1,6 +1,6 @@ import { useFormikContext } from 'formik' import { uniqBy } from 'lodash' -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useMemo, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { openAddTypeModal } from '../../redux/typeSlice' @@ -9,34 +9,23 @@ import { AddTypeModal } from './AddTypeModal' import { CreatableSelect } from './FormikWrappers' const TypesSelect = () => { - const { typesAccess, recentlyAddedTypesByLocation } = useSelector( - (state) => state.type, - ) - const { locationId } = useSelector((state) => state.location) + const { typesAccess } = useSelector((state) => state.type) const { values, setFieldValue } = useFormikContext() const dispatch = useDispatch() const typeOptions = useMemo(() => typesAccess.asMenuEntries(), [typesAccess]) - const [newTypeInput, setNewTypeInput] = useState('') - const recentlyAddedTypes = useMemo( - () => - (recentlyAddedTypesByLocation[locationId] || []) - .map((typeId) => typesAccess.getMenuEntry(typeId)) - .filter(Boolean), - [recentlyAddedTypesByLocation, locationId, typesAccess], - ) - - useEffect(() => { - if (recentlyAddedTypes.length > 0) { + const handleNewType = useCallback( + (newTypeOption) => { const updatedTypes = uniqBy( - [...(values.types || []), ...recentlyAddedTypes], + [...(values.types || []), newTypeOption], 'value', ) setFieldValue('types', updatedTypes) - } - }, [recentlyAddedTypes.join(', ')]) //eslint-disable-line + }, + [values.types, setFieldValue], + ) const handleCreateOption = useCallback( (inputValue) => { @@ -71,7 +60,7 @@ const TypesSelect = () => { onCreateOption={handleCreateOption} formatCreateLabel={(inputValue) => inputValue} /> - + ) } diff --git a/src/redux/typeSlice.js b/src/redux/typeSlice.js index 3f84278e..7735870b 100644 --- a/src/redux/typeSlice.js +++ b/src/redux/typeSlice.js @@ -14,9 +14,17 @@ export const fetchAndLocalizeTypes = createAsyncThunk( export const addTypeAndUpdate = createAsyncThunk( 'type/addTypeAndUpdate', - async ({ submitData, language, locationId }) => { + async ({ submitData, language }, { getState }) => { const response = await addType(submitData) - return { ...response, language, locationId } + const state = getState() + const updatedTypesAccess = state.type.typesAccess.addType( + response, + language, + ) + return { + newMenuEntry: updatedTypesAccess.getMenuEntry(response.id), + updatedTypesAccess, + } }, ) @@ -25,7 +33,6 @@ const typeSlice = createSlice({ initialState: { isLoading: false, typesAccess: typesAccessInLanguage([], ''), - recentlyAddedTypesByLocation: {}, isAddTypeModalOpen: false, }, reducers: { @@ -45,13 +52,8 @@ const typeSlice = createSlice({ state.isLoading = false }, [addTypeAndUpdate.fulfilled]: (state, action) => { - const { id, language, locationId } = action.payload - state.typesAccess = state.typesAccess.addType(action.payload, language) + state.typesAccess = action.payload.updatedTypesAccess toast.success('New type added successfully!') - if (!state.recentlyAddedTypesByLocation[locationId]) { - state.recentlyAddedTypesByLocation[locationId] = [] - } - state.recentlyAddedTypesByLocation[locationId].push(id) state.isAddTypeModalOpen = false }, [addTypeAndUpdate.rejected]: () => {