Routing for all

components/pages/Home.jsx

@@ -30,7 +30,7 @@ const Home = ({ selected }) => {
   const homeItems = Store.useState(selectors.getHomeItems);
 
   return (
-    <Content visible={true} className="p-4 dark:bg-black">
+    <Content className="p-4 dark:bg-black">
       {homeItems.map((i, index) => (
         <HomeCard {...i} key={index} />
       ))}

components/pages/ListDetail.jsx

@@ -1,3 +1,7 @@
+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';
@@ -6,13 +10,11 @@ import Content from '../ui/Content';
 import List from '../ui/List';
 import VirtualScroll from '../ui/VirtualScroll';
 
-const ListItems = ({ list, onClose }) => {
+const ListItems = ({ list }) => {
   return (
     <>
       <div className="py-2">
-        <a href="#" onClick={onClose}>
-          All Lists
-        </a>
+        <Link href="/lists">All Lists</Link>
       </div>
       <VirtualScroll
         data={list?.items || []}
@@ -39,27 +41,19 @@ const ListItemEntry = ({ list, item }) => (
   </div>
 );
 
-const ListDetail = ({ selected }) => {
+const ListDetail = ({ selected, list, listId, params }) => {
   const selectedList = Store.useState(selectors.getSelectedList);
 
+  const loadedList = list ? list : lists.find(l => l.id === params.listId);
+
   usePage({
-    title: selectedList.title,
+    title: loadedList.title,
   });
 
   return (
-    <Content visible={selected} className="p-4">
+    <Content className="p-4">
       <List className="h-full w-full">
-        {selected && (
-          <ListItems
-            list={selectedList}
-            onClose={() => {
-              /*
-              actions.setSelectedList(null);
-              actions.setPageById('lists');
-              */
-            }}
-          />
-        )}
+        <ListItems list={loadedList} />
       </List>
     </Content>
   );

components/pages/Lists.jsx

@@ -1,3 +1,5 @@
+import { Link } from 'wouter';
+
 import usePage from '../../hooks/usePage';
 import Store from '../../store';
 import * as actions from '../../store/actions';
@@ -8,12 +10,14 @@ import List from '../ui/List';
 import VirtualScroll from '../ui/VirtualScroll';
 
 const ListEntry = ({ list, ...props }) => (
-  <div
-    {...props}
-    className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200"
-  >
-    <span className="text-md">{list.name}</span>
-  </div>
+  <Link href={`/lists/${list.id}`}>
+    <a
+      {...props}
+      className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200 block"
+    >
+      <span className="text-md">{list.name}</span>
+    </a>
+  </Link>
 );
 
 const AllLists = ({ onSelect }) => {
@@ -24,9 +28,7 @@ const AllLists = ({ onSelect }) => {
       data={lists}
       totalCount={lists.length}
       style={{ height: '100%', width: '100%' }}
-      itemContent={(i, list) => (
-        <ListEntry list={list} onClick={() => onSelect(list)} onClose={() => onSelect(null)} />
-      )}
+      itemContent={(i, list) => <ListEntry list={list} />}
     />
   );
 };
@@ -37,18 +39,9 @@ const Lists = ({ selected }) => {
   });
 
   return (
-    <Content visible={true} className="p-4 dark:bg-black">
+    <Content className="p-4 dark:bg-black">
       <List className="h-full w-full">
-        {/*selected && (*/}
-        <AllLists
-          onSelect={list => {
-            /*
-            actions.setSelectedList(list);
-            actions.setPageById('list-detail');
-            */
-          }}
-        />
-        {/*)}*/}
+        <AllLists />
       </List>
     </Content>
   );

components/pages/Settings.jsx

@@ -17,7 +17,7 @@ const Settings = ({ selected }) => {
   const settings = Store.useState(selectors.getSettings);
 
   return (
-    <Content visible={true} className="p-4 dark:bg-black">
+    <Content className="p-4 dark:bg-black">
       <List>
         <ListItem className="flex">
           <span className="text-md flex-1 dark:text-gray-200">Enable Notifications</span>