├── .gitignore ├── .idea ├── .gitignore ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml ├── modules.xml ├── todo-domain-model.iml └── vcs.xml ├── README.md ├── app.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── app │ └── store.js ├── components │ ├── NameInput │ │ ├── index.css │ │ └── index.js │ └── Scrim │ │ ├── index.css │ │ └── index.js ├── constants │ └── api.js ├── features │ ├── items │ │ ├── components │ │ │ ├── ItemAdder │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ ├── ItemLabelAdder │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ ├── ItemLabelManager │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ ├── ListItem │ │ │ │ ├── components │ │ │ │ │ └── Checkbox │ │ │ │ │ │ ├── index.css │ │ │ │ │ │ └── index.js │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ ├── ListItemUpdater │ │ │ │ └── index.js │ │ │ └── ListItems │ │ │ │ └── index.js │ │ ├── hooks │ │ │ ├── useItems.js │ │ │ └── useListItems.js │ │ └── itemsSlice.js │ ├── labels │ │ ├── components │ │ │ ├── ItemLabels │ │ │ │ └── index.js │ │ │ ├── LabelPicker │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ └── LabelPill │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ ├── hooks │ │ │ ├── useItemLabels.js │ │ │ └── useLabels.js │ │ └── labelsSlice.js │ └── lists │ │ ├── components │ │ ├── ListAdder │ │ │ ├── index.css │ │ │ └── index.js │ │ ├── ListDeleter │ │ │ ├── index.css │ │ │ └── index.js │ │ ├── ListSection │ │ │ ├── index.css │ │ │ └── index.js │ │ └── ListUpdater │ │ │ └── index.js │ │ ├── hooks │ │ └── useLists.js │ │ └── listsSlice.js ├── hooks │ ├── useApi.js │ └── useLockout.js ├── index.css ├── index.js ├── logo.svg ├── models │ ├── Item.js │ ├── Label.js │ └── List.js ├── serviceWorker.js ├── setupTests.js └── util │ ├── assignKeyAs.js │ ├── processError.js │ ├── track.js │ └── uuid.js └── static.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /workspace.xml 3 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/todo-domain-model.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template. 2 | 3 | ## Summary 4 | 5 | This app was created to demonstrate methods for making an application's domain model a core structure in its architecture. The domain model is all of the nouns in a project and their relationships to each other. By defining each model as a JavaScript Class, and naming features and components consistently based on the model that they interact with, we can build front-end applications that are easier to understand and maintain. 6 | 7 | A presentation on these concepts was given at the [Downtown ReactJS Meetup](https://www.meetup.com/ReactJS-ATX) in Austin on September 29th, 2020. 8 | 9 | ## Demo 10 | 11 | This app deploys to [https://todo-domain-model.herokuapp.com](https://todo-domain-model.herokuapp.com). 12 | 13 | ## Available Scripts 14 | 15 | In the project directory, you can run: 16 | 17 | ### `npm start` 18 | 19 | Runs the app in the development mode.
20 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 21 | 22 | The page will reload if you make edits.
23 | You will also see any lint errors in the console. 24 | 25 | ### `npm test` 26 | 27 | Launches the test runner in the interactive watch mode.
28 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 29 | 30 | ### `npm run build` 31 | 32 | Builds the app for production to the `build` folder.
33 | It correctly bundles React in production mode and optimizes the build for the best performance. 34 | 35 | The build is minified and the filenames include the hashes.
36 | Your app is ready to be deployed! 37 | 38 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 39 | 40 | ### `npm run eject` 41 | 42 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 43 | 44 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 45 | 46 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 47 | 48 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 49 | 50 | ## Learn More 51 | 52 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 53 | 54 | To learn React, check out the [React documentation](https://reactjs.org/). 55 | 56 | ### Code Splitting 57 | 58 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 59 | 60 | ### Analyzing the Bundle Size 61 | 62 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 63 | 64 | ### Making a Progressive Web App 65 | 66 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 67 | 68 | ### Advanced Configuration 69 | 70 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 71 | 72 | ### Deployment 73 | 74 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 75 | 76 | ### `npm run build` fails to minify 77 | 78 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 79 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "buildpacks": [ 3 | { 4 | "url": "mars/create-react-app" 5 | } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-domain-model", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.4.0", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.5.0", 9 | "@testing-library/user-event": "^7.2.1", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-redux": "^7.2.1", 13 | "react-scripts": "3.4.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | }, 36 | "devDependencies": { 37 | "@axe-core/react": "^4.2.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aidangarza/todo-domain-model/38083bcf9840b125844d515aec5213905e51098a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React Redux App 28 | 29 | 35 | 36 | 37 | 38 |
39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aidangarza/todo-domain-model/38083bcf9840b125844d515aec5213905e51098a/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aidangarza/todo-domain-model/38083bcf9840b125844d515aec5213905e51098a/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | display: inline-block; 4 | min-width: 100%; 5 | } 6 | 7 | .App-inner { 8 | background-color: #282c34; 9 | min-height: 94vh; 10 | display: inline-flex; 11 | min-width: calc(100% - 6vh); 12 | font-size: calc(10px + 2vmin); 13 | color: white; 14 | padding: 3vh; 15 | } 16 | 17 | .App-inner > * + * { 18 | margin-left: 1vw; 19 | } 20 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import ListUpdater from "./features/lists/components/ListUpdater"; 4 | import ListAdder from "./features/lists/components/ListAdder"; 5 | import useLists from "./features/lists/hooks/useLists"; 6 | 7 | function App() { 8 | const [{ data: lists }] = useLists(); 9 | 10 | return ( 11 |
12 |
13 | {Object.values(lists || {}).map(list => ( 14 | 15 | ))} 16 | 17 |
18 |
19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | test('runs', () => { 4 | expect(true).toBe(true); 5 | }); 6 | -------------------------------------------------------------------------------- /src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import listsReducer from '../features/lists/listsSlice'; 3 | import itemsReducer from '../features/items/itemsSlice'; 4 | import labelsReducer from '../features/labels/labelsSlice'; 5 | 6 | export default configureStore({ 7 | reducer: { 8 | lists: listsReducer, 9 | items: itemsReducer, 10 | labels: labelsReducer 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/NameInput/index.css: -------------------------------------------------------------------------------- 1 | .Name-input { 2 | width: 100%; 3 | font-family: inherit; 4 | font-size: inherit; 5 | font-weight: inherit; 6 | letter-spacing: inherit; 7 | color: rgba(255, 255, 255, 0.9); 8 | padding: 0; 9 | margin: 0; 10 | background: rgba(255, 255, 255, 0.1); 11 | border: none; 12 | text-align: inherit; 13 | } 14 | 15 | .Name-input:focus { 16 | outline: none; 17 | border: none; 18 | } -------------------------------------------------------------------------------- /src/components/NameInput/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './index.css' 3 | 4 | export default function NameInput(props) { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Scrim/index.css: -------------------------------------------------------------------------------- 1 | .Scrim { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | z-index: 1; 8 | background-color: rgba(255, 255, 255, 0.25); 9 | } -------------------------------------------------------------------------------- /src/components/Scrim/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './index.css'; 4 | 5 | export default function Scrim({ onClick = () => {} }) { 6 | return
; 7 | } 8 | 9 | Scrim.propTypes = { 10 | onClick: PropTypes.func 11 | } 12 | -------------------------------------------------------------------------------- /src/constants/api.js: -------------------------------------------------------------------------------- 1 | export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 2 | 'https://todo-domain-model.firebaseio.com'; 3 | -------------------------------------------------------------------------------- /src/features/items/components/ItemAdder/index.css: -------------------------------------------------------------------------------- 1 | .ItemAdder { 2 | flex: 0 0 auto; 3 | border: 1px solid white; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | font-size: 3.6vw; 8 | cursor: pointer; 9 | } 10 | 11 | .ItemAdder > span { 12 | position: relative; 13 | top: -0.09em; 14 | } -------------------------------------------------------------------------------- /src/features/items/components/ItemAdder/index.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { add } from "../../itemsSlice"; 4 | import {useDispatch} from "react-redux"; 5 | import './index.css'; 6 | import useApi from "../../../../hooks/useApi"; 7 | import Item from "../../../../models/Item"; 8 | import ListItem from "../ListItem"; 9 | import List from "../../../../models/List"; 10 | 11 | export default function ItemAdder({ list }) { 12 | const dispatch = useDispatch(); 13 | 14 | const [item, setItem] = useState(new Item()); 15 | 16 | const [isAdding, setIsAdding] = useState(false); 17 | 18 | const [{ complete, data }, createList, resetRequest] = useApi(Item.api.create); 19 | 20 | useEffect(() => { 21 | if (complete) { 22 | // Firebase does not return the whole data object on 23 | // a successful post; so, we have to combine the local 24 | // name with the "name" (ID!) from the request data. 25 | dispatch(add({ ...item, id: data.name })); 26 | setIsAdding(false); 27 | setItem(new Item()); 28 | resetRequest(); 29 | } 30 | }, [complete, item, data, dispatch, resetRequest]); 31 | 32 | const handleSave = _savedItem => { 33 | const savedItem = { ..._savedItem, listId: list.id }; 34 | 35 | setItem(savedItem); 36 | createList(savedItem); 37 | }; 38 | 39 | return isAdding ? ( 40 | setIsAdding(false)} 43 | onSave={handleSave} 44 | adding 45 | /> 46 | ) : ( 47 |
setIsAdding(true)}> 48 | + 49 |
50 | ); 51 | } 52 | 53 | ItemAdder.propTypes = { 54 | list: PropTypes.instanceOf(List) 55 | }; 56 | -------------------------------------------------------------------------------- /src/features/items/components/ItemLabelAdder/index.css: -------------------------------------------------------------------------------- 1 | .ItemLabelAdder { 2 | position: relative; 3 | } 4 | 5 | .ItemLabelAdder > a { 6 | color: inherit; 7 | text-decoration: none; 8 | } 9 | 10 | .ItemLabelAdder-button { 11 | cursor: pointer; 12 | display: inline-block; 13 | border-radius: 12px; 14 | padding: 0 1em; 15 | background-color: rgba(255, 255, 255, 0.2); 16 | } 17 | 18 | .ItemLabelAdder-picker { 19 | position: absolute; 20 | top: 110%; 21 | left: 50%; 22 | transform: translateX(-50%); 23 | background-color: white; 24 | padding: 1em; 25 | border-radius: 12px; 26 | z-index: 1; 27 | } -------------------------------------------------------------------------------- /src/features/items/components/ItemLabelAdder/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './index.css'; 4 | import LabelPicker from "../../../labels/components/LabelPicker"; 5 | import Scrim from "../../../../components/Scrim"; 6 | import Item from "../../../../models/Item"; 7 | 8 | export default function ItemLabelAdder({ item, onChange }) { 9 | const [open, setOpen] = useState(false); 10 | 11 | const addLabel = ({ name }) => { 12 | const labelNames = item.labelNames ? item.labelNames + ',' + name : name; 13 | onChange({ ...item, labelNames }); 14 | }; 15 | 16 | return ( 17 | 18 | setOpen(!open)}>{open ? <>× : '+'} 19 | {open && ( 20 | <> 21 | setOpen(false)} /> 22 |
23 | 24 |
25 | 26 | )} 27 | 28 | ); 29 | } 30 | 31 | ItemLabelAdder.propTypes = { 32 | item: PropTypes.instanceOf(Item) 33 | }; 34 | -------------------------------------------------------------------------------- /src/features/items/components/ItemLabelManager/index.css: -------------------------------------------------------------------------------- 1 | .ItemLabelManager > * { 2 | margin: 0.25em 0.5em 0.25em 0; 3 | } -------------------------------------------------------------------------------- /src/features/items/components/ItemLabelManager/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Item from "../../../../models/Item"; 4 | import ItemLabelAdder from "../../../items/components/ItemLabelAdder"; 5 | import ItemLabels from "../../../labels/components/ItemLabels"; 6 | import './index.css'; 7 | 8 | export default function ItemLabelManager({ item, onChange }) { 9 | const removeLabel = ({ name }) => { 10 | const labelNames = item.labelNames.split(',').filter(l => l !== name).join(','); 11 | 12 | onChange({ ...item, labelNames }); 13 | }; 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | ) 21 | } 22 | 23 | ItemLabelManager.propTypes = { 24 | item: PropTypes.instanceOf(Item).isRequired, 25 | onClick: PropTypes.func 26 | }; 27 | -------------------------------------------------------------------------------- /src/features/items/components/ListItem/components/Checkbox/index.css: -------------------------------------------------------------------------------- 1 | .Checkbox { 2 | cursor: pointer; 3 | } 4 | 5 | .Checkbox-input { 6 | visibility: hidden; 7 | position: absolute; 8 | z-index: -1; 9 | } 10 | 11 | .Checkbox-circle { 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | height: 2em; 16 | width: 2em; 17 | border-radius: 50%; 18 | border: 2px solid white; 19 | } 20 | 21 | .Checkbox-check { 22 | opacity: 0.1; 23 | } 24 | 25 | .Checkbox-input:checked + .Checkbox-circle > .Checkbox-check { 26 | opacity: 1; 27 | } -------------------------------------------------------------------------------- /src/features/items/components/ListItem/components/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './index.css'; 3 | 4 | export default function Checkbox(props) { 5 | const { id = Math.random() * 999999999 } = props; 6 | 7 | return ( 8 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/features/items/components/ListItem/index.css: -------------------------------------------------------------------------------- 1 | .ListItem { 2 | flex: 0 0 auto; 3 | display: flex; 4 | align-items: center; 5 | justify-content: space-between; 6 | border: 1px solid white; 7 | padding: 1vh 3vh; 8 | text-align: left; 9 | min-height: calc(2vh + 2em); 10 | } 11 | 12 | .ListItem-content { 13 | flex: 1 1 0px; 14 | display: flex; 15 | flex-wrap: wrap; 16 | align-items: center; 17 | justify-content: space-between; 18 | } 19 | 20 | .ListItem-content > * { 21 | margin-right: 1em; 22 | } 23 | 24 | .ListItem-title__complete { 25 | text-decoration: line-through; 26 | } -------------------------------------------------------------------------------- /src/features/items/components/ListItem/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Item from "../../../../models/Item"; 4 | import './index.css'; 5 | import Checkbox from "./components/Checkbox"; 6 | import NameInput from "../../../../components/NameInput"; 7 | import ItemLabelManager from "../ItemLabelManager"; 8 | 9 | export default function ListItem({ item, adding, onAbort = () => {}, onSave = () => {} }) { 10 | const [isEditing, setIsEditing] = useState(!item.name); 11 | const [name, setName] = useState(item.name); 12 | 13 | const handleCheck = ({ target }) => { 14 | onSave({...item, complete: target.checked}); 15 | }; 16 | 17 | const handleChange = ({ target }) => { 18 | setName(target.value); 19 | }; 20 | 21 | const handleDone = () => { 22 | if (name) { 23 | setIsEditing(false); 24 | 25 | if (name !== item.name) { 26 | onSave({ ...item, name }) 27 | } 28 | } else { 29 | onAbort(); 30 | } 31 | }; 32 | 33 | return ( 34 |
35 | 36 | 37 | {isEditing ? ( 38 | 39 | ) : ( 40 | { 42 | setIsEditing(!item.complete) 43 | }} 44 | className={item.complete ? 'ListItem-title__complete' : ''} 45 | > 46 | {item.name} 47 | 48 | )} 49 | 50 | {!adding && } 51 | 52 | {!adding && } 53 |
54 | ) 55 | } 56 | 57 | ListItem.propTypes = { 58 | item: PropTypes.instanceOf(Item), 59 | adding: PropTypes.bool, 60 | onAbort: PropTypes.func, 61 | onSave: PropTypes.func 62 | }; -------------------------------------------------------------------------------- /src/features/items/components/ListItemUpdater/index.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ListItem from "../ListItem"; 4 | import useApi from "../../../../hooks/useApi"; 5 | import Scrim from "../../../../components/Scrim"; 6 | import {useDispatch} from "react-redux"; 7 | import {update} from '../../itemsSlice'; 8 | import Item from "../../../../models/Item"; 9 | 10 | export default function ListItemUpdater({ item }) { 11 | const dispatch = useDispatch(); 12 | 13 | const [{ pending, complete, data }, updateItem, resetRequest] = useApi(Item.api.update); 14 | 15 | useEffect(() => { 16 | if (complete) { 17 | // Firebase does not return the whole data object on 18 | // a successful post; so, we have to combine the local 19 | // name with the "name" (ID!) from the request data. 20 | dispatch(update({ ...data, id: item.id })); 21 | resetRequest(); 22 | } 23 | }, [complete, item, data, dispatch, resetRequest]); 24 | 25 | const handleSave = savedItem => { 26 | updateItem(savedItem); 27 | }; 28 | 29 | return ( 30 | <> 31 | 35 | {pending && } 36 | 37 | ); 38 | } 39 | 40 | ListItemUpdater.propTypes = { 41 | list: PropTypes.instanceOf(Item) 42 | }; 43 | -------------------------------------------------------------------------------- /src/features/items/components/ListItems/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import List from "../../../../models/List"; 4 | import ListItemUpdater from "../ListItemUpdater"; 5 | import useListItems from "../../hooks/useListItems"; 6 | 7 | export default function ListItems({ list }) { 8 | const [{ data: items }] = useListItems({ listId: list.id }) 9 | 10 | return ( 11 | 12 | {items.map(item => ( 13 | 14 | ))} 15 | 16 | ) 17 | } 18 | 19 | ListItems.propTypes = { 20 | list: PropTypes.instanceOf(List) 21 | }; 22 | -------------------------------------------------------------------------------- /src/features/items/hooks/useItems.js: -------------------------------------------------------------------------------- 1 | import {useEffect} from 'react'; 2 | import {useDispatch, useSelector} from "react-redux"; 3 | import useApi from "../../../hooks/useApi"; 4 | import {set, selectItems} from "../itemsSlice"; 5 | import Item from "../../../models/Item"; 6 | import useLockout from "../../../hooks/useLockout"; 7 | 8 | export default function useItems({ listId, auto = true } = {}) { 9 | const [getCheckLockout, lockout] = useLockout('items'); 10 | // Dispatch from redux... 11 | const dispatch = useDispatch(); 12 | // Lists from redux... 13 | const items = useSelector(selectItems); 14 | // The useApi hook returns a response object with 15 | // the properties complete, pending, data, and error; 16 | // and a function that initiates the HTTP request when 17 | // it is called. 18 | const [responseState, getItems] = useApi(Item.api.list); 19 | // On mount, if the response in redux isn't complete, 20 | // request the lists 21 | useEffect(() => { 22 | if (auto && !getCheckLockout() && items.pristine) { 23 | lockout(); 24 | getItems(); 25 | } 26 | // eslint-disable-next-line 27 | }, []); 28 | // If the response isn't already complete in redux, update it 29 | // with each change to the local response state 30 | useEffect(() => { 31 | if ( 32 | !responseState.pristine && ( 33 | items.complete !== responseState.complete || 34 | items.pending !== responseState.pending 35 | ) 36 | ) { 37 | dispatch(set(responseState)); 38 | } 39 | }, [responseState, items, dispatch]); 40 | // Return the redux response state 41 | return [items, getItems]; 42 | } -------------------------------------------------------------------------------- /src/features/items/hooks/useListItems.js: -------------------------------------------------------------------------------- 1 | import {useMemo} from "react"; 2 | import useItems from "./useItems"; 3 | 4 | export default function useListItems({ listId, auto }) { 5 | const [items, getItems] = useItems({ listId, auto }); 6 | // Filter list items 7 | const listItems = useMemo(() => { 8 | return items.data ? Object.values(items.data).filter(item => item.listId === listId) : []; 9 | }, [items, listId]); 10 | // Replace items.data with the filtered listItems 11 | return [{ ...items, data: listItems }, getItems]; 12 | } -------------------------------------------------------------------------------- /src/features/items/itemsSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | import Item from "../../models/Item"; 3 | import assignKeyAs from "../../util/assignKeyAs"; 4 | import {initialResponse} from "../../hooks/useApi"; 5 | import track from "../../util/track"; 6 | 7 | export const itemsSlice = createSlice({ 8 | name: 'items', 9 | initialState: initialResponse, 10 | reducers: { 11 | set: (state, { payload: response }) => { 12 | return { 13 | ...response, 14 | data: response.data ? assignKeyAs(response.data, Item) : null 15 | } 16 | }, 17 | add: (state, { payload: item }) => { 18 | track('Added Item', { item }); 19 | 20 | state.data[item.id] = Item.create(item); 21 | }, 22 | remove: (state, { payload: item }) => { 23 | track('Removed Item', { item }); 24 | 25 | delete state.data[item.id]; 26 | }, 27 | update: (state, { payload: item }) => { 28 | const current = state.data[item.id]; 29 | 30 | if (item.name !== current.name) { 31 | track('Updated Item Name', { item }); 32 | } else if (item.labelNames !== current.labelNames) { 33 | track('Updated Item Labels', { item }); 34 | } else if (item.complete && !current.complete) { 35 | track('Completed Item', { item }); 36 | } else if (!item.complete && current.complete) { 37 | track('Undo Completed Item', { item }); 38 | } 39 | 40 | state.data[item.id] = Item.create(item); 41 | } 42 | } 43 | }); 44 | 45 | export const { set, add, update, remove } = itemsSlice.actions; 46 | 47 | export const selectItems = state => state.items; 48 | 49 | export default itemsSlice.reducer; 50 | -------------------------------------------------------------------------------- /src/features/labels/components/ItemLabels/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Item from "../../../../models/Item"; 4 | import LabelPill from "../LabelPill"; 5 | import useItemLabels from "../../hooks/useItemLabels"; 6 | 7 | export default function ItemLabels({ item, onClick }) { 8 | const [{ data: labels }] = useItemLabels({ labelNames: item.labelNames }); 9 | 10 | return ( 11 | <> 12 | {labels.map(label => 13 | 14 | )} 15 | 16 | ); 17 | } 18 | 19 | ItemLabels.propTypes = { 20 | item: PropTypes.instanceOf(Item).isRequired, 21 | onClick: PropTypes.func 22 | }; 23 | -------------------------------------------------------------------------------- /src/features/labels/components/LabelPicker/index.css: -------------------------------------------------------------------------------- 1 | .LabelPicker { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | } 6 | 7 | .LabelPicker-item { 8 | margin: 0.25em 0; 9 | } 10 | -------------------------------------------------------------------------------- /src/features/labels/components/LabelPicker/index.js: -------------------------------------------------------------------------------- 1 | import React, {useMemo} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import LabelPill from "../LabelPill"; 4 | import './index.css'; 5 | import Item from "../../../../models/Item"; 6 | import useLabels from "../../hooks/useLabels"; 7 | 8 | export default function LabelPicker({ item, onClick = () => {}}) { 9 | const [{ data: labels }] = useLabels(); 10 | 11 | const unusedLabels = useMemo(() => 12 | Object.values(labels || {}).filter(label => !item.labelNames.includes(label.name)), 13 | [labels, item] 14 | ); 15 | 16 | return ( 17 |
    18 | {unusedLabels.map(label => ( 19 |
  • 20 | 21 |
    • 22 | ))} 23 |
24 | ) 25 | } 26 | 27 | LabelPicker.propTypes = { 28 | item: PropTypes.instanceOf(Item).isRequired, 29 | onClick: PropTypes.func 30 | } 31 | -------------------------------------------------------------------------------- /src/features/labels/components/LabelPill/index.css: -------------------------------------------------------------------------------- 1 | .LabelPill { 2 | display: inline-block; 3 | border-radius: 12px; 4 | padding: 0 1em; 5 | border: 1px solid; 6 | cursor: pointer; 7 | } 8 | 9 | .LabelPill__inactive { 10 | background-color: transparent !important; 11 | } 12 | 13 | .LabelPill__active { 14 | color: white !important; 15 | } 16 | -------------------------------------------------------------------------------- /src/features/labels/components/LabelPill/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Label from "../../../../models/Label"; 4 | import './index.css'; 5 | 6 | export default function LabelPill ({ label, active = false, onClick = () => {} }) { 7 | return ( 8 | onClick(label)} 12 | > 13 | {label.name} 14 | 15 | ); 16 | } 17 | 18 | LabelPill.propTypes = { 19 | label: PropTypes.instanceOf(Label).isRequired, 20 | active: PropTypes.bool, 21 | onClick: PropTypes.func 22 | }; 23 | -------------------------------------------------------------------------------- /src/features/labels/hooks/useItemLabels.js: -------------------------------------------------------------------------------- 1 | import useLabels from "./useLabels"; 2 | import {useMemo} from "react"; 3 | 4 | export default function useItemLabels({ labelNames, auto = true }) { 5 | const [labels, getLabels] = useLabels({ auto }); 6 | 7 | const itemLabels = useMemo(() => { 8 | return labelNames && labels.data 9 | ? labelNames.split(',').map(name => labels.data[name]) 10 | : []; 11 | }, [labels.data, labelNames]); 12 | 13 | return [ 14 | { 15 | ...labels, 16 | data: itemLabels 17 | }, 18 | getLabels 19 | ] 20 | } -------------------------------------------------------------------------------- /src/features/labels/hooks/useLabels.js: -------------------------------------------------------------------------------- 1 | import {useEffect} from 'react'; 2 | import {useDispatch, useSelector} from "react-redux"; 3 | import useApi from "../../../hooks/useApi"; 4 | import {set, selectLabels} from "../labelsSlice"; 5 | import Label from "../../../models/Label"; 6 | import useLockout from "../../../hooks/useLockout"; 7 | 8 | export default function useLabels({ auto = true } = {}) { 9 | const [getCheckLockout, lockout] = useLockout('labels'); 10 | // Dispatch from redux... 11 | const dispatch = useDispatch(); 12 | // Lists from redux... 13 | const labels = useSelector(selectLabels); 14 | // The useApi hook returns a response object with 15 | // the properties complete, pending, data, and error; 16 | // and a function that initiates the HTTP request when 17 | // it is called. 18 | const [responseState, getLabels] = useApi(Label.api.list); 19 | // On mount, if the response in redux isn't complete, 20 | // request the labels 21 | useEffect(() => { 22 | if (auto && !getCheckLockout() && labels.pristine) { 23 | lockout(); 24 | getLabels(); 25 | } 26 | // eslint-disable-next-line 27 | }, []); 28 | // If the response isn't already complete in redux, update it 29 | // with each change to the local response state 30 | useEffect(() => { 31 | if ( 32 | !responseState.pristine && ( 33 | labels.complete !== responseState.complete || 34 | labels.pending !== responseState.pending 35 | ) 36 | ) { 37 | dispatch(set(responseState)); 38 | } 39 | }, [responseState, labels, dispatch]); 40 | // Return the redux response state 41 | return [labels, getLabels]; 42 | } -------------------------------------------------------------------------------- /src/features/labels/labelsSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | import assignKeyAs from "../../util/assignKeyAs"; 3 | import Label from "../../models/Label"; 4 | import {initialResponse} from "../../hooks/useApi"; 5 | 6 | export const labelsSlice = createSlice({ 7 | name: 'labels', 8 | initialState: initialResponse, 9 | reducers: { 10 | set: (state, { payload: response }) => { 11 | return { 12 | ...response, 13 | data: response.data ? assignKeyAs(response.data, Label, 'name') : null 14 | } 15 | } 16 | } 17 | }); 18 | 19 | export const { set } = labelsSlice.actions; 20 | 21 | export const selectLabels = state => state.labels; 22 | 23 | export default labelsSlice.reducer; 24 | -------------------------------------------------------------------------------- /src/features/lists/components/ListAdder/index.css: -------------------------------------------------------------------------------- 1 | .ListAdder { 2 | flex: 0 0 auto; 3 | width: 5vw; 4 | border: 1px solid white; 5 | border-radius: 12px; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | font-size: 4vw; 10 | cursor: pointer; 11 | } -------------------------------------------------------------------------------- /src/features/lists/components/ListAdder/index.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from 'react'; 2 | import './index.css'; 3 | import ListSection from "../ListSection"; 4 | import List from "../../../../models/List"; 5 | import useApi from "../../../../hooks/useApi"; 6 | import Scrim from "../../../../components/Scrim"; 7 | import {useDispatch} from "react-redux"; 8 | import {add} from '../../listsSlice'; 9 | 10 | export default function ListAdder() { 11 | const dispatch = useDispatch(); 12 | 13 | const [list, setList] = useState(new List()); 14 | 15 | const [isAdding, setIsAdding] = useState(false); 16 | 17 | const [{ pending, complete, data }, createList, resetRequest] = useApi(List.api.create); 18 | 19 | useEffect(() => { 20 | if (complete) { 21 | // Firebase does not return the whole data object on 22 | // a successful post; so, we have to combine the local 23 | // name with the "name" (ID!) from the request data. 24 | dispatch(add({ id: data.name, name: list.name })); 25 | setIsAdding(false); 26 | setList(new List()); 27 | resetRequest(); 28 | } 29 | }, [complete, list, data, dispatch, resetRequest]); 30 | 31 | const handleSave = savedList => { 32 | setList(savedList); 33 | createList(savedList); 34 | }; 35 | 36 | return ( 37 | <> 38 | {isAdding ? ( 39 | setIsAdding(false)} 42 | onSave={handleSave} 43 | /> 44 | ) : ( 45 |
setIsAdding(true)}>+
46 | )} 47 | {pending && } 48 | 49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /src/features/lists/components/ListDeleter/index.css: -------------------------------------------------------------------------------- 1 | .ListDeleter { 2 | position: absolute; 3 | top: 0; 4 | right: 0; 5 | font-size: 5vh; 6 | height: 5vh; 7 | width: 5vh; 8 | display: inline-flex; 9 | align-items: center; 10 | justify-content: center; 11 | background-color: transparent; 12 | border: none; 13 | color: white; 14 | border-radius: 12px; 15 | } -------------------------------------------------------------------------------- /src/features/lists/components/ListDeleter/index.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect} from "react"; 2 | import PropTypes from 'prop-types'; 3 | import List from "../../../../models/List"; 4 | import './index.css' 5 | import useApi from "../../../../hooks/useApi"; 6 | import Scrim from "../../../../components/Scrim"; 7 | import {useDispatch} from "react-redux"; 8 | import {remove} from '../../listsSlice'; 9 | 10 | export default function ListDeleter({ list }) { 11 | const dispatch = useDispatch(); 12 | 13 | const [{ complete, pending }, deleteList] = useApi(List.api.delete); 14 | 15 | useEffect(() => { 16 | if (complete) { 17 | dispatch(remove(list)); 18 | } 19 | }, [complete, list, dispatch]); 20 | 21 | return ( 22 | <> 23 | 24 | {pending && } 25 | 26 | ); 27 | } 28 | 29 | ListDeleter.propTypes = { 30 | list: PropTypes.instanceOf(List) 31 | }; 32 | -------------------------------------------------------------------------------- /src/features/lists/components/ListSection/index.css: -------------------------------------------------------------------------------- 1 | .ListSection { 2 | flex: 1 0 400px; 3 | min-width: 400px; 4 | display: flex; 5 | flex-direction: column; 6 | border: 1px solid white; 7 | border-radius: 12px; 8 | padding: 0 3vh 3vh; 9 | position: relative; 10 | } 11 | 12 | .ListSection > * { 13 | margin-bottom: 3vh; 14 | } 15 | 16 | .ListSection-name { 17 | margin: 3vh 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/features/lists/components/ListSection/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './index.css'; 4 | import List from "../../../../models/List"; 5 | import ItemAdder from "../../../items/components/ItemAdder"; 6 | import ListItems from "../../../items/components/ListItems"; 7 | import NameInput from "../../../../components/NameInput"; 8 | import ListDeleter from "../ListDeleter"; 9 | 10 | export default function ListSection({ list, onAbort = () => {}, onSave = () => {} }) { 11 | const [isEditing, setIsEditing] = useState(!list.name); 12 | const [name, setName] = useState(list.name); 13 | 14 | const handleChange = ({ target }) => { 15 | setName(target.value); 16 | }; 17 | 18 | const handleDone = () => { 19 | if (name) { 20 | setIsEditing(false); 21 | 22 | if (name !== list.name) { 23 | onSave({ ...list, name }); 24 | } 25 | } else { 26 | onAbort(); 27 | } 28 | }; 29 | 30 | return ( 31 |
32 | {/* Ignore this! Just want to make the demo data stay... */} 33 | {list.id !== 'grocerylist' && } 34 |

35 | {isEditing ? ( 36 | 37 | ) : ( 38 | setIsEditing(true)}>{list.name} 39 | )} 40 |

41 | 42 | 43 |
44 | ); 45 | } 46 | 47 | ListSection.propTypes = { 48 | list: PropTypes.instanceOf(List), 49 | onAbort: PropTypes.func, 50 | onSave: PropTypes.func 51 | }; 52 | -------------------------------------------------------------------------------- /src/features/lists/components/ListUpdater/index.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ListSection from "../ListSection"; 4 | import List from "../../../../models/List"; 5 | import useApi from "../../../../hooks/useApi"; 6 | import Scrim from "../../../../components/Scrim"; 7 | import {useDispatch} from "react-redux"; 8 | import {update} from '../../listsSlice'; 9 | 10 | export default function ListUpdater({ list }) { 11 | const dispatch = useDispatch(); 12 | 13 | const [{ pending, complete, data }, updateList, resetRequest] = useApi(List.api.update); 14 | 15 | useEffect(() => { 16 | if (complete) { 17 | // Firebase does not return the whole data object on 18 | // a successful post; so, we have to combine the local 19 | // name with the "name" (ID!) from the request data. 20 | dispatch(update({ ...data, id: list.id })); 21 | resetRequest(); 22 | } 23 | }, [complete, list, data, dispatch, resetRequest]); 24 | 25 | const handleSave = savedList => { 26 | updateList(savedList); 27 | }; 28 | 29 | return ( 30 | <> 31 | 35 | {pending && } 36 | 37 | ); 38 | } 39 | 40 | ListUpdater.propTypes = { 41 | list: PropTypes.instanceOf(List) 42 | }; 43 | -------------------------------------------------------------------------------- /src/features/lists/hooks/useLists.js: -------------------------------------------------------------------------------- 1 | import {useEffect} from 'react'; 2 | import {useDispatch, useSelector} from "react-redux"; 3 | import useApi from "../../../hooks/useApi"; 4 | import List from "../../../models/List"; 5 | import {set, selectLists} from "../listsSlice"; 6 | import useLockout from "../../../hooks/useLockout"; 7 | 8 | export default function useLists({ auto = true } = {}) { 9 | const [getCheckLockout, lockout] = useLockout('lists'); 10 | // Dispatch from redux... 11 | const dispatch = useDispatch(); 12 | // Lists from redux... 13 | const lists = useSelector(selectLists); 14 | // The useApi hook returns a response object with 15 | // the properties complete, pending, data, and error; 16 | // and a function that initiates the HTTP request when 17 | // it is called. 18 | const [responseState, getLists] = useApi(List.api.list); 19 | // On mount, if the response in redux isn't complete, 20 | // request the lists 21 | useEffect(() => { 22 | if (auto && !getCheckLockout() && lists.pristine) { 23 | lockout(); 24 | getLists(); 25 | } 26 | // eslint-disable-next-line 27 | }, []); 28 | // If the response isn't already complete in redux, update it 29 | // with each change to the local response state 30 | useEffect(() => { 31 | if ( 32 | !responseState.pristine && ( 33 | lists.complete !== responseState.complete || 34 | lists.pending !== responseState.pending 35 | ) 36 | ) { 37 | dispatch(set(responseState)); 38 | } 39 | }, [responseState, lists, dispatch]); 40 | // Return the redux response state 41 | return [lists, getLists]; 42 | } -------------------------------------------------------------------------------- /src/features/lists/listsSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | import List from "../../models/List"; 3 | import {initialResponse} from "../../hooks/useApi"; 4 | import assignKeyAs from "../../util/assignKeyAs"; 5 | import track from "../../util/track"; 6 | 7 | export const listsSlice = createSlice({ 8 | name: 'lists', 9 | initialState: initialResponse, 10 | reducers: { 11 | set: (state, { payload: response }) => { 12 | return { 13 | ...response, 14 | data: response.data ? assignKeyAs(response.data, List) : null 15 | } 16 | }, 17 | add: (state, { payload: list }) => { 18 | track('Added List', { list }); 19 | 20 | state.data[list.id] = List.create(list); 21 | }, 22 | remove: (state, { payload: list }) => { 23 | track('Removed List', { list }); 24 | 25 | delete state.data[list.id]; 26 | }, 27 | update: (state, { payload: list }) => { 28 | track('Updated List', { list }); 29 | 30 | state.data[list.id] = List.create(list); 31 | } 32 | } 33 | }); 34 | 35 | export const { set, add, remove, update } = listsSlice.actions; 36 | 37 | export const selectLists = state => state.lists; 38 | 39 | export default listsSlice.reducer; 40 | -------------------------------------------------------------------------------- /src/hooks/useApi.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import processError from "../util/processError"; 3 | 4 | export const initialResponse = { 5 | pristine: true, 6 | data: null, 7 | pending: false, 8 | complete: false, 9 | error: null 10 | }; 11 | 12 | export default function useApi(apiFn = i => i, options = {}) { 13 | // Initialize the response state 14 | const [response, setResponse] = useState( 15 | options.initialResponse || initialResponse 16 | ); 17 | // Initialize the request state 18 | const [request, setRequest] = useState(); 19 | 20 | // Watch for changes in the request to fire off 21 | // api requests 22 | useEffect(() => { 23 | const makeRequest = async _request => { 24 | if (!_request) return; 25 | 26 | setResponse({ 27 | pristine: false, 28 | data: null, 29 | pending: true, 30 | complete: false, 31 | error: null 32 | }); 33 | 34 | const { url, ...requestOptions } = _request; 35 | const rawResponse = await fetch(url, requestOptions); 36 | 37 | if (rawResponse.ok) { 38 | const data = await rawResponse.json(); 39 | 40 | setResponse({ 41 | pristine: false, 42 | data, 43 | pending: false, 44 | complete: true, 45 | error: null 46 | }); 47 | } else { 48 | const error = await processError(rawResponse); 49 | 50 | setResponse({ 51 | pristine: false, 52 | data: null, 53 | pending: false, 54 | complete: true, 55 | error 56 | }); 57 | } 58 | }; 59 | makeRequest(request); 60 | }, [request]); 61 | 62 | return [ 63 | response, 64 | (...args) => setRequest(apiFn(...args)), 65 | () => setResponse(initialResponse) 66 | ]; 67 | } 68 | -------------------------------------------------------------------------------- /src/hooks/useLockout.js: -------------------------------------------------------------------------------- 1 | // In the style of useRef, the locks variable has a 2 | // current property which is an object that will 3 | // store the current lockout state of different features 4 | const locks = { 5 | current: {} 6 | }; 7 | 8 | export default function useLockout(feature) { 9 | const lockout = (shouldLock = true) => { 10 | locks.current[feature] = shouldLock; 11 | }; 12 | 13 | return [ 14 | () => locks.current[feature], 15 | lockout 16 | ] 17 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | html, body, #root { 2 | display: inline-block; 3 | min-width: 100%; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 9 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 10 | sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | code { 16 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 17 | monospace; 18 | } 19 | 20 | .sr-only { 21 | position: absolute; 22 | left: -10000px; 23 | top: auto; 24 | width: 1px; 25 | height: 1px; 26 | overflow: hidden; 27 | } 28 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import store from './app/store'; 6 | import { Provider } from 'react-redux'; 7 | import * as serviceWorker from './serviceWorker'; 8 | 9 | if (process.env.NODE_ENV !== 'production') { 10 | const axe = require('@axe-core/react'); 11 | // run accessibility checks in development that print to the console, debounced 2000ms between component updates 12 | axe(React, ReactDOM, 2000); 13 | } 14 | 15 | ReactDOM.render( 16 | 17 | 18 | 19 | 20 | , 21 | document.getElementById('root') 22 | ); 23 | 24 | // If you want your app to work offline and load faster, you can change 25 | // unregister() to register() below. Note this comes with some pitfalls. 26 | // Learn more about service workers: https://bit.ly/CRA-PWA 27 | serviceWorker.unregister(); 28 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/models/Item.js: -------------------------------------------------------------------------------- 1 | import uuid from "../util/uuid"; 2 | import {API_BASE_URL} from "../constants/api"; 3 | 4 | export default class Item { 5 | constructor({ 6 | id = uuid('item'), 7 | name = '', 8 | labelNames = '', 9 | complete = false, 10 | listId 11 | } = {}) { 12 | this.id = id; 13 | this.name = name; 14 | this.labelNames = labelNames; 15 | this.complete = complete; 16 | this.listId = listId; 17 | } 18 | 19 | static create(data) { 20 | return Object.freeze(new Item(data)); 21 | } 22 | 23 | static api = { 24 | list() { 25 | return { 26 | url: `${API_BASE_URL}/items.json`, 27 | method: 'get' 28 | }; 29 | }, 30 | create({ name, complete, labelNames, listId }) { 31 | return { 32 | url: `${API_BASE_URL}/items.json`, 33 | method: 'post', 34 | body: JSON.stringify({ name, complete, labelNames, listId }) 35 | }; 36 | }, 37 | update({ id, name, complete, labelNames, listId }) { 38 | return { 39 | url: `${API_BASE_URL}/items/${id}.json`, 40 | method: 'put', 41 | body: JSON.stringify({ name, complete, labelNames, listId }) 42 | }; 43 | }, 44 | delete({ id }) { 45 | return { 46 | url: `${API_BASE_URL}/items/${id}.json`, 47 | method: 'delete' 48 | }; 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /src/models/Label.js: -------------------------------------------------------------------------------- 1 | import {API_BASE_URL} from "../constants/api"; 2 | 3 | export default class Label { 4 | constructor({ 5 | name = '', 6 | color = 'gray' 7 | }) { 8 | this.name = name; 9 | this.color = color; 10 | } 11 | 12 | static create(data) { 13 | return Object.freeze(new Label(data)); 14 | } 15 | 16 | static api = { 17 | list() { 18 | return { 19 | url: `${API_BASE_URL}/labels.json`, 20 | method: 'get' 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/models/List.js: -------------------------------------------------------------------------------- 1 | import uuid from "../util/uuid"; 2 | import {API_BASE_URL} from "../constants/api"; 3 | 4 | export default class List { 5 | constructor({ 6 | id = uuid('list'), 7 | name = '' 8 | } = {}) { 9 | this.id = id; 10 | this.name = name; 11 | } 12 | 13 | static create(data) { 14 | return Object.freeze(new List(data)); 15 | } 16 | 17 | static api = { 18 | list() { 19 | return { 20 | url: `${API_BASE_URL}/lists.json`, 21 | method: 'get' 22 | } 23 | }, 24 | create({ name }) { 25 | return { 26 | url: `${API_BASE_URL}/lists.json`, 27 | method: 'post', 28 | body: JSON.stringify({ name }) 29 | } 30 | }, 31 | update({ id, name }) { 32 | return { 33 | url: `${API_BASE_URL}/lists/${id}.json`, 34 | method: 'put', 35 | body: JSON.stringify({ name }) 36 | } 37 | }, 38 | delete({ id }) { 39 | return { 40 | url: `${API_BASE_URL}/lists/${id}.json`, 41 | method: 'delete' 42 | } 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready.then(registration => { 134 | registration.unregister(); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/util/assignKeyAs.js: -------------------------------------------------------------------------------- 1 | export default function assignKeyAs(obj, model, property = 'id') { 2 | const update = { ...obj }; 3 | 4 | for (const key in update) { 5 | update[key] = model.create({ 6 | ...update[key], 7 | [property]: key 8 | }) 9 | } 10 | 11 | return update; 12 | } -------------------------------------------------------------------------------- /src/util/processError.js: -------------------------------------------------------------------------------- 1 | export default async (response, options = {}) => { 2 | const { errorMessage } = options; 3 | // Try to extract the error message from the body 4 | try { 5 | // Get the error as json 6 | const error = await response.json() 7 | // Reject with the error 8 | return Promise.reject(error) 9 | } catch (e) { 10 | // Reject with the default message 11 | return Promise.reject(errorMessage || 'Something went wrong') 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/util/track.js: -------------------------------------------------------------------------------- 1 | export default function track(...args) { 2 | if (window.analytics) { 3 | window.analytics.track(...args) 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/util/uuid.js: -------------------------------------------------------------------------------- 1 | const ids = {}; 2 | 3 | export default (prefix = 'uuid_') => { 4 | ids[prefix] = ids[prefix] || 0; 5 | 6 | const id = `${prefix}${ids[prefix]}`; 7 | 8 | ids[prefix]++; 9 | 10 | return id; 11 | }; 12 | -------------------------------------------------------------------------------- /static.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "build/", 3 | "routes": { 4 | "/**": "index.html" 5 | } 6 | } --------------------------------------------------------------------------------