Notifications modal and settings

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;