Cleaning up list detail

components/pages/ListDetail.jsx

@@ -1,56 +1,65 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
 import Link from '../../components/Link';
 
-import usePage from '../../hooks/usePage';
 import Store from '../../store';
 import * as actions from '../../store/actions';
 import * as selectors from '../../store/selectors';
 
-import Content from '../ui/Content';
-import List from '../ui/List';
-
 const ListItems = ({ list }) => {
   return (
-    <>
-      <div className="py-2">
-        <Link href="/lists">All Lists</Link>
-      </div>
+    <IonList>
       {(list?.items || []).map(item => (
         <ListItemEntry list={list} item={item} />
       ))}
-    </>
+    </IonList>
   );
 };
 
 const ListItemEntry = ({ list, item }) => (
-  <div
-    className="p-4 border-solid border-b cursor-pointer flex select-none"
-    onClick={() => actions.setDone(list, item, !item.done)}
-  >
-    <span className="text-md flex-1">{item.name}</span>
-    <input
-      className="pointer-events-none select-none"
-      type="checkbox"
-      checked={item.done || false}
-      readOnly={true}
-    />
-  </div>
+  <IonItem onClick={() => actions.setDone(list, item, !item.done)}>
+    <IonLabel>{item.name}</IonLabel>
+    <IonCheckbox checked={item.done || false} slot="end" />
+  </IonItem>
 );
 
-const ListDetail = ({ selected, listId, params }) => {
+const ListDetail = ({ match }) => {
   const lists = Store.useState(selectors.getLists);
-  const actualListId = listId ? listId : params?.listId || null;
-  const loadedList = lists.find(l => l.id === actualListId);
-
-  usePage({
-    title: loadedList.name,
-  });
+  const {
+    params: { listId },
+  } = match;
+  const loadedList = lists.find(l => l.id === listId);
 
   return (
-    <Content className="p-4">
-      <List className="h-full w-full">
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/tabs/lists" />
+          </IonButtons>
+          <IonTitle>{loadedList.name}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">{loadedList.name}</IonTitle>
+          </IonToolbar>
+        </IonHeader>
         <ListItems list={loadedList} />
-      </List>
-    </Content>
+      </IonContent>
+    </IonPage>
   );
 };
 

components/pages/Tabs.jsx

@@ -5,6 +5,7 @@ import { cog, flash, list } from 'ionicons/icons';
 
 import Home from './Feed';
 import Lists from './Lists';
+import ListDetail from './ListDetail';
 import Settings from './Settings';
 
 const Tabs = () => {
@@ -14,6 +15,7 @@ const Tabs = () => {
         <IonRouterOutlet>
           <Route path="/tabs/feed" component={Home} exact={true} />
           <Route path="/tabs/lists" component={Lists} exact={true} />
+          <Route path="/tabs/lists/:listId" component={ListDetail} exact={true} />
           <Route path="/tabs/settings" component={Settings} exact={true} />
           <Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
         </IonRouterOutlet>