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">