Settings and notifications

components/pages/Settings.jsx

@@ -1,9 +1,32 @@
+import Store from '../../store';
+import * as selectors from '../../store/selectors';
+import * as actions from '../../store/actions';
+
 import Content from '../ui/Content';
+import List from '../ui/List';
+import ListItem from '../ui/ListItem';
+import Toggle from '../ui/Toggle';
 
 const Settings = ({ selected }) => {
+  const enableNotifications = Store.useState();
+  const settings = Store.useState(selectors.getSettings);
+
   return (
     <Content visible={selected} className="p-4">
-      <h2>Settings</h2>
+      <List>
+        <ListItem className="flex">
+          <span className="text-md flex-1">Enable Notifications</span>
+          <Toggle
+            checked={settings.enableNotifications}
+            onChange={e =>
+              actions.setSettings({
+                ...settings,
+                enableNotifications: e.target.checked,
+              })
+            }
+          />
+        </ListItem>
+      </List>
     </Content>
   );
 };

components/ui/PageStack.jsx

@@ -1,8 +1,36 @@
 import classNames from 'classnames';
 
+import { Transition } from 'react-transition-group';
+
+const duration = 500;
+
+const defaultStyle = {
+  transition: `opacity ${duration}ms ease-in-out`,
+  opacity: 0,
+};
+
+const transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+};
+
 const PageStack = ({ children, className, ...props }) => (
   <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
-    {children}
+    <Transition in={true} duration={duration}>
+      {state => (
+        <div
+          className="w-full h-full"
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </Transition>
   </div>
 );
 

components/ui/Toggle.jsx

@@ -1,3 +1,5 @@
-const Toggle = () => <div></div>;
+import ReactToggle from 'react-toggle';
+
+const Toggle = props => <ReactToggle {...props} icons={false} />;
 
 export default Toggle;

package-lock.json

@@ -1582,6 +1582,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
+      "dev": true
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -1737,6 +1743,16 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.0.1.tgz",
@@ -4411,6 +4427,27 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-toggle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.1.tgz",
+      "integrity": "sha512-+wXlMcSpg8SmnIXauMaZiKpR+r2wp2gMUteroejp2UTSqGTVvZLN+m9EhMzFARBKEw7KpQOwzCyfzeHeAndQGw==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.5"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-use-gesture": {
       "version": "9.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.0.0-beta.11.tgz",

package.json

@@ -26,6 +26,8 @@
     "prettier": "^2.2.1",
     "pullstate": "^1.20.5",
     "react-spring": "^8.0.27",
+    "react-toggle": "^4.1.1",
+    "react-transition-group": "^4.4.1",
     "react-use-gesture": "^9.0.0-beta.11",
     "reselect": "^4.0.0"
   }

pages/index.js

@@ -15,16 +15,21 @@ import TabBar from '../components/ui/TabBar';
 import { SafeAreaProvider } from '../components/ui/SafeArea';
 import Notifications from '../components/Notifications';
 import MenuContent from '../components/MenuContent';
+import { useEffect, useState } from 'react';
 
 const CurrentPage = ({ page }) => {
   const pages = Store.useState(selectors.getPages);
+  const currentPage = Store.useState(selectors.getCurrentPage);
+
+  const Page = currentPage.component;
 
   return (
     <PageStack>
-      {pages.map(p => {
+      {/*pages.map(p => {
         const Page = p.component;
         return <Page selected={page.id === p.id} key={p.id} />;
-      })}
+      })*/}
+      <Page selected={true} />
     </PageStack>
   );
 };

store/actions.js

@@ -24,6 +24,12 @@ export const setNotificationsOpen = open => {
   });
 };
 
+export const setSettings = settings => {
+  Store.update(s => {
+    s.settings = settings;
+  });
+};
+
 // App-specific actions
 
 export const setDone = (list, item, done) => {

store/selectors.js

@@ -13,3 +13,4 @@ export const getPages = createSelector(getState, state => state.pages);
 export const getHomeItems = createSelector(getState, state => state.homeItems);
 export const getLists = createSelector(getState, state => state.lists);
 export const getSelectedList = createSelector(getState, state => state.selectedList);
+export const getSettings = createSelector(getState, state => state.settings);

styles/global.css

@@ -52,3 +52,147 @@ body {
   height: 100%;
   width: 100%;
 }
+
+/** Styles for React Toggle */
+
+.react-toggle {
+  touch-action: pan-x;
+
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4d4d4d;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: #19ab27;
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #128d15;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4d4d4d;
+  border-radius: 50%;
+  background-color: #fafafa;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transition: all 0.25s ease;
+  -moz-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: #19ab27;
+}
+
+.react-toggle--focus .react-toggle-thumb {
+  -webkit-box-shadow: 0px 0px 3px 2px #0099e0;
+  -moz-box-shadow: 0px 0px 3px 2px #0099e0;
+  box-shadow: 0px 0px 2px 3px #0099e0;
+}
+
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+  -webkit-box-shadow: 0px 0px 5px 5px #0099e0;
+  -moz-box-shadow: 0px 0px 5px 5px #0099e0;
+  box-shadow: 0px 0px 5px 5px #0099e0;
+}