Different mechanism for handling new type

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)
   }
 

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}
       />
-      <AddTypeModal initialName={newTypeInput} />
+      <AddTypeModal initialName={newTypeInput} onTypeAdded={handleNewType} />
     </>
   )
 }

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