├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── functions
    ├── utils
    │   └── getId.js
    ├── todos-read.js
    ├── todos-delete.js
    ├── todos-update.js
    ├── todos-delete-batch.js
    ├── todos-read-all.js
    └── todos-create.js
├── src
    ├── index.js
    ├── components
    │   ├── ContentEditable
    │   │   ├── ContentEditable.css
    │   │   ├── Editable.js
    │   │   └── index.js
    │   ├── SettingsIcon
    │   │   ├── SettingIcon.css
    │   │   └── index.js
    │   ├── SettingsMenu
    │   │   ├── SettingsMenu.css
    │   │   └── index.js
    │   └── AppHeader
    │   │   ├── index.js
    │   │   └── AppHeader.css
    ├── App.test.js
    ├── utils
    │   ├── sortByDate.js
    │   ├── isLocalHost.js
    │   └── api.js
    ├── assets
    │   ├── github.svg
    │   ├── logo.svg
    │   └── deploy-to-netlify.svg
    ├── index.css
    ├── App.css
    └── App.js
├── netlify.toml
├── webpack.config.js
├── .gitignore
├── scripts
    ├── check-for-fauna-key.js
    └── bootstrap-fauna-database.js
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jchris/fauna-one-click/master/public/favicon.ico


--------------------------------------------------------------------------------
/functions/utils/getId.js:
--------------------------------------------------------------------------------
1 | 
2 | export default function getId(urlPath) {
3 |   return urlPath.match(/([^\/]*)\/*$/)[0]
4 | }
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import './index.css'
4 | import App from './App'
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'))
7 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   functions = "functions-build"
3 |   # This will be run the site build
4 |   command = "npm run build"
5 |   # This is the directory is publishing to netlify's CDN
6 |   publish = "build"
7 | 
8 | 


--------------------------------------------------------------------------------
/src/components/ContentEditable/ContentEditable.css:
--------------------------------------------------------------------------------
 1 | .editable {
 2 |   cursor: text;
 3 |   display: block;
 4 |   padding: 10px;
 5 |   width: 95%;
 6 | }
 7 | .editable[contenteditable="true"] {
 8 |   outline: 3px solid #efefef;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/SettingsIcon/SettingIcon.css:
--------------------------------------------------------------------------------
 1 | .setting-toggle-wrapper {
 2 |   display: flex;
 3 |   align-items: center;
 4 |   justify-content: center;
 5 | }
 6 | .settings-toggle {
 7 |   fill: #b7b9bd;
 8 |   width: 35px;
 9 |   height: 35px;
10 |   cursor: pointer;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div')
 7 |   ReactDOM.render(<App />, div)
 8 |   ReactDOM.unmountComponentAtNode(div)
 9 | })
10 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require("webpack");
 2 | 
 3 | /* fix for https://medium.com/@danbruder/typeerror-require-is-not-a-function-webpack-faunadb-6e785858d23b */
 4 | module.exports = {
 5 |   plugins: [
 6 |     new webpack.DefinePlugin({ "global.GENTLY": false })
 7 |   ],
 8 |   node: {
 9 |     __dirname: true,
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/utils/sortByDate.js:
--------------------------------------------------------------------------------
 1 | export default function sortDate(dateKey, order) {
 2 |   return function (a, b) {
 3 |     const timeA = new Date(a[dateKey]).getTime()
 4 |     const timeB = new Date(b[dateKey]).getTime()
 5 |     if (order === 'asc') {
 6 |       return timeA - timeB
 7 |     }
 8 |     // default 'desc' descending order
 9 |     return timeB - timeA
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "FaunaDB Example",
 3 |   "name": "Fauna + Netlify Functions",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | /functions-build
12 | 
13 | # netlify
14 | .netlify
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/src/utils/isLocalHost.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default function isLocalHost() {
 3 |   const isLocalhostName = window.location.hostname === 'localhost';
 4 |   const isLocalhostIPv6 = window.location.hostname === '[::1]';
 5 |   const isLocalhostIPv4 = window.location.hostname.match(
 6 |     // 127.0.0.1/8
 7 |     /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 8 |   );
 9 | 
10 |   return isLocalhostName || isLocalhostIPv6 || isLocalhostIPv4;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/SettingsIcon/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './SettingIcon.css' // eslint-disable-line
 3 | 
 4 | const SettingIcon = (props) => {
 5 |   const className = props.className || ''
 6 |   return (
 7 |     <span onClick={props.onClick} className={`setting-toggle-wrapper ${className}`}>
 8 |       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" className="settings-toggle">
 9 |         <use xlinkHref="#settings" className="settings-gear"></use>
10 |       </svg>
11 |     </span>
12 |   )
13 | }
14 | 
15 | export default SettingIcon
16 | 


--------------------------------------------------------------------------------
/scripts/check-for-fauna-key.js:
--------------------------------------------------------------------------------
 1 | const chalk = require('chalk')
 2 | 
 3 | function checkForFaunaKey() {
 4 |   if (!process.env.FAUNADB_SERVER_SECRET) {
 5 |     console.log(chalk.yellow('Required FAUNADB_SERVER_SECRET enviroment variable not found.'))
 6 |     console.log(`
 7 | =========================
 8 | 
 9 | You can create fauna DB keys here: https://dashboard.fauna.com/db/keys
10 | 
11 | In your terminal run the following command:
12 | 
13 | export FAUNADB_SERVER_SECRET=YourFaunaDBKeyHere
14 | 
15 | =========================
16 | `)
17 | 
18 |     process.exit(1)
19 |   }
20 | }
21 | 
22 | checkForFaunaKey()
23 | 


--------------------------------------------------------------------------------
/functions/todos-read.js:
--------------------------------------------------------------------------------
 1 | import faunadb from 'faunadb'
 2 | import getId from './utils/getId'
 3 | 
 4 | const q = faunadb.query
 5 | const client = new faunadb.Client({
 6 |   secret: process.env.FAUNADB_SERVER_SECRET
 7 | })
 8 | 
 9 | exports.handler = (event, context, callback) => {
10 |   const id = getId(event.path)
11 |   console.log(`Function 'todo-read' invoked. Read id: ${id}`)
12 |   return client.query(q.Get(q.Ref(`classes/todos/${id}`)))
13 |     .then((response) => {
14 |       console.log('success', response)
15 |       return callback(null, {
16 |         statusCode: 200,
17 |         body: JSON.stringify(response)
18 |       })
19 |     }).catch((error) => {
20 |       console.log('error', error)
21 |       return callback(null, {
22 |         statusCode: 400,
23 |         body: JSON.stringify(error)
24 |       })
25 |     })
26 | }
27 | 


--------------------------------------------------------------------------------
/functions/todos-delete.js:
--------------------------------------------------------------------------------
 1 | import faunadb from 'faunadb'
 2 | import getId from './utils/getId'
 3 | 
 4 | const q = faunadb.query
 5 | const client = new faunadb.Client({
 6 |   secret: process.env.FAUNADB_SERVER_SECRET
 7 | })
 8 | 
 9 | exports.handler = (event, context, callback) => {
10 |   const id = getId(event.path)
11 |   console.log(`Function 'todo-delete' invoked. delete id: ${id}`)
12 |   return client.query(q.Delete(q.Ref(`classes/todos/${id}`)))
13 |     .then((response) => {
14 |       console.log('success', response)
15 |       return callback(null, {
16 |         statusCode: 200,
17 |         body: JSON.stringify(response)
18 |       })
19 |     }).catch((error) => {
20 |       console.log('error', error)
21 |       return callback(null, {
22 |         statusCode: 400,
23 |         body: JSON.stringify(error)
24 |       })
25 |     })
26 | }
27 | 


--------------------------------------------------------------------------------
/functions/todos-update.js:
--------------------------------------------------------------------------------
 1 | import faunadb from 'faunadb'
 2 | import getId from './utils/getId'
 3 | 
 4 | const q = faunadb.query
 5 | const client = new faunadb.Client({
 6 |   secret: process.env.FAUNADB_SERVER_SECRET
 7 | })
 8 | 
 9 | exports.handler = (event, context, callback) => {
10 |   const data = JSON.parse(event.body)
11 |   const id = getId(event.path)
12 |   console.log(`Function 'todo-update' invoked. update id: ${id}`)
13 |   return client.query(q.Update(q.Ref(`classes/todos/${id}`), {data}))
14 |     .then((response) => {
15 |       console.log('success', response)
16 |       return callback(null, {
17 |         statusCode: 200,
18 |         body: JSON.stringify(response)
19 |       })
20 |     }).catch((error) => {
21 |       console.log('error', error)
22 |       return callback(null, {
23 |         statusCode: 400,
24 |         body: JSON.stringify(error)
25 |       })
26 |     })
27 | }
28 | 


--------------------------------------------------------------------------------
/src/assets/github.svg:
--------------------------------------------------------------------------------
1 | <svg height="1024" width="1024" fill='white' xmlns="http://www.w3.org/2000/svg">
2 |   <path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z" />
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/functions/todos-delete-batch.js:
--------------------------------------------------------------------------------
 1 | import faunadb from 'faunadb'
 2 | import getId from './utils/getId'
 3 | 
 4 | const q = faunadb.query
 5 | const client = new faunadb.Client({
 6 |   secret: process.env.FAUNADB_SERVER_SECRET
 7 | })
 8 | 
 9 | exports.handler = (event, context, callback) => {
10 |   const data = JSON.parse(event.body)
11 |   console.log('data', data)
12 |   console.log('Function `todo-delete-batch` invoked', data.ids)
13 |   // construct batch query from IDs
14 |   const deleteAllCompletedTodoQuery = data.ids.map((id) => {
15 |     return q.Delete(q.Ref(`classes/todos/${id}`))
16 |   })
17 |   // Hit fauna with the query to delete the completed items
18 |   return client.query(deleteAllCompletedTodoQuery)
19 |     .then((response) => {
20 |       console.log('success', response)
21 |       return callback(null, {
22 |         statusCode: 200,
23 |         body: JSON.stringify(response)
24 |       })
25 |     }).catch((error) => {
26 |       console.log('error', error)
27 |       return callback(null, {
28 |         statusCode: 400,
29 |         body: JSON.stringify(error)
30 |       })
31 |     })
32 | }
33 | 


--------------------------------------------------------------------------------
/functions/todos-read-all.js:
--------------------------------------------------------------------------------
 1 | import faunadb from 'faunadb'
 2 | 
 3 | const q = faunadb.query
 4 | const client = new faunadb.Client({
 5 |   secret: process.env.FAUNADB_SERVER_SECRET
 6 | })
 7 | 
 8 | exports.handler = (event, context, callback) => {
 9 |   console.log('Function `todo-read-all` invoked')
10 |   return client.query(q.Paginate(q.Match(q.Ref('indexes/all_todos'))))
11 |     .then((response) => {
12 |       const todoRefs = response.data
13 |       console.log('Todo refs', todoRefs)
14 |       console.log(`${todoRefs.length} todos found`)
15 |       // create new query out of todo refs. http://bit.ly/2LG3MLg
16 |       const getAllTodoDataQuery = todoRefs.map((ref) => {
17 |         return q.Get(ref)
18 |       })
19 |       // then query the refs
20 |       return client.query(getAllTodoDataQuery).then((ret) => {
21 |         return callback(null, {
22 |           statusCode: 200,
23 |           body: JSON.stringify(ret)
24 |         })
25 |       })
26 |     }).catch((error) => {
27 |       console.log('error', error)
28 |       return callback(null, {
29 |         statusCode: 400,
30 |         body: JSON.stringify(error)
31 |       })
32 |     })
33 | }
34 | 


--------------------------------------------------------------------------------
/functions/todos-create.js:
--------------------------------------------------------------------------------
 1 | import faunadb from 'faunadb' /* Import faunaDB sdk */
 2 | 
 3 | /* configure faunaDB Client with our secret */
 4 | const q = faunadb.query
 5 | const client = new faunadb.Client({
 6 |   secret: process.env.FAUNADB_SERVER_SECRET
 7 | })
 8 | 
 9 | /* export our lambda function as named "handler" export */
10 | exports.handler = (event, context, callback) => {
11 |   /* parse the string body into a useable JS object */
12 |   const data = JSON.parse(event.body)
13 |   console.log('Hello webinar. Function `todo-create` invoked', data)
14 |   const todoItem = {
15 |     data: data
16 |   }
17 |   /* construct the fauna query */
18 |   return client.query(q.Create(q.Ref('classes/todos'), todoItem))
19 |     .then((response) => {
20 |       console.log('success', response)
21 |       /* Success! return the response with statusCode 200 */
22 |       return callback(null, {
23 |         statusCode: 200,
24 |         body: JSON.stringify(response)
25 |       })
26 |     }).catch((error) => {
27 |       console.log('error', error)
28 |       /* Error! return the error with statusCode 400 */
29 |       return callback(null, {
30 |         statusCode: 400,
31 |         body: JSON.stringify(error)
32 |       })
33 |     })
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "netlify-fauna",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "faunadb": "^0.2.2",
 7 |     "react": "^16.4.0",
 8 |     "react-dom": "^16.4.0",
 9 |     "react-scripts": "1.1.4"
10 |   },
11 |   "scripts": {
12 |     "bootstrap": "node ./scripts/bootstrap-fauna-database.js",
13 |     "docs": "md-magic --path '**/*.md' --ignore 'node_modules'",
14 |     "checkForFaunaKey": "node ./scripts/check-for-fauna-key.js",
15 |     "start": "npm-run-all --parallel checkForFaunaKey start:app start:server",
16 |     "start:app": "react-scripts start",
17 |     "start:server": "netlify-lambda serve functions -c ./webpack.config.js",
18 |     "prebuild": "echo 'setup faunaDB' && npm run bootstrap",
19 |     "build": "npm-run-all --parallel build:**",
20 |     "build:app": "react-scripts build",
21 |     "build:functions": "netlify-lambda build functions -c ./webpack.config.js",
22 |     "test": "react-scripts test --env=jsdom"
23 |   },
24 |   "devDependencies": {
25 |     "markdown-magic": "^0.1.23",
26 |     "netlify-lambda": "^0.4.0",
27 |     "npm-run-all": "^4.1.3"
28 |   },
29 |   "proxy": {
30 |     "/.netlify/functions": {
31 |       "target": "http://localhost:9000",
32 |       "pathRewrite": {
33 |         "^/\\.netlify/functions": ""
34 |       }
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/utils/api.js:
--------------------------------------------------------------------------------
 1 | /* Api methods to call /functions */
 2 | 
 3 | const create = (data) => {
 4 |   return fetch('/.netlify/functions/todos-create', {
 5 |     body: JSON.stringify(data),
 6 |     method: 'POST'
 7 |   }).then(response => {
 8 |     return response.json()
 9 |   })
10 | }
11 | 
12 | const readAll = () => {
13 |   return fetch('/.netlify/functions/todos-read-all').then((response) => {
14 |     return response.json()
15 |   })
16 | }
17 | 
18 | const update = (todoId, data) => {
19 |   return fetch(`/.netlify/functions/todos-update/${todoId}`, {
20 |     body: JSON.stringify(data),
21 |     method: 'POST'
22 |   }).then(response => {
23 |     return response.json()
24 |   })
25 | }
26 | 
27 | const deleteTodo = (todoId) => {
28 |   return fetch(`/.netlify/functions/todos-delete/${todoId}`, {
29 |     method: 'POST',
30 |   }).then(response => {
31 |     return response.json()
32 |   })
33 | }
34 | 
35 | const batchDeleteTodo = (todoIds) => {
36 |   return fetch(`/.netlify/functions/todos-delete-batch`, {
37 |     body: JSON.stringify({
38 |       ids: todoIds
39 |     }),
40 |     method: 'POST'
41 |   }).then(response => {
42 |     return response.json()
43 |   })
44 | }
45 | 
46 | export default {
47 |   create: create,
48 |   readAll: readAll,
49 |   update: update,
50 |   delete: deleteTodo,
51 |   batchDelete: batchDeleteTodo
52 | }
53 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 5 |   -webkit-font-smoothing: antialiased;
 6 |   -moz-osx-font-smoothing: grayscale;
 7 | }
 8 | 
 9 | button {
10 |   padding: 7px 15px;
11 |   font-family: inherit;
12 |   font-weight: 500;
13 |   font-size: 16px;
14 |   line-height: 24px;
15 |   text-align: center;
16 |   border: 1px solid #e9ebeb;
17 |   border-bottom: 1px solid #e1e3e3;
18 |   border-radius: 4px;
19 |   background-color: #fff;
20 |   color: rgba(14,30,37,.87);
21 |   box-shadow: 0 2px 4px 0 rgba(14,30,37,.12);
22 |   transition: all .2s ease;
23 |   transition-property: background-color,color,border,box-shadow;
24 |   outline: 0;
25 |   cursor: pointer;
26 |   margin-bottom: 3px;
27 | }
28 | 
29 | button:focus, button:hover {
30 |   background-color: #f5f5f5;
31 |   color: rgba(14,30,37,.87);
32 |   box-shadow: 0 8px 12px 0 rgba(233,235,235,.16), 0 2px 8px 0 rgba(0,0,0,.08);
33 |   text-decoration: none;
34 | }
35 | 
36 | 
37 | .btn-danger {
38 |   background-color: #fb6d77;
39 |   border-color: #fb6d77;
40 |   border-bottom-color: #e6636b;
41 |   color: #fff;
42 | }
43 | .btn-danger:focus, .btn-danger:hover {
44 |     background-color: #fa3b49;
45 |     border-color: #fa3b49;
46 |     color: #fff;
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/SettingsMenu/SettingsMenu.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .settings-wrapper {
 3 |   position: fixed;
 4 |   left: 0;
 5 |   top: 0;
 6 |   background: rgba(95, 95, 95, 0.50);
 7 |   font-size: 13px;
 8 |   width: 100%;
 9 |   height: 100%;
10 |   z-index: 9;
11 |   display: flex;
12 |   align-items: center;
13 |   justify-content: center;
14 | }
15 | .settings-content {
16 |   margin-top: 3em;
17 |   margin-bottom: 3em;
18 |   padding: 1.5em 3em;
19 |   padding-bottom: 3em;
20 |   background: #fff;
21 |   color: rgba(14,30,37,0.54);
22 |   border-radius: 8px;
23 |   box-shadow: 0 1px 6px 0 rgba(14,30,37,0.12);
24 |   position: relative;
25 | }
26 | .settings-close {
27 |   position: absolute;
28 |   right: 20px;
29 |   top: 15px;
30 |   font-size: 16px;
31 |   cursor: pointer;
32 | }
33 | .settings-content h2 {
34 |  color: #000;
35 | }
36 | .settings-section {
37 |   margin-top: 20px;
38 | }
39 | .settings-header {
40 |   font-size: 16px;
41 |   font-weight: 600;
42 | }
43 | .settings-options-wrapper {
44 |   display: flex;
45 |   align-items: center;
46 |   flex-wrap: wrap;
47 | }
48 | .settings-option {
49 |   padding: 3px 8px;
50 |   margin: 5px;
51 |   border: 1px solid;
52 |   font-size: 12px;
53 |   cursor: pointer;
54 |   &:hover, &.activeClass {
55 |     color: #fff;
56 |   }
57 | }
58 | 
59 | @media (max-width: 768px) {
60 |   .settings-close {
61 |     top: 15px;
62 |     right: 20px;
63 |     font-size: 18px;
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/AppHeader/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import deployButton from '../../assets/deploy-to-netlify.svg'
 3 | import logo from '../../assets/logo.svg'
 4 | import github from '../../assets/github.svg'
 5 | import styles from './AppHeader.css' // eslint-disable-line
 6 | 
 7 | const AppHeader = (props) => {
 8 |   return (
 9 |     <header className='app-header'>
10 |       <div className='app-title-wrapper'>
11 |         <div className='app-title-wrapper'>
12 |           <div className='app-left-nav'>
13 |             <img src={logo} className='app-logo' alt='logo' />
14 |             <div className='app-title-text'>
15 |               <h1 className='app-title'>Netlify + Fauna DB</h1>
16 |               <p className='app-intro'>
17 |                 Using FaunaDB & Netlify functions
18 |               </p>
19 |             </div>
20 |           </div>
21 |         </div>
22 |         <div className='deploy-button-wrapper'>
23 |           <a
24 |             target='_blank'
25 |             rel='noopener noreferrer'
26 |             href='https://app.netlify.com/start/deploy?repository=https://github.com/netlify/fauna-one-click&stack=fauna'>
27 |             <img src={deployButton} className='deploy-button' alt='deploy to netlify' />
28 |           </a>
29 |           <div className='view-src'>
30 |             <a
31 |               target='_blank'
32 |               rel='noopener noreferrer'
33 |               href='https://github.com/netlify/netlify-faunadb-example'>
34 |               <img className='github-icon' src={github} alt='view repo on github' />
35 |               View the source Luke
36 |             </a>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     </header>
41 |   )
42 | }
43 | 
44 | export default AppHeader
45 | 


--------------------------------------------------------------------------------
/src/components/AppHeader/AppHeader.css:
--------------------------------------------------------------------------------
 1 | .app-logo {
 2 |   height: 95px;
 3 |   margin-right: 20px;
 4 | }
 5 | .app-title-wrapper {
 6 |   display: flex;
 7 |   align-items: center;
 8 |   justify-content: space-between;
 9 | }
10 | .app-title-text {
11 |   flex-grow: 1;
12 | }
13 | .app-header {
14 |   background-color: #222;
15 |   height: 105px;
16 |   padding: 20px;
17 |   color: white;
18 |   padding-left: 60px;
19 | }
20 | .app-left-nav {
21 |   display: flex;
22 | }
23 | .app-title {
24 |   font-size: 32px;
25 |   margin: 0px;
26 |   margin-top: 10px;
27 | }
28 | .app-intro {
29 |   font-size: large;
30 | }
31 | .deploy-button-wrapper {
32 |   margin-right: 20px;
33 |   display: flex;
34 |   flex-direction: column;
35 |   align-items: center;
36 | }
37 | .deploy-button {
38 |   width: 200px;
39 | }
40 | .view-src {
41 |   margin-top: 15px;
42 |   text-align: center;
43 | }
44 | .view-src img {
45 |   margin-right: 10px;
46 | }
47 | .view-src a {
48 |   text-decoration: none;
49 |   color: #fff;
50 |   display: flex;
51 |   align-items: center;
52 |   justify-content: center;
53 | }
54 | .github-icon {
55 |   width: 25px;
56 |   fill: white;
57 | }
58 | 
59 | @keyframes App-logo-spin {
60 |   from { transform: rotate(0deg); }
61 |   to { transform: rotate(360deg); }
62 | }
63 | 
64 | /* Mobile view */
65 | @media (max-width: 768px) {
66 |   .app-title-wrapper {
67 |     flex-direction: column;
68 |     align-items: flex-start;
69 |   }
70 |   .app-title {
71 |     font-size: 23px;
72 |     margin-top: 0px;
73 |   }
74 |   .app-intro {
75 |     font-size: 14px;
76 |   }
77 |   .app-header {
78 |     padding-left: 20px;
79 |     height: auto;
80 |   }
81 |   .app-logo {
82 |     height: 60px;
83 |     margin-right: 20px;
84 |     animation: none;
85 |   }
86 |   .deploy-button-wrapper {
87 |     margin-left: 80px;
88 |     margin-top: 5px;
89 |   }
90 |   .deploy-button {
91 |     width: 150px;
92 |   }
93 |   .view-src {
94 |     display: none;
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/SettingsMenu/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import styles from './SettingsMenu.css' // eslint-disable-line
 3 | 
 4 | export default class Menu extends Component {
 5 |   componentDidMount() {
 6 |     // attach event listeners
 7 |     document.body.addEventListener('keydown', this.handleEscKey)
 8 |   }
 9 |   componentWillUnmount() {
10 |     // remove event listeners
11 |     document.body.removeEventListener('keydown', this.handleEscKey)
12 |   }
13 |   handleEscKey = (e) => {
14 |     if (this.props.showMenu && e.which === 27) {
15 |       this.props.handleModalClose()
16 |     }
17 |   }
18 |   handleDelete = (e) => {
19 |     e.preventDefault()
20 |     const deleteConfirm = window.confirm("Are you sure you want to clear all completed todos?");
21 |     if (deleteConfirm) {
22 |       console.log('delete')
23 |       this.props.handleClearCompleted()
24 |     }
25 |   }
26 |   render() {
27 |     const { showMenu } = this.props
28 |     const showOrHide = (showMenu) ? 'flex' : 'none'
29 |     return (
30 |       <div className='settings-wrapper' style={{display: showOrHide}}>
31 |         <div className='settings-content'>
32 |           <span className='settings-close' onClick={this.props.handleModalClose} role="img" aria-label='close'>
33 |             ❌
34 |           </span>
35 |           <h2>Settings</h2>
36 |           <div className='settings-section' onClick={this.handleDelete}>
37 |             <button className='btn-danger'>
38 |               Clear All Completed Todos
39 |             </button>
40 |           </div>
41 |           <div className='settings-section' style={{display: 'none'}}>
42 |             <div className='settings-header'>Sort Todos:</div>
43 |             <div className='settings-options-wrapper' data-setting='sortOrder'>
44 |               <div
45 |                 className='settings-option'
46 |                 onClick={this.changeSetting}
47 |                 data-value='desc'>
48 |                 Oldest First ▼
49 |               </div>
50 |               <div
51 |                 className='settings-option'
52 |                 onClick={this.changeSetting}
53 |                 data-value='asc'>
54 |                 Most Recent First ▲
55 |               </div>
56 |             </div>
57 |           </div>
58 |         </div>
59 |       </div>
60 |     )
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components/ContentEditable/Editable.js:
--------------------------------------------------------------------------------
 1 | /* fork of https://github.com/lovasoa/react-contenteditable */
 2 | import React from 'react'
 3 | 
 4 | export default class Editable extends React.Component {
 5 |   shouldComponentUpdate(nextProps) {
 6 |     // We need not rerender if the change of props simply reflects the user's
 7 |     // edits. Rerendering in this case would make the cursor/caret jump.
 8 |     return (
 9 |       // Rerender if there is no element yet...
10 |       !this.htmlEl
11 |       // ...or if html really changed... (programmatically, not by user edit)
12 |       || (nextProps.html !== this.htmlEl.innerHTML
13 |         && nextProps.html !== this.props.html)
14 |       // ...or if editing is enabled or disabled.
15 |       || this.props.disabled !== nextProps.disabled
16 |     )
17 |   }
18 |   componentDidUpdate() {
19 |     if (this.htmlEl && this.props.html !== this.htmlEl.innerHTML) {
20 |       // Perhaps React (whose VDOM gets outdated because we often prevent
21 |       // rerendering) did not update the DOM. So we update it manually now.
22 |       this.htmlEl.innerHTML = this.props.html
23 |     }
24 |   }
25 |   preventEnter = (evt) => {
26 |     if (evt.which === 13) {
27 |       evt.preventDefault()
28 |       if (!this.htmlEl) {
29 |         return false
30 |       }
31 |       this.htmlEl.blur()
32 |       return false
33 |     }
34 |   }
35 |   emitChange = (evt) => {
36 |     if (!this.htmlEl) {
37 |       return false
38 |     }
39 |     const html = this.htmlEl.innerHTML
40 |     if (this.props.onChange && html !== this.lastHtml) {
41 |       evt.target.value = html
42 |       this.props.onChange(evt, html)
43 |     }
44 |     this.lastHtml = html
45 |   }
46 |   render() {
47 |     const { tagName, html, onChange, ...props } = this.props
48 | 
49 |     const domNodeType = tagName || 'div'
50 |     const elementProps = {
51 |       ...props,
52 |       ref: (e) => this.htmlEl = e,
53 |       onKeyDown: this.preventEnter,
54 |       onInput: this.emitChange,
55 |       onBlur: this.props.onBlur || this.emitChange,
56 |       contentEditable: !this.props.disabled,
57 |     }
58 | 
59 |     let children = this.props.children
60 |     if (html) {
61 |       elementProps.dangerouslySetInnerHTML = { __html: html }
62 |       children = null
63 |     }
64 |     return React.createElement(domNodeType, elementProps, children)
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/scripts/bootstrap-fauna-database.js:
--------------------------------------------------------------------------------
 1 | /* bootstrap database in your FaunaDB account */
 2 | const readline = require('readline')
 3 | const faunadb = require('faunadb')
 4 | const chalk = require('chalk')
 5 | const insideNetlify = insideNetlifyBuildContext()
 6 | const q = faunadb.query
 7 | 
 8 | if (!process.env.FAUNADB_SERVER_SECRET) {
 9 |   console.log('No FAUNADB_SERVER_SECRET found')
10 |   console.log('Please run `netlify addons:create fauna-staging` and redeploy')
11 |   return false
12 | }
13 | 
14 | console.log(chalk.cyan('Creating your FaunaDB Database...\n'))
15 | if (insideNetlify) {
16 |   // Run idempotent database creation
17 |   createFaunaDB(process.env.FAUNADB_SERVER_SECRET).then(() => {
18 |     console.log('Database created')
19 |   })
20 | } else {
21 |   console.log()
22 |   console.log('You can create fauna DB keys here: https://dashboard.fauna.com/db/keys')
23 |   console.log()
24 |   ask(chalk.bold('Enter your faunaDB server key'), (err, answer) => {
25 |     if (err) {
26 |       console.log(err)
27 |     }
28 |     if (!answer) {
29 |       console.log('Please supply a faunaDB server key')
30 |       process.exit(1)
31 |     }
32 |     createFaunaDB(process.env.FAUNADB_SERVER_SECRET).then(() => {
33 |       console.log('Database created')
34 |     })
35 |   })
36 | }
37 | 
38 | /* idempotent operation */
39 | function createFaunaDB(key) {
40 |   console.log('Create the database!')
41 |   const client = new faunadb.Client({
42 |     secret: key
43 |   })
44 | 
45 |   /* Based on your requirements, change the schema here */
46 |   return client.query(q.Create(q.Ref('classes'), { name: 'todos' }))
47 |     .then(() => {
48 |       return client.query(
49 |         q.Create(q.Ref('indexes'), {
50 |           name: 'all_todos',
51 |           source: q.Ref('classes/todos')
52 |         }))
53 |     }).catch((e) => {
54 |       // Database already exists
55 |       if (e.requestResult.statusCode === 400 && e.message === 'instance not unique') {
56 |         console.log('DB already exists')
57 |         throw e
58 |       }
59 |     })
60 | }
61 | 
62 | /* util methods */
63 | 
64 | // Test if inside netlify build context
65 | function insideNetlifyBuildContext() {
66 |   if (process.env.DEPLOY_PRIME_URL) {
67 |     return true
68 |   }
69 |   return false
70 | }
71 | 
72 | // Readline util
73 | function ask(question, callback) {
74 |   const rl = readline.createInterface({
75 |     input: process.stdin,
76 |     output: process.stdout
77 |   })
78 |   rl.question(question + '\n', function(answer) {
79 |     rl.close()
80 |     callback(null, answer)
81 |   })
82 | }
83 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 | 
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 9 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
10 | 
11 |     <title>Fauna + Netlify Functions</title>
12 |   </head>
13 |   <body>
14 |     <noscript>
15 |       You need to enable JavaScript to run this app.
16 |     </noscript>
17 |     <div id="root"></div>
18 |     <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
19 |       <defs>
20 |         <linearGradient id="boxGradientGrey" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
21 |           <stop offset="0%" stop-color="#dde0e6"></stop>
22 |           <stop offset="100%" stop-color="#dde0e6"></stop>
23 |         </linearGradient>
24 |         <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
25 |           <stop offset="0%" stop-color="#27FDC7"></stop>
26 |           <stop offset="100%" stop-color="#0FC0F5"></stop>
27 |         </linearGradient>
28 |         <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
29 |         <path id="todo__box" stroke="url(#boxGradientGrey)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
30 |         <path id="todo__box__done" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
31 |         <g id="settings" transform="translate(0,-936.36218)"><path d="m 43.999998,959.36216 -3,10.43754 c -2.71536,0.748 -5.26077,1.8245 -7.65625,3.1875 l -9.5,-5.2813 -8.5,8.5 5.28125,9.5 c -1.36295,2.3955 -2.43943,4.9409 -3.1875,7.6563 l -10.4375,3 0,12 10.4375,3 c 0.74807,2.7154 1.82455,5.2608 3.1875,7.6562 l -5.28125,9.5 8.5,8.5 9.5,-5.2812 c 2.39548,1.3629 4.94089,2.4394 7.65625,3.1875 l 3,10.4375 12,0 3,-10.4375 c 2.71537,-0.7481 5.26077,-1.8246 7.65625,-3.1875 l 9.500004,5.2812 8.5,-8.5 -5.28125,-9.5 c 1.36294,-2.3954 2.43943,-4.9408 3.1875,-7.6562 l 10.4375,-3 0,-12 -10.4375,-3 c -0.74807,-2.7154 -1.82456,-5.2608 -3.1875,-7.6563 l 5.28125,-9.5 -8.5,-8.5 -9.500004,5.2813 c -2.39548,-1.363 -4.94088,-2.4395 -7.65625,-3.1875 l -3,-10.43754 -12,0 z m 6,23.00004 c 11.0457,0 20,8.9543 20,20 0,11.0457 -8.9543,20 -20,20 -11.0457,0 -20,-8.9543 -20,-20 0,-11.0457 8.9543,-20 20,-20 z" stroke="none" visibility="visible" display="inline" overflow="visible"></path></g>
32 |       </defs>
33 |     </svg>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/src/components/ContentEditable/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Editable from './Editable'
  3 | import './ContentEditable.css'
  4 | 
  5 | export default class ContentEditable extends React.Component {
  6 |   constructor(props) {
  7 |     super(props)
  8 |     this.state = {
  9 |       disabled: true
 10 |     }
 11 |     this.hasFocused = false
 12 |   }
 13 |   handleClick = (e) => {
 14 |     e.preventDefault()
 15 |     const event = e || window.event
 16 |     // hacks to give the contenteditable block a better UX
 17 |     event.persist()
 18 |     if (!this.hasFocused) {
 19 |       const caretRange = getMouseEventCaretRange(event)
 20 |       window.setTimeout(() => {
 21 |         selectRange(caretRange)
 22 |         this.hasFocused = true
 23 |       }, 0)
 24 |     }
 25 |     // end hacks to give the contenteditable block a better UX
 26 |     this.setState({
 27 |       disabled: false
 28 |     })
 29 |   }
 30 |   handleClickOutside = (evt) => {
 31 |     const event = evt || window.event
 32 |     // presist blur event for react
 33 |     event.persist()
 34 |     const value = evt.target.value || evt.target.innerText
 35 |     this.setState({
 36 |       disabled: true
 37 |     }, () => {
 38 |       this.hasFocused = false // reset single click functionality
 39 |       if (this.props.onBlur) {
 40 |         this.props.onBlur(evt, value)
 41 |       }
 42 |     })
 43 |   }
 44 |   render() {
 45 |     const { onChange, children, html, editKey, tagName } = this.props
 46 |     const content = html || children
 47 |     return (
 48 |       <Editable
 49 |         tagName={tagName}
 50 |         data-key={editKey}
 51 |         className={'editable'}
 52 |         onClick={this.handleClick}
 53 |         onBlur={this.handleClickOutside}
 54 |         html={content}
 55 |         disabled={this.state.disabled}
 56 |         onChange={onChange}
 57 |       />
 58 |     )
 59 |   }
 60 | }
 61 | 
 62 | function getMouseEventCaretRange(event) {
 63 |   const x = event.clientX
 64 |   const y = event.clientY
 65 |   let range
 66 | 
 67 |   if (document.body.createTextRange) {
 68 |     // IE
 69 |     range = document.body.createTextRange()
 70 |     range.moveToPoint(x, y)
 71 |   } else if (typeof document.createRange !== 'undefined') {
 72 |     // Try Firefox rangeOffset + rangeParent properties
 73 |     if (typeof event.rangeParent !== 'undefined') {
 74 |       range = document.createRange()
 75 |       range.setStart(event.rangeParent, event.rangeOffset)
 76 |       range.collapse(true)
 77 |     } else if (document.caretPositionFromPoint) {
 78 |       // Try the standards-based way next
 79 |       const pos = document.caretPositionFromPoint(x, y)
 80 |       range = document.createRange()
 81 |       range.setStart(pos.offsetNode, pos.offset)
 82 |       range.collapse(true)
 83 |     } else if (document.caretRangeFromPoint) {
 84 |       // WebKit
 85 |       range = document.caretRangeFromPoint(x, y)
 86 |     }
 87 |   }
 88 |   return range
 89 | }
 90 | 
 91 | function selectRange(range) {
 92 |   if (range) {
 93 |     if (typeof range.select !== 'undefined') {
 94 |       range.select()
 95 |     } else if (typeof window.getSelection !== 'undefined') {
 96 |       const sel = window.getSelection()
 97 |       sel.removeAllRanges()
 98 |       sel.addRange(range)
 99 |     }
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | .todo-list {
  2 |   padding: 60px;
  3 |   padding-top: 10px;
  4 |   width: 600px;
  5 | }
  6 | .todo-settings-toggle {
  7 |   fill: #b7b9bd;
  8 |   width: 25px;
  9 |   margin-left: 10px;
 10 |   cursor: pointer;
 11 | }
 12 | .todo-create-wrapper {
 13 |   margin-bottom: 20px;
 14 |   display: flex;
 15 |   align-items: center;
 16 | }
 17 | .todo-actions {
 18 |   display: flex;
 19 |   align-items: center;
 20 | }
 21 | .todo-create-input {
 22 |   font-size: 14px;
 23 |   padding: 11px 15px;
 24 |   min-width: 300px;
 25 |   display: inline-block;
 26 |   box-shadow: 0px 0px 0px 2px rgba(120, 130, 152, 0.25);
 27 |   border: none;
 28 |   outline: none;
 29 |   transition: all 0.3s ease;
 30 | }
 31 | .todo-create-input:hover, .todo-create-input:active, .todo-create-input:focus {
 32 |   box-shadow: 0px 0px 0px 2px rgb(43, 190, 185);
 33 |   box-shadow: 0px 0px 0px 2px #00ad9f;
 34 | }
 35 | 
 36 | .todo-item {
 37 |   padding: 15px 0;
 38 |   display: flex;
 39 |   align-items: center;
 40 |   justify-content: space-between;
 41 |   min-height: 43px;
 42 | }
 43 | .todo-list-title {
 44 |   font-size: 17px;
 45 |   font-weight: 500;
 46 |   color: #5a5a5a;
 47 |   flex-grow: 1;
 48 |   position: relative;
 49 |   z-index: 2;
 50 |   margin-left: 45px;
 51 |   width: 470px;
 52 | }
 53 | .todo-list-title:hover span[contenteditable="false"]:before {
 54 |   content: 'click to edit';
 55 |   position: absolute;
 56 |   top: -6px;
 57 |   left: 11px;
 58 |   font-size: 11px;
 59 |   font-weight: 300;
 60 |   color: #adadad;
 61 |   letter-spacing: 1px;
 62 | }
 63 | .mobile-toggle {
 64 |   display: none;
 65 | }
 66 | .desktop-toggle {
 67 |   margin-left: 10px;
 68 |   margin-bottom: 3px;
 69 | }
 70 | 
 71 | @media (max-width: 768px) {
 72 |   .mobile-toggle {
 73 |     display: inline-flex;
 74 |   }
 75 |   .desktop-toggle {
 76 |     display: none;
 77 |   }
 78 |   .todo-list {
 79 |     padding: 15px;
 80 |     padding-top: 10px;
 81 |     width: auto;
 82 |   }
 83 |   .todo-list h2 {
 84 |     display: flex;
 85 |     justify-content: space-between;
 86 |     align-items: center;
 87 |     margin-bottom: 15px;
 88 |     max-width: 95%;
 89 |   }
 90 |   .todo-list-title {
 91 |     /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */
 92 |     font-size: 16px;
 93 |     max-width: 80%;
 94 |     margin-left: 40px;
 95 |   }
 96 |   .todo-create-wrapper {
 97 |     flex-direction: column;
 98 |     align-items: flex-start;
 99 |     margin-bottom: 15px;
100 |   }
101 |   .todo-create-input {
102 |     appearance: none;
103 |     border: 1px solid rgba(120, 130, 152, 0.25);
104 |     /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */
105 |     font-size: 16px;
106 |     margin-bottom: 15px;
107 |     min-width: 85%;
108 |   }
109 |   .todo-item button {
110 |     padding: 4px 12px;
111 |     font-size: 14px;
112 |     margin-bottom: 0px;
113 |     min-width: 63px;
114 |     display: flex;
115 |     align-items: center;
116 |     justify-content: center;
117 |   }
118 |   .todo-list-title:hover span[contenteditable="false"]:before {
119 |     content: ''
120 |   }
121 |   .todo-list-title:hover span[contenteditable="true"]:before {
122 |     content: 'click to edit';
123 |     position: absolute;
124 |     top: -20px;
125 |     left: 9px;
126 |     font-size: 11px;
127 |     font-weight: 300;
128 |     color: #adadad;
129 |     letter-spacing: 1px;
130 |   }
131 | }
132 | 
133 | /** todo css via https://codepen.io/shshaw/pen/WXMdwE 😻 */
134 | .todo {
135 |   display: inline-block;
136 |   position: relative;
137 |   padding: 0;
138 |   margin: 0;
139 |   min-height: 40px;
140 |   min-width: 40px;
141 |   cursor: pointer;
142 |   padding-right: 5px;
143 | }
144 | .todo__state {
145 |   position: absolute;
146 |   top: 0;
147 |   left: 0;
148 |   opacity: 0;
149 | }
150 | 
151 | .todo__icon {
152 |   position: absolute;
153 |   top: 0;
154 |   bottom: 0;
155 |   left: 0;
156 |   width: 280px;
157 |   height: 100%;
158 |   margin: auto;
159 |   fill: none;
160 |   stroke: #27FDC7;
161 |   stroke-width: 2;
162 |   stroke-linejoin: round;
163 |   stroke-linecap: round;
164 |   z-index: 1;
165 | }
166 | 
167 | .todo__state:checked ~ .todo-list-title {
168 |   text-decoration: line-through;
169 | }
170 | 
171 | .todo__box {
172 |   stroke-dasharray: 56.1053, 56.1053;
173 |   stroke-dashoffset: 0;
174 |   transition-delay: 0.16s;
175 | }
176 | .todo__check {
177 |   stroke: #27FDC7;
178 |   stroke-dasharray: 9.8995, 9.8995;
179 |   stroke-dashoffset: 9.8995;
180 |   transition-duration: 0.25s;
181 | }
182 | 
183 | .todo__state:checked ~ .todo__icon .todo__box {
184 |   stroke-dashoffset: 56.1053;
185 |   transition-delay: 0s;
186 |   stroke-dasharray: 56.1053, 56.1053;
187 |   stroke-dashoffset: 0;
188 |   stroke: red;
189 | }
190 | 
191 | .todo__state:checked ~ .todo__icon .todo__check {
192 |   stroke-dashoffset: 0;
193 |   transition-delay: 0s;
194 | }
195 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="400" height="397" viewBox="0 0 400 397">
 2 |   <defs>
 3 |     <radialGradient id="a" cx="0%" cy="0%" r="100%" fx="0%" fy="0%">
 4 |       <stop stop-color="#20C6B7" offset="0%"/>
 5 |       <stop stop-color="#4D9ABF" offset="100%"/>
 6 |     </radialGradient>
 7 |   </defs>
 8 |   <path fill="url(#a)" d="M282.152734,140.402439 C284.194852,141.404121 285.896618,142.739697 287.258031,144.24222 C287.428207,144.409168 287.428207,144.409168 287.598383,144.409168 L287.76856,144.409168 L326.909168,127.881413 C327.079345,127.714466 327.249522,127.547519 327.249522,127.380572 C327.249522,127.213625 327.249522,127.046678 327.079345,126.879731 L290.491385,90.9861226 C290.321208,90.8191754 290.151032,90.8191754 290.151032,90.8191754 L289.980855,90.8191754 C289.810679,90.8191754 289.640503,90.9861226 289.640503,91.3200171 L281.642204,139.901598 C281.81238,140.068545 281.982557,140.402439 282.152734,140.402439 Z M200.978515,107.847771 C202.850458,110.685871 204.041694,114.024811 204.382047,117.363751 C204.382047,117.530698 204.552223,117.697645 204.722399,117.864592 L262.922783,142.405803 L263.092959,142.405803 C263.263135,142.405803 263.433312,142.405803 263.433312,142.238856 C265.135078,140.90328 267.177196,139.901598 269.389491,139.23381 C269.559668,139.23381 269.729845,139.066863 269.729845,138.732969 L279.259732,80.1345667 C279.259732,79.9676195 279.259732,79.800673 279.089555,79.6337258 L242.671772,43.7401177 C242.501595,43.5731707 242.501595,43.5731707 242.331419,43.5731707 C242.161243,43.5731707 241.991066,43.7401177 241.991066,43.9070647 L200.978515,107.013036 C200.808339,107.34693 200.808339,107.680825 200.978515,107.847771 Z M399.744735,198.166106 L337.289939,136.729604 C337.119762,136.562658 336.949585,136.562658 336.949585,136.562658 L336.779409,136.562658 L294.405446,154.425988 C294.235269,154.592935 294.065093,154.759882 294.065093,154.926829 C294.065093,155.093776 294.235269,155.42767 294.405446,155.42767 L398.893852,199.334735 L399.064029,199.334735 C399.234206,199.334735 399.404383,199.334735 399.404383,199.167788 L399.744735,198.833894 C400.085088,198.833894 400.085088,198.333053 399.744735,198.166106 Z M389.363965,208.182927 L289.129972,166.112279 L288.959796,166.112279 C288.789619,166.112279 288.619443,166.112279 288.449267,166.279226 C285.726441,169.95206 281.642204,172.289318 276.87726,172.957107 C276.707083,172.957107 276.366731,173.124054 276.366731,173.457948 L265.645607,238.73423 C265.645607,238.901177 265.645607,239.068125 265.815784,239.235071 C269.559668,242.073171 271.771963,246.246846 272.282493,250.921362 C272.282493,251.255257 272.45267,251.422203 272.793023,251.422203 L333.375878,263.94323 L333.546055,263.94323 C333.716231,263.94323 333.886407,263.94323 333.886407,263.776283 L389.363965,209.184609 C389.534142,209.017662 389.534142,208.850715 389.534142,208.683768 C389.534142,208.516821 389.534142,208.349874 389.363965,208.182927 Z M256.62625,152.422624 L201.829399,129.383936 L201.659222,129.383936 C201.489045,129.383936 201.318868,129.550883 201.148692,129.71783 C197.404807,135.394029 191.108275,138.732969 184.301213,138.732969 C183.280153,138.732969 182.259094,138.566022 181.067858,138.399075 L180.897682,138.399075 C180.727505,138.399075 180.557328,138.566022 180.387152,138.732969 L135.290364,208.01598 C135.120187,208.182927 135.120187,208.516821 135.290364,208.683768 C135.46054,208.850715 135.630717,208.850715 135.800894,208.850715 L135.97107,208.850715 L256.285897,157.931875 C256.456073,157.764929 256.62625,157.597982 256.62625,157.431034 L256.62625,156.763246 L256.62625,155.928512 C256.62625,154.926829 256.796427,153.925147 256.966603,153.090412 C256.966603,152.756518 256.796427,152.589571 256.62625,152.422624 Z M322.654755,273.626156 L269.389491,262.7746 L269.219315,262.7746 C269.049139,262.7746 268.878962,262.941547 268.708786,262.941547 C266.666667,265.445753 264.114019,267.449117 261.05084,268.617746 C260.880664,268.617746 260.710487,268.95164 260.710487,269.118587 L247.947246,346.915896 C247.947246,347.249789 248.117422,347.416737 248.287599,347.583684 L248.627951,347.583684 C248.798128,347.583684 248.968305,347.583684 248.968305,347.416737 L322.824931,274.794786 C322.995107,274.627839 322.995107,274.460891 322.995107,274.293944 C322.995107,273.793103 322.824931,273.626156 322.654755,273.626156 Z M248.287599,268.283852 C243.182302,266.280488 239.438418,261.772918 238.077005,256.597561 C238.077005,256.430614 237.906828,256.263667 237.566475,256.09672 L138.864071,235.896131 C138.864071,235.896131 138.864071,235.896131 138.693895,235.896131 C138.523718,235.896131 138.353542,236.063078 138.183366,236.230025 C137.672835,237.06476 137.332482,237.732548 136.821953,238.400337 C136.651776,238.567284 136.651776,238.901177 136.821953,239.068125 L226.675175,367.951219 C226.845352,368.118167 226.845352,368.118167 227.015529,368.118167 C227.185705,368.118167 227.355882,368.118167 227.355882,367.951219 L232.801531,362.608915 C232.801531,362.441968 232.971708,362.441968 232.971708,362.275021 L248.287599,268.784693 C248.627951,268.784693 248.627951,268.450799 248.287599,268.283852 Z M140.90619,224.042893 C140.90619,224.376787 141.076366,224.543734 141.41672,224.543734 L239.268241,244.577376 L239.438418,244.577376 C239.608594,244.577376 239.778771,244.410429 239.948947,244.243482 C242.841949,239.235071 247.947246,235.896131 253.733248,235.562238 C254.073602,235.562238 254.243778,235.39529 254.243778,235.061396 L264.794725,170.786796 C264.794725,170.619848 264.794725,170.285955 264.454371,170.285955 C263.773665,169.785114 263.092959,169.284272 262.242076,168.449538 C262.071899,168.28259 261.901723,168.28259 261.901723,168.28259 L261.731547,168.28259 L140.736014,219.535324 C140.395661,219.702271 140.395661,219.869218 140.395661,220.203112 C140.565837,221.538688 140.90619,222.707317 140.90619,224.042893 Z M99.89364,240.236754 C99.3831096,239.568966 98.87258,238.901177 98.3620504,238.066442 C98.1918744,237.899496 98.0216976,237.732548 97.8515208,237.732548 L97.681344,237.732548 L55.477558,255.595879 C55.3073815,255.595879 55.1372049,255.762826 55.1372049,255.929773 C55.1372049,256.09672 55.1372049,256.263667 55.3073815,256.430614 L75.898745,276.631203 C76.0689216,276.79815 76.2390981,276.79815 76.2390981,276.79815 C76.4092747,276.79815 76.5794512,276.631203 76.7496278,276.464256 L100.063816,240.570647 C100.063816,240.570647 100.063816,240.403701 99.89364,240.236754 Z M127.802595,246.747687 C127.632418,246.58074 127.462242,246.413793 127.292066,246.413793 L127.121889,246.413793 C124.058711,247.749369 120.995533,248.417157 117.762178,248.417157 C115.20953,248.417157 112.827058,248.083263 110.27441,247.248528 L110.104233,247.248528 C109.934057,247.248528 109.76388,247.415475 109.593703,247.582422 L85.0882792,285.312447 L84.9181024,285.479395 C84.7479256,285.646342 84.7479256,285.980235 84.9181024,286.147183 L197.574984,396.833053 C197.745161,397 197.915337,397 197.915337,397 C198.085514,397 198.25569,397 198.25569,396.833053 L217.996171,377.300253 C218.166347,377.133305 218.166347,376.799411 217.996171,376.632464 L127.802595,246.747687 Z M111.976175,203.174516 C112.146352,203.341463 112.316528,203.508411 112.486705,203.508411 L112.656882,203.508411 C114.358647,203.174516 116.23059,202.840623 117.932355,202.840623 C119.804297,202.840623 121.846416,203.174516 123.718358,203.675357 L123.888534,203.675357 C124.058711,203.675357 124.228887,203.508411 124.399064,203.341463 L170.006382,133.223717 C170.176558,133.05677 170.176558,132.722876 170.006382,132.555929 C166.432674,128.883095 164.390555,124.041631 164.390555,118.866274 C164.390555,117.363751 164.560732,115.861228 164.901085,114.358704 C164.901085,114.024811 164.730908,113.857864 164.560732,113.690917 C158.774729,111.186712 107.551585,89.8174936 107.551585,89.6505464 L107.381408,89.6505464 C107.211232,89.6505464 107.041055,89.6505464 107.041055,89.8174936 L63.6460328,132.555929 C63.4758563,132.722876 63.4758563,133.05677 63.6460328,133.223717 L111.976175,203.174516 Z M116.911295,80.9693021 C116.911295,80.9693021 168.644969,102.672414 170.857265,103.674096 L171.027441,103.674096 C171.197618,103.674096 171.197618,103.674096 171.367794,103.507149 C174.941502,100.66905 179.536269,98.9995795 184.131036,98.9995795 C186.343331,98.9995795 188.555626,99.3334732 190.767922,100.001261 L190.938098,100.001261 C191.108275,100.001261 191.278451,99.8343149 191.448628,99.6673677 L233.482238,35.058873 C233.652415,34.891926 233.652415,34.5580319 233.482238,34.3910849 L198.596043,0.166947014 C198.425867,0 198.425867,0 198.25569,0 C198.085514,0 197.915337,0 197.915337,0.166947014 L116.911295,79.9676195 C116.741119,80.1345667 116.741119,80.301514 116.741119,80.4684612 C116.570942,80.8023549 116.741119,80.8023549 116.911295,80.9693021 Z M96.8304616,215.361648 C97.0006384,215.361648 97.1708144,215.194701 97.3409912,215.027755 C98.3620504,213.02439 99.89364,211.187973 101.425229,209.518503 C101.595406,209.351556 101.595406,209.017662 101.425229,208.850715 C100.914699,208.182927 54.7968518,142.07191 54.7968518,141.904962 C54.6266752,141.738015 54.6266752,141.738015 54.2863221,141.571068 C54.1161455,141.571068 53.945969,141.571068 53.945969,141.738015 L0.170176558,194.493272 C0,194.660218 0,194.827166 0,194.994113 C0,195.16106 0.170176558,195.328007 0.510529675,195.328007 L96.8304616,215.361648 C96.6602848,215.361648 96.6602848,215.361648 96.8304616,215.361648 Z M92.4058712,226.880992 C92.4058712,226.547099 92.2356944,226.380152 91.8953416,226.380152 L8.33865136,209.184609 C8.33865136,209.184609 8.33865136,209.184609 8.1684748,209.184609 C7.99829824,209.184609 7.82812168,209.351556 7.65794512,209.518503 C7.48776856,209.68545 7.65794512,210.019344 7.82812168,210.186291 L45.0967879,246.914634 C45.2669645,247.081581 45.4371411,247.081581 45.4371411,247.081581 L45.6073176,247.081581 L91.8953416,227.548781 C92.2356944,227.214886 92.4058712,227.04794 92.4058712,226.880992 Z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import ContentEditable from './components/ContentEditable'
  3 | import AppHeader from './components/AppHeader'
  4 | import SettingsMenu from './components/SettingsMenu'
  5 | import SettingsIcon from './components/SettingsIcon'
  6 | import api from './utils/api'
  7 | import sortByDate from './utils/sortByDate'
  8 | import isLocalHost from './utils/isLocalHost'
  9 | import './App.css'
 10 | 
 11 | export default class App extends Component {
 12 |   state = {
 13 |     todos: [],
 14 |     showMenu: false
 15 |   }
 16 |   componentDidMount() {
 17 |     // Fetch all todos
 18 |     api.readAll().then((todos) => {
 19 |       if (todos.message === 'unauthorized') {
 20 |         if (isLocalHost()) {
 21 |           alert('FaunaDB key is not unauthorized. Make sure you set it in terminal session where you ran `npm start`. Visit http://bit.ly/set-fauna-key for more info')
 22 |         } else {
 23 |           alert('FaunaDB key is not unauthorized. Verify the key `FAUNADB_SERVER_SECRET` set in Netlify enviroment variables is correct')
 24 |         }
 25 |         return false
 26 |       }
 27 | 
 28 |       console.log('all todos', todos)
 29 |       this.setState({
 30 |         todos: todos
 31 |       })
 32 |     })
 33 |   }
 34 |   saveTodo = (e) => {
 35 |     e.preventDefault()
 36 |     const { todos } = this.state
 37 |     const todoValue = this.inputElement.value
 38 | 
 39 |     if (!todoValue) {
 40 |       alert('Please add Todo title')
 41 |       this.inputElement.focus()
 42 |       return false
 43 |     }
 44 | 
 45 |     // reset input to empty
 46 |     this.inputElement.value = ''
 47 | 
 48 |     const todoInfo = {
 49 |       title: todoValue,
 50 |       completed: false,
 51 |     }
 52 |     // Optimistically add todo to UI
 53 |     const newTodoArray = [{
 54 |       data: todoInfo,
 55 |       ts: new Date().getTime() * 10000
 56 |     }]
 57 | 
 58 |     const optimisticTodoState = newTodoArray.concat(todos)
 59 | 
 60 |     this.setState({
 61 |       todos: optimisticTodoState
 62 |     })
 63 |     // Make API request to create new todo
 64 |     api.create(todoInfo).then((response) => {
 65 |       console.log(response)
 66 |       // remove temporaryValue from state and persist API response
 67 |       const persistedState = removeOptimisticTodo(todos).concat(response)
 68 |       // Set persisted value to state
 69 |       this.setState({
 70 |         todos: persistedState
 71 |       })
 72 |     }).catch((e) => {
 73 |       console.log('An API error occurred', e)
 74 |       const revertedState = removeOptimisticTodo(todos)
 75 |       // Reset to original state
 76 |       this.setState({
 77 |         todos: revertedState
 78 |       })
 79 |     })
 80 |   }
 81 |   deleteTodo = (e) => {
 82 |     const { todos } = this.state
 83 |     const todoId = e.target.dataset.id
 84 | 
 85 |     // Optimistically remove todo from UI
 86 |     const filteredTodos = todos.reduce((acc, current) => {
 87 |       const currentId = getTodoId(current)
 88 |       if (currentId === todoId) {
 89 |         // save item being removed for rollback
 90 |         acc.rollbackTodo = current
 91 |         return acc
 92 |       }
 93 |       // filter deleted todo out of the todos list
 94 |       acc.optimisticState = acc.optimisticState.concat(current)
 95 |       return acc
 96 |     }, {
 97 |       rollbackTodo: {},
 98 |       optimisticState: []
 99 |     })
100 | 
101 |     this.setState({
102 |       todos: filteredTodos.optimisticState
103 |     })
104 | 
105 |     // Make API request to delete todo
106 |     api.delete(todoId).then(() => {
107 |       console.log(`deleted todo id ${todoId}`)
108 |     }).catch((e) => {
109 |       console.log(`There was an error removing ${todoId}`, e)
110 |       // Add item removed back to list
111 |       this.setState({
112 |         todos: filteredTodos.optimisticState.concat(filteredTodos.rollbackTodo)
113 |       })
114 |     })
115 |   }
116 |   handleTodoCheckbox = (event) => {
117 |     const { todos } = this.state
118 |     const { target } = event
119 |     const todoCompleted = target.checked
120 |     const todoId = target.dataset.id
121 | 
122 |     const updatedTodos = todos.map((todo, i) => {
123 |       const { data } = todo
124 |       const id = getTodoId(todo)
125 |       if (id === todoId && data.completed !== todoCompleted) {
126 |         data.completed = todoCompleted
127 |       }
128 |       return todo
129 |     })
130 | 
131 |     this.setState({
132 |       todos: updatedTodos
133 |     }, () => {
134 |       api.update(todoId, {
135 |         completed: todoCompleted
136 |       }).then(() => {
137 |         console.log(`update todo ${todoId}`, todoCompleted)
138 |       }).catch((e) => {
139 |         console.log('An API error occurred', e)
140 |       })
141 |     })
142 |   }
143 |   updateTodoTitle = (event, currentValue) => {
144 |     let isDifferent = false
145 |     const todoId = event.target.dataset.key
146 | 
147 |     const updatedTodos = this.state.todos.map((todo, i) => {
148 |       const id = getTodoId(todo)
149 |       if (id === todoId && todo.data.title !== currentValue) {
150 |         todo.data.title = currentValue
151 |         isDifferent = true
152 |       }
153 |       return todo
154 |     })
155 | 
156 |     // only set state if input different
157 |     if (isDifferent) {
158 |       this.setState({
159 |         todos: updatedTodos
160 |       }, () => {
161 |         api.update(todoId, {
162 |           title: currentValue
163 |         }).then(() => {
164 |           console.log(`update todo ${todoId}`, currentValue)
165 |         }).catch((e) => {
166 |           console.log('An API error occurred', e)
167 |         })
168 |       })
169 |     }
170 |   }
171 |   clearCompleted = () => {
172 |     const { todos } = this.state
173 | 
174 |     // Optimistically remove todos from UI
175 |     const data = todos.reduce((acc, current) => {
176 |       if (current.data.completed) {
177 |         // save item being removed for rollback
178 |         acc.completedTodoIds = acc.completedTodoIds.concat(getTodoId(current))
179 |         return acc
180 |       }
181 |       // filter deleted todo out of the todos list
182 |       acc.optimisticState = acc.optimisticState.concat(current)
183 |       return acc
184 |     }, {
185 |       completedTodoIds: [],
186 |       optimisticState: []
187 |     })
188 | 
189 |     // only set state if completed todos exist
190 |     if (!data.completedTodoIds.length) {
191 |       alert('Please check off some todos to batch remove them')
192 |       this.closeModal()
193 |       return false
194 |     }
195 | 
196 |     this.setState({
197 |       todos: data.optimisticState
198 |     }, () => {
199 |       setTimeout(() => {
200 |         this.closeModal()
201 |       }, 600)
202 | 
203 |       api.batchDelete(data.completedTodoIds).then(() => {
204 |         console.log(`Batch removal complete`, data.completedTodoIds)
205 |       }).catch((e) => {
206 |         console.log('An API error occurred', e)
207 |       })
208 |     })
209 | 
210 |   }
211 |   closeModal = (e) => {
212 |     this.setState({
213 |       showMenu: false
214 |     })
215 |   }
216 |   openModal = () => {
217 |     this.setState({
218 |       showMenu: true
219 |     })
220 |   }
221 |   renderTodos() {
222 |     const { todos } = this.state
223 | 
224 |     if (!todos || !todos.length) {
225 |       // Loading State here
226 |       return null
227 |     }
228 | 
229 |     const timeStampKey = 'ts'
230 |     const orderBy = 'desc' // or `asc`
231 |     const sortOrder = sortByDate(timeStampKey, orderBy)
232 |     const todosByDate = todos.sort(sortOrder)
233 | 
234 |     return todosByDate.map((todo, i) => {
235 |       const { data, ref } = todo
236 |       const id = getTodoId(todo)
237 |       // only show delete button after create API response returns
238 |       let deleteButton
239 |       if (ref) {
240 |         deleteButton = (
241 |           <button data-id={id} onClick={this.deleteTodo}>
242 |             delete
243 |           </button>
244 |         )
245 |       }
246 |       const boxIcon = (data.completed) ? '#todo__box__done' : '#todo__box'
247 |       return (
248 |         <div key={i} className='todo-item'>
249 |           <label className="todo">
250 |             <input
251 |               data-id={id}
252 |               className="todo__state"
253 |               type="checkbox"
254 |               onChange={this.handleTodoCheckbox}
255 |               checked={data.completed}
256 |             />
257 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" className="todo__icon">
258 |               <use xlinkHref={`${boxIcon}`} className="todo__box"></use>
259 |               <use xlinkHref="#todo__check" className="todo__check"></use>
260 |             </svg>
261 |             <div className='todo-list-title'>
262 |               <ContentEditable
263 |                 tagName='span'
264 |                 editKey={id}
265 |                 onBlur={this.updateTodoTitle} // save on enter/blur
266 |                 html={data.title}
267 |                 // onChange={this.handleDataChange} // save on change
268 |               />
269 |             </div>
270 |           </label>
271 |           {deleteButton}
272 |         </div>
273 |       )
274 |     })
275 |   }
276 |   render() {
277 |     return (
278 |       <div className='app'>
279 | 
280 |         <AppHeader />
281 | 
282 |         <div className='todo-list'>
283 |           <h2>
284 |             Create todo
285 |             <SettingsIcon onClick={this.openModal} className='mobile-toggle' />
286 |           </h2>
287 |           <form className='todo-create-wrapper' onSubmit={this.saveTodo}>
288 |             <input
289 |               className='todo-create-input'
290 |               placeholder='Add a todo item'
291 |               name='name'
292 |               ref={el => this.inputElement = el}
293 |               autoComplete='off'
294 |               style={{marginRight: 20}}
295 |             />
296 |             <div className='todo-actions'>
297 |               <button className='todo-create-button'>
298 |                 Create todo
299 |               </button>
300 |               <SettingsIcon onClick={this.openModal}  className='desktop-toggle' />
301 |             </div>
302 |           </form>
303 | 
304 |           {this.renderTodos()}
305 |         </div>
306 |         <SettingsMenu
307 |           showMenu={this.state.showMenu}
308 |           handleModalClose={this.closeModal}
309 |           handleClearCompleted={this.clearCompleted}
310 |         />
311 |       </div>
312 |     )
313 |   }
314 | }
315 | 
316 | function removeOptimisticTodo(todos) {
317 |   // return all 'real' todos
318 |   return todos.filter((todo) => {
319 |     return todo.ref
320 |   })
321 | }
322 | 
323 | function getTodoId(todo) {
324 |   if (!todo.ref) {
325 |     return null
326 |   }
327 |   return todo.ref['@ref'].split('/').pop()
328 | }
329 | 


--------------------------------------------------------------------------------
/src/assets/deploy-to-netlify.svg:
--------------------------------------------------------------------------------
 1 | <svg width="146px" height="32px" viewBox="0 0 146 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |     <defs>
 3 |         <linearGradient x1="15.9624201%" y1="-23.9258025%" x2="136.692419%" y2="197.099803%" id="linearGradient-1">
 4 |             <stop stop-color="#20C6B7" offset="0%"></stop>
 5 |             <stop stop-color="#4D9ABF" offset="100%"></stop>
 6 |         </linearGradient>
 7 |     </defs>
 8 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 9 |         <g id="Artboard">
10 |             <rect id="Background" fill="url(#linearGradient-1)" x="0" y="0" width="146" height="32" rx="4"></rect>
11 |             <path d="M72.3066406,18.2587891 L72.5458984,19.1884766 L72.5869141,19.1884766 L74.4052734,13.6035156 L75.9023438,13.6035156 L72.7919922,22.1347656 C72.6051423,22.6315129 72.3374041,23.0644513 71.9887695,23.4335938 C71.640135,23.8027362 71.1695993,23.9873047 70.5771484,23.9873047 C70.4677729,23.9873047 70.3287769,23.9747723 70.1601562,23.949707 C69.9915356,23.9246418 69.8616541,23.9007163 69.7705078,23.8779297 L69.9072266,22.8183594 C69.8798827,22.8138021 69.9607738,22.8183593 70.1499023,22.8320312 C70.3390309,22.8457032 70.4586586,22.8525391 70.5087891,22.8525391 C70.7958999,22.8525391 71.030598,22.7249362 71.2128906,22.4697266 C71.3951832,22.214517 71.5478509,21.9319677 71.6708984,21.6220703 L71.9921875,20.8496094 L69.2441406,13.6035156 L70.7480469,13.6035156 L72.3066406,18.2587891 Z M61.7724609,17.2333984 C61.7724609,16.139643 62.0686819,15.2384476 62.6611328,14.5297852 C63.2535837,13.8211228 64.0579376,13.4667969 65.0742188,13.4667969 C66.0996145,13.4667969 66.909665,13.8199834 67.5043945,14.5263672 C68.0991241,15.2327509 68.3964844,16.1350857 68.3964844,17.2333984 L68.3964844,17.3837891 C68.3964844,18.4866592 68.1002634,19.3889939 67.5078125,20.0908203 C66.9153616,20.7926467 66.1087291,21.1435547 65.0878906,21.1435547 C64.0670522,21.1435547 63.2592803,20.7915074 62.6645508,20.0874023 C62.0698212,19.3832973 61.7724609,18.4821018 61.7724609,17.3837891 L61.7724609,17.2333984 Z M63.1191406,17.3837891 C63.1191406,18.1676471 63.2843408,18.8147761 63.6147461,19.3251953 C63.9451514,19.8356145 64.4361947,20.0908203 65.0878906,20.0908203 C65.730472,20.0908203 66.2180973,19.8356145 66.5507812,19.3251953 C66.8834652,18.8147761 67.0498047,18.1676471 67.0498047,17.3837891 L67.0498047,17.2333984 C67.0498047,16.458655 66.8823259,15.8138047 66.5473633,15.2988281 C66.2124007,14.7838516 65.7213574,14.5263672 65.0742188,14.5263672 C64.4316374,14.5263672 63.9451514,14.7838516 63.6147461,15.2988281 C63.2843408,15.8138047 63.1191406,16.458655 63.1191406,17.2333984 L63.1191406,17.3837891 Z M60.015625,21 L58.6689453,21 L58.6689453,10.3359375 L60.015625,10.3359375 L60.015625,21 Z M56.9052734,17.5820312 C56.9052734,18.6484428 56.6500677,19.508623 56.1396484,20.1625977 C55.6292292,20.8165723 54.9251347,21.1435547 54.0273438,21.1435547 C53.5716123,21.1435547 53.171714,21.0672208 52.8276367,20.9145508 C52.4835595,20.7618807 52.1907564,20.5328791 51.9492188,20.2275391 L51.9492188,23.84375 L50.6025391,23.84375 L50.6025391,13.6035156 L51.6347656,13.6035156 L51.8466797,14.5605469 C52.0882174,14.2050763 52.3889956,13.9339202 52.7490234,13.7470703 C53.1090513,13.5602204 53.5283179,13.4667969 54.0068359,13.4667969 C54.9228561,13.4667969 55.6349258,13.8302373 56.1430664,14.5571289 C56.651207,15.2840206 56.9052734,16.2444602 56.9052734,17.4384766 L56.9052734,17.5820312 Z M55.5585938,17.4384766 C55.5585938,16.5999307 55.3933936,15.9106472 55.0629883,15.3706055 C54.732583,14.8305637 54.246097,14.5605469 53.6035156,14.5605469 C53.2161439,14.5605469 52.8857436,14.6482739 52.6123047,14.8237305 C52.3388658,14.9991871 52.1178394,15.2395818 51.9492188,15.5449219 L51.9492188,19.1201172 C52.1178394,19.4254573 52.3388658,19.6635734 52.6123047,19.8344727 C52.8857436,20.0053719 53.2207011,20.0908203 53.6171875,20.0908203 C54.2552115,20.0908203 54.7382796,19.8572615 55.0664062,19.3901367 C55.3945329,18.923012 55.5585938,18.3203162 55.5585938,17.5820312 L55.5585938,17.4384766 Z M46.2685547,21.1435547 C45.2386016,21.1435547 44.4194366,20.8006219 43.8110352,20.1147461 C43.2026337,19.4288703 42.8984375,18.539068 42.8984375,17.4453125 L42.8984375,17.1445312 C42.8984375,16.0917916 43.2117482,15.215661 43.8383789,14.5161133 C44.4650096,13.8165655 45.2067014,13.4667969 46.0634766,13.4667969 C47.0615284,13.4667969 47.8157527,13.7675751 48.3261719,14.3691406 C48.8365911,14.9707061 49.0917969,15.7727814 49.0917969,16.7753906 L49.0917969,17.6162109 L44.2929688,17.6162109 L44.2724609,17.6503906 C44.2861329,18.3613317 44.4661441,18.9457985 44.8125,19.4038086 C45.1588559,19.8618187 45.6442026,20.0908203 46.2685547,20.0908203 C46.7242861,20.0908203 47.1241845,20.0258796 47.4682617,19.8959961 C47.812339,19.7661126 48.1096993,19.5872407 48.3603516,19.359375 L48.8867188,20.234375 C48.6223945,20.4941419 48.2737652,20.7106111 47.8408203,20.8837891 C47.4078754,21.056967 46.8837921,21.1435547 46.2685547,21.1435547 Z M46.0634766,14.5263672 C45.6123024,14.5263672 45.2272151,14.7166322 44.9082031,15.097168 C44.5891911,15.4777037 44.3932295,15.9550753 44.3203125,16.5292969 L44.3339844,16.5634766 L47.7451172,16.5634766 L47.7451172,16.3857422 C47.7451172,15.8570937 47.6038426,15.4150408 47.3212891,15.0595703 C47.0387356,14.7040998 46.6194689,14.5263672 46.0634766,14.5263672 Z M34.2304688,21 L34.2304688,11.046875 L37.2861328,11.046875 C38.5895247,11.046875 39.6354127,11.4467733 40.4238281,12.246582 C41.2122435,13.0463907 41.6064453,14.0797463 41.6064453,15.3466797 L41.6064453,16.7070312 C41.6064453,17.978522 41.2122435,19.0118775 40.4238281,19.8071289 C39.6354127,20.6023803 38.5895247,21 37.2861328,21 L34.2304688,21 Z M35.5771484,12.1064453 L35.5771484,19.9472656 L37.2861328,19.9472656 C38.2067103,19.9472656 38.9324518,19.6442088 39.4633789,19.0380859 C39.994306,18.4319631 40.2597656,17.6549527 40.2597656,16.7070312 L40.2597656,15.3330078 C40.2597656,14.394201 39.994306,13.6217478 39.4633789,13.015625 C38.9324518,12.4095022 38.2067103,12.1064453 37.2861328,12.1064453 L35.5771484,12.1064453 Z" id="Combined-Shape" fill="#FFFFFF"></path>
12 |             <path d="M131.191406,18.2587891 L131.430664,19.1884766 L131.47168,19.1884766 L133.290039,13.6035156 L134.787109,13.6035156 L131.676758,22.1347656 C131.489908,22.6315129 131.22217,23.0644513 130.873535,23.4335938 C130.524901,23.8027362 130.054365,23.9873047 129.461914,23.9873047 C129.352539,23.9873047 129.213543,23.9747723 129.044922,23.949707 C128.876301,23.9246418 128.74642,23.9007163 128.655273,23.8779297 L128.791992,22.8183594 C128.764648,22.8138021 128.845539,22.8183593 129.034668,22.8320312 C129.223797,22.8457032 129.343424,22.8525391 129.393555,22.8525391 C129.680665,22.8525391 129.915364,22.7249362 130.097656,22.4697266 C130.279949,22.214517 130.432617,21.9319677 130.555664,21.6220703 L130.876953,20.8496094 L128.128906,13.6035156 L129.632812,13.6035156 L131.191406,18.2587891 Z M124.65625,21 L124.65625,14.6015625 L123.500977,14.6015625 L123.500977,13.6035156 L124.65625,13.6035156 L124.65625,12.6669922 C124.65625,11.8785768 124.862465,11.2690451 125.274902,10.8383789 C125.687339,10.4077127 126.262692,10.1923828 127.000977,10.1923828 C127.155925,10.1923828 127.312011,10.2049152 127.469238,10.2299805 C127.626466,10.2550457 127.80078,10.2903644 127.992188,10.3359375 L127.828125,11.3613281 C127.746093,11.3430989 127.646973,11.3271485 127.530762,11.3134766 C127.41455,11.2998046 127.292644,11.2929688 127.165039,11.2929688 C126.77311,11.2929688 126.481446,11.4103178 126.290039,11.6450195 C126.098632,11.8797212 126.00293,12.2203754 126.00293,12.6669922 L126.00293,13.6035156 L127.541016,13.6035156 L127.541016,14.6015625 L126.00293,14.6015625 L126.00293,21 L124.65625,21 Z M122.024414,11.7099609 L120.677734,11.7099609 L120.677734,10.3359375 L122.024414,10.3359375 L122.024414,11.7099609 Z M122.024414,21 L120.677734,21 L120.677734,13.6035156 L122.024414,13.6035156 L122.024414,21 Z M118.49707,21 L117.150391,21 L117.150391,10.3359375 L118.49707,10.3359375 L118.49707,21 Z M113.978516,11.8193359 L113.978516,13.6035156 L115.379883,13.6035156 L115.379883,14.6015625 L113.978516,14.6015625 L113.978516,19.0927734 C113.978516,19.4391293 114.050292,19.682942 114.193848,19.8242188 C114.337403,19.9654955 114.527668,20.0361328 114.764648,20.0361328 C114.842123,20.0361328 114.927571,20.0270183 115.020996,20.0087891 C115.114421,19.9905598 115.197591,19.9677736 115.270508,19.9404297 L115.448242,20.8632812 C115.347981,20.9453129 115.20101,21.0125323 115.007324,21.0649414 C114.813638,21.1173505 114.618816,21.1435547 114.422852,21.1435547 C113.875974,21.1435547 113.440757,20.9783545 113.117188,20.6479492 C112.793618,20.3175439 112.631836,19.7991572 112.631836,19.0927734 L112.631836,14.6015625 L111.456055,14.6015625 L111.456055,13.6035156 L112.631836,13.6035156 L112.631836,11.8193359 L113.978516,11.8193359 Z M105.409668,20.1147461 C104.801266,19.4288703 104.49707,18.539068 104.49707,17.4453125 L104.49707,17.1445312 C104.49707,16.0917916 104.810381,15.215661 105.437012,14.5161133 C106.063642,13.8165655 106.805334,13.4667969 107.662109,13.4667969 C108.660161,13.4667969 109.414385,13.7675751 109.924805,14.3691406 C110.435224,14.9707061 110.69043,15.7727814 110.69043,16.7753906 L110.69043,17.6162109 L105.891602,17.6162109 L105.871094,17.6503906 C105.884766,18.3613317 106.064777,18.9457985 106.411133,19.4038086 C106.757489,19.8618187 107.242835,20.0908203 107.867188,20.0908203 C108.322919,20.0908203 108.722817,20.0258796 109.066895,19.8959961 C109.410972,19.7661126 109.708332,19.5872407 109.958984,19.359375 L110.485352,20.234375 C110.221027,20.4941419 109.872398,20.7106111 109.439453,20.8837891 C109.006508,21.056967 108.482425,21.1435547 107.867188,21.1435547 C106.837234,21.1435547 106.018069,20.8006219 105.409668,20.1147461 Z M106.506836,15.097168 C106.187824,15.4777037 105.991862,15.9550753 105.918945,16.5292969 L105.932617,16.5634766 L109.34375,16.5634766 L109.34375,16.3857422 C109.34375,15.8570937 109.202475,15.4150408 108.919922,15.0595703 C108.637368,14.7040998 108.218102,14.5263672 107.662109,14.5263672 C107.210935,14.5263672 106.825848,14.7166322 106.506836,15.097168 Z M98.0439453,13.6035156 L98.1396484,14.7041016 C98.3857434,14.3121725 98.6944968,14.0079763 99.065918,13.7915039 C99.4373391,13.5750315 99.8600237,13.4667969 100.333984,13.4667969 C101.131514,13.4667969 101.749021,13.7003557 102.186523,14.1674805 C102.624026,14.6346052 102.842773,15.3557894 102.842773,16.3310547 L102.842773,21 L101.496094,21 L101.496094,16.3583984 C101.496094,15.7067025 101.367352,15.244142 101.109863,14.9707031 C100.852375,14.6972643 100.459313,14.5605469 99.9306641,14.5605469 C99.5432923,14.5605469 99.2003596,14.6539704 98.9018555,14.8408203 C98.6033514,15.0276702 98.3652353,15.282876 98.1875,15.6064453 L98.1875,21 L96.8408203,21 L96.8408203,13.6035156 L98.0439453,13.6035156 Z M85.0898438,17.2333984 C85.0898438,16.139643 85.3860647,15.2384476 85.9785156,14.5297852 C86.5709665,13.8211228 87.3753204,13.4667969 88.3916016,13.4667969 C89.4169973,13.4667969 90.2270478,13.8199834 90.8217773,14.5263672 C91.4165069,15.2327509 91.7138672,16.1350857 91.7138672,17.2333984 L91.7138672,17.3837891 C91.7138672,18.4866592 91.4176462,19.3889939 90.8251953,20.0908203 C90.2327444,20.7926467 89.4261119,21.1435547 88.4052734,21.1435547 C87.384435,21.1435547 86.5766631,20.7915074 85.9819336,20.0874023 C85.3872041,19.3832973 85.0898438,18.4821018 85.0898438,17.3837891 L85.0898438,17.2333984 Z M86.4365234,17.3837891 C86.4365234,18.1676471 86.6017236,18.8147761 86.9321289,19.3251953 C87.2625342,19.8356145 87.7535775,20.0908203 88.4052734,20.0908203 C89.0478548,20.0908203 89.5354801,19.8356145 89.8681641,19.3251953 C90.200848,18.8147761 90.3671875,18.1676471 90.3671875,17.3837891 L90.3671875,17.2333984 C90.3671875,16.458655 90.1997087,15.8138047 89.8647461,15.2988281 C89.5297835,14.7838516 89.0387402,14.5263672 88.3916016,14.5263672 C87.7490202,14.5263672 87.2625342,14.7838516 86.9321289,15.2988281 C86.6017236,15.8138047 86.4365234,16.458655 86.4365234,17.2333984 L86.4365234,17.3837891 Z M82.3417969,11.8193359 L82.3417969,13.6035156 L83.7431641,13.6035156 L83.7431641,14.6015625 L82.3417969,14.6015625 L82.3417969,19.0927734 C82.3417969,19.4391293 82.4135735,19.682942 82.5571289,19.8242188 C82.7006843,19.9654955 82.8909493,20.0361328 83.1279297,20.0361328 C83.205404,20.0361328 83.2908524,20.0270183 83.3842773,20.0087891 C83.4777023,19.9905598 83.560872,19.9677736 83.6337891,19.9404297 L83.8115234,20.8632812 C83.7112625,20.9453129 83.5642913,21.0125323 83.3706055,21.0649414 C83.1769196,21.1173505 82.9820973,21.1435547 82.7861328,21.1435547 C82.2392551,21.1435547 81.8040381,20.9783545 81.4804688,20.6479492 C81.1568994,20.3175439 80.9951172,19.7991572 80.9951172,19.0927734 L80.9951172,14.6015625 L79.8193359,14.6015625 L79.8193359,13.6035156 L80.9951172,13.6035156 L80.9951172,11.8193359 L82.3417969,11.8193359 Z" id="Combined-Shape" fill="#FFFFFF" opacity="0.699999988"></path>
13 |             <path d="M21.5836198,13.3658537 C21.6746954,13.41127 21.7505918,13.4718251 21.8113089,13.5399495 C21.8188985,13.5475189 21.8188985,13.5475189 21.8264882,13.5475189 L21.8340778,13.5475189 L23.5796945,12.7981497 C23.5872842,12.7905803 23.5948738,12.7830109 23.5948738,12.7754415 C23.5948738,12.7678722 23.5948738,12.7603028 23.5872842,12.7527334 L21.955512,11.1253154 C21.9479224,11.117746 21.9403327,11.117746 21.9403327,11.117746 L21.9327431,11.117746 C21.9251535,11.117746 21.9175638,11.1253154 21.9175638,11.1404542 L21.5608508,13.3431455 C21.5684405,13.3507149 21.5760301,13.3658537 21.5836198,13.3658537 Z M17.9633624,11.8898234 C18.0468485,12.0185029 18.0999759,12.1698907 18.1151552,12.3212784 C18.1151552,12.3288478 18.1227448,12.3364172 18.1303345,12.3439865 L20.7259907,13.4566863 L20.7335803,13.4566863 C20.7411699,13.4566863 20.7487596,13.4566863 20.7487596,13.4491169 C20.824656,13.3885618 20.9157316,13.3431455 21.0143969,13.312868 C21.0219865,13.312868 21.0295762,13.3052986 21.0295762,13.2901598 L21.4545959,10.6333053 C21.4545959,10.6257359 21.4545959,10.6181665 21.4470063,10.6105971 L19.8228237,8.98317914 C19.8152341,8.97560976 19.8152341,8.97560976 19.8076445,8.97560976 C19.8000548,8.97560976 19.7924652,8.98317914 19.7924652,8.99074853 L17.9633624,11.8519765 C17.9557728,11.8671152 17.9557728,11.882254 17.9633624,11.8898234 Z M26.8280596,15.9848612 L24.0426625,13.1993272 C24.0350728,13.1917578 24.0274832,13.1917578 24.0274832,13.1917578 L24.0198935,13.1917578 L22.1300737,14.0016821 C22.1224841,14.0092515 22.1148944,14.0168209 22.1148944,14.0243902 C22.1148944,14.0319596 22.1224841,14.0470984 22.1300737,14.0470984 L26.7901114,16.0378469 L26.797701,16.0378469 C26.8052907,16.0378469 26.8128803,16.0378469 26.8128803,16.0302775 L26.8280596,16.0151388 C26.8432389,16.0151388 26.8432389,15.9924306 26.8280596,15.9848612 Z M26.3650917,16.4390244 L21.8947949,14.5315391 L21.8872053,14.5315391 C21.8796156,14.5315391 21.872026,14.5315391 21.8644364,14.5391085 C21.7430022,14.705635 21.5608508,14.8116064 21.348341,14.8418839 C21.3407513,14.8418839 21.3255721,14.8494533 21.3255721,14.8645921 L20.8474249,17.824222 C20.8474249,17.8317914 20.8474249,17.8393608 20.8550145,17.8469302 C21.0219865,17.9756098 21.1206518,18.1648444 21.1434208,18.3767872 C21.1434208,18.391926 21.1510104,18.3994954 21.1661897,18.3994954 L23.8681008,18.9671993 L23.8756904,18.9671993 C23.8832801,18.9671993 23.8908697,18.9671993 23.8908697,18.9596299 L26.3650917,16.4844407 C26.3726813,16.4768713 26.3726813,16.4693019 26.3726813,16.4617325 C26.3726813,16.4541632 26.3726813,16.4465938 26.3650917,16.4390244 Z M20.4451741,13.9108495 L18.0013106,12.8662742 L17.993721,12.8662742 C17.9861314,12.8662742 17.9785417,12.8738436 17.9709521,12.881413 C17.80398,13.1387721 17.5231634,13.2901598 17.2195779,13.2901598 C17.1740401,13.2901598 17.1285023,13.2825904 17.0753748,13.275021 L17.0677852,13.275021 C17.0601955,13.275021 17.0526059,13.2825904 17.0450162,13.2901598 L15.0337622,16.431455 C15.0261725,16.4390244 15.0261725,16.4541632 15.0337622,16.4617325 C15.0413518,16.4693019 15.0489415,16.4693019 15.0565311,16.4693019 L15.0641207,16.4693019 L20.4299948,14.1606392 C20.4375844,14.1530698 20.4451741,14.1455004 20.4451741,14.137931 L20.4451741,14.1076535 L20.4451741,14.0698066 C20.4451741,14.0243902 20.4527637,13.9789739 20.4603533,13.941127 C20.4603533,13.9259882 20.4527637,13.9184188 20.4451741,13.9108495 Z M23.3899536,19.4062237 L21.0143969,18.9142136 L21.0068073,18.9142136 C20.9992176,18.9142136 20.991628,18.921783 20.9840384,18.921783 C20.8929627,19.0353238 20.7791181,19.1261564 20.6425046,19.1791421 C20.634915,19.1791421 20.6273254,19.1942809 20.6273254,19.2018503 L20.0581025,22.7291842 C20.0581025,22.744323 20.0656922,22.7518923 20.0732818,22.7594617 L20.0884611,22.7594617 C20.0960507,22.7594617 20.1036404,22.7594617 20.1036404,22.7518923 L23.3975432,19.4592094 C23.4051329,19.45164 23.4051329,19.4440706 23.4051329,19.4365013 C23.4051329,19.4137931 23.3975432,19.4062237 23.3899536,19.4062237 Z M20.0732818,19.1640034 C19.8455927,19.0731707 19.6786206,18.8687973 19.6179035,18.6341463 C19.6179035,18.626577 19.6103139,18.6190076 19.5951346,18.6114382 L15.1931446,17.6955425 C15.1931446,17.6955425 15.1931446,17.6955425 15.1855549,17.6955425 C15.1779653,17.6955425 15.1703757,17.7031119 15.162786,17.7106812 C15.1400171,17.7485282 15.1248378,17.7788057 15.1020689,17.8090833 C15.0944793,17.8166526 15.0944793,17.8317914 15.1020689,17.8393608 L19.1093978,23.6829268 C19.1169874,23.6904962 19.1169874,23.6904962 19.1245771,23.6904962 C19.1321667,23.6904962 19.1397563,23.6904962 19.1397563,23.6829268 L19.3826247,23.4407065 C19.3826247,23.4331371 19.3902144,23.4331371 19.3902144,23.4255677 L20.0732818,19.1867115 C20.0884611,19.1867115 20.0884611,19.1715728 20.0732818,19.1640034 Z M15.2842202,17.1581161 C15.2842202,17.1732548 15.2918099,17.1808242 15.3069892,17.1808242 L19.671031,18.0891505 L19.6786206,18.0891505 C19.6862103,18.0891505 19.6937999,18.0815812 19.7013895,18.0740118 C19.8304134,17.8469302 20.0581025,17.6955425 20.3161502,17.6804037 C20.3313295,17.6804037 20.3389191,17.6728343 20.3389191,17.6576955 L20.8094767,14.7434819 C20.8094767,14.7359125 20.8094767,14.7207738 20.7942974,14.7207738 C20.7639389,14.6980656 20.7335803,14.6753574 20.6956321,14.6375105 C20.6880425,14.6299411 20.6804528,14.6299411 20.6804528,14.6299411 L20.6728632,14.6299411 L15.2766306,16.9537426 C15.2614513,16.961312 15.2614513,16.9688814 15.2614513,16.9840202 C15.269041,17.0445753 15.2842202,17.097561 15.2842202,17.1581161 Z M13.4551175,17.8923465 C13.4323486,17.862069 13.4095797,17.8317914 13.3868107,17.7939445 C13.3792211,17.7863751 13.3716315,17.7788057 13.3640418,17.7788057 L13.3564522,17.7788057 L11.474222,18.58873 C11.4666323,18.58873 11.4590427,18.5962994 11.4590427,18.6038688 C11.4590427,18.6114382 11.4590427,18.6190076 11.4666323,18.626577 L12.3849785,19.5424727 C12.3925682,19.5500421 12.4001578,19.5500421 12.4001578,19.5500421 C12.4077474,19.5500421 12.4153371,19.5424727 12.4229267,19.5349033 L13.4627071,17.9074853 C13.4627071,17.9074853 13.4627071,17.8999159 13.4551175,17.8923465 Z M14.6998181,18.1875526 C14.6922285,18.1799832 14.6846388,18.1724138 14.6770492,18.1724138 L14.6694596,18.1724138 C14.5328461,18.2329689 14.3962326,18.2632464 14.2520295,18.2632464 C14.1381849,18.2632464 14.03193,18.2481077 13.9180854,18.2102607 L13.9104958,18.2102607 C13.9029061,18.2102607 13.8953165,18.2178301 13.8877269,18.2253995 L12.794819,19.9360807 L12.7872293,19.9436501 C12.7796397,19.9512195 12.7796397,19.9663583 12.7872293,19.9739277 L17.8115697,24.9924306 C17.8191593,25 17.826749,25 17.826749,25 C17.8343386,25 17.8419282,25 17.8419282,24.9924306 L18.7223262,24.1068124 C18.7299159,24.0992431 18.7299159,24.0841043 18.7223262,24.0765349 L14.6998181,18.1875526 Z M13.9939818,16.2119428 C14.0015714,16.2195122 14.0091611,16.2270816 14.0167507,16.2270816 L14.0243403,16.2270816 C14.1002367,16.2119428 14.1837227,16.196804 14.2596191,16.196804 C14.3431051,16.196804 14.4341808,16.2119428 14.5176668,16.234651 L14.5252564,16.234651 C14.5328461,16.234651 14.5404357,16.2270816 14.5480254,16.2195122 L16.5820483,13.0403701 C16.589638,13.0328007 16.589638,13.0176619 16.5820483,13.0100925 C16.4226659,12.843566 16.3315903,12.6240538 16.3315903,12.3894029 C16.3315903,12.3212784 16.3391799,12.2531539 16.3543592,12.1850294 C16.3543592,12.1698907 16.3467696,12.1623213 16.3391799,12.1547519 C16.0811322,12.0412111 13.7966512,11.0723297 13.7966512,11.0647603 L13.7890616,11.0647603 C13.7814719,11.0647603 13.7738823,11.0647603 13.7738823,11.0723297 L11.8385246,13.0100925 C11.830935,13.0176619 11.830935,13.0328007 11.8385246,13.0403701 L13.9939818,16.2119428 Z M14.2140813,10.6711522 C14.2140813,10.6711522 16.5213312,11.6551724 16.6199965,11.7005887 L16.6275862,11.7005887 C16.6351758,11.7005887 16.6351758,11.7005887 16.6427654,11.6930193 C16.8021478,11.5643398 17.0070681,11.4886459 17.2119883,11.4886459 C17.3106536,11.4886459 17.4093189,11.5037847 17.5079842,11.5340622 L17.5155738,11.5340622 C17.5231634,11.5340622 17.5307531,11.5264929 17.5383427,11.5189235 L19.4129833,8.58957107 C19.4205729,8.58200168 19.4205729,8.56686291 19.4129833,8.55929352 L17.8571075,7.00756939 C17.8495179,7 17.8495179,7 17.8419282,7 C17.8343386,7 17.826749,7 17.826749,7.00756939 L14.2140813,10.6257359 C14.2064916,10.6333053 14.2064916,10.6408747 14.2064916,10.6484441 C14.198902,10.6635828 14.2064916,10.6635828 14.2140813,10.6711522 Z M13.318504,16.764508 C13.3260936,16.764508 13.3336833,16.7569386 13.3412729,16.7493692 C13.3868107,16.6585366 13.4551175,16.5752733 13.5234242,16.4995795 C13.5310139,16.4920101 13.5310139,16.4768713 13.5234242,16.4693019 C13.5006553,16.4390244 11.4438634,13.4415475 11.4438634,13.4339781 C11.4362738,13.4264087 11.4362738,13.4264087 11.4210945,13.4188394 C11.4135049,13.4188394 11.4059152,13.4188394 11.4059152,13.4264087 L9.00758964,15.8183347 C9,15.8259041 9,15.8334735 9,15.8410429 C9,15.8486123 9.00758964,15.8561817 9.02276891,15.8561817 L13.318504,16.764508 C13.3109144,16.764508 13.3109144,16.764508 13.318504,16.764508 Z M13.1211734,17.2867956 C13.1211734,17.2716569 13.1135838,17.2640875 13.0984045,17.2640875 L9.37189226,16.4844407 C9.37189226,16.4844407 9.37189226,16.4844407 9.36430262,16.4844407 C9.35671298,16.4844407 9.34912335,16.4920101 9.34153371,16.4995795 C9.33394407,16.5071489 9.34153371,16.5222876 9.34912335,16.529857 L11.0112541,18.195122 C11.0188437,18.2026913 11.0264333,18.2026913 11.0264333,18.2026913 L11.034023,18.2026913 L13.0984045,17.3170732 C13.1135838,17.3019344 13.1211734,17.294365 13.1211734,17.2867956 Z" id="Combined-Shape" fill="#FFFFFF"></path>
14 |         </g>
15 |     </g>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Netlify + FaunaDB &nbsp;&nbsp;&nbsp;<a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/fauna-one-click&stack=fauna"><img src="https://www.netlify.com/img/deploy/button.svg"></a>
  2 | 
  3 | Example of using [FaunaDB](https://fauna.com/) with [Netlify functions](https://www.netlify.com/docs/functions/)
  4 | 
  5 | <!-- AUTO-GENERATED-CONTENT:START (TOC) -->
  6 | - [About this application](#about-this-application)
  7 | - [Setup & Run Locally](#setup--run-locally)
  8 | - [TLDR; Quick Deploy](#tldr-quick-deploy)
  9 | - [Tutorial](#tutorial)
 10 |   * [Background](#background)
 11 |   * [1. Create React app](#1-create-react-app)
 12 |   * [2. Create a function](#2-create-a-function)
 13 |     + [Anatomy of a Lambda function](#anatomy-of-a-lambda-function)
 14 |     + [Setting up functions for local development](#setting-up-functions-for-local-development)
 15 |   * [4. Connect the function to the frontend app](#4-connect-the-function-to-the-frontend-app)
 16 |   * [5. Finishing the Backend Functions](#5-finishing-the-backend-functions)
 17 |   * [Wrapping Up](#wrapping-up)
 18 | <!-- AUTO-GENERATED-CONTENT:END -->
 19 | 
 20 | ## About this application
 21 | 
 22 | This application is using [React](https://reactjs.org/) for the frontend, [Netlify Functions](https://www.netlify.com/docs/functions/) for API calls, and [FaunaDB](https://fauna.com/) as the backing database.
 23 | 
 24 | ![faunadb netlify](https://user-images.githubusercontent.com/532272/42067494-5c4c2b94-7afb-11e8-91b4-0bef66d85584.png)
 25 | 
 26 | ## Setup & Run Locally
 27 | 
 28 | 1. Clone down the repository
 29 | 
 30 |     ```bash
 31 |     git clone git@github.com:netlify/netlify-faunadb-example.git
 32 |     ```
 33 | 
 34 | 2. Install the dependencies
 35 | 
 36 |     ```bash
 37 |     npm install
 38 |     ```
 39 | 
 40 | 3. Run project locally
 41 | 
 42 |     ```bash
 43 |     npm start
 44 |     ```
 45 | 
 46 | ## TLDR; Quick Deploy
 47 | 
 48 | 1. Click the [Deploy to Netlify Button](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/fauna-one-click&stack=fauna)
 49 | 
 50 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/fauna-one-click&stack=fauna)
 51 | 
 52 | ## Tutorial
 53 | 
 54 | ### Background
 55 | 
 56 | This application is using [React](https://reactjs.org/) for the frontend, [Netlify Functions](https://www.netlify.com/docs/functions/) for API calls, and [FaunaDB](https://fauna.com/) as the backing database.
 57 | 
 58 | We are going to explore how to get up and running with netlify functions and how to deploy your own serverless backend.
 59 | 
 60 | So, lets dive right in!
 61 | 
 62 | ### 1. Create React app
 63 | 
 64 | We are using React for this demo app, but you can use whatever you want to manage the frontend.
 65 | 
 66 | Into VueJS? Awesome use that.
 67 | 
 68 | Miss the days of jQuery? Righto jQuery away!
 69 | 
 70 | Fan of vanillaJS? By all means, have at it!
 71 | 
 72 | 1. Install create react app
 73 | 
 74 |     ```bash
 75 |     npm install create-react-app -g
 76 |     ```
 77 | 2. Create the react app!
 78 | 
 79 |     ```bash
 80 |     create-react-app my-app
 81 |     ```
 82 | 
 83 | 3. The react app is now setup!
 84 | 
 85 |     ```bash
 86 |     # change directories into my-app
 87 |     cd my-app
 88 |     # start the app
 89 |     npm start
 90 |     ```
 91 | 
 92 | ### 2. Create a function
 93 | 
 94 | Now, lets create a function for our app and wire that up to run locally.
 95 | 
 96 | The functions in our project are going to live in a `/functions` folder. You can set this to whatever you'd like but we like the `/functions` convention.
 97 | 
 98 | #### Anatomy of a Lambda function
 99 | 
100 | All AWS Lambda functions have the following signature:
101 | 
102 | ```js
103 | exports.handler = (event, context, callback) => {
104 |   // "event" has informatiom about the path, body, headers etc of the request
105 |   console.log('event', event)
106 |   // "context" has information about the lambda environment and user details
107 |   console.log('context', context)
108 |   // The "callback" ends the execution of the function and returns a reponse back to the caller
109 |   return callback(null, {
110 |     statusCode: 200,
111 |     body: JSON.stringify({
112 |       data: '⊂◉‿◉つ'
113 |     })
114 |   })
115 | }
116 | ```
117 | 
118 | We are going to use the `faunadb` npm package to connect to our Fauna Database and create an item
119 | 
120 | #### Setting up functions for local development
121 | 
122 | Lets rock and roll.
123 | 
124 | 1. **Create a `./functions` directory**
125 | 
126 |     ```bash
127 |     # make functions directory
128 |     mdkir functions
129 |     ```
130 | 
131 | 2. **Install `netlify-lambda`**
132 | 
133 |     [Netlify lambda](https://github.com/netlify/netlify-lambda) is a tool for locally emulating the serverless function for development and for bundling our serverless function with third party npm modules (if we are using those)
134 | 
135 |     ```
136 |     npm i netlify-lambda --save-dev
137 |     ```
138 | 
139 |     To simulate our function endpoints locally, we need to setup a [proxy](https://github.com/netlify/create-react-app-lambda/blob/master/package.json#L19-L26) for webpack to use.
140 | 
141 |     In `package.json` add:
142 | 
143 |     ```json
144 |     {
145 |       "name": "react-lambda",
146 |       ...
147 |       "proxy": {
148 |         "/.netlify/functions": {
149 |           "target": "http://localhost:9000",
150 |           "pathRewrite": {
151 |             "^/\\.netlify/functions": ""
152 |           }
153 |         }
154 |       }
155 |     }
156 |     ```
157 | 
158 |     This will proxy requests we make to `/.netlify/functions` to our locally running function server at port 9000.
159 | 
160 | 3. **Add our `start` & `build` commands**
161 | 
162 |     Lets go ahead and add our `start` & `build` command to npm scripts in `package.json`. These will let us running things locally and give a command for netlify to run to build our app & functions when we are ready to deploy.
163 | 
164 |     We are going to be using the `npm-run-all` npm module to run our frontend & backend in parallel in the same terminal window.
165 | 
166 |     So install it!
167 | 
168 |     ```
169 |     npm install npm-run-all --save-dev
170 |     ```
171 | 
172 |     **About `npm start`**
173 | 
174 |     The `start:app` command will run `react-scripts start` to run our react app
175 | 
176 |     The `start:server` command will run `netlify-lambda serve functions -c ./webpack.config.js` to run our function code locally. The `-c webpack-config` flag lets us set a custom webpack config to [fix a module issue](https://medium.com/@danbruder/typeerror-require-is-not-a-function-webpack-faunadb-6e785858d23b) with faunaDB module.
177 | 
178 |     Running `npm start` in our terminal will run `npm-run-all --parallel start:app start:server` to fire them both up at once.
179 | 
180 |     **About `npm build`**
181 | 
182 |     The `build:app` command will run `react-scripts build` to run our react app
183 | 
184 |     The `build:server` command will run `netlify-lambda build functions -c ./webpack.config.js` to run our function code locally.
185 | 
186 |     Running `npm run build` in our terminal will run `npm-run-all --parallel build:**` to fire them both up at once.
187 | 
188 | 
189 |     **Your `package.json` should look like**
190 | 
191 |     ```json
192 |     {
193 |       "name": "netlify-fauna",
194 |       "scripts": {
195 |         "👇 ABOUT-bootstrap-command": "💡 scaffold and setup FaunaDB #",
196 |         "bootstrap": "node ./scripts/bootstrap-fauna-database.js",
197 |         "👇 ABOUT-start-command": "💡 start the app and server #",
198 |         "start": "npm-run-all --parallel start:app start:server",
199 |         "start:app": "react-scripts start",
200 |         "start:server": "netlify-lambda serve functions -c ./webpack.config.js",
201 |         "👇 ABOUT-prebuild-command": "💡 before 'build' runs, run the 'bootstrap' command #",
202 |         "prebuild": "echo 'setup faunaDB' && npm run bootstrap",
203 |         "👇 ABOUT-build-command": "💡 build the react app and the serverless functions #",
204 |         "build": "npm-run-all --parallel build:**",
205 |         "build:app": "react-scripts build",
206 |         "build:functions": "netlify-lambda build functions -c ./webpack.config.js",
207 |       },
208 |       "dependencies": {
209 |         "faunadb": "^0.2.2",
210 |         "react": "^16.4.0",
211 |         "react-dom": "^16.4.0",
212 |         "react-scripts": "1.1.4"
213 |       },
214 |       "devDependencies": {
215 |         "netlify-lambda": "^0.4.0",
216 |         "npm-run-all": "^4.1.3"
217 |       },
218 |       "proxy": {
219 |         "/.netlify/functions": {
220 |           "target": "http://localhost:9000",
221 |           "pathRewrite": {
222 |             "^/\\.netlify/functions": ""
223 |           }
224 |         }
225 |       }
226 |     }
227 | 
228 |     ```
229 | 
230 | 4. **Install FaunaDB and write the create function**
231 | 
232 |     We are going to be using the `faunadb` npm module to call into our todos index in FaunaDB.
233 | 
234 |     So install it in the project
235 | 
236 |     ```bash
237 |     npm i faunadb --save
238 |     ```
239 | 
240 |     Then create a new function file in `/functions` called `todos-create.js`
241 | 
242 |     <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-create.js&header=/* code from functions/todos-create.js */) -->
243 |     <!-- The below code snippet is automatically added from ./functions/todos-create.js -->
244 |     ```js
245 |     /* code from functions/todos-create.js */
246 |     import faunadb from 'faunadb' /* Import faunaDB sdk */
247 | 
248 |     /* configure faunaDB Client with our secret */
249 |     const q = faunadb.query
250 |     const client = new faunadb.Client({
251 |       secret: process.env.FAUNADB_SERVER_SECRET
252 |     })
253 | 
254 |     /* export our lambda function as named "handler" export */
255 |     exports.handler = (event, context, callback) => {
256 |       /* parse the string body into a useable JS object */
257 |       const data = JSON.parse(event.body)
258 |       console.log('Hello webinar. Function `todo-create` invoked', data)
259 |       const todoItem = {
260 |         data: data
261 |       }
262 |       /* construct the fauna query */
263 |       return client.query(q.Create(q.Ref('classes/todos'), todoItem))
264 |         .then((response) => {
265 |           console.log('success', response)
266 |           /* Success! return the response with statusCode 200 */
267 |           return callback(null, {
268 |             statusCode: 200,
269 |             body: JSON.stringify(response)
270 |           })
271 |         }).catch((error) => {
272 |           console.log('error', error)
273 |           /* Error! return the error with statusCode 400 */
274 |           return callback(null, {
275 |             statusCode: 400,
276 |             body: JSON.stringify(error)
277 |           })
278 |         })
279 |     }
280 |     ```
281 |     <!-- AUTO-GENERATED-CONTENT:END -->
282 | 
283 | ### 4. Connect the function to the frontend app
284 | 
285 | Inside of the react app, we can now wire up the `/.netlify/functions/todos-create` endpoint to an AJAX request.
286 | 
287 | ```js
288 | // Function using fetch to POST to our API endpoint
289 | function createTodo(data) {
290 |   return fetch('/.netlify/functions/todos-create', {
291 |     body: JSON.stringify(data),
292 |     method: 'POST'
293 |   }).then(response => {
294 |     return response.json()
295 |   })
296 | }
297 | 
298 | // Todo data
299 | const myTodo = {
300 |   title: 'My todo title',
301 |   completed: false,
302 | }
303 | 
304 | // create it!
305 | createTodo(myTodo).then((response) => {
306 |   console.log('API response', response)
307 |   // set app state
308 | }).catch((error) => {
309 |   console.log('API error', error)
310 | })
311 | ```
312 | 
313 | Requests to `/.netlify/function/[Function-File-Name]` will work seamlessly on localhost and on the live site because we are using the local proxy with webpack.
314 | 
315 | 
316 | We will be skipping over the rest of the frontend parts of the app because you can use whatever framework you'd like to build your application.
317 | 
318 | All the demo React frontend code is [available here](https://github.com/netlify/netlify-faunadb-example/tree/17a9ba47a8b1b2408b68e793fba4c5fd17bf85da/src)
319 | 
320 | ### 5. Finishing the Backend Functions
321 | 
322 | So far we have created our `todo-create` function done and we've seen how we make requests to our live function endpoints. It's now time to add the rest of our CRUD functions to manage our todos.
323 | 
324 | 1. **Read Todos by ID**
325 | 
326 |     Then create a new function file in `/functions` called `todos-read.js`
327 | 
328 |     <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-read.js&header=/* code from functions/todos-read.js */) -->
329 |     <!-- The below code snippet is automatically added from ./functions/todos-read.js -->
330 |     ```js
331 |     /* code from functions/todos-read.js */
332 |     import faunadb from 'faunadb'
333 |     import getId from './utils/getId'
334 | 
335 |     const q = faunadb.query
336 |     const client = new faunadb.Client({
337 |       secret: process.env.FAUNADB_SERVER_SECRET
338 |     })
339 | 
340 |     exports.handler = (event, context, callback) => {
341 |       const id = getId(event.path)
342 |       console.log(`Function 'todo-read' invoked. Read id: ${id}`)
343 |       return client.query(q.Get(q.Ref(`classes/todos/${id}`)))
344 |         .then((response) => {
345 |           console.log('success', response)
346 |           return callback(null, {
347 |             statusCode: 200,
348 |             body: JSON.stringify(response)
349 |           })
350 |         }).catch((error) => {
351 |           console.log('error', error)
352 |           return callback(null, {
353 |             statusCode: 400,
354 |             body: JSON.stringify(error)
355 |           })
356 |         })
357 |     }
358 |     ```
359 |     <!-- AUTO-GENERATED-CONTENT:END -->
360 | 
361 | 2. **Read All Todos**
362 | 
363 |     Then create a new function file in `/functions` called `todos-read-all.js`
364 | 
365 |     <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-read-all.js&header=/* code from functions/todos-read-all.js */) -->
366 |     <!-- The below code snippet is automatically added from ./functions/todos-read-all.js -->
367 |     ```js
368 |     /* code from functions/todos-read-all.js */
369 |     import faunadb from 'faunadb'
370 | 
371 |     const q = faunadb.query
372 |     const client = new faunadb.Client({
373 |       secret: process.env.FAUNADB_SERVER_SECRET
374 |     })
375 | 
376 |     exports.handler = (event, context, callback) => {
377 |       console.log('Function `todo-read-all` invoked')
378 |       return client.query(q.Paginate(q.Match(q.Ref('indexes/all_todos'))))
379 |         .then((response) => {
380 |           const todoRefs = response.data
381 |           console.log('Todo refs', todoRefs)
382 |           console.log(`${todoRefs.length} todos found`)
383 |           // create new query out of todo refs. http://bit.ly/2LG3MLg
384 |           const getAllTodoDataQuery = todoRefs.map((ref) => {
385 |             return q.Get(ref)
386 |           })
387 |           // then query the refs
388 |           return client.query(getAllTodoDataQuery).then((ret) => {
389 |             return callback(null, {
390 |               statusCode: 200,
391 |               body: JSON.stringify(ret)
392 |             })
393 |           })
394 |         }).catch((error) => {
395 |           console.log('error', error)
396 |           return callback(null, {
397 |             statusCode: 400,
398 |             body: JSON.stringify(error)
399 |           })
400 |         })
401 |     }
402 |     ```
403 |     <!-- AUTO-GENERATED-CONTENT:END -->
404 | 
405 | 3. **Update todo by ID**
406 | 
407 |     Then create a new function file in `/functions` called `todos-update.js`
408 | 
409 |     <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-update.js&header=/* code from functions/todos-update.js */) -->
410 |     <!-- The below code snippet is automatically added from ./functions/todos-update.js -->
411 |     ```js
412 |     /* code from functions/todos-update.js */
413 |     import faunadb from 'faunadb'
414 |     import getId from './utils/getId'
415 | 
416 |     const q = faunadb.query
417 |     const client = new faunadb.Client({
418 |       secret: process.env.FAUNADB_SERVER_SECRET
419 |     })
420 | 
421 |     exports.handler = (event, context, callback) => {
422 |       const data = JSON.parse(event.body)
423 |       const id = getId(event.path)
424 |       console.log(`Function 'todo-update' invoked. update id: ${id}`)
425 |       return client.query(q.Update(q.Ref(`classes/todos/${id}`), {data}))
426 |         .then((response) => {
427 |           console.log('success', response)
428 |           return callback(null, {
429 |             statusCode: 200,
430 |             body: JSON.stringify(response)
431 |           })
432 |         }).catch((error) => {
433 |           console.log('error', error)
434 |           return callback(null, {
435 |             statusCode: 400,
436 |             body: JSON.stringify(error)
437 |           })
438 |         })
439 |     }
440 |     ```
441 |     <!-- AUTO-GENERATED-CONTENT:END -->
442 | 
443 | 
444 | 4. **Delete by ID**
445 | 
446 |     Then create a new function file in `/functions` called `todos-delete.js`
447 | 
448 |     <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-delete.js&header=/* code from functions/todos-delete.js */) -->
449 |     <!-- The below code snippet is automatically added from ./functions/todos-delete.js -->
450 |     ```js
451 |     /* code from functions/todos-delete.js */
452 |     import faunadb from 'faunadb'
453 |     import getId from './utils/getId'
454 | 
455 |     const q = faunadb.query
456 |     const client = new faunadb.Client({
457 |       secret: process.env.FAUNADB_SERVER_SECRET
458 |     })
459 | 
460 |     exports.handler = (event, context, callback) => {
461 |       const id = getId(event.path)
462 |       console.log(`Function 'todo-delete' invoked. delete id: ${id}`)
463 |       return client.query(q.Delete(q.Ref(`classes/todos/${id}`)))
464 |         .then((response) => {
465 |           console.log('success', response)
466 |           return callback(null, {
467 |             statusCode: 200,
468 |             body: JSON.stringify(response)
469 |           })
470 |         }).catch((error) => {
471 |           console.log('error', error)
472 |           return callback(null, {
473 |             statusCode: 400,
474 |             body: JSON.stringify(error)
475 |           })
476 |         })
477 |     }
478 |     ```
479 |     <!-- AUTO-GENERATED-CONTENT:END -->
480 | 
481 | 
482 | 
483 | 4. **Delete batch todos**
484 | 
485 |     Then create a new function file in `/functions` called `todos-delete-batch.js`
486 | 
487 |     <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./functions/todos-delete-batch.js&header=/* code from functions/todos-delete-batch.js */) -->
488 |     <!-- The below code snippet is automatically added from ./functions/todos-delete-batch.js -->
489 |     ```js
490 |     /* code from functions/todos-delete-batch.js */
491 |     import faunadb from 'faunadb'
492 |     import getId from './utils/getId'
493 | 
494 |     const q = faunadb.query
495 |     const client = new faunadb.Client({
496 |       secret: process.env.FAUNADB_SERVER_SECRET
497 |     })
498 | 
499 |     exports.handler = (event, context, callback) => {
500 |       const data = JSON.parse(event.body)
501 |       console.log('data', data)
502 |       console.log('Function `todo-delete-batch` invoked', data.ids)
503 |       // construct batch query from IDs
504 |       const deleteAllCompletedTodoQuery = data.ids.map((id) => {
505 |         return q.Delete(q.Ref(`classes/todos/${id}`))
506 |       })
507 |       // Hit fauna with the query to delete the completed items
508 |       return client.query(deleteAllCompletedTodoQuery)
509 |         .then((response) => {
510 |           console.log('success', response)
511 |           return callback(null, {
512 |             statusCode: 200,
513 |             body: JSON.stringify(response)
514 |           })
515 |         }).catch((error) => {
516 |           console.log('error', error)
517 |           return callback(null, {
518 |             statusCode: 400,
519 |             body: JSON.stringify(error)
520 |           })
521 |         })
522 |     }
523 |     ```
524 |     <!-- AUTO-GENERATED-CONTENT:END -->
525 | 
526 | After we deploy all these functions, we will be able to call them from our frontend code with these fetch calls:
527 | 
528 | <!-- AUTO-GENERATED-CONTENT:START (CODE:src=./src/utils/api.js&header=/* Frontend code from src/utils/api.js */) -->
529 | <!-- The below code snippet is automatically added from ./src/utils/api.js -->
530 | ```js
531 | /* Frontend code from src/utils/api.js */
532 | /* Api methods to call /functions */
533 | 
534 | const create = (data) => {
535 |   return fetch('/.netlify/functions/todos-create', {
536 |     body: JSON.stringify(data),
537 |     method: 'POST'
538 |   }).then(response => {
539 |     return response.json()
540 |   })
541 | }
542 | 
543 | const readAll = () => {
544 |   return fetch('/.netlify/functions/todos-read-all').then((response) => {
545 |     return response.json()
546 |   })
547 | }
548 | 
549 | const update = (todoId, data) => {
550 |   return fetch(`/.netlify/functions/todos-update/${todoId}`, {
551 |     body: JSON.stringify(data),
552 |     method: 'POST'
553 |   }).then(response => {
554 |     return response.json()
555 |   })
556 | }
557 | 
558 | const deleteTodo = (todoId) => {
559 |   return fetch(`/.netlify/functions/todos-delete/${todoId}`, {
560 |     method: 'POST',
561 |   }).then(response => {
562 |     return response.json()
563 |   })
564 | }
565 | 
566 | const batchDeleteTodo = (todoIds) => {
567 |   return fetch(`/.netlify/functions/todos-delete-batch`, {
568 |     body: JSON.stringify({
569 |       ids: todoIds
570 |     }),
571 |     method: 'POST'
572 |   }).then(response => {
573 |     return response.json()
574 |   })
575 | }
576 | 
577 | export default {
578 |   create: create,
579 |   readAll: readAll,
580 |   update: update,
581 |   delete: deleteTodo,
582 |   batchDelete: batchDeleteTodo
583 | }
584 | ```
585 | <!-- AUTO-GENERATED-CONTENT:END -->
586 | 
587 | ### Wrapping Up
588 | 
589 | I hope you have enjoyed this tutorial on building your own CRUD API using Netlify serverless functions and FaunaDB.
590 | 
591 | As you can see, functions can be extremely powerful when combined with a cloud database!
592 | 
593 | The sky is the limit on what you can build with the JAM stack and we'd love to hear about what you make.
594 | 
595 | **Next Steps**
596 | 
597 | This example can be improved with users/authentication. Next steps to build out the app would be:
598 | 
599 | - Add in the concept of users for everyone to have their own todo list
600 | - Wire up authentication using [Netlify Identity](https://identity.netlify.com/) JWTs
601 | - Add in due dates to todos and wire up Functions to notify users via email/SMS
602 | - File for IPO?
603 | 


--------------------------------------------------------------------------------