Notifications

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 = () => {

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>

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

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);