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

components/Link.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { Link as ReactRouterLink } from 'react-router-dom';
+
+const Link = ({ children, href, router, ...props }) => {
+  const [local, setLocal] = useState(false);
+
+  useEffect(() => {
+    setLocal(true);
+  }, []);
+
+  console.log('Rendering link', local, router);
+
+  if (!local || router === false) {
+    return children;
+  }
+  // return <a {...props}>{children}</a>;
+  return (
+    <ReactRouterLink to={href} {...props}>
+      {children}
+    </ReactRouterLink>
+  );
+};
+
+export default Link;

components/pages/Home.jsx

@@ -1,10 +1,7 @@
-import Store from '../../store';
 import Card from '../ui/Card';
-import Content from '../ui/Content';
 
-import * as selectors from '../../store/selectors';
-import usePage from '../../hooks/usePage';
-import { home, homeOutline } from 'ionicons/icons';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
+import { homeItems } from '../../store';
 
 const HomeCard = ({ title, type, text, author, image }) => (
   <Card className="my-4">
@@ -19,23 +16,19 @@ const HomeCard = ({ title, type, text, author, image }) => (
   </Card>
 );
 
-const Home = ({ selected }) => {
-  usePage({
-    id: 'home',
-    title: 'Home',
-    icon: homeOutline,
-    selectedIcon: home,
-  });
-
-  const homeItems = Store.useState(selectors.getHomeItems);
-
-  return (
-    <Content className="p-4 dark:bg-black">
+const Home = () => (
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Inbox</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
       {homeItems.map((i, index) => (
         <HomeCard {...i} key={index} />
       ))}
-    </Content>
-  );
-};
+    </IonContent>
+  </IonPage>
+);
 
 export default Home;

components/pages/ListDetail.jsx

@@ -1,4 +1,4 @@
-import { Link } from 'wouter';
+import Link from '../../components/Link';
 
 import usePage from '../../hooks/usePage';
 import Store from '../../store';

components/pages/Lists.jsx

@@ -1,13 +1,10 @@
-import { Link } from 'wouter';
+import Link from '../../components/Link';
 
-import usePage from '../../hooks/usePage';
 import Store from '../../store';
-import * as actions from '../../store/actions';
 import * as selectors from '../../store/selectors';
 
-import Content from '../ui/Content';
-import List from '../ui/List';
 import VirtualScroll from '../ui/VirtualScroll';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
 
 const ListEntry = ({ list, ...props }) => (
   <Link href={`/lists/${list.id}`}>
@@ -33,17 +30,20 @@ const AllLists = ({ onSelect }) => {
   );
 };
 
-const Lists = ({ selected }) => {
-  usePage({
-    title: 'Lists',
-  });
-
+const Lists = ({ selected, ...props }) => {
   return (
-    <Content className="p-4 dark:bg-black">
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Lists</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
         <List className="h-full w-full">
           <AllLists />
         </List>
-    </Content>
+      </IonContent>
+    </IonPage>
   );
 };
 

components/pages/Settings.jsx

@@ -1,38 +1,23 @@
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
-import * as actions from '../../store/actions';
-
-import Content from '../ui/Content';
-import List from '../ui/List';
-import ListItem from '../ui/ListItem';
-import Toggle from '../ui/Toggle';
-import usePage from '../../hooks/usePage';
-
-const Settings = ({ selected }) => {
-  usePage({
-    title: 'Settings',
-  });
 
+const Settings = () => {
   const enableNotifications = Store.useState();
   const settings = Store.useState(selectors.getSettings);
 
   return (
-    <Content className="p-4 dark:bg-black">
-      <List>
-        <ListItem className="flex">
-          <span className="text-md flex-1 dark:text-gray-200">Enable Notifications</span>
-          <Toggle
-            checked={settings.enableNotifications}
-            onChange={e =>
-              actions.setSettings({
-                ...settings,
-                enableNotifications: e.target.checked,
-              })
-            }
-          />
-        </ListItem>
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Settings</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <List className="h-full w-full">
+          <AllLists />
         </List>
-    </Content>
+      </IonContent>
+    </IonPage>
   );
 };
 

components/pages/Tabs.jsx

@@ -0,0 +1,47 @@
+import { Redirect, Route } from 'react-router-dom';
+import {
+  IonApp,
+  IonRouterOutlet,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonIcon,
+  IonLabel,
+} from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { ellipse, square, triangle } from 'ionicons/icons';
+
+import Home from './Home';
+import Lists from './Lists';
+import Settings from './Settings';
+
+const Tabs = () => {
+  return (
+    <IonReactRouter>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Route path="/tabs/home" component={Home} exact={true} />
+          <Route path="/tabs/lists" component={Lists} exact={true} />
+          <Route path="/tabs/settings" component={Settings} exact={true} />
+          <Route path="/" render={() => <Redirect to="/tabs/home" />} exact={true} />
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" href="/tabs/home">
+            <IonIcon icon={triangle} />
+            <IonLabel>Tab 1</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2" href="/tabs/lists">
+            <IonIcon icon={ellipse} />
+            <IonLabel>Tab 2</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab3" href="/tabs/settings">
+            <IonIcon icon={square} />
+            <IonLabel>Tab 3</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonReactRouter>
+  );
+};
+
+export default Tabs;

components/ui/Content.jsx

@@ -1,12 +0,0 @@
-import classNames from 'classnames';
-
-const Content = ({ className, children, ...props }) => (
-  <div
-    {...props}
-    className={classNames(`h-full w-full overflow-auto py-2 absolute top-0`, className)}
-  >
-    {children}
-  </div>
-);
-
-export default Content;

components/ui/PageStack.jsx

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-
-import { Transition } from 'react-transition-group';
-
-const duration = 500;
-
-const defaultStyle = {
-  transition: `opacity ${duration}ms ease-in-out`,
-  opacity: 0,
-};
-
-const transitionStyles = {
-  entering: { opacity: 1 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-  exited: { opacity: 0 },
-};
-
-const PageStack = ({ children, className, ...props }) => (
-  <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
-    <Transition in={true} duration={duration}>
-      {state => (
-        <div
-          className="w-full h-full"
-          style={{
-            ...defaultStyle,
-            ...transitionStyles[state],
-          }}
-        >
-          {children}
-        </div>
-      )}
-    </Transition>
-  </div>
-);
-
-export default PageStack;

components/ui/Tab.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import Icon from './Icon';
-import { Link } from 'wouter';
+import Link from '../../components/Link';
 import { useEffect, useState } from 'react';
 
 const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => {

hooks/usePage.js

@@ -3,7 +3,7 @@ import Store from '../store';
 
 const usePage = fields => {
   useEffect(() => {
-    console.log('Use page effect');
+    console.log('Use page effect', fields.title);
     Store.update(s => {
       s.currentPage = fields;
     });

next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/*',
+        destination: '/',
+      },
+    ];
+  },
+};

package-lock.json

@@ -222,6 +222,33 @@
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.0.tgz",
       "integrity": "sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw=="
     },
+    "@ionic/core": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.2.tgz",
+      "integrity": "sha512-rOfPj8D5NRWdOYYulNTdKtMAMURfmutDQ3ciA3L7daCooG3MWt2/0siiL6rcZFMxfG7KDxHctuwVwYoC1mPuhg==",
+      "requires": {
+        "ionicons": "^5.1.2",
+        "tslib": "^1.10.0"
+      }
+    },
+    "@ionic/react": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-5.5.2.tgz",
+      "integrity": "sha512-PNcpjNlNwCjsGQQmrF6QeDzEIOKuCzq4B0QYK1M+uWZQuGD869Nfr/66+ZfMoihjBrry692sjtELMJpIl9FHXQ==",
+      "requires": {
+        "@ionic/core": "5.5.2",
+        "ionicons": "^5.1.2",
+        "tslib": "*"
+      }
+    },
+    "@ionic/react-router": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-5.5.2.tgz",
+      "integrity": "sha512-VJz4WA5B7X84MtcLOXIVOcrGsJFaZzFJ5Mzah+7z/M88InUwc6FoAjinFtTgmAmFbOXmGzo9lBBmzbKs86iZVQ==",
+      "requires": {
+        "tslib": "*"
+      }
+    },
     "@next/env": {
       "version": "10.0.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-10.0.3.tgz",
@@ -2652,6 +2679,19 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -2662,6 +2702,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -2852,8 +2900,7 @@
     "ionicons": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.3.tgz",
-      "integrity": "sha512-87qtgBkieKVFagwYA9Cf91B3PCahQbEOMwMt8bSvlQSgflZ4eE5qI4MGj2ZlIyadeX0dgo+0CzZsy3ow0CsBAg==",
-      "dev": true
+      "integrity": "sha512-87qtgBkieKVFagwYA9Cf91B3PCahQbEOMwMt8bSvlQSgflZ4eE5qI4MGj2ZlIyadeX0dgo+0CzZsy3ow0CsBAg=="
     },
     "is-accessor-descriptor": {
       "version": "0.1.6",
@@ -3353,6 +3400,15 @@
       "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
       "optional": true
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -3971,6 +4027,21 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
     },
+    "path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "requires": {
+        "isarray": "0.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        }
+      }
+    },
     "pbkdf2": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -4486,6 +4557,37 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-spring": {
       "version": "8.0.27",
       "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
@@ -4623,6 +4725,11 @@
         "path-parse": "^1.0.6"
       }
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -5613,6 +5720,16 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -5876,6 +5993,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

package.json

@@ -12,6 +12,8 @@
     "@capacitor/cli": "^2.4.5",
     "@capacitor/core": "^2.4.5",
     "@capacitor/ios": "^2.4.5",
+    "@ionic/react": "^5.5.2",
+    "@ionic/react-router": "^5.5.2",
     "autoprefixer": "^10.1.0",
     "capacitor-dark-mode": "^1.0.5",
     "classnames": "^2.2.6",
@@ -19,6 +21,7 @@
     "postcss": "^8.2.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-virtuoso": "^1.1.1",
     "tailwindcss": "^2.0.2"
   },

pages/[...all].js

@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+
+const App = dynamic(() => import('../components/AppShell'), {
+  ssr: false,
+});
+
+export default function Index() {
+  // return <AppShell page={DynamicHome} />;
+  return <App />;
+}

pages/_app.js

@@ -1,8 +1,13 @@
 import Head from 'next/head';
-import { useEffect } from 'react';
 
 import 'tailwindcss/tailwind.css';
-import Store from '../store';
+import '@ionic/react/css/core.css';
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
 
 import '../styles/global.css';
 

pages/index.js

@@ -1,6 +1,10 @@
-import AppShell from '../components/AppShell';
-import Home from '../components/pages/Home';
+import dynamic from 'next/dynamic';
+
+const App = dynamic(() => import('../components/AppShell'), {
+  ssr: false,
+});
 
 export default function Index() {
-  return <AppShell page={Home} />;
+  // return <AppShell page={DynamicHome} />;
+  return <App />;
 }

pages/lists.js

@@ -1,6 +0,0 @@
-import AppShell from '../components/AppShell';
-import ListsPage from '../components/pages/Lists';
-
-export default function Lists() {
-  return <AppShell page={ListsPage} />;
-}

pages/lists/[listId].js

@@ -1,18 +0,0 @@
-import AppShell from '../../components/AppShell';
-import ListDetailPage from '../../components/pages/ListDetail';
-
-export default function ListDetail({ listId }) {
-  return <AppShell page={ListDetailPage} pageProps={{ listId }} />;
-}
-
-export const getServerSideProps = context => {
-  const {
-    params: { listId },
-  } = context;
-
-  return {
-    props: {
-      listId,
-    },
-  };
-};

pages/settings.js

@@ -1,6 +0,0 @@
-import AppShell from '../components/AppShell';
-import SettingsPage from '../components/pages/Settings';
-
-export default function Settings() {
-  return <AppShell page={SettingsPage} />;
-}

pages/users/[userId].js

@@ -1,6 +0,0 @@
-import AppShell from '../../components/AppShell';
-import Home from '../../components/pages/Home';
-
-export default function UserId() {
-  return <AppShell page={Home} />;
-}

store/index.js

@@ -2,13 +2,6 @@ import { Store as PullStateStore } from 'pullstate';
 
 import { lists } from '../mock';
 
-import { list, listOutline, cog, cogOutline, home, homeOutline } from 'ionicons/icons';
-
-import Home from '../components/pages/Home';
-import Lists from '../components/pages/Lists';
-import Settings from '../components/pages/Settings';
-import ListDetail from '../components/pages/ListDetail';
-
 export const images = [
   'https://images.unsplash.com/photo-1608091526083-86ae8489ae5c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
   'https://images.unsplash.com/photo-1608050072262-7b26ba63fb46?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',