@olea-bps/base 1.1.11 → 1.1.12

package/context/context-canteen/index.js

@@ -12,18 +12,18 @@
  * limitations under the License.
  */
 
-import { createContext, useCallback, useEffect, useContext, useReducer, useMemo } from 'react'
+import { createContext, useCallback, useEffect, useContext, useReducer, useMemo, useState } from 'react'
 import { connect, useDispatch, useSelector } from 'react-redux'
-import { useTheme } from 'react-native-paper';
+import { useTheme } from 'react-native-paper'
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import { DateTime } from 'luxon';
+import { DateTime } from 'luxon'
 
-import { onSettingCanteenMerge, useStagingServer } from '../../libraries/core';
-import { useUser } from '../context-user';
-import { intersection } from 'lodash';
+import { onSettingCanteenMerge, useStagingServer } from '../../libraries/core'
+import { useUser } from '../context-user'
+import { intersection } from 'lodash'
 
-import CollektorVersion2ApiProvider, { NotModifiedResponse } from './CollektorVersion2ApiProvider.js';
-import AsistServerApiProvider from './AsistServerApiProvider.js';
+import CollektorVersion2ApiProvider, { NotModifiedResponse } from './CollektorVersion2ApiProvider.js'
+import AsistServerApiProvider from './AsistServerApiProvider.js'
 
 /**
  * @typedef {Object} Canteen
@@ -34,23 +34,27 @@ import AsistServerApiProvider from './AsistServerApiProvider.js';
  * @typedef {Object.<string, Canteen>} CanteenState
  */
 
-const AsistServerProviderName = 'asist-server';
-const CollectorVersion2ProviderName = 'hs-collector-v2';
+const AsistServerProviderName = 'asist-server'
+const CollectorVersion2ProviderName = 'hs-collector-v2'
 
 // Create a context for the canteen data
 const CanteenContext = createContext({
-    canteens: {},
-});
+  canteens: {}
+})
 
-const CanteensStoreKey = 'canteen:canteens';
+const CanteensStoreKey = 'canteen:canteens'
 const FavoriteCanteensStoreKey = 'canteen:favorite_canteens'
 
-const RestoreCanteens = 'restore_canteens';
-const SetMenuAction = 'set_menu';
-const SetCanteenAction = 'set_canteen';
+const RestoreCanteens = 'restore_canteens'
+const SetMenuAction = 'set_menu'
+const SetCanteenAction = 'set_canteen'
 const RemoveUnusedCanteensAction = 'remove_unused_canteens'
 const RemoveUnusedMenusAction = 'remove_unused_menus'
 
+function hasCanteenTitle (canteen) {
+  return typeof canteen?.title === 'string' && canteen.title.trim().length > 0
+}
+
 /**
  *
  * @param {CanteenState} state
@@ -58,92 +62,105 @@ const RemoveUnusedMenusAction = 'remove_unused_menus'
  * @param {string} action.type
  * @returns {CanteenState}
  */
-function CanteensStateReducer(state, action) {
-    switch (action.type) {
-
-        // Essensangebot einer Mensa zuordnen
-        case SetMenuAction: {
-            const canteenId = action.canteenId;
-            const menuDate = action.date;
-            const menu = action.menu;
-
-            // Einfügen des Essensangebot(menu) für eine Mensa(canteenId) an einem Tag(menuDate)
-            return {
-                // Kopieren der vorherigen Mensen
-                ...state ?? {},
-                //Mense mit id(canteenId) neu erstellen
-                [canteenId]: {
-                    // Kopieren der vorherigen Daten der Mense
-                    ...state?.[canteenId] ?? {},
-                    // Essensangebote werden neu erstellt
-                    menus: {
-                        // Kopieren der alten Essensangebote
-                        ...state?.[canteenId]?.menus ?? {},
-                        // Es wird das Essensangebote(menu) für ein Datum(menuDate) hinterlegt
-                        [menuDate]: menu,
-                    }
-                }
-            };
-        }
-
-        // Anhand eines Datums werden alte Mensen entfernt
-        case RemoveUnusedMenusAction: {
-            const expiryDate = action.expiryDate;
-            const expiryTimestamp = Date.parse(expiryDate);
-
-            return Object.fromEntries(
-                Object.entries(state ?? {})
-                    .map(
-                        ([canteenId, canteenData]) =>
-                            [
-                                canteenId,
-                                {
-                                    ...canteenData,
-                                    menus: Object.fromEntries(
-                                        Object.entries(canteenData?.menus ?? {})
-                                            .filter(([menuDate, menu]) => Date.parse(menuDate) >= expiryTimestamp)
-                                    )
-                                }
-                            ]
-                    )
-            );
+function CanteensStateReducer (state, action) {
+  switch (action.type) {
+    // Essensangebot einer Mensa zuordnen
+    case SetMenuAction: {
+      const canteenId = action.canteenId
+      const menuDate = action.date
+      const menu = action.menu
+
+      if (hasCanteenTitle(state?.[canteenId])) {
+        // Einfügen des Essensangebot(menu) für eine Mensa(canteenId) an einem Tag(menuDate)
+        return {
+          // Kopieren der vorherigen Mensen
+          ...state ?? {},
+          // Bestehende Mensa aktualisieren
+          [canteenId]: {
+            // Kopieren der vorherigen Daten der Mense
+            ...state?.[canteenId] ?? {},
+            // Essensangebote werden neu erstellt
+            menus: {
+              // Kopieren der alten Essensangebote
+              ...state?.[canteenId]?.menus ?? {},
+              // Es wird das Essensangebote(menu) für ein Datum(menuDate) hinterlegt
+              [menuDate]: menu
+            }
+          }
         }
+      } else {
+        // Late menu responses must not recreate a canteen removed by the server list.
+        return state
+      }
+    }
 
-        // Es werden die Basisdaten einer Mensa hinzugefügt oder aktualisiert
-        case SetCanteenAction: {
-            const canteen = action.canteen;
-
-            return {
-                ...state ?? {},
-                [canteen.id]: {
-                    ...state?.[canteen.id] ?? {},
-                    ...canteen,
+    // Anhand eines Datums werden alte Mensen entfernt
+    case RemoveUnusedMenusAction: {
+      const expiryDate = action.expiryDate
+      const expiryTimestamp = Date.parse(expiryDate)
+
+      return Object.fromEntries(
+        Object.entries(state ?? {})
+          .map(
+            ([canteenId, canteenData]) =>
+              [
+                canteenId,
+                {
+                  ...canteenData,
+                  menus: Object.fromEntries(
+                    Object.entries(canteenData?.menus ?? {})
+                      .filter(([menuDate, menu]) => Date.parse(menuDate) >= expiryTimestamp)
+                  )
                 }
-            };
-        }
+              ]
+          )
+      )
+    }
 
-        // Anhand einer Liste von Mensa-IDs werden alte Mensen entfernt
-        case RemoveUnusedCanteensAction: {
-            const activeCanteenIds = action.activeCanteenIds;
+    // Es werden die Basisdaten einer Mensa hinzugefügt oder aktualisiert
+    case SetCanteenAction: {
+      const canteen = action.canteen
 
-            return Object.fromEntries(
-                Object.entries(state ?? {})
-                    .filter(([canteenId, canteenData]) => activeCanteenIds.includes(canteenId))
-            );
+      return {
+        ...state ?? {},
+        [canteen.id]: {
+          ...state?.[canteen.id] ?? {},
+          ...canteen
         }
+      }
+    }
 
-        // Mensen und zugehörige Essensangebote aus dem Cache wiederherstellen
-        case RestoreCanteens: {
-            const restoredCanteens = action.canteens;
+    // Anhand einer Liste von Mensa-IDs werden alte Mensen entfernt
+    case RemoveUnusedCanteensAction: {
+      const activeCanteenIds = action.activeCanteenIds.map(String)
 
-            return state
-                ? { ...state }
-                : restoredCanteens;
-        }
+      return Object.fromEntries(
+        Object.entries(state ?? {})
+          .filter(([canteenId, canteenData]) => activeCanteenIds.includes(canteenId))
+      )
+    }
+
+    // Mensen und zugehörige Essensangebote aus dem Cache wiederherstellen
+    case RestoreCanteens: {
+      // Remove incomplete entries persisted by older app versions, also offline.
+      // Entries are considered incomplete if their canteen title is missing or blank.
+      const restoredCanteens = Object.fromEntries(
+        Object.entries(action.canteens ?? {})
+          .filter(([, canteen]) => hasCanteenTitle(canteen))
+      )
+
+      return state
+        ? { ...state }
+        : restoredCanteens
     }
+
+    default:
+      // Preserve the current state for unhandled actions instead of returning undefined.
+      return state
+  }
 }
 
-const SetCanteensAction = 'set_canteens_ids';
+const SetCanteensAction = 'set_canteens_ids'
 
 /**
  *
@@ -152,35 +169,36 @@ const SetCanteensAction = 'set_canteens_ids';
  * @param {string} action.type
  * @returns {string[]}
  */
-function FavoriteCanteensStateReducer(state, action) {
-    switch (action.type) {
-
-        // Setzen der IDs der favoriten Mensen
-        case SetCanteensAction: {
-            const canteensIds = action?.canteensIds;
-
-            return canteensIds;
-        }
+function FavoriteCanteensStateReducer (state, action) {
+  switch (action.type) {
+    // Setzen der IDs der favoriten Mensen
+    case SetCanteensAction: {
+      const canteensIds = Array.isArray(action?.canteensIds) && action.canteensIds.length > 0
+        ? [...new Set(action.canteensIds.map(String))]
+        : null
+
+      return canteensIds
+    }
 
-        // Filtert IDs aus der Einstellung heraus, welche nicht mehr vom Kollektor übersendet werden
-        case RemoveUnusedCanteensAction: {
-            const activeCanteenIds = action?.activeCanteenIds;
+    // Filtert IDs aus der Einstellung heraus, welche nicht mehr vom Kollektor übersendet werden
+    case RemoveUnusedCanteensAction: {
+      const activeCanteenIds = action.activeCanteenIds.map(String)
 
-            const favoriteCanteensIds = intersection(state, activeCanteenIds);
+      const favoriteCanteensIds = intersection(state, activeCanteenIds)
 
-            return Array.isArray(favoriteCanteensIds) && favoriteCanteensIds.length > 0
-                ? favoriteCanteensIds
-                : null;
-        }
+      return Array.isArray(favoriteCanteensIds) && favoriteCanteensIds.length > 0
+        ? favoriteCanteensIds
+        : null
+    }
 
-        // Falls ein unbekannter Actionstyp übergeben wurde, wird nichts gemacht
-        default: {
-            return state;
-        }
+    // Falls ein unbekannter Actionstyp übergeben wurde, wird nichts gemacht
+    default: {
+      return state
     }
+  }
 }
 
-//const providersInitializers = {
+// const providersInitializers = {
 //    'hs-collector-v2': ({appSettings }) => {
 //        const baseUrl = appSettings?.modules?.canteen?.api?.baseUrl;
 //        CollektorVersion2ApiProvider.from(baseUrl,)
@@ -188,359 +206,369 @@ function FavoriteCanteensStateReducer(state, action) {
 //    'asist-server': ({ }) => {
 //
 //    },
-//}
+// }
 
 // Define a provider component for the canteen context
-function CanteenContextProvider({ children, settings, rootUrl, rootStgUrl, useStaging }) {
-    const componentName = CanteenContextProvider.name;
+function CanteenContextProvider ({ children, settings, rootUrl, rootStgUrl, useStaging }) {
+  const componentName = CanteenContextProvider.name
 
-    const reduxDispatch = useDispatch();
-    const [user] = useUser();
-    const theme = useTheme();
+  const reduxDispatch = useDispatch()
+  const [user] = useUser()
+  const theme = useTheme()
 
-    const appSettings = theme?.appSettings;
-    const groupsOfPersons = appSettings?.groupsOfPersons;
-    const language = settings.language;
-    const availableSelections = theme?.appSettings?.mealSelections;
-    const favoriteSelections = settings?.settingsCanteens?.favoriteSelection;
+  const appSettings = theme?.appSettings
+  const groupsOfPersons = appSettings?.groupsOfPersons
+  const language = settings.language
+  const availableSelections = theme?.appSettings?.mealSelections
+  const favoriteSelections = settings?.settingsCanteens?.favoriteSelection
 
-    // Ermitteln des Preisgruppen-Codes des Nutzers
-    const priceGroupCode =
+  // Ermitteln des Preisgruppen-Codes des Nutzers
+  const priceGroupCode =
         // Wenn der Nutzer selber eine Preisgruppe festgelegt hast, ist diese im Redux hinterlegt
         // Prüfen ob im Redux eine Preisgruppe hinterlegt ist
         useSelector(
-            (reduxState) =>
-                // Wenn der Preisgruppen-Code ein leerer String ist, wird stattdessen null zurückgegeben
-                reduxState?.settingReducer?.settingsCanteens?.favoritePrice
-                    ? reduxState?.settingReducer?.settingsCanteens?.favoritePrice
-                    : null
-        )
+          (reduxState) =>
+          // Wenn der Preisgruppen-Code ein leerer String ist, wird stattdessen null zurückgegeben
+            reduxState?.settingReducer?.settingsCanteens?.favoritePrice
+              ? reduxState?.settingReducer?.settingsCanteens?.favoritePrice
+              : null
+        ) ??
         // Ist im Redux keine Preisgruppe hinterlegt, wird anhand des angemeldeten Nutzers die Preisgruppe ermittelt
         // Dabei werden die Angehörigkeiten(user.member_types) des Nutzer mit den möglichen Personengruppen-Codes verglichen
         // Ist eine Angehörigkeit, welche einem Code einer Personengruppe gleicht, vorhanden, wird die entsprechende Personengruppe verwendet
         // Besitzt ein Nutzer mehrer Angehörigkeiten (z.B. Student, Mitarbeiter) wird anhand der Reihenfolge der Personengruppen in der Settings.js priorisiert.
         // Dabei besetzt die erste bzw. oberste Personengruppe die höchste Priorität
-        ?? groupsOfPersons.find((personGroup) => user?.member_types?.includes?.(personGroup?.code))?.code
+        groupsOfPersons.find((personGroup) => user?.member_types?.includes?.(personGroup?.code))?.code ??
         // Wenn der Nutzer nicht eingeloogt ist oder durch den Angehörigkeiten keine Personengruppe ermittelt werden konnt, wird die Standartgruppe ausgewählt
         // Bei der Standartpersonengruppe ist in der Sttings.js das 'default'-Feld auf Wahr/true gesetzt.
-        ?? groupsOfPersons.find(personGroup => personGroup?.default)?.code;
-
-    // Daten für Essenstypen
-    const availableMealTypes = theme?.appSettings?.mealTypes;
-    const favoriteMealTypes = settings?.settingsCanteens?.favoriteMealTypes;
-
-    // Einstellung für Serverauswahl
-    const isStagingServerActive = useStagingServer();
-
-    // Einstellungen für Mensa-Modul
-    const canteenSettings = appSettings?.modules?.canteen;
-
-    // Einstellungen für Fallback API-Provider
-    const fallbackApiSettings = theme?.appSettings?.api;
-    const fallbackApiProvider = AsistServerProviderName;
-    const fallbackApiBaseUrl = (isStagingServerActive ? fallbackApiSettings.rootStgUrl : fallbackApiSettings.rootUrl) + 'app/';
-    const fallbbackApiUniversity = fallbackApiSettings?.university;
-
-    // Einstellungen für API-Provider
-    const canteenApiSettings = canteenSettings.api;
-    // Soll der Staging-Provider verwendet werden?
-    const canteenApiProviderSettings = isStagingServerActive
-        // Wenn ja, werden die Staging Provider-Einstellungen geladen
-        ? canteenApiSettings?.staging
-        // Wenn nein, werden die productiven Provider-Einstellungen geladen
-        : canteenApiSettings?.production;
-    const canteenApiProvider = canteenApiProviderSettings?.provider ?? fallbackApiProvider;
-    const canteenApiBaseUrl = canteenApiProviderSettings?.url ?? fallbackApiBaseUrl;
-    const canteenApiUniversity = canteenApiProviderSettings?.university ?? fallbbackApiUniversity;
-
-    const [canteens, dispatchCanteens] = useReducer(CanteensStateReducer, null);
-    const [favoriteCanteens, dispatchFavoriteCanteens] = useReducer(FavoriteCanteensStateReducer, null);
-
-    // Einmaliges Laden der gecachten Mensadaten und der zugehörigen Speisepläne aus dem Cache in den Kontext
-    useEffect(
-        () => {
-            AsyncStorage
-                .getItem(CanteensStoreKey)
-                .then(storedCanteens => {
-                    dispatchCanteens({ type: RestoreCanteens, canteens: JSON.parse(storedCanteens) });
-                    dispatchCanteens({ type: RemoveUnusedMenusAction, expiryDate: DateTime.now().minus({ weeks: 1 }).endOf('week').toISODate() });
-                })
-                .catch(reason => console.error(componentName, ':', 'can not restore canteens', ':', reason, 'key', ':', CanteensStoreKey));
-        }
-        , []
-    )
-
-    // Wenn die Mensa-Daten sich ändern, werden diese in den Cache zurückgespeichert
-    useEffect(
-        () => {
-            if (canteens) {
-                AsyncStorage
-                    .setItem(CanteensStoreKey, JSON.stringify(canteens))
-                    .catch(reason => console.error(componentName, ':', 'can`t store canteens: ', reason, 'key:', CanteensStoreKey, 'value:', canteens));
-            }
-        }
-        , [canteens]
-    )
-
-    // Einmaliges laden der favorisirten Mensen
-    useEffect(
-        () => {
-            AsyncStorage
-                .getItem(FavoriteCanteensStoreKey)
-                .then(storedFavoriteCanteens => {
-                    console.debug(componentName, ':', 'restore favorite canteens ids', ':', storedFavoriteCanteens);
-                    dispatchFavoriteCanteens({ type: SetCanteensAction, canteensIds: JSON.parse(storedFavoriteCanteens) });
-                })
-                .catch(reason => console.error(componentName, ':', 'can not restore favorite canteens ids', ':', reason, 'key', ':', FavoriteCanteensStoreKey));
-        },
-        []
-    )
-
-    // Wenn die favorisirten Mensen sich ändern, werden diese in den Cache zurückgespeichert
-    useEffect(
-        () => {
-            if (Array.isArray(favoriteCanteens)) {
-                console.debug(componentName, ':', 'store favorite canteens', favoriteCanteens);
-                AsyncStorage
-                    .setItem(FavoriteCanteensStoreKey, JSON.stringify(favoriteCanteens))
-                    .catch(reason => console.error(componentName, ':', 'can`t store canteens: ', reason, 'key:', FavoriteCanteensStoreKey, 'value:', favoriteCanteens));
-            }
-        },
-        [favoriteCanteens]
-    )
-
-    console.debug(componentName, ':', 'favorite selections', ':', favoriteSelections);
-    console.debug(componentName, ':', 'available selections', ':', availableSelections);
-
-    const activeSelections = useMemo(
-        () => {
-            if (Array.isArray(favoriteSelections) && favoriteSelections.length > 0 && Array.isArray(availableSelections)) {
-                return availableSelections
-                    .filter(availableSelection => favoriteSelections.includes(availableSelection.code));
-            } else {
-                return null;
-            }
-        },
-        [favoriteSelections, availableSelections]
-    );
-
-    console.debug(componentName, ':', 'active selections', ':', activeSelections);
-
-    const activeSelectionFilters = useMemo(
-        () => {
-            if (Array.isArray(activeSelections) && activeSelections.length > 0) {
-                return [
-                    ...new Set(
-                        activeSelections
-                            .flatMap(activeSelection => activeSelection?.filters)
-                    )
-                ];
-            } else {
-                return null;
-            }
-        },
-        [activeSelections]
-    )
-
-    console.debug(componentName, ':', 'active selection filter', ':', activeSelectionFilters);
-
-
-    console.debug(componentName, ':', 'available meal typeas', ':', availableMealTypes);
-    console.debug(componentName, ':', 'favorite meal types', ':', favoriteMealTypes);
-
-    const activeMealtypes = useMemo(
-        () => {
-            if (Array.isArray(favoriteMealTypes) && favoriteMealTypes.length > 0 && Array.isArray(availableMealTypes)) {
-                return availableMealTypes
-                    .filter(activeMealtype => favoriteMealTypes.includes(activeMealtype.code));
-            }
-            else {
-                return null;
-            }
-        },
-        [favoriteMealTypes, availableMealTypes]
-    )
-
-    console.debug(componentName, ':', 'active meal types', ':', activeMealtypes);
-
-    const activeMealtypeFilters = useMemo(
-        () => {
-            if (Array.isArray(activeMealtypes) && activeMealtypes.length > 0) {
-                return [
-                    ... new Set(
-                        activeMealtypes
-                            .flatMap(activeMealtype => activeMealtype?.filters ?? activeMealtype?.code ?? [])
-                    )
-                ];
-            } else {
-                return null;
-            }
-        }
-    )
-
-    console.debug(componentName, ':', 'active meal type filters', ':', activeMealtypeFilters);
-
-    // Estellen des API-Providers bzw. erneuern wenn sich Einstellungen sich ändern.
-    const apiProvider = useMemo(
-        () => {
-            switch (canteenApiProvider?.toLowerCase()) {
-                case AsistServerProviderName:
-                    console.debug(componentName, ': use asist server api');
-                    return AsistServerApiProvider.from(canteenApiBaseUrl, canteenApiUniversity, language);
-                case CollectorVersion2ProviderName:
-                    console.debug(componentName, ': use collector v2 api');
-                    return CollektorVersion2ApiProvider.from(canteenApiBaseUrl, language);
-                default:
-                    console.log(`${componentName}: Can't build api provider: ${canteenApiProvider}`)
-                    return null;
-            }
-        },
-        [canteenApiSettings, canteenApiProvider, canteenApiBaseUrl, canteenApiUniversity, language]
-    );
-
-    // Sobald der Mensa-Context erstellt wird, werden die Mensen vom Server geholt
-    useEffect(
-        () => {
-            if (apiProvider) {
-                apiProvider.getCanteens()
-                    .then(
-                        canteens => {
-                            // Jede Mensa wird einzeln in den Mensa-State hineinreduziert
-                            canteens.forEach(canteen => dispatchCanteens({ type: SetCanteenAction, canteen }));
-
-                            // Danach werden die alten Mensen, die nicht in der Serverantwort sind, herausreduziert
-                            // Liste der IDs der in der Serverantwort enthaltenen Mensen erstellen
-                            const activeCanteenIds = canteens.map(canteen => canteen?.id);
-                            // Alte Mensen aus den gecachten Mensa-Daten löschen
-                            dispatchCanteens(
-                                {
-                                    type: RemoveUnusedCanteensAction,
-                                    activeCanteenIds: activeCanteenIds,
-                                }
-                            );
-                            // Alte Mensen aus den favorisierten Mensen löschen
-                            dispatchFavoriteCanteens(
-                                {
-                                    type: RemoveUnusedCanteensAction,
-                                    activeCanteenIds: activeCanteenIds,
-                                }
-                            );
-                        }
-                    );
+        groupsOfPersons.find(personGroup => personGroup?.default)?.code
+
+  // Daten für Essenstypen
+  const availableMealTypes = theme?.appSettings?.mealTypes
+  const favoriteMealTypes = settings?.settingsCanteens?.favoriteMealTypes
+
+  // Einstellung für Serverauswahl
+  const isStagingServerActive = useStagingServer()
+
+  // Einstellungen für Mensa-Modul
+  const canteenSettings = appSettings?.modules?.canteen
+
+  // Einstellungen für Fallback API-Provider
+  const fallbackApiSettings = theme?.appSettings?.api
+  const fallbackApiProvider = AsistServerProviderName
+  const fallbackApiBaseUrl = (isStagingServerActive ? fallbackApiSettings.rootStgUrl : fallbackApiSettings.rootUrl) + 'app/'
+  const fallbbackApiUniversity = fallbackApiSettings?.university
+
+  // Einstellungen für API-Provider
+  const canteenApiSettings = canteenSettings.api
+  // Soll der Staging-Provider verwendet werden?
+  const canteenApiProviderSettings = isStagingServerActive
+  // Wenn ja, werden die Staging Provider-Einstellungen geladen
+    ? canteenApiSettings?.staging
+  // Wenn nein, werden die productiven Provider-Einstellungen geladen
+    : canteenApiSettings?.production
+  const canteenApiProvider = canteenApiProviderSettings?.provider ?? fallbackApiProvider
+  const canteenApiBaseUrl = canteenApiProviderSettings?.url ?? fallbackApiBaseUrl
+  const canteenApiUniversity = canteenApiProviderSettings?.university ?? fallbbackApiUniversity
+
+  const [canteens, dispatchCanteens] = useReducer(CanteensStateReducer, null)
+  const [favoriteCanteens, dispatchFavoriteCanteens] = useReducer(FavoriteCanteensStateReducer, null)
+  const [cacheRestored, setCacheRestored] = useState(false)
+
+  // Einmaliges Laden der gecachten Mensadaten und der zugehörigen Speisepläne aus dem Cache in den Kontext
+  useEffect(
+    () => {
+      let active = true
+      const restoreCanteens = AsyncStorage
+        .getItem(CanteensStoreKey)
+        .then(storedCanteens => {
+          if (!active) return
+          dispatchCanteens({ type: RestoreCanteens, canteens: JSON.parse(storedCanteens) })
+          dispatchCanteens({ type: RemoveUnusedMenusAction, expiryDate: DateTime.now().minus({ weeks: 1 }).endOf('week').toISODate() })
+        })
+        .catch(reason => console.error(componentName, ':', 'can not restore canteens', ':', reason, 'key', ':', CanteensStoreKey))
+
+      const restoreFavorites = AsyncStorage
+        .getItem(FavoriteCanteensStoreKey)
+        .then(storedFavoriteCanteens => {
+          if (!active) return
+          dispatchFavoriteCanteens({ type: SetCanteensAction, canteensIds: JSON.parse(storedFavoriteCanteens) })
+        })
+        .catch(reason => console.error(componentName, ':', 'can not restore favorite canteens ids', ':', reason, 'key', ':', FavoriteCanteensStoreKey))
+
+      // The server list must reconcile both restored caches, never race them.
+      Promise.all([restoreCanteens, restoreFavorites]).then(() => {
+        if (active) setCacheRestored(true)
+      })
+
+      return () => { active = false }
+    }
+    , []
+  )
+
+  // Wenn die Mensa-Daten sich ändern, werden diese in den Cache zurückgespeichert
+  useEffect(
+    () => {
+      if (cacheRestored && canteens) {
+        AsyncStorage
+          .setItem(CanteensStoreKey, JSON.stringify(canteens))
+          .catch(reason => console.error(componentName, ':', 'can`t store canteens: ', reason, 'key:', CanteensStoreKey, 'value:', canteens))
+      }
+    }
+    , [cacheRestored, canteens]
+  )
+
+  // Wenn die favorisirten Mensen sich ändern, werden diese in den Cache zurückgespeichert
+  useEffect(
+    () => {
+      if (cacheRestored) {
+        console.debug(componentName, ':', 'store favorite canteens', favoriteCanteens)
+        AsyncStorage
+          .setItem(FavoriteCanteensStoreKey, JSON.stringify(favoriteCanteens))
+          .catch(reason => console.error(componentName, ':', 'can`t store canteens: ', reason, 'key:', FavoriteCanteensStoreKey, 'value:', favoriteCanteens))
+      }
+    },
+    [cacheRestored, favoriteCanteens]
+  )
+
+  console.debug(componentName, ':', 'favorite selections', ':', favoriteSelections)
+  console.debug(componentName, ':', 'available selections', ':', availableSelections)
+
+  const activeSelections = useMemo(
+    () => {
+      if (Array.isArray(favoriteSelections) && favoriteSelections.length > 0 && Array.isArray(availableSelections)) {
+        return availableSelections
+          .filter(availableSelection => favoriteSelections.includes(availableSelection.code))
+      } else {
+        return null
+      }
+    },
+    [favoriteSelections, availableSelections]
+  )
+
+  console.debug(componentName, ':', 'active selections', ':', activeSelections)
+
+  const activeSelectionFilters = useMemo(
+    () => {
+      if (Array.isArray(activeSelections) && activeSelections.length > 0) {
+        return [
+          ...new Set(
+            activeSelections
+              .flatMap(activeSelection => activeSelection?.filters)
+          )
+        ]
+      } else {
+        return null
+      }
+    },
+    [activeSelections]
+  )
+
+  console.debug(componentName, ':', 'active selection filter', ':', activeSelectionFilters)
+
+  console.debug(componentName, ':', 'available meal typeas', ':', availableMealTypes)
+  console.debug(componentName, ':', 'favorite meal types', ':', favoriteMealTypes)
+
+  const activeMealtypes = useMemo(
+    () => {
+      if (Array.isArray(favoriteMealTypes) && favoriteMealTypes.length > 0 && Array.isArray(availableMealTypes)) {
+        return availableMealTypes
+          .filter(activeMealtype => favoriteMealTypes.includes(activeMealtype.code))
+      } else {
+        return null
+      }
+    },
+    [favoriteMealTypes, availableMealTypes]
+  )
+
+  console.debug(componentName, ':', 'active meal types', ':', activeMealtypes)
+
+  const activeMealtypeFilters = useMemo(
+    () => {
+      if (Array.isArray(activeMealtypes) && activeMealtypes.length > 0) {
+        return [
+          ...new Set(
+            activeMealtypes
+              .flatMap(activeMealtype => activeMealtype?.filters ?? activeMealtype?.code ?? [])
+          )
+        ]
+      } else {
+        return null
+      }
+    }
+  )
+
+  console.debug(componentName, ':', 'active meal type filters', ':', activeMealtypeFilters)
+
+  // Estellen des API-Providers bzw. erneuern wenn sich Einstellungen sich ändern.
+  const apiProvider = useMemo(
+    () => {
+      switch (canteenApiProvider?.toLowerCase()) {
+        case AsistServerProviderName:
+          console.debug(componentName, ': use asist server api')
+          return AsistServerApiProvider.from(canteenApiBaseUrl, canteenApiUniversity, language)
+        case CollectorVersion2ProviderName:
+          console.debug(componentName, ': use collector v2 api')
+          return CollektorVersion2ApiProvider.from(canteenApiBaseUrl, language)
+        default:
+          console.log(`${componentName}: Can't build api provider: ${canteenApiProvider}`)
+          return null
+      }
+    },
+    [canteenApiSettings, canteenApiProvider, canteenApiBaseUrl, canteenApiUniversity, language]
+  )
+
+  // Sobald der Mensa-Context erstellt wird, werden die Mensen vom Server geholt
+  useEffect(
+    () => {
+      let active = true
+      if (apiProvider && cacheRestored) {
+        apiProvider.getCanteens()
+          .then(
+            canteens => {
+              if (!active) return
+              if (!Array.isArray(canteens) || canteens.some(canteen => canteen?.id == null || !hasCanteenTitle(canteen))) {
+                throw new Error('Invalid canteen list')
+              }
+              // Jede Mensa wird einzeln in den Mensa-State hineinreduziert
+              canteens.forEach(canteen => dispatchCanteens({ type: SetCanteenAction, canteen }))
+
+              // Danach werden die alten Mensen, die nicht in der Serverantwort sind, herausreduziert
+              // Liste der IDs der in der Serverantwort enthaltenen Mensen erstellen
+              const activeCanteenIds = canteens.map(canteen => canteen?.id)
+              // Alte Mensen aus den gecachten Mensa-Daten löschen
+              dispatchCanteens(
+                {
+                  type: RemoveUnusedCanteensAction,
+                  activeCanteenIds
+                }
+              )
+              // Alte Mensen aus den favorisierten Mensen löschen
+              dispatchFavoriteCanteens(
+                {
+                  type: RemoveUnusedCanteensAction,
+                  activeCanteenIds
+                }
+              )
             }
-        },
-        [apiProvider]
-    );
-
-    /**
+          )
+          .catch(reason => console.warn(componentName, ':', 'can not refresh canteens', ':', reason))
+      }
+      return () => { active = false }
+    },
+    [apiProvider, cacheRestored]
+  )
+
+  /**
      * Refresh a menu in canteens object.
      *
      * @param {String} canteenId ID of the canteen of the menu to be refreshing
      * @param {String} date Date of the menu to be refreshing
      * @returns {Promise<void>} Promise as an indicator of whether the refresh is in progress
      */
-    function refreshMenu(canteenId, date) {
-        return apiProvider.getMenu(canteenId, date)
-            .then(
-                menu =>
-                    dispatchCanteens(
-                        {
-                            type: SetMenuAction,
-                            menu,
-                            canteenId: canteenId,
-                            date: date,
-                        }
-                    ),
-                reason => {
-                    if (reason instanceof NotModifiedResponse) {
-                        console.debug(componentName, ':', 'Meal from', date, 'and canteen', canteenId, 'not modified');
-                    } else {
-                        throw reason;
-                    }
-                }
-            );
-    }
+  function refreshMenu (canteenId, date) {
+    return apiProvider.getMenu(canteenId, date)
+      .then(
+        menu =>
+          dispatchCanteens(
+            {
+              type: SetMenuAction,
+              menu,
+              canteenId,
+              date
+            }
+          ),
+        reason => {
+          if (reason instanceof NotModifiedResponse) {
+            console.debug(componentName, ':', 'Meal from', date, 'and canteen', canteenId, 'not modified')
+          } else {
+            // Keep cached menus when a request fails (e.g. a removed ID).
+            console.warn(componentName, ':', 'can not refresh menu', canteenId, date, ':', reason)
+          }
+        }
+      )
+  }
 
-    /**
+  /**
      * Setz den vom Nutzer gewünschen Mensapreis, anhand des Codes der entsprechnden Personengruppe.
      * @function
      * @param {string} personGroupCode Code der Personengruppe, welche für die Mensapreise zu verwenden ist
      */
-    const setPriceGroupCode = useCallback(
-        /**
+  const setPriceGroupCode = useCallback(
+    /**
          * @param {string} personGroupCode Code der Personengruppe, welche für die Mensapreise zu verwenden ist
          */
-        (personGroupCode) =>
-            reduxDispatch(
-                onSettingCanteenMerge(
-                    "canteenSettings",
-                    { favoritePrice: personGroupCode }
-                )
-            ),
-        [reduxDispatch]
-    );
+    (personGroupCode) =>
+      reduxDispatch(
+        onSettingCanteenMerge(
+          'canteenSettings',
+          { favoritePrice: personGroupCode }
+        )
+      ),
+    [reduxDispatch]
+  )
 
-    /**
+  /**
      * Setzt die favorsierten Mensen, anhand einer Liste der IDs
      */
-    const setFavoriteCanteens = useCallback(
-        /**
+  const setFavoriteCanteens = useCallback(
+    /**
          * @param {string[]} favoriteCanteens IDs der Mensen, die als favorisiert gesetzt werden sollen
          */
-        (favoriteCanteens) => {
-            console.debug(componentName, ':', 'set favorite canteens', ':', favoriteCanteens);
-            dispatchFavoriteCanteens(
-                {
-                    type: SetCanteensAction,
-                    canteensIds: favoriteCanteens,
-                }
-            );
-        },
-        [dispatchFavoriteCanteens, SetCanteensAction]
-    );
-
-    // Render the provider component with the filtered canteens and canteens data
-    return (
-        <CanteenContext.Provider
-            value={{
-                canteens: canteens ?? {},
-                favoriteCanteens: favoriteCanteens ?? Object.keys(canteens ?? {}),
-                setFavoriteCanteens,
-                priceGroupCode,
-                setPriceGroupCode,
-                activeSelections,
-                activeSelectionFilters,
-                activeMealtypes,
-                activeMealtypeFilters,
-                refreshMenu,
-            }}
-        >
-            {children}
-        </CanteenContext.Provider>
-    );
+    (favoriteCanteens) => {
+      console.debug(componentName, ':', 'set favorite canteens', ':', favoriteCanteens)
+      dispatchFavoriteCanteens(
+        {
+          type: SetCanteensAction,
+          canteensIds: favoriteCanteens
+        }
+      )
+    },
+    [dispatchFavoriteCanteens, SetCanteensAction]
+  )
+
+  // Render the provider component with the filtered canteens and canteens data
+  return (
+    <CanteenContext.Provider
+      value={{
+        canteens: canteens ?? {},
+        favoriteCanteens: (favoriteCanteens ?? Object.keys(canteens ?? {}))
+          .filter(canteenId => hasCanteenTitle(canteens?.[canteenId])),
+        setFavoriteCanteens,
+        priceGroupCode,
+        setPriceGroupCode,
+        activeSelections,
+        activeSelectionFilters,
+        activeMealtypes,
+        activeMealtypeFilters,
+        refreshMenu
+      }}
+    >
+      {children}
+    </CanteenContext.Provider>
+  )
 }
 
 // Map the Redux state to props
 const mapStateToProps = storeState => {
-    return {
-        settings: storeState.settingReducer,
-        rootUrl: storeState.settingReducer.api.rootUrl,
-        rootStgUrl: storeState.settingReducer.api.rootStgUrl,
-        useStaging: storeState.settingReducer.settingsDevelop.useStaging,
-    };
-};
+  return {
+    settings: storeState.settingReducer,
+    rootUrl: storeState.settingReducer.api.rootUrl,
+    rootStgUrl: storeState.settingReducer.api.rootStgUrl,
+    useStaging: storeState.settingReducer.settingsDevelop.useStaging
+  }
+}
 
 // Connect the CanteenContextProvider component to Redux
-const ConnectedCanteenContextProvider = connect(mapStateToProps)(CanteenContextProvider);
-
+const ConnectedCanteenContextProvider = connect(mapStateToProps)(CanteenContextProvider)
 
 // Custom hook to use the CanteenContext
-function useCanteenContext() {
-    const context = useContext(CanteenContext);
-    if (context === undefined) {
-        throw new Error('useCanteenContext must be used within a CanteenContextProvider')
-    }
-    return context;
+function useCanteenContext () {
+  const context = useContext(CanteenContext)
+  if (context === undefined) {
+    throw new Error('useCanteenContext must be used within a CanteenContextProvider')
+  }
+  return context
 }
 
 /**
@@ -554,10 +582,10 @@ function useCanteenContext() {
  *
  * refreshMenu('1', '2024-12-31');
  */
-function useCanteens() {
-    const canteenContext = useCanteenContext();
+function useCanteens () {
+  const canteenContext = useCanteenContext()
 
-    return [canteenContext.canteens ?? null, canteenContext.refreshMenu];
+  return [canteenContext.canteens ?? null, canteenContext.refreshMenu]
 }
 
 /**
@@ -566,13 +594,13 @@ function useCanteens() {
  * @param {String} canteenId
  * @returns {[?Object, (menuDate: String) => Promise<void>]}
  */
-function useCanteen(canteenId) {
-    const [canteens, refreshMenu] = useCanteens();
+function useCanteen (canteenId) {
+  const [canteens, refreshMenu] = useCanteens()
 
-    return [
-        canteens?.[canteenId] ?? null, // Holt die Mensa mit der ID canteenId aus dem Mensa-Objekt
-        (menuDate) => refreshMenu(canteenId, menuDate), // Erstellt eine Funktion, die das Essen ohne angeben der canteenId aktualisiert
-    ];
+  return [
+    canteens?.[canteenId] ?? null, // Holt die Mensa mit der ID canteenId aus dem Mensa-Objekt
+    (menuDate) => refreshMenu(canteenId, menuDate) // Erstellt eine Funktion, die das Essen ohne angeben der canteenId aktualisiert
+  ]
 }
 
 /**
@@ -582,13 +610,13 @@ function useCanteen(canteenId) {
  * @param {String} menuDate
  * @returns {[?Object[], () => Promise<void>]}
  */
-function useMenu(canteenId, menuDate) {
-    const [canteen, refreshMenu] = useCanteen(canteenId);
+function useMenu (canteenId, menuDate) {
+  const [canteen, refreshMenu] = useCanteen(canteenId)
 
-    return [
-        canteen?.menus?.[menuDate] ?? null, // Holt das Essen aus der Mensa mit der ID canteenId
-        () => refreshMenu(menuDate), // Erstellt eine Funktion, die das Essen ohne angeben von canteenId und menuDate aktualisiert
-    ];
+  return [
+    canteen?.menus?.[menuDate] ?? null, // Holt das Essen aus der Mensa mit der ID canteenId
+    () => refreshMenu(menuDate) // Erstellt eine Funktion, die das Essen ohne angeben von canteenId und menuDate aktualisiert
+  ]
 }
 
 /**
@@ -598,49 +626,49 @@ function useMenu(canteenId, menuDate) {
  * @param {String} menuDate
  * @returns {[?Object, () => Promise<void>]}
  */
-function useFilteredMenu(canteenId, menuDate) {
-    //const hookName = arguments.callee.name;
-    //const hookCall = `${hookName}(canteenId: ${canteenId}, menuDate: ${menuDate})`;
-
-    const {
-        activeSelections,
-        activeSelectionFilters,
-        activeMealtypes,
-        activeMealtypeFilters
-    } = useCanteenContext();
-    const [menu, refreshMenu] = useMenu(canteenId, menuDate);
-
-    let filteredMenu = menu;
-
-    if (activeSelectionFilters) {
-        filteredMenu = filteredMenu?.filter(
-            meal => activeSelectionFilters.every(
-                activeSelectionFilter => meal.selections.includes(activeSelectionFilter)
-            )
-        );
-    }
-
-    if (activeMealtypeFilters) {
-        filteredMenu = filteredMenu
-            ?.filter(
-                meal =>
-                    meal?.type
-                        ? activeMealtypeFilters.includes(meal.type)
-                        : true
-            );
-    }
-
-    const mealAmount = menu?.length ?? 0;
-    const filteredMealAmount = filteredMenu?.length ?? 0;
-
-    return [
-        filteredMenu,
-        refreshMenu,
-        mealAmount,
-        filteredMealAmount,
-        activeSelections,
-        activeMealtypes,
-    ];
+function useFilteredMenu (canteenId, menuDate) {
+  // const hookName = arguments.callee.name;
+  // const hookCall = `${hookName}(canteenId: ${canteenId}, menuDate: ${menuDate})`;
+
+  const {
+    activeSelections,
+    activeSelectionFilters,
+    activeMealtypes,
+    activeMealtypeFilters
+  } = useCanteenContext()
+  const [menu, refreshMenu] = useMenu(canteenId, menuDate)
+
+  let filteredMenu = menu
+
+  if (activeSelectionFilters) {
+    filteredMenu = filteredMenu?.filter(
+      meal => activeSelectionFilters.every(
+        activeSelectionFilter => meal.selections.includes(activeSelectionFilter)
+      )
+    )
+  }
+
+  if (activeMealtypeFilters) {
+    filteredMenu = filteredMenu
+      ?.filter(
+        meal =>
+          meal?.type
+            ? activeMealtypeFilters.includes(meal.type)
+            : true
+      )
+  }
+
+  const mealAmount = menu?.length ?? 0
+  const filteredMealAmount = filteredMenu?.length ?? 0
+
+  return [
+    filteredMenu,
+    refreshMenu,
+    mealAmount,
+    filteredMealAmount,
+    activeSelections,
+    activeMealtypes
+  ]
 }
 
 /**
@@ -658,10 +686,10 @@ function useFilteredMenu(canteenId, menuDate) {
  * console.log(priceGroupCode);
  * setPriceGroupCode('guest');
  */
-function usePriceGroupCode() {
-    const { priceGroupCode, setPriceGroupCode } = useCanteenContext();
+function usePriceGroupCode () {
+  const { priceGroupCode, setPriceGroupCode } = useCanteenContext()
 
-    return [priceGroupCode, setPriceGroupCode];
+  return [priceGroupCode, setPriceGroupCode]
 }
 
 /**
@@ -673,20 +701,20 @@ function usePriceGroupCode() {
  *
  * setFavoriteCanteens(['canteen1', 'canteen2']);
  */
-function useFavoriteCanteens() {
-    const { favoriteCanteens, setFavoriteCanteens } = useCanteenContext();
+function useFavoriteCanteens () {
+  const { favoriteCanteens, setFavoriteCanteens } = useCanteenContext()
 
-    return [favoriteCanteens, setFavoriteCanteens];
+  return [favoriteCanteens, setFavoriteCanteens]
 }
 
 export {
-    ConnectedCanteenContextProvider as CanteenContextProvider,
-    CanteenContext as default,
-    useCanteenContext,
-    useCanteens,
-    useCanteen,
-    useMenu,
-    useFilteredMenu,
-    usePriceGroupCode,
-    useFavoriteCanteens,
-};
+  ConnectedCanteenContextProvider as CanteenContextProvider,
+  CanteenContext as default,
+  useCanteenContext,
+  useCanteens,
+  useCanteen,
+  useMenu,
+  useFilteredMenu,
+  usePriceGroupCode,
+  useFavoriteCanteens
+}