Notifications

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>