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,11 +33,20 @@ const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
   </Card>
 );
 
-const Home = () => (
+const Feed = () => {
+  const homeItems = Store.useState(getHomeItems);
+  const [showNotifications, setShowNotifications] = useState(false);
+
+  return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Feed</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={() => setShowNotifications(true)}>
+              <IonIcon icon={notificationsOutline} />
+            </IonButton>
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
       <IonContent className="ion-padding" fullscreen>
@@ -33,11 +55,13 @@ const Home = () => (
             <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>
   );

mock/index.js

@@ -1,5 +1,47 @@
+export const images = [
+  'https://images.unsplash.com/photo-1610235554447-41505d7962f8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=882&q=80',
+  'https://images.unsplash.com/photo-1610212594948-370947a3ba0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80',
+  'https://images.unsplash.com/photo-1610155180433-9994da6a323b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
+];
+
+export const homeItems = [
+  {
+    title: 'Exploring Maui',
+    type: 'Blog',
+    text: 'We just got back from a trip to Maui, and we had a great time...',
+    author: 'Max Lynch',
+    authorAvatar: '/img/max.jpg',
+    image: images[0],
+  },
+  {
+    title: 'Arctic Adventures',
+    type: 'Blog',
+    text:
+      'Last month we took a trek to the Arctic Circle. The isolation was just what we needed after...',
+    author: 'Max Lynch',
+    authorAvatar: '/img/max.jpg',
+    image: images[1],
+  },
+  {
+    title: 'Frolicking in the Faroe Islands',
+    type: 'Blog',
+    text:
+      'The Faroe Islands are a North Atlantic archipelago located 320 kilometres (200 mi) north-northwest of Scotland...',
+    author: 'Max Lynch',
+    authorAvatar: '/img/max.jpg',
+    image: images[2],
+  },
+];
+
+export const notifications = [
+  { title: 'New friend request' },
+  { title: 'Please change your password' },
+  { title: 'You have a new message' },
+  { title: 'Welcome to the app!' },
+];
+
 // Some fake lists
-const lists = [
+export const lists = [
   {
     name: 'Groceries',
     id: 'groceries',
@@ -18,5 +60,3 @@ const lists = [
   { name: 'Work', id: 'work', items: [{ name: 'TPS Report' }, { name: 'Set up email' }] },
   { name: 'Reminders', id: 'reminders' },
 ];
-
-export { lists };

store/index.js

@@ -1,41 +1,6 @@
 import { Store as PullStateStore } from 'pullstate';
 
-import { lists } from '../mock';
-
-export const images = [
-  'https://images.unsplash.com/photo-1610235554447-41505d7962f8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=882&q=80',
-  'https://images.unsplash.com/photo-1610212594948-370947a3ba0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80',
-  'https://images.unsplash.com/photo-1610155180433-9994da6a323b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-];
-
-export const homeItems = [
-  {
-    title: 'Exploring Maui',
-    type: 'Blog',
-    text: 'We just got back from a trip to Maui, and we had a great time...',
-    author: 'Max Lynch',
-    authorAvatar: '/img/max.jpg',
-    image: images[0],
-  },
-  {
-    title: 'Arctic Adventures',
-    type: 'Blog',
-    text:
-      'Last month we took a trek to the Arctic Circle. The isolation was just what we needed after...',
-    author: 'Max Lynch',
-    authorAvatar: '/img/max.jpg',
-    image: images[1],
-  },
-  {
-    title: 'Frolicking in the Faroe Islands',
-    type: 'Blog',
-    text:
-      'The Faroe Islands are a North Atlantic archipelago located 320 kilometres (200 mi) north-northwest of Scotland...',
-    author: 'Max Lynch',
-    authorAvatar: '/img/max.jpg',
-    image: images[2],
-  },
-];
+import { lists, homeItems, notifications } from '../mock';
 
 const Store = new PullStateStore({
   safeAreaTop: 0,
@@ -45,6 +10,7 @@ const Store = new PullStateStore({
   currentPage: null,
   homeItems,
   lists,
+  notifications,
   settings: {
     enableNotifications: true,
   },