140 lines
4.0 KiB
JavaScript
140 lines
4.0 KiB
JavaScript
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 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';
|
|
|
|
const CurrentPage = ({ page }) => {
|
|
const currentPage = Store.useState(selectors.getCurrentPage);
|
|
|
|
const [match, params] = useRoute('/lists');
|
|
console.log('Matches?', match);
|
|
// const Page = currentPage.component;
|
|
const Page = page;
|
|
|
|
const [local, setLocal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setLocal(true);
|
|
}, []);
|
|
|
|
console.log('Rendering current page', local);
|
|
|
|
return (
|
|
<PageStack>
|
|
{local ? (
|
|
<Switch>
|
|
<Route path="/" component={Home} />
|
|
<Route path="/lists" component={Lists} />
|
|
<Route path="/settings" component={Settings} />
|
|
</Switch>
|
|
) : (
|
|
<Page selected={true} />
|
|
)}
|
|
{/*pages.map(p => {
|
|
const Page = p.component;
|
|
return <Page selected={page.id === p.id} key={p.id} />;
|
|
})*/}
|
|
{/*<Page selected={true} />*/}
|
|
</PageStack>
|
|
);
|
|
};
|
|
|
|
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 (
|
|
<App
|
|
{...bind()}
|
|
style={{
|
|
touchAction: 'pan-x',
|
|
}}
|
|
>
|
|
<SafeAreaProvider>
|
|
<Router hook={useLocation}>
|
|
<Menu open={showMenu} onClose={closeMenu}>
|
|
<MenuContent />
|
|
</Menu>
|
|
<Nav page={currentPage} />
|
|
{/*<CurrentPage page={currentPage} />*/}
|
|
<CurrentPage page={page} />
|
|
<TabBar>
|
|
<Tab
|
|
icon={homeOutline}
|
|
selectedIcon={home}
|
|
title="Home"
|
|
href="/"
|
|
selected={'home' === currentPage?.id}
|
|
/>
|
|
<Tab
|
|
icon={listOutline}
|
|
selectedIcon={list}
|
|
title="Lists"
|
|
href="/lists"
|
|
selected={'lists' === currentPage?.id}
|
|
/>
|
|
<Tab
|
|
icon={cogOutline}
|
|
selectedIcon={cog}
|
|
title="settings"
|
|
href="/settings"
|
|
selected={'settings' === currentPage?.id}
|
|
/>
|
|
</TabBar>
|
|
<Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
|
|
<Modal open={showNotifications} onClose={closeNotifications}>
|
|
<Notifications />
|
|
</Modal>
|
|
</Router>
|
|
</SafeAreaProvider>
|
|
</App>
|
|
);
|
|
};
|
|
|
|
export default AppShell;
|