Some cleanup

components/AppShell.jsx

@@ -52,7 +52,7 @@ const CurrentPage = ({ page, pageProps = {} }) => {
 };
 
 const AppShell = ({ page, pageProps }) => {
-  const [location, setLocation] = useLocation();
+  const [location] = useLocation();
 
   const showMenu = Store.useState(selectors.getMenuOpen);
   const showNotifications = Store.useState(selectors.getNotificationsOpen);
@@ -80,7 +80,7 @@ const AppShell = ({ page, pageProps }) => {
     }
   );
 
-  console.log('Got location', location, '/settings' === location);
+  console.log('Got location', location);
 
   // This is an example app layout. We've got a hidden menu that will be toggled
   //
@@ -97,7 +97,6 @@ const AppShell = ({ page, pageProps }) => {
             <MenuContent />
           </Menu>
           <Nav page={currentPage} />
-          {/*<CurrentPage page={currentPage} />*/}
           <CurrentPage page={page} pageProps={pageProps} />
           <TabBar>
             <Tab
@@ -105,7 +104,7 @@ const AppShell = ({ page, pageProps }) => {
               selectedIcon={home}
               title="Home"
               href="/"
-              selected={'/home' === location}
+              selected={'/' === location}
             />
             <Tab
               icon={listOutline}

components/pages/ListDetail.jsx

@@ -1,7 +1,6 @@
 import { Link } from 'wouter';
 
 import usePage from '../../hooks/usePage';
-import { lists } from '../../mock';
 import Store from '../../store';
 import * as actions from '../../store/actions';
 import * as selectors from '../../store/selectors';
@@ -41,14 +40,17 @@ const ListItemEntry = ({ list, item }) => (
   </div>
 );
 
-const ListDetail = ({ selected, list, listId, params }) => {
-  const selectedList = Store.useState(selectors.getSelectedList);
+const ListDetail = ({ selected, listId, params }) => {
+  const lists = Store.useState(selectors.getLists);
+  const actualListId = listId ? listId : params?.listId || null;
+  const loadedList = lists.find(l => l.id === actualListId);
 
-  const loadedList = list ? list : lists.find(l => l.id === params.listId);
-
-  usePage({
-    title: loadedList.title,
-  });
+  usePage(
+    {
+      title: loadedList.name,
+    },
+    [loadedList]
+  );
 
   return (
     <Content className="p-4">

hooks/useLocation.js

@@ -1,26 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 
-/**
- * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
- */
-const eventPopstate = 'popstate';
-const eventPushState = 'pushState';
-const eventReplaceState = 'replaceState';
-export const events = [eventPopstate, eventPushState, eventReplaceState];
-
-const useLocation = ({ base = '' } = {}) => {
-  const getCurrentPathname = useCallback(base => {
-    const path = typeof location === 'undefined' ? '/' : location.pathname;
-
-    return !path.toLowerCase().indexOf(base.toLowerCase())
-      ? path.slice(base.length) || '/'
-      : '~' + path;
-  }, []);
-
-  const [path, update] = useState(() => getCurrentPathname(base)); // @see https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-  const prevPath = useRef(path);
-
-  useEffect(() => {
+// useEffect(() => {
 // While History API does have `popstate` event, the only
 // proper way to listen to changes via `push/replaceState`
 // is to monkey-patch these methods.
@@ -42,7 +22,27 @@ const useLocation = ({ base = '' } = {}) => {
 } else {
   console.log('No history API');
 }
-  });
+// });
+
+/**
+ * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
+ */
+const eventPopstate = 'popstate';
+const eventPushState = 'pushState';
+const eventReplaceState = 'replaceState';
+export const events = [eventPopstate, eventPushState, eventReplaceState];
+
+const useLocation = ({ base = '' } = {}) => {
+  const getCurrentPathname = useCallback(base => {
+    const path = typeof location === 'undefined' ? '/' : location.pathname;
+
+    return !path.toLowerCase().indexOf(base.toLowerCase())
+      ? path.slice(base.length) || '/'
+      : '~' + path;
+  }, []);
+
+  const [path, update] = useState(() => getCurrentPathname(base)); // @see https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const prevPath = useRef(path);
 
   useEffect(() => {
     // this function checks if the location has been changed since the

hooks/usePage.js

@@ -1,12 +1,13 @@
 import { useEffect } from 'react';
 import Store from '../store';
 
-const usePage = fields => {
+const usePage = (fields, deps) => {
   useEffect(() => {
+    console.log('Deps updating', fields, deps);
     Store.update(s => {
       s.currentPage = fields;
     });
-  }, [fields]);
+  }, [fields, deps]);
 };
 
 export default usePage;

pages/lists/[listId].js

@@ -1,9 +1,8 @@
 import AppShell from '../../components/AppShell';
 import ListDetailPage from '../../components/pages/ListDetail';
-import { lists } from '../../mock';
 
-export default function ListDetail({ list }) {
-  return <AppShell page={ListDetailPage} pageProps={{ list }} />;
+export default function ListDetail({ listId }) {
+  return <AppShell page={ListDetailPage} pageProps={{ listId }} />;
 }
 
 export const getServerSideProps = context => {
@@ -11,12 +10,9 @@ export const getServerSideProps = context => {
     params: { listId },
   } = context;
 
-  const list = lists.find(l => l.id === listId);
-  console.log('Loaded list', list);
-
   return {
     props: {
-      list,
+      listId,
     },
   };
 };

store/actions.js

@@ -23,6 +23,7 @@ export const setSettings = settings => {
 export const setDone = (list, item, done) => {
   Store.update((s, o) => {
     const listIndex = o.lists.findIndex(l => l === list);
+    console.log('Setting done', list, item, done, o.lists, listIndex);
     const itemIndex = o.lists[listIndex].items.findIndex(i => i === item);
     s.lists[listIndex].items[itemIndex].done = done;
     if (list === o.selectedList) {

store/index.js

@@ -49,7 +49,6 @@ const Store = new PullStateStore({
   currentPage: null,
   homeItems,
   lists,
-  selectedList: null,
   settings: {
     enableNotifications: true,
   },

store/selectors.js

@@ -9,5 +9,4 @@ export const getCurrentPage = createSelector(getState, state => state.currentPag
 // App specific selectors
 export const getHomeItems = createSelector(getState, state => state.homeItems);
 export const getLists = createSelector(getState, state => state.lists);
-export const getSelectedList = createSelector(getState, state => state.selectedList);
 export const getSettings = createSelector(getState, state => state.settings);