Moving to a todo app

components/MenuContent.jsx

@@ -0,0 +1,41 @@
+import Store from '../store';
+
+const MenuItem = ({ children, ...props }) => (
+  <li {...props}>
+    <a
+      href="#"
+      className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
+    >
+      {children}
+    </a>
+  </li>
+);
+
+const MenuContent = () => {
+  const pages = Store.useState(s => s.pages);
+
+  const go = page => {
+    Store.update(s => {
+      console.log('Going to', page);
+      s.currentPage = page;
+      s.showMenu = false;
+    });
+  };
+
+  return (
+    <>
+      <div className="p-4">
+        <h2 className="text-xl select-none">Menu</h2>
+      </div>
+      <ul>
+        {pages.map(p => (
+          <MenuItem key={p.id} onClick={() => go(p)}>
+            {p.title}
+          </MenuItem>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default MenuContent;

components/Notifications.jsx

@@ -0,0 +1,45 @@
+import { checkmarkOutline, closeOutline } from 'ionicons/icons';
+import Button from './ui/Button';
+import Icon from './ui/Icon';
+import List from './ui/List';
+import ListItem from './ui/ListItem';
+import VirtualScroll from './ui/VirtualScroll';
+
+const NotificationItem = ({ i }) => (
+  <ListItem className="flex align-center">
+    <img
+      src={`/img/faces/image-${(i % 66) + 1}.png`}
+      alt="Notification"
+      className="block rounded-full w-8 h-8 mr-4"
+    />
+    <div className="flex-1">
+      <span className="p-0 m-0 align-middle">You have a new friend request</span>
+    </div>
+    <div>
+      <Button className="background-transparent px-1 py-1 text-green-400 text-lg">
+        <Icon icon={checkmarkOutline} />
+      </Button>
+      <Button className="background-transparent px-1 py-1 text-red-400 text-lg">
+        <Icon icon={closeOutline} />
+      </Button>
+    </div>
+  </ListItem>
+);
+
+const Notifications = () => (
+  <div className="w-full h-full flex flex-col">
+    <div className="p-4">
+      <h2 className="text-xl">Notifications</h2>
+    </div>
+    <List className="flex-1">
+      <VirtualScroll
+        totalCount={1000}
+        overscan={200}
+        style={{ height: '100%', width: '100%' }}
+        itemContent={index => <NotificationItem i={index} />}
+      />
+    </List>
+  </div>
+);
+
+export default Notifications;

components/pages/Feed.jsx

@@ -1,24 +0,0 @@
-import { Virtuoso } from 'react-virtuoso';
-
-import Content from '../ui/Content';
-import List from '../ui/List';
-import ListItem from '../ui/ListItem';
-
-const Feed = ({ selected }) => {
-  return (
-    <Content visible={selected} className="p-4">
-      <List className="h-full w-full">
-        {selected && (
-          <Virtuoso
-            totalCount={1000}
-            overscan={200}
-            style={{ height: '100%', width: '100%' }}
-            itemContent={index => <ListItem>Item {index}</ListItem>}
-          />
-        )}
-      </List>
-    </Content>
-  );
-};
-
-export default Feed;

components/pages/Home.jsx

@@ -1,14 +1,12 @@
 import { homeItems } from '../../data';
+import Store from '../../store';
 import Card from '../ui/Card';
 import Content from '../ui/Content';
 
-const PostCard = ({ title, type, text, author, image }) => (
-  <Card>
+const HomeCard = ({ title, type, text, author, image }) => (
+  <Card className="my-4">
     <div>
-      <img
-        className="rounded-t-xl h-32 w-full object-cover"
-        src={image || 'https://ionic-docs-demo.herokuapp.com/assets/card-top-img.png'}
-      />
+      <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
     </div>
     <div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
       <h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
@@ -19,10 +17,12 @@ const PostCard = ({ title, type, text, author, image }) => (
 );
 
 const Home = ({ selected }) => {
+  const homeItems = Store.useState(s => s.homeItems);
+
   return (
-    <Content visible={selected}>
+    <Content visible={selected} className="p-4">
       {homeItems.map((i, index) => (
-        <PostCard {...i} key={index} />
+        <HomeCard {...i} key={index} />
       ))}
     </Content>
   );

components/pages/Lists.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import Store from '../../store';
+import { setDone } from '../../store/actions';
+import Card from '../ui/Card';
+
+import Content from '../ui/Content';
+import List from '../ui/List';
+import ListItem from '../ui/ListItem';
+import VirtualScroll from '../ui/VirtualScroll';
+
+const ListEntry = ({ list, ...props }) => (
+  <div {...props} className="p-4 border-solid border-b cursor-pointer">
+    <span className="text-md">{list.name}</span>
+  </div>
+);
+
+const AllLists = ({ onSelect }) => {
+  const lists = Store.useState(s => s.lists);
+
+  return (
+    <VirtualScroll
+      data={lists}
+      totalCount={lists.length}
+      style={{ height: '100%', width: '100%' }}
+      itemContent={(i, list) => (
+        <ListEntry list={list} onClick={() => onSelect(list)} onClose={() => onSelect(null)} />
+      )}
+    />
+  );
+};
+
+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);
+
+  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;
+              })
+            }
+          />
+        ) : (
+          <AllLists
+            onSelect={list => {
+              Store.update(s => {
+                s.selectedList = list;
+              });
+            }}
+          />
+        )}
+      </List>
+    </Content>
+  );
+};
+
+export default Feed;

components/ui/Card.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 const Card = ({ children, className, ...props }) => (
-  <div {...props} className={classNames('m-auto px-4 py-4 max-w-xl', className)}>
+  <div {...props} className={classNames('max-w-xl', className)}>
     <div className="bg-white shadow-md rounded-b-xl">{children}</div>
   </div>
 );

components/ui/PageStack.jsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+
+const PageStack = ({ children, className, ...props }) => (
+  <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
+    {children}
+  </div>
+);
+
+export default PageStack;

components/ui/TabBar.jsx

@@ -1,12 +1,13 @@
 const TabBar = ({ children }) => (
   <nav
     id="tab-bar"
-    className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50"
+    className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50 z-10"
     style={{
-      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`
-    }}>
+      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`,
+    }}
+  >
     {children}
   </nav>
-)
+);
 
-export default TabBar;
+export default TabBar;

components/ui/Toggle.jsx

@@ -0,0 +1,3 @@
+const Toggle = () => <div></div>;
+
+export default Toggle;

components/ui/VirtualScroll.jsx

@@ -0,0 +1,5 @@
+import { Virtuoso } from 'react-virtuoso';
+
+const VirtualScroll = props => <Virtuoso {...props} />;
+
+export default VirtualScroll;