Routing for all

components/AppShell.jsx

@@ -22,13 +22,11 @@ import Home from './pages/Home';
 import Lists from './pages/Lists';
 import Settings from './pages/Settings';
 import useLocation from '../hooks/useLocation';
+import ListDetail from './pages/ListDetail';
 
-const CurrentPage = ({ page }) => {
+const CurrentPage = ({ page, pageProps = {} }) => {
   const currentPage = Store.useState(selectors.getCurrentPage);
 
-  const [match, params] = useRoute('/lists');
-  console.log('Matches?', match);
-  // const Page = currentPage.component;
   const Page = page;
 
   const [local, setLocal] = useState(false);
@@ -37,18 +35,17 @@ const CurrentPage = ({ page }) => {
     setLocal(true);
   }, []);
 
-  console.log('Rendering current page', local);
-
   return (
     <PageStack>
       {local ? (
         <Switch>
           <Route path="/" component={Home} />
           <Route path="/lists" component={Lists} />
+          <Route path="/lists/:listId" component={ListDetail} />
           <Route path="/settings" component={Settings} />
         </Switch>
       ) : (
-        <Page selected={true} />
+        <Page selected={true} {...pageProps} />
       )}
       {/*pages.map(p => {
           const Page = p.component;
@@ -59,7 +56,7 @@ const CurrentPage = ({ page }) => {
   );
 };
 
-const AppShell = ({ page }) => {
+const AppShell = ({ page, pageProps }) => {
   const [location, setLocation] = useLocation();
 
   const showMenu = Store.useState(selectors.getMenuOpen);
@@ -106,7 +103,7 @@ const AppShell = ({ page }) => {
           </Menu>
           <Nav page={currentPage} />
           {/*<CurrentPage page={currentPage} />*/}
-          <CurrentPage page={page} />
+          <CurrentPage page={page} pageProps={pageProps} />
           <TabBar>
             <Tab
               icon={homeOutline}
@@ -120,7 +117,7 @@ const AppShell = ({ page }) => {
               selectedIcon={list}
               title="Lists"
               href="/lists"
-              selected={'/lists' === location}
+              selected={location.indexOf('/lists') === 0}
             />
             <Tab
               icon={cogOutline}

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>

components/ui/Content.jsx

@@ -1,12 +1,9 @@
 import classNames from 'classnames';
 
-const Content = ({ className, visible, children, ...props }) => (
+const Content = ({ className, children, ...props }) => (
   <div
     {...props}
-    className={classNames(`h-full w-full overflow-auto py-2 absolute top-0`, className, {
-      visible,
-      invisible: !visible,
-    })}
+    className={classNames(`h-full w-full overflow-auto py-2 absolute top-0`, className)}
   >
     {children}
   </div>

mock/index.js

@@ -0,0 +1,22 @@
+// Some fake lists
+const lists = [
+  {
+    name: 'Groceries',
+    id: 'groceries',
+    items: [{ name: 'Apples' }, { name: 'Bananas' }, { name: 'Milk' }, { name: 'Ice Cream' }],
+  },
+  {
+    name: 'Hardware Store',
+    id: 'hardware',
+    items: [
+      { name: 'Circular Saw' },
+      { name: 'Tack Cloth' },
+      { name: 'Drywall' },
+      { name: 'Router' },
+    ],
+  },
+  { name: 'Work', id: 'work', items: [{ name: 'TPS Report' }, { name: 'Set up email' }] },
+  { name: 'Reminders', id: 'reminders' },
+];
+
+export { lists };

pages/lists/[listId].js

@@ -0,0 +1,22 @@
+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 const getServerSideProps = context => {
+  const {
+    params: { listId },
+  } = context;
+
+  const list = lists.find(l => l.id === listId);
+  console.log('Loaded list', list);
+
+  return {
+    props: {
+      list,
+    },
+  };
+};

store/index.js

@@ -1,5 +1,7 @@
 import { Store as PullStateStore } from 'pullstate';
 
+import { lists } from '../mock';
+
 import { list, listOutline, cog, cogOutline, home, homeOutline } from 'ionicons/icons';
 
 import Home from '../components/pages/Home';
@@ -39,27 +41,6 @@ export const homeItems = [
   },
 ];
 
-// Some fake lists
-const lists = [
-  {
-    name: 'Groceries',
-    id: 'groceries',
-    items: [{ name: 'Apples' }, { name: 'Bananas' }, { name: 'Milk' }, { name: 'Ice Cream' }],
-  },
-  {
-    name: 'Hardware Store',
-    id: 'hardware',
-    items: [
-      { name: 'Circular Saw' },
-      { name: 'Tack Cloth' },
-      { name: 'Drywall' },
-      { name: 'Router' },
-    ],
-  },
-  { name: 'Work', id: 'work', items: [{ name: 'TPS Report' }, { name: 'Set up email' }] },
-  { name: 'Reminders', id: 'reminders' },
-];
-
 const Store = new PullStateStore({
   safeAreaTop: 0,
   safeAreaBottom: 0,