From 28d647861aa5452d7e41e91cf5521121c7e39e18 Mon Sep 17 00:00:00 2001 From: DavidWells Date: Wed, 20 Jun 2018 17:21:17 -0700 Subject: [PATCH] add clear all --- .gitignore | 3 + README.md | 2 +- public/index.html | 1 + scripts/bootstrap-fauna-database.js | 66 +++++++++++++++----- scripts/check-for-fauna-key.js | 29 +++++++-- src/App.css | 20 +++++- src/App.js | 37 ++++++++--- src/components/SettingsMenu/SettingsMenu.css | 56 +++++++++++++++++ src/components/SettingsMenu/index.js | 59 +++++++++++++++++ src/index.css | 13 ++++ 10 files changed, 253 insertions(+), 33 deletions(-) create mode 100644 src/components/SettingsMenu/SettingsMenu.css create mode 100644 src/components/SettingsMenu/index.js diff --git a/.gitignore b/.gitignore index bd0c24e..3d53628 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ /build /functions-build +# netlify +.netlify + # misc .DS_Store .env.local diff --git a/README.md b/README.md index e924db6..6b00b51 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Example of using FaunaDB with [netlify functions](https://www.netlify.com/docs/functions/) -Try it out on your own account via this link: +Deploy this app with one-click via this link: [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example) diff --git a/public/index.html b/public/index.html index 92028d8..4669fe4 100644 --- a/public/index.html +++ b/public/index.html @@ -28,6 +28,7 @@ + diff --git a/scripts/bootstrap-fauna-database.js b/scripts/bootstrap-fauna-database.js index b8a71d0..6652516 100644 --- a/scripts/bootstrap-fauna-database.js +++ b/scripts/bootstrap-fauna-database.js @@ -1,26 +1,47 @@ /* bootstrap database in your FaunaDB account */ -const readline = require('readline'); -const faunadb = require('faunadb'); -const q = faunadb.query; +const readline = require('readline') +const faunadb = require('faunadb') +const chalk = require('chalk') +const insideNetlify = insideNetlifyBuildContext() +const q = faunadb.query -ask('Enter your faunaDB server key', function(err, answer) { - const key = answer || process.env.FAUNADB_SECRET - if (!key) { - console.log('Please set supply a faunaDB server key') - process.exit() +console.log(chalk.cyan('Creating your FaunaDB Database...\n')) + +// 1. Check for required enviroment variables +if (!process.env.FAUNADB_SECRET) { + console.log(chalk.yellow('Required FAUNADB_SECRET enviroment variable not found.')) + if (insideNetlify) { + console.log(`Visit https://app.netlify.com/sites/YOUR_SITE_HERE/settings/deploys`) + console.log('and set a `FAUNADB_SECRET` value in the "Build environment variables" section') + process.exit(1) } + // Local machine warning + if (!insideNetlify) { + console.log() + console.log('You can create fauna DB keys here: https://dashboard.fauna.com/db/keys') + console.log() + ask(chalk.bold('Enter your faunaDB server key'), (err, answer) => { + if (!answer) { + console.log('Please supply a faunaDB server key') + process.exit(1) + } + createFaunaDB(process.env.FAUNADB_SECRET).then(() => { + console.log('Database created') + }) + }); + } +} - const client = new faunadb.Client({ - secret: answer - }); - - createFaunaDB(key).then(() => { +// Has var. Do the thing +if (process.env.FAUNADB_SECRET) { + createFaunaDB(process.env.FAUNADB_SECRET).then(() => { console.log('Database created') }) -}); - +} +/* idempotent operation */ function createFaunaDB(key) { + console.log('Create the database!') const client = new faunadb.Client({ secret: key }); @@ -33,9 +54,20 @@ function createFaunaDB(key) { name: "all_todos", source: q.Ref("classes/todos") })) + }).catch((e) => { + // Database already exists + if (e.requestResult.statusCode === 400 && e.message === 'instance not unique') { + console.log('DB already exists') + throw e + } }) - .then(console.log.bind(console)) - .catch(console.error.bind(console)) +} + +function insideNetlifyBuildContext() { + if (process.env.DEPLOY_PRIME_URL) { + return true + } + return false } // Readline util diff --git a/scripts/check-for-fauna-key.js b/scripts/check-for-fauna-key.js index 0c4c00a..53191cd 100644 --- a/scripts/check-for-fauna-key.js +++ b/scripts/check-for-fauna-key.js @@ -1,14 +1,33 @@ const chalk = require('chalk') -if (!process.env.FAUNADB_SECRET) { - console.log('Please set supply a faunaDB server key') - console.log(` +var util = require('util'); +var exec = require('child_process').exec; + +function clear(){ + exec('clear', function(error, stdout, stderr){ + util.puts(stdout); + }); +} +function checkForFaunaKey() { + if (!process.env.FAUNADB_SECRET) { + console.log(chalk.yellow('Required FAUNADB_SECRET enviroment variable not found.')) + console.log(` ========================= In your terminal run the following command -export FAUNADB_SECRET=abcYourKeyHere +export FAUNADB_SECRET=YourFaunaDBKeyHere ========================= `) - process.exit(1) + + process.exit(1) + process.stdout.write('\u001b[2J') + process.stdout.write('\u001b[1;1H') + } } + +process.on('exit', (err) => { + console.log('errr') +}); + +checkForFaunaKey() diff --git a/src/App.css b/src/App.css index d97e24c..3104bea 100644 --- a/src/App.css +++ b/src/App.css @@ -3,9 +3,20 @@ padding-top: 10px; width: 600px; } - +.todo-settings-toggle { + fill: #b7b9bd; + width: 25px; + margin-left: 10px; + cursor: pointer; +} .todo-create-wrapper { margin-bottom: 20px; + display: flex; + align-items: center; +} +.todo-actions { + display: flex; + align-items: center; } .todo-create-input { font-size: 14px; @@ -62,12 +73,17 @@ max-width: 80%; margin-left: 40px; } + .todo-create-wrapper { + flex-direction: column; + align-items: flex-start; + } .todo-create-input { appearance: none; - margin-bottom: 15px; border: 1px solid rgba(120, 130, 152, 0.25); /* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */ font-size: 16px; + margin-bottom: 15px; + min-width: 85%; } .todo-item button { padding: 4px 12px; diff --git a/src/App.js b/src/App.js index 55a3bef..26b67da 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,22 @@ import React, { Component } from 'react' import ContentEditable from './components/ContentEditable' import AppHeader from './components/AppHeader' +import SettingsMenu from './components/SettingsMenu' import api from './utils/api' import sortByDate from './utils/sortByDate' import './App.css' export default class App extends Component { state = { - todos: [] + todos: [], + showMenu: false } componentDidMount() { // Fetch all todos - api.readAll().then((response) => { - console.log('all todos', response) - + api.readAll().then((todos) => { + console.log('all todos', todos) this.setState({ - todos: response + todos: todos }) }) } @@ -156,6 +157,17 @@ export default class App extends Component { }) } } + closeModal = (e) => { + this.setState({ + showMenu: false + }) + } + openModal = () => { + console.log('settings') + this.setState({ + showMenu: true + }) + } renderTodos() { const { todos } = this.state @@ -228,12 +240,21 @@ export default class App extends Component { autoComplete='off' style={{marginRight: 20}} /> - +
+ + + + + + +
+ {this.renderTodos()} + ) } diff --git a/src/components/SettingsMenu/SettingsMenu.css b/src/components/SettingsMenu/SettingsMenu.css new file mode 100644 index 0000000..1b42862 --- /dev/null +++ b/src/components/SettingsMenu/SettingsMenu.css @@ -0,0 +1,56 @@ + +.settings-wrapper { + position: fixed; + left: 0; + top: 0; + background: rgba(95, 95, 95, 0.50); + font-size: 13px; + width: 100%; + height: 100%; + z-index: 9; + display: flex; + align-items: center; + justify-content: center; +} +.settings-content { + margin-top: 3em; + margin-bottom: 3em; + padding: 1.5em 3em; + padding-bottom: 3em; + background: #fff; + color: rgba(14,30,37,0.54); + border-radius: 8px; + box-shadow: 0 1px 6px 0 rgba(14,30,37,0.12); + position: relative; +} +.settings-close { + position: absolute; + right: 15px; + top: 10px; + cursor: pointer; +} +.settings-content h2 { + color: #000; +} +.settings-section { + margin-top: 20px; +} +.settings-header { + font-size: 16px; + font-weight: 600; +} +.settings-options-wrapper { + display: flex; + align-items: center; + flex-wrap: wrap; +} +.settings-option { + padding: 3px 8px; + margin: 5px; + border: 1px solid; + font-size: 12px; + cursor: pointer; + &:hover, &.activeClass { + color: #fff; + } +} diff --git a/src/components/SettingsMenu/index.js b/src/components/SettingsMenu/index.js new file mode 100644 index 0000000..a1edaf3 --- /dev/null +++ b/src/components/SettingsMenu/index.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react' +import styles from './SettingsMenu.css' // eslint-disable-line + +export default class Menu extends Component { + componentDidMount() { + // attach event listeners + document.body.addEventListener('keydown', this.handleEscKey) + } + componentWillUnmount() { + // remove event listeners + document.body.removeEventListener('keydown', this.handleEscKey) + } + handleEscKey = (e) => { + if (this.props.showMenu && e.which === 27) { + this.props.handleModalClose() + } + } + handleDelete = (e) => { + e.preventDefault() + const deleteConfirm = window.confirm("Are you sure you want to clear all completed todos?"); + if (deleteConfirm) { + console.log('delete') + } + } + render() { + const { showMenu } = this.props + const showOrHide = (showMenu) ? 'flex' : 'none' + return ( +
+
+ ❌ +

Settings

+
+ +
+
+
Sort Todos:
+
+
+ Oldest First ▼ +
+
+ Most Recent First ▲ +
+
+
+
+
+ ) + } +} diff --git a/src/index.css b/src/index.css index f2c2d2f..b67309c 100644 --- a/src/index.css +++ b/src/index.css @@ -32,3 +32,16 @@ button:focus, button:hover { box-shadow: 0 8px 12px 0 rgba(233,235,235,.16), 0 2px 8px 0 rgba(0,0,0,.08); text-decoration: none; } + + +.btn-danger { + background-color: #fb6d77; + border-color: #fb6d77; + border-bottom-color: #e6636b; + color: #fff; +} +.btn-danger:focus, .btn-danger:hover { + background-color: #fa3b49; + border-color: #fa3b49; + color: #fff; +}