Working on refactoring to support router use case

pages/index.js

@@ -1,97 +1,6 @@
-import { useDrag } from 'react-use-gesture';
-
-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 { useEffect, useState } from 'react';
-
-const CurrentPage = ({ page }) => {
-  const pages = Store.useState(selectors.getPages);
-  const currentPage = Store.useState(selectors.getCurrentPage);
-
-  const Page = currentPage.component;
-
-  return (
-    <PageStack>
-      {/*pages.map(p => {
-        const Page = p.component;
-        return <Page selected={page.id === p.id} key={p.id} />;
-      })*/}
-      <Page selected={true} />
-    </PageStack>
-  );
-};
+import AppShell from '../components/AppShell';
+import Home from '../components/pages/Home';
 
 export default function Index() {
-  const showMenu = Store.useState(selectors.getMenuOpen);
-  const showNotifications = Store.useState(selectors.getNotificationsOpen);
-  const currentPage = Store.useState(selectors.getCurrentPage);
-  const tabs = Store.useState(selectors.getTabs);
-
-  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',
-    }
-  );
-
-  // This is an example app layout. We've got a hidden menu that will be toggled
-  //
-  return (
-    <App
-      {...bind()}
-      style={{
-        touchAction: 'pan-x',
-      }}
-    >
-      <SafeAreaProvider>
-        <Menu open={showMenu} onClose={closeMenu}>
-          <MenuContent />
-        </Menu>
-        <Nav page={currentPage} />
-        <CurrentPage page={currentPage} />
-        <TabBar>
-          {tabs.map(p => (
-            <Tab
-              key={p.id}
-              {...p}
-              onClick={() => actions.setPage(p)}
-              selected={p.id === currentPage.id}
-            />
-          ))}
-        </TabBar>
-        <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
-        <Modal open={showNotifications} onClose={closeNotifications}>
-          <Notifications />
-        </Modal>
-      </SafeAreaProvider>
-    </App>
-  );
+  return <AppShell page={Home} />;
 }

pages/users/[userId].js

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