From e115a5a7ce029bce49de86b306f223288bdc5fca Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Wed, 30 Dec 2020 16:27:38 -0600
Subject: [PATCH] Routing

---
 components/AppShell.jsx         | 12 +++++---
 components/MenuContent.jsx      | 11 ++++---
 components/pages/ListDetail.jsx |  6 ++++
 components/pages/Lists.jsx      | 23 +++++++++------
 components/pages/Settings.jsx   |  5 ++++
 components/ui/Tab.jsx           | 51 +++++++++++++++++++--------------
 store/actions.js                | 12 --------
 7 files changed, 71 insertions(+), 49 deletions(-)

diff --git a/components/AppShell.jsx b/components/AppShell.jsx
index ce0347f..2c34939 100644
--- a/components/AppShell.jsx
+++ b/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} />
diff --git a/components/MenuContent.jsx b/components/MenuContent.jsx
index 53559a0..8514844 100644
--- a/components/MenuContent.jsx
+++ b/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>
     </>
   );
diff --git a/components/pages/ListDetail.jsx b/components/pages/ListDetail.jsx
index 02b3aca..c7ba18e 100644
--- a/components/pages/ListDetail.jsx
+++ b/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');
+              */
             }}
           />
         )}
diff --git a/components/pages/Lists.jsx b/components/pages/Lists.jsx
index 465d61c..d87e042 100644
--- a/components/pages/Lists.jsx
+++ b/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 && (
-          <AllLists
-            onSelect={list => {
-              actions.setSelectedList(list);
-              actions.setPageById('list-detail');
-            }}
-          />
-        )}
+        {/*selected && (*/}
+        <AllLists
+          onSelect={list => {
+            /*
+            actions.setSelectedList(list);
+            actions.setPageById('list-detail');
+            */
+          }}
+        />
+        {/*)}*/}
       </List>
     </Content>
   );
diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx
index 3e3643f..7877e33 100644
--- a/components/pages/Settings.jsx
+++ b/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);
 
diff --git a/components/ui/Tab.jsx b/components/ui/Tab.jsx
index 5775478..9b3ec60 100644
--- a/components/ui/Tab.jsx
+++ b/components/ui/Tab.jsx
@@ -1,27 +1,36 @@
 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 }) => (
-  <Link href={href}>
-    <a
-      onClick={onClick}
-      href="#"
-      className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
-        'text-gray-500 dark:text-white': !selected,
-        'text-gray-800 dark:text-gray-600': selected,
-      })}
-    >
-      {icon && (
-        <Icon
-          icon={selected ? selectedIcon : icon}
-          className="cursor-pointer"
-          style={{ fontSize: '18px' }}
-        />
-      )}
-      <label className="block cursor-pointer">{title}</label>
-    </a>
-  </Link>
-);
+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}
+        href="#"
+        className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
+          'text-gray-500 dark:text-white': !selected,
+          'text-gray-800 dark:text-gray-600': selected,
+        })}
+      >
+        {icon && (
+          <Icon
+            icon={selected ? selectedIcon : icon}
+            className="cursor-pointer"
+            style={{ fontSize: '18px' }}
+          />
+        )}
+        <label className="block cursor-pointer">{title}</label>
+      </a>
+    </Link>
+  );
+};
 
 export default Tab;
diff --git a/store/actions.js b/store/actions.js
index 5aa67dc..9ba28fd 100644
--- a/store/actions.js
+++ b/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;