Notifications modal and settings

components/Notifications.jsx

@@ -1,45 +0,0 @@
-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 dark:bg-black">
-    <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 dark:text-gray-500">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 dark:bg-black">
-    <div className="p-4 rounded-tl-md rounded-tr-md dark:bg-black">
-      <h2 className="text-xl dark:text-gray-600">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,7 +1,20 @@
 import Card from '../ui/Card';
 
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
-import { homeItems } from '../../store';
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonContent,
+} from '@ionic/react';
+import Notifications from './Notifications';
+import { useState } from 'react';
+import { notificationsOutline } from 'ionicons/icons';
+import { getHomeItems } from '../../store/selectors';
+import Store from '../../store';
 
 const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
   <Card className="my-4 mx-auto">
@@ -20,24 +33,35 @@ const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
   </Card>
 );
 
-const Home = () => (
-  <IonPage>
-    <IonHeader>
-      <IonToolbar>
-        <IonTitle>Feed</IonTitle>
-      </IonToolbar>
-    </IonHeader>
-    <IonContent className="ion-padding" fullscreen>
-      <IonHeader collapse="condense">
+const Feed = () => {
+  const homeItems = Store.useState(getHomeItems);
+  const [showNotifications, setShowNotifications] = useState(false);
+
+  return (
+    <IonPage>
+      <IonHeader>
         <IonToolbar>
-          <IonTitle size="large">Feed</IonTitle>
+          <IonTitle>Feed</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={() => setShowNotifications(true)}>
+              <IonIcon icon={notificationsOutline} />
+            </IonButton>
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
-      {homeItems.map((i, index) => (
-        <FeedCard {...i} key={index} />
-      ))}
-    </IonContent>
-  </IonPage>
-);
+      <IonContent className="ion-padding" fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Feed</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <Notifications open={showNotifications} onDidDismiss={() => setShowNotifications(false)} />
+        {homeItems.map((i, index) => (
+          <FeedCard {...i} key={index} />
+        ))}
+      </IonContent>
+    </IonPage>
+  );
+};
 
-export default Home;
+export default Feed;

components/pages/Notifications.jsx

@@ -0,0 +1,31 @@
+import { IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList } from '@ionic/react';
+import VirtualScroll from '../ui/VirtualScroll';
+
+const Notifications = ({ open, onDidDismiss }) => {
+  return (
+    <IonModal isOpen={open} onDidDismiss={onDidDismiss}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Lists</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Notifications</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonList>
+          <VirtualScroll
+            totalCount={1000}
+            overscan={200}
+            style={{ height: '100%', width: '100%' }}
+            itemContent={index => <NotificationItem i={index} />}
+          />
+        </IonList>
+      </IonContent>
+    </IonModal>
+  );
+};
+
+export default Notifications;

components/pages/Settings.jsx

@@ -1,10 +1,20 @@
+import {
+  IonPage,
+  IonHeader,
+  IonItem,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonToggle,
+  IonLabel,
+} from '@ionic/react';
+
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
-
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList } from '@ionic/react';
+import { setSettings } from '../../store/actions';
 
 const Settings = () => {
-  const enableNotifications = Store.useState();
   const settings = Store.useState(selectors.getSettings);
 
   return (
@@ -15,7 +25,20 @@ const Settings = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <IonList></IonList>
+        <IonList>
+          <IonItem>
+            <IonLabel>Enable Notifications</IonLabel>
+            <IonToggle
+              checked={settings.enableNotifications}
+              onIonChange={e => {
+                setSettings({
+                  ...settings,
+                  enableNotifications: e.target.checked,
+                });
+              }}
+            />
+          </IonItem>
+        </IonList>
       </IonContent>
     </IonPage>
   );