From c60f5b3dccab2fcb22729596dd8b2613bb129b54 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Mon, 11 Jan 2021 18:56:03 -0600
Subject: [PATCH] Notifications

---
 components/pages/Lists.jsx         | 17 +++++++++---
 components/pages/Notifications.jsx | 42 +++++++++++++++++++++++-------
 mock/index.js                      |  8 +++---
 store/selectors.js                 |  6 +----
 4 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/components/pages/Lists.jsx b/components/pages/Lists.jsx
index f2f29ff..e061d69 100644
--- a/components/pages/Lists.jsx
+++ b/components/pages/Lists.jsx
@@ -3,21 +3,20 @@ import Link from '../../components/Link';
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
-import VirtualScroll from '../ui/VirtualScroll';
+// import VirtualScroll from '../ui/VirtualScroll';
 import {
   IonPage,
   IonHeader,
   IonToolbar,
   IonTitle,
   IonContent,
-  IonList,
   IonItem,
   IonLabel,
 } from '@ionic/react';
 import { useEffect, useState } from 'react';
 
 const ListEntry = ({ list, ...props }) => (
-  <IonItem href={`/tabs/lists/${list.id}`}>
+  <IonItem href={`/tabs/lists/${list.id}`} className="list-entry">
     <IonLabel>{list.name}</IonLabel>
   </IonItem>
 );
@@ -25,14 +24,24 @@ const ListEntry = ({ list, ...props }) => (
 const AllLists = ({ onSelect }) => {
   const lists = Store.useState(selectors.getLists);
 
+  /*
   return (
     <VirtualScroll
       data={lists}
       totalCount={lists.length}
-      style={{ height: '100%', width: '100%' }}
+      style={{ height: '100%', width: '100%', minHeight: '1px' }}
       itemContent={(i, list) => <ListEntry list={list} />}
     />
   );
+  */
+
+  return (
+    <>
+      {lists.map(list => (
+        <ListEntry list={list} />
+      ))}
+    </>
+  );
 };
 
 const Lists = () => {
diff --git a/components/pages/Notifications.jsx b/components/pages/Notifications.jsx
index 78c2a46..6e49adb 100644
--- a/components/pages/Notifications.jsx
+++ b/components/pages/Notifications.jsx
@@ -1,12 +1,39 @@
-import { IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList } from '@ionic/react';
-import VirtualScroll from '../ui/VirtualScroll';
+import {
+  IonModal,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonButton,
+  IonIcon,
+  IonList,
+  IonItem,
+  IonNote,
+  IonLabel,
+} from '@ionic/react';
+import Store from '../../store';
+import { getNotifications } from '../../store/selectors';
+
+import { close } from 'ionicons/icons';
+
+const NotificationItem = ({ notification }) => (
+  <IonItem>
+    <IonLabel>{notification.title}</IonLabel>
+    <IonNote slot="end">{notification.when}</IonNote>
+    <IonButton slot="end" fill="clear" color="dark">
+      <IonIcon icon={close} />
+    </IonButton>
+  </IonItem>
+);
 
 const Notifications = ({ open, onDidDismiss }) => {
+  const notifications = Store.useState(getNotifications);
+
   return (
     <IonModal isOpen={open} onDidDismiss={onDidDismiss}>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Lists</IonTitle>
+          <IonTitle>Notifications</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
@@ -16,12 +43,9 @@ const Notifications = ({ open, onDidDismiss }) => {
           </IonToolbar>
         </IonHeader>
         <IonList>
-          <VirtualScroll
-            totalCount={1000}
-            overscan={200}
-            style={{ height: '100%', width: '100%' }}
-            itemContent={index => <NotificationItem i={index} />}
-          />
+          {notifications.map(notification => (
+            <NotificationItem notification={notification} />
+          ))}
         </IonList>
       </IonContent>
     </IonModal>
diff --git a/mock/index.js b/mock/index.js
index a3530a8..60611e2 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -34,10 +34,10 @@ export const homeItems = [
 ];
 
 export const notifications = [
-  { title: 'New friend request' },
-  { title: 'Please change your password' },
-  { title: 'You have a new message' },
-  { title: 'Welcome to the app!' },
+  { title: 'New friend request', when: '6 hr' },
+  { title: 'Please change your password', when: '1 day' },
+  { title: 'You have a new message', when: '2 weeks' },
+  { title: 'Welcome to the app!', when: '1 month' },
 ];
 
 // Some fake lists
diff --git a/store/selectors.js b/store/selectors.js
index ca77d16..fcb6c7f 100644
--- a/store/selectors.js
+++ b/store/selectors.js
@@ -2,11 +2,7 @@ import { createSelector } from 'reselect';
 
 const getState = state => state;
 
-export const getMenuOpen = createSelector(getState, state => state.menuOpen);
-export const getNotificationsOpen = createSelector(getState, state => state.notificationsOpen);
-export const getCurrentPage = createSelector(getState, state => state.currentPage);
-
-// App specific selectors
 export const getHomeItems = createSelector(getState, state => state.homeItems);
 export const getLists = createSelector(getState, state => state.lists);
+export const getNotifications = createSelector(getState, state => state.notifications);
 export const getSettings = createSelector(getState, state => state.settings);