From 3fe67d30b3e63e64d2b81a1abba77b2016223d0b Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 30 Dec 2020 10:30:13 -0600 Subject: [PATCH 01/36] Safe area refactor and left/right --- components/ui/SafeArea.jsx | 29 +++++++++++++++++------------ styles/global.css | 2 ++ 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/components/ui/SafeArea.jsx b/components/ui/SafeArea.jsx index 9373002..efe53a0 100644 --- a/components/ui/SafeArea.jsx +++ b/components/ui/SafeArea.jsx @@ -11,8 +11,7 @@ export const SafeAreaContext = createContext({ top: 0, bottom: 0 }); // These values are useful for JS-driven interactions, such as a modal that // will drag in and out but needs to offset for the safe region. export const SafeAreaProvider = ({ children }) => { - const [safeAreaTop, setSafeAreaTop] = useState(0); - const [safeAreaBottom, setSafeAreaBottom] = useState(0); + const [safeArea, setSafeArea] = useState({ top: 0, right: 0, bottom: 0, left: 0 }); useEffect(() => { // I don't know why, but we can't get the value of this CSS variable @@ -21,18 +20,24 @@ export const SafeAreaProvider = ({ children }) => { const safeAreaTop = parseInt( window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top') ); - const safeAreaBottom = window - .getComputedStyle(document.documentElement) - .getPropertyValue('--safe-area-bottom'); + const safeAreaBottom = parseInt( + window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom') + ); + const safeAreaLeft = parseInt( + window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left') + ); + const safeAreaRight = parseInt( + window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-right') + ); - setSafeAreaTop(safeAreaTop); - setSafeAreaBottom(safeAreaBottom); + setSafeArea({ + top: safeAreaTop, + right: safeAreaRight, + bottom: safeAreaBottom, + left: safeAreaLeft, + }); }, 500); }, []); - return ( - - {children} - - ); + return {children}; }; diff --git a/styles/global.css b/styles/global.css index 592f028..b6a325c 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,6 +1,8 @@ :root { --safe-area-top: env(safe-area-inset-top); --safe-area-bottom: env(safe-area-inset-bottom, 0); + --safe-area-left: env(safe-area-inset-left, 0); + --safe-area-right: env(safe-area-inset-right, 0); } body { overflow: hidden; From 29ae24c6a632a897ff0f4bac0d0ea86bebe52d1b Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 30 Dec 2020 13:19:31 -0600 Subject: [PATCH 02/36] 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 ( + + + + + +