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