From 0b31a80d02abd038946b96a6dfb224e0d7cd4667 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 24 Dec 2020 17:24:38 -0600 Subject: [PATCH] Settings and notifications --- components/pages/Settings.jsx | 25 +++++- components/ui/PageStack.jsx | 30 ++++++- components/ui/Toggle.jsx | 4 +- package-lock.json | 37 +++++++++ package.json | 2 + pages/index.js | 9 ++- store/actions.js | 6 ++ store/selectors.js | 1 + styles/global.css | 144 ++++++++++++++++++++++++++++++++++ 9 files changed, 253 insertions(+), 5 deletions(-) diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx index 046a29c..47a2e4f 100644 --- a/components/pages/Settings.jsx +++ b/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 ( -

Settings

+ + + Enable Notifications + + actions.setSettings({ + ...settings, + enableNotifications: e.target.checked, + }) + } + /> + + ); }; diff --git a/components/ui/PageStack.jsx b/components/ui/PageStack.jsx index 82bd08f..5ec2a1d 100644 --- a/components/ui/PageStack.jsx +++ b/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 }) => (
- {children} + + {state => ( +
+ {children} +
+ )} +
); diff --git a/components/ui/Toggle.jsx b/components/ui/Toggle.jsx index 8729862..cef2b36 100644 --- a/components/ui/Toggle.jsx +++ b/components/ui/Toggle.jsx @@ -1,3 +1,5 @@ -const Toggle = () =>
; +import ReactToggle from 'react-toggle'; + +const Toggle = props => ; export default Toggle; diff --git a/package-lock.json b/package-lock.json index 4230734..0d62412 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b102c93..a27a96b 100644 --- a/package.json +++ b/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" } diff --git a/pages/index.js b/pages/index.js index 02df96b..ef09cd1 100644 --- a/pages/index.js +++ b/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 ( - {pages.map(p => { + {/*pages.map(p => { const Page = p.component; return ; - })} + })*/} + ); }; diff --git a/store/actions.js b/store/actions.js index 05f2f10..5aa67dc 100644 --- a/store/actions.js +++ b/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) => { diff --git a/store/selectors.js b/store/selectors.js index 1ef2bee..31a5b14 100644 --- a/store/selectors.js +++ b/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); diff --git a/styles/global.css b/styles/global.css index fbe6f15..592f028 100644 --- a/styles/global.css +++ b/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; +}