change BrowserRouter to createBrowserRouter in order to use dataAPI (preserveScrollPosition)

client/src/App.jsx

@@ -9,6 +9,11 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import i18n, { allLanguages } from "./i18n";
 import { TranslationProvider } from "./components/util/translation/TranslationProvider";
 import { useTracking } from "react-tracking";
+import ServiceWorkerUpdateService from "./components/ServiceWorkerUpdateService";
+import { Auth0ProviderWithRedirectCallback } from "./components/util";
+
+const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
 
 /**
  * This is the main App component. It sets the MUI theme as well as the dark mode (if desired). It also deals with Frontend-Routing with the help of React Router.
@@ -106,14 +111,17 @@ const App = () => {
 
   return (
     <>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <TranslationProvider>
-          <Track>
-            <ContentWrapper setDarkMode={setPrefersDarkMode} />
-          </Track>
-        </TranslationProvider>
-      </ThemeProvider>
+      <Auth0ProviderWithRedirectCallback domain={domain} clientId={clientId} redirectUri={window.location.origin}>
+        <ServiceWorkerUpdateService />
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <TranslationProvider>
+            <Track>
+              <ContentWrapper setDarkMode={setPrefersDarkMode} />
+            </Track>
+          </TranslationProvider>
+        </ThemeProvider>
+      </Auth0ProviderWithRedirectCallback>
     </>
   );
 }

client/src/components/ContentWrapper.jsx

@@ -1,5 +1,5 @@
-import React, { lazy, Suspense, useEffect, useState } from 'react';
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import React, { Suspense, useEffect, useState } from 'react';
+import { Outlet, useLocation } from "react-router-dom";
 import NavTabs from "./NavTabs";
 import { makeStyles } from '@material-ui/styles';
 import { Box } from '@material-ui/core';
@@ -7,27 +7,6 @@ import { func } from "prop-types";
 import Snackbars from "./util/Snackbars";
 import { LoadingBody } from "./Loading";
 
-// route-based lazy loading of components according to https://legacy.reactjs.org/docs/code-splitting.html#route-based-code-splitting and https://react.dev/reference/react/lazy#load
-const Home = lazy(() => import('./Home'));
-
-const AddMeal = lazy(() => import('./Meals/AddMeal'));
-const EditMeal = lazy(() => import('./Meals/EditMeal'));
-const OwnMeals = lazy(() => import('./Meals/OwnMeals'));
-const MealDetailView = lazy(() => import('./Meals/MealDetailView'));
-
-const AddPlanItem = lazy(() => import('./Plans/AddPlanItem'));
-const EditPlanItem = lazy(() => import('./Plans/EditPlanItem'));
-const OwnPlans = lazy(() => import('./Plans/OwnPlans'));
-const ShoppingList = lazy(() => import('./Plans/ShoppingList'));
-
-const Social = lazy(() => import('./Social/Social'));
-const ContactsContent = lazy(() => import('./Social/ContactsContent'));
-
-const Settings = lazy(() => import('./Settings/Settings'));
-const AdvancedSettings = lazy(() => import('./Settings/AdvancedSettings'));
-const EditProfile = lazy(() => import('./Settings/EditProfile'));
-
-
 const useStyles = makeStyles(theme => ({
   content: {
     height: `calc(100% - ${process.env.REACT_APP_NAV_BOTTOM_HEIGHT}px)`,
@@ -42,7 +21,6 @@ const useStyles = makeStyles(theme => ({
  */
 const ContentWrapper = (props) => {
   const classes = useStyles();
-  let navigate = useNavigate();
   let { state } = useLocation();
 
   const [deletedItem, setDeletedItem] = useState(null);
@@ -58,36 +36,11 @@ const ContentWrapper = (props) => {
     }
   }, [state]);
 
-  const goToPlans = () => {navigate('plans');};
-
   return (
     <>
       <Box className={classes.content}>
         <Suspense fallback={<LoadingBody />}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="meals">
-            <Route index element={<OwnMeals />} />
-            <Route path="add" element={<AddMeal />} />
-            <Route path={'detail/:mealId'} element={<MealDetailView />} />
-            <Route path={'edit/:mealId'} element={<EditMeal />} />
-          </Route>
-          <Route path="plans">
-            <Route index element={<OwnPlans />} />
-            <Route path="add" element={<AddPlanItem onDoneAdding={goToPlans} />} />
-            <Route path="edit/:planItemId" element={<EditPlanItem />} />
-            <Route path="shoppingList/:userId" element={<ShoppingList />} />
-          </Route>
-          <Route path="social">
-            <Route index element={<Social />} />
-            <Route path="contact/:userId/:tab" element={<ContactsContent />} />
-          </Route>
-          <Route path="settings">
-            <Route index element={<Settings />} />
-            <Route path="editProfile" element={<EditProfile />} />
-            <Route path="advanced" element={<AdvancedSettings setDarkModeInAppLevel={props.setDarkMode} />} />
-          </Route>
-        </Routes>
+        <Outlet />
         <Snackbars category={deletedItemCategory} deletedItem={deletedItem} />
         </Suspense>
       </Box>

client/src/components/Plans/AddPlanItem.jsx

@@ -72,7 +72,11 @@ const AddPlanItem = (props) => {
       addPlan(newPlan, (addedPlan) => {
         setIsSaving(false);
         trackEvent({ event: 'added-new-plan', planId: addedPlan._id });
-        onDoneAdding();
+        if (onDoneAdding) {
+          onDoneAdding();
+        } else {
+          navigate('/plans');
+        }
       });
     }
   }
@@ -86,7 +90,13 @@ const AddPlanItem = (props) => {
               rightSideComponent={planItem.title ? <DoneButton label={t('Done')} onClick={addNewPlan} /> : null} />
       <form noValidate onSubmit={addNewPlan} className={classes.form}>
         <EditPlanItemCore updatePlanItem={updatePlanItem} planItem={planItem} autoFocusFirstInput={autoFocusTitle} />
-        <SavingButton isSaving={isSaving} type="submit" disabled={!planItem.title} className={classes.submitButton} variant='contained' size="large" color='primary'>{t('Add Plan')}</SavingButton>
+        <SavingButton isSaving={isSaving}
+                      type="submit"
+                      disabled={!planItem.title}
+                      className={classes.submitButton}
+                      variant='contained'
+                      size="large"
+                      color='primary'>{t('Add Plan')}</SavingButton>
       </form>
     </Track>
   );

client/src/components/util/PlanMealButton.jsx

@@ -44,7 +44,7 @@ const PlanMealButton = (props) => {
   const onDoneAdding = () => {
     trackEvent({ event: 'planned-meal' });
     closePlanMealDialog();
-    navigate('plans');
+    navigate('/plans');
   }
 
   const openPlanMealDialog = () => {

client/src/index.jsx

@@ -1,22 +1,113 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import ReactDOM from 'react-dom';
-// import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import './i18n';
-import { BrowserRouter } from "react-router-dom";
-import ServiceWorkerUpdateService from "./components/ServiceWorkerUpdateService";
-import { Auth0ProviderWithRedirectCallback } from "./components/util";
+import { createBrowserRouter, RouterProvider, } from "react-router-dom";
 import TrackedApp from "./TrackedApp";
 
-//const loginRedirect = process.env.REACT_APP_LOGIN_REDIRECT;
-const domain = process.env.REACT_APP_AUTH0_DOMAIN;
-const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+// route-based lazy loading of components according to https://legacy.reactjs.org/docs/code-splitting.html#route-based-code-splitting and https://react.dev/reference/react/lazy#load
+const Home = lazy(() => import('./components/Home'));
+
+const AddMeal = lazy(() => import('./components/Meals/AddMeal'));
+const EditMeal = lazy(() => import('./components/Meals/EditMeal'));
+const OwnMeals = lazy(() => import('./components/Meals/OwnMeals'));
+const MealDetailView = lazy(() => import('./components/Meals/MealDetailView'));
+
+const AddPlanItem = lazy(() => import('./components/Plans/AddPlanItem'));
+const EditPlanItem = lazy(() => import('./components/Plans/EditPlanItem'));
+const OwnPlans = lazy(() => import('./components/Plans/OwnPlans'));
+const ShoppingList = lazy(() => import('./components/Plans/ShoppingList'));
+
+const Social = lazy(() => import('./components/Social/Social'));
+const ContactsContent = lazy(() => import('./components/Social/ContactsContent'));
+
+const Settings = lazy(() => import('./components/Settings/Settings'));
+const AdvancedSettings = lazy(() => import('./components/Settings/AdvancedSettings'));
+const EditProfile = lazy(() => import('./components/Settings/EditProfile'));
+
+const router = createBrowserRouter([
+  {
+    Component: TrackedApp,
+    children: [
+      {
+        path: '/',
+        Component: Home,
+      },
+      {
+        path: 'meals',
+        children: [
+          {
+            index: true,
+            element: <OwnMeals />,
+          },
+          {
+            path: 'add',
+            element: <AddMeal />,
+          },
+          {
+            path: 'detail/:mealId',
+            element: <MealDetailView />,
+          },
+          {
+            path: 'edit/:mealId',
+            element: <EditMeal />,
+          },
+        ]
+      },
+      {
+        path: 'plans',
+        children: [
+          {
+            index: true,
+            element: <OwnPlans />,
+          },
+          {
+            path: 'add',
+            element: <AddPlanItem />,
+          },
+          {
+            path: 'edit/:planItemId',
+            element: <EditPlanItem />,
+          },
+          {
+            path: 'shoppingList/:userId',
+            element: <ShoppingList />,
+          },
+        ]
+      },
+      {
+        path: 'social',
+        children: [
+          {
+            index: true,
+            element: <Social />,
+          },
+          {
+            path: 'contact/:userId/:tab',
+            element: <ContactsContent />,
+          },
+        ]
+      },
+      {
+        path: 'settings',
+        children: [
+          {
+            index: true,
+            element: <Settings />,
+          },
+          {
+            path: 'editProfile',
+            element: <EditProfile />,
+          },
+          {
+            path: 'advanced',
+            element: <AdvancedSettings />,
+          },
+        ]
+      },
+    ],
+  },
+]);
 
 ReactDOM.render(
-  <BrowserRouter>
-    <Auth0ProviderWithRedirectCallback domain={domain} clientId={clientId} redirectUri={window.location.origin}>
-      <ServiceWorkerUpdateService />
-      <TrackedApp />
-    </Auth0ProviderWithRedirectCallback>
-  </BrowserRouter>,
+  <RouterProvider router={router} />,
   document.getElementById('root')
 );