From 29ae24c6a632a897ff0f4bac0d0ea86bebe52d1b Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 30 Dec 2020 13:19:31 -0600 Subject: [PATCH] Working on refactoring to support router use case --- components/AppShell.jsx | 128 +++++++++++++++++++++++++++++++++++++ components/MenuContent.jsx | 14 +--- components/pages/Home.jsx | 11 +++- components/ui/Nav.jsx | 2 +- hooks/usePage.js | 12 ++++ package-lock.json | 6 ++ package.json | 3 +- pages/index.js | 97 +--------------------------- pages/users/[userId].js | 6 ++ store/index.js | 35 +--------- store/selectors.js | 3 - 11 files changed, 172 insertions(+), 145 deletions(-) create mode 100644 components/AppShell.jsx create mode 100644 hooks/usePage.js create mode 100644 pages/users/[userId].js diff --git a/components/AppShell.jsx b/components/AppShell.jsx new file mode 100644 index 0000000..0de06ba --- /dev/null +++ b/components/AppShell.jsx @@ -0,0 +1,128 @@ +import { useDrag } from 'react-use-gesture'; +import { Route, Switch } from 'wouter'; + +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'; +import Home from './pages/Home'; +import { cog, cogOutline, home, homeOutline, list, listOutline } from 'ionicons/icons'; + +const CurrentPage = ({ page }) => { + const currentPage = Store.useState(selectors.getCurrentPage); + + // const Page = currentPage.component; + const Page = page; + + const [local, setLocal] = useState(false); + + useEffect(() => { + setLocal(true); + }, []); + + return ( + + {local ? ( + + + + ) : ( + + )} + {/*pages.map(p => { + const Page = p.component; + return ; + })*/} + {/**/} + + ); +}; + +const AppShell = ({ page }) => { + 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', + } + ); + + // This is an example app layout. We've got a hidden menu that will be toggled + // + return ( + + + + + +