Moving to more workable v1 solution

components/AppShell.jsx

@@ -1,133 +1,19 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useDrag } from 'react-use-gesture';
-import { Router, Route, Switch, useRoute } from 'wouter';
-import { cog, cogOutline, home, homeOutline, list, listOutline } from 'ionicons/icons';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { Redirect, Route } from 'react-router-dom';
 
-import Store from '../store';
-import * as actions from '../store/actions';
-import * as selectors from '../store/selectors';
-
-import App from '../components/ui/App';
-import Backdrop from '../components/ui/Backdrop';
-import Menu from '../components/ui/Menu';
-import Modal from '../components/ui/Modal';
-import Nav from '../components/ui/Nav';
-import PageStack from '../components/ui/PageStack';
-import Tab from '../components/ui/Tab';
-import TabBar from '../components/ui/TabBar';
-import { SafeAreaProvider } from '../components/ui/SafeArea';
-import Notifications from '../components/Notifications';
-import MenuContent from '../components/MenuContent';
-import Home from './pages/Home';
-import Lists from './pages/Lists';
-import Settings from './pages/Settings';
-import useLocation from '../hooks/useLocation';
-import ListDetail from './pages/ListDetail';
-
-const CurrentPage = ({ page, pageProps = {} }) => {
-  const currentPage = Store.useState(selectors.getCurrentPage);
-
-  const Page = page;
-
-  const [local, setLocal] = useState(false);
-
-  useEffect(() => {
-    setLocal(true);
-  }, []);
-
-  return (
-    <PageStack>
-      {local ? (
-        <Switch>
-          <Route path="/" component={Home} />
-          <Route path="/lists" component={Lists} />
-          <Route path="/lists/:listId" component={ListDetail} />
-          <Route path="/settings" component={Settings} />
-        </Switch>
-      ) : (
-        <Page selected={true} {...pageProps} />
-      )}
-    </PageStack>
-  );
-};
+import Tabs from './pages/Tabs';
 
 const AppShell = ({ page, pageProps }) => {
-  const [location] = useLocation();
-
-  const showMenu = Store.useState(selectors.getMenuOpen);
-  const showNotifications = Store.useState(selectors.getNotificationsOpen);
-  const currentPage = Store.useState(selectors.getCurrentPage);
-
-  const closeMenu = () => actions.setMenuOpen(false);
-
-  const backdropClose = () => {
-    actions.setMenuOpen(false);
-    actions.setNotificationsOpen(false);
-  };
-
-  const closeNotifications = () => actions.setNotificationsOpen(false);
-
-  // To enable edge drag detection to open the side menu
-  const bind = useDrag(
-    ({ down, movement: [mx], xy: [x, y], cancel }) => {
-      if (mx > 5 && x < 50 && down) {
-        actions.setMenuOpen(true);
-        cancel();
-      }
-    },
-    {
-      axis: 'x',
-    }
-  );
-
-  console.log('Got location', location);
-
-  // This is an example app layout. We've got a hidden menu that will be toggled
-  //
   return (
-    <App
-      {...bind()}
-      style={{
-        touchAction: 'pan-x',
-      }}
-    >
-      <SafeAreaProvider>
-        <Router hook={useLocation}>
-          <Menu open={showMenu} onClose={closeMenu}>
-            <MenuContent />
-          </Menu>
-          <Nav page={currentPage} />
-          <CurrentPage page={page} pageProps={pageProps} />
-          <TabBar>
-            <Tab
-              icon={homeOutline}
-              selectedIcon={home}
-              title="Home"
-              href="/"
-              selected={'/' === location}
-            />
-            <Tab
-              icon={listOutline}
-              selectedIcon={list}
-              title="Lists"
-              href="/lists"
-              selected={location.indexOf('/lists') === 0}
-            />
-            <Tab
-              icon={cogOutline}
-              selectedIcon={cog}
-              title="Settings"
-              href="/settings"
-              selected={'/settings' === location}
-            />
-          </TabBar>
-          <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
-          <Modal open={showNotifications} onClose={closeNotifications}>
-            <Notifications />
-          </Modal>
-        </Router>
-      </SafeAreaProvider>
-    </App>
+    <IonApp>
+      <IonReactRouter>
+        <IonRouterOutlet>
+          <Route path="/tabs" render={() => <Tabs />} />
+          <Route exact path="/" render={() => <Redirect to="/tabs" />} />
+        </IonRouterOutlet>
+      </IonReactRouter>
+    </IonApp>
   );
 };