Routing

components/AppShell.jsx

@@ -60,6 +60,8 @@ const CurrentPage = ({ page }) => {
 };
 
 const AppShell = ({ page }) => {
+  const [location, setLocation] = useLocation();
+
   const showMenu = Store.useState(selectors.getMenuOpen);
   const showNotifications = Store.useState(selectors.getNotificationsOpen);
   const currentPage = Store.useState(selectors.getCurrentPage);
@@ -86,6 +88,8 @@ const AppShell = ({ page }) => {
     }
   );
 
+  console.log('Got location', location, '/settings' === location);
+
   // This is an example app layout. We've got a hidden menu that will be toggled
   //
   return (
@@ -109,21 +113,21 @@ const AppShell = ({ page }) => {
               selectedIcon={home}
               title="Home"
               href="/"
-              selected={'home' === currentPage?.id}
+              selected={'/home' === location}
             />
             <Tab
               icon={listOutline}
               selectedIcon={list}
               title="Lists"
               href="/lists"
-              selected={'lists' === currentPage?.id}
+              selected={'/lists' === location}
             />
             <Tab
               icon={cogOutline}
               selectedIcon={cog}
-              title="settings"
+              title="Settings"
               href="/settings"
-              selected={'settings' === currentPage?.id}
+              selected={'/settings' === location}
             />
           </TabBar>
           <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />

components/MenuContent.jsx

@@ -1,3 +1,4 @@
+import useLocation from '../hooks/useLocation';
 import Store from '../store';
 import * as actions from '../store/actions';
 import * as selectors from '../store/selectors';
@@ -14,9 +15,11 @@ const MenuItem = ({ children, ...props }) => (
 );
 
 const MenuContent = () => {
+  const [location, setLocation] = useLocation();
+
   const go = page => {
-    actions.setPage(page);
     actions.setMenuOpen(false);
+    setLocation(page);
   };
 
   return (
@@ -25,9 +28,9 @@ const MenuContent = () => {
         <h2 className="text-xl select-none dark:text-gray-500">Menu</h2>
       </div>
       <ul>
-        <MenuItem onClick={() => {}}>Home</MenuItem>
-        <MenuItem onClick={() => {}}>Lists</MenuItem>
-        <MenuItem onClick={() => {}}>Settings</MenuItem>
+        <MenuItem onClick={() => go('/')}>Home</MenuItem>
+        <MenuItem onClick={() => go('/lists')}>Lists</MenuItem>
+        <MenuItem onClick={() => go('/settings')}>Settings</MenuItem>
       </ul>
     </>
   );

components/pages/ListDetail.jsx

@@ -42,6 +42,10 @@ const ListItemEntry = ({ list, item }) => (
 const ListDetail = ({ selected }) => {
   const selectedList = Store.useState(selectors.getSelectedList);
 
+  usePage({
+    title: selectedList.title,
+  });
+
   return (
     <Content visible={selected} className="p-4">
       <List className="h-full w-full">
@@ -49,8 +53,10 @@ const ListDetail = ({ selected }) => {
           <ListItems
             list={selectedList}
             onClose={() => {
+              /*
               actions.setSelectedList(null);
               actions.setPageById('lists');
+              */
             }}
           />
         )}

components/pages/Lists.jsx

@@ -1,3 +1,4 @@
+import usePage from '../../hooks/usePage';
 import Store from '../../store';
 import * as actions from '../../store/actions';
 import * as selectors from '../../store/selectors';
@@ -31,17 +32,23 @@ const AllLists = ({ onSelect }) => {
 };
 
 const Lists = ({ selected }) => {
+  usePage({
+    title: 'Lists',
+  });
+
   return (
     <Content visible={true} className="p-4 dark:bg-black">
       <List className="h-full w-full">
-        {selected && (
+        {/*selected && (*/}
         <AllLists
           onSelect={list => {
+            /*
             actions.setSelectedList(list);
             actions.setPageById('list-detail');
+            */
           }}
         />
-        )}
+        {/*)}*/}
       </List>
     </Content>
   );

components/pages/Settings.jsx

@@ -6,8 +6,13 @@ 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 enableNotifications = Store.useState();
   const settings = Store.useState(selectors.getSettings);
 

components/ui/Tab.jsx

@@ -1,8 +1,16 @@
 import classNames from 'classnames';
 import Icon from './Icon';
 import { Link } from 'wouter';
+import { useEffect, useState } from 'react';
 
-const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => (
+const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => {
+  console.log('TAB', href, selected);
+  const [update, setUpdate] = useState(false);
+  useEffect(() => {
+    setUpdate(true);
+  }, [selected]);
+
+  return (
     <Link href={href}>
       <a
         onClick={onClick}
@@ -23,5 +31,6 @@ const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => (
       </a>
     </Link>
   );
+};
 
 export default Tab;

store/actions.js

@@ -1,17 +1,5 @@
 import Store from '.';
 
-export const setPageById = id => {
-  Store.update((s, o) => {
-    s.currentPage = o.pages.find(p => p.id === id);
-  });
-};
-
-export const setPage = page => {
-  Store.update((s, o) => {
-    s.currentPage = page;
-  });
-};
-
 export const setMenuOpen = open => {
   Store.update(s => {
     s.menuOpen = open;