Refactor state and make list detail a page

components/pages/Lists.jsx

@@ -1,11 +1,9 @@
-import { useState } from 'react';
 import Store from '../../store';
-import { setDone } from '../../store/actions';
-import Card from '../ui/Card';
+import * as actions from '../../store/actions';
+import * as selectors from '../../store/selectors';
 
 import Content from '../ui/Content';
 import List from '../ui/List';
-import ListItem from '../ui/ListItem';
 import VirtualScroll from '../ui/VirtualScroll';
 
 const ListEntry = ({ list, ...props }) => (
@@ -15,7 +13,7 @@ const ListEntry = ({ list, ...props }) => (
 );
 
 const AllLists = ({ onSelect }) => {
-  const lists = Store.useState(s => s.lists);
+  const lists = Store.useState(selectors.getLists);
 
   return (
     <VirtualScroll
@@ -29,58 +27,15 @@ const AllLists = ({ onSelect }) => {
   );
 };
 
-const ListItems = ({ list, onClose }) => {
-  return (
-    <>
-      <div className="py-2">
-        <a href="#" onClick={onClose}>
-          All Lists
-        </a>
-      </div>
-      <VirtualScroll
-        data={list.items || []}
-        totalCount={(list.items || []).length}
-        style={{ height: '100%', width: '100%' }}
-        itemContent={(i, item) => <ListItemEntry list={list} item={item} />}
-      />
-    </>
-  );
-};
-
-const ListItemEntry = ({ list, item }) => (
-  <div className="p-4 border-solid border-b cursor-pointer">
-    <span className="text-md">{item.name}</span>
-    <input
-      type="checkbox"
-      checked={item.done}
-      onChange={() => {
-        setDone(list, item, !item.done);
-      }}
-    />
-  </div>
-);
-
-const Feed = ({ selected }) => {
-  const selectedList = Store.useState(s => s.selectedList);
-
+const Lists = ({ selected }) => {
   return (
     <Content visible={selected} className="p-4">
       <List className="h-full w-full">
-        {selected && selectedList ? (
-          <ListItems
-            list={selectedList}
-            onClose={() =>
-              Store.update(s => {
-                s.selectedList = null;
-              })
-            }
-          />
-        ) : (
+        {selected && (
           <AllLists
             onSelect={list => {
-              Store.update(s => {
-                s.selectedList = list;
-              });
+              actions.setSelectedList(list);
+              actions.setPageById('list-detail');
             }}
           />
         )}
@@ -89,4 +44,4 @@ const Feed = ({ selected }) => {
   );
 };
 
-export default Feed;
+export default Lists;