Refactor state and make list detail a page

2020-12-24 15:56:08 -06:00
parent 0056d6fe81
commit 06c1a8f71d
12 changed files with 182 additions and 115 deletions
@@ -0,0 +1,60 @@
+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';
+import VirtualScroll from '../ui/VirtualScroll';
+
+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={() => {
+        actions.setDone(list, item, !item.done);
+      }}
+    />
+  </div>
+);
+
+const ListDetail = ({ selected }) => {
+  const selectedList = Store.useState(selectors.getSelectedList);
+
+  return (
+    <Content visible={selected} className="p-4">
+      <List className="h-full w-full">
+        {selected && (
+          <ListItems
+            list={selectedList}
+            onClose={() => {
+              actions.setSelectedList(null);
+              actions.setPageById('lists');
+            }}
+          />
+        )}
+      </List>
+    </Content>
+  );
+};
+
+export default ListDetail;