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]: () => {