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,5 +1,29 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 
+// 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.
+//
+// See https://stackoverflow.com/a/4585031
+if (typeof history !== 'undefined') {
+  for (const type of [eventPushState, eventReplaceState]) {
+    const original = history[type];
+
+    history[type] = function () {
+      const result = original.apply(this, arguments);
+      const event = new Event(type);
+      event.arguments = arguments;
+
+      dispatchEvent(event);
+      return result;
+    };
+  }
+} else {
+  console.log('No history API');
+}
+// });
+
 /**
  * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
  */
@@ -20,30 +44,6 @@ const useLocation = ({ base = '' } = {}) => {
   const [path, update] = useState(() => getCurrentPathname(base)); // @see https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
   const prevPath = useRef(path);
 
-  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.
-    //
-    // See https://stackoverflow.com/a/4585031
-    if (typeof history !== 'undefined') {
-      for (const type of [eventPushState, eventReplaceState]) {
-        const original = history[type];
-
-        history[type] = function () {
-          const result = original.apply(this, arguments);
-          const event = new Event(type);
-          event.arguments = arguments;
-
-          dispatchEvent(event);
-          return result;
-        };
-      }
-    } else {
-      console.log('No history API');
-    }
-  });
-
   useEffect(() => {
     // this function checks if the location has been changed since the
     // last render and updates the state only when needed.

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);