clean up code

README.md

@@ -12,24 +12,24 @@ Try it out on your own account via this link:
 
 1. Clone down the repository
 
-  ```
+  ```bash
-  git clone
+  git clone git@github.com:netlify/netlify-faunadb-example.git
   ```
 
 2. Install the dependencies
 
-  ```
+  ```bash
   npm install
   ```
 
 3. Bootstrap your FaunaDB table
 
-  ```
+  ```bash
   npm run bootstrap
   ```
 
 4. Run project locally
 
-  ```
+  ```bash
   npm start
   ```

package.json

@@ -9,16 +9,15 @@
     "react-scripts": "1.1.4"
   },
   "scripts": {
-    "bootstrap": "node ./_init-fauna-database.js",
+    "bootstrap": "node ./scripts/bootstrap-fauna-database.js",
-    "checkForFaunaKey": "node ./_check-for-fauna-key.js",
+    "checkForFaunaKey": "node ./scripts/check-for-fauna-key.js",
     "start": "npm-run-all --parallel checkForFaunaKey startApp startServer",
     "startApp": "react-scripts start",
     "startServer": "netlify-lambda serve functions -c ./webpack.config.js",
     "build": "npm-run-all --parallel build:**",
     "build:app": "react-scripts build",
     "build:functions": "netlify-lambda build functions -c ./webpack.config.js",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test --env=jsdom"
-    "eject": "react-scripts eject"
   },
   "devDependencies": {
     "netlify-lambda": "^0.4.0",

src/App.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
-import api from './utils/api'
 import ContentEditable from './components/ContentEditable'
 import AppHeader from './components/AppHeader'
+import api from './utils/api'
+import sortByDate from './utils/sortByDate'
 import './App.css'
 
-class App extends Component {
+export default class App extends Component {
   state = {
     todos: []
   }
@@ -159,16 +160,15 @@ class App extends Component {
     const { todos } = this.state
 
     if (!todos || !todos.length) {
+      // Loading State here
       return null
     }
 
-    const sortOrder = sortDate('ts')
+    const timeStampKey = 'ts'
+    const orderBy = 'desc' // or `asc`
+    const sortOrder = sortByDate(timeStampKey, orderBy)
     const todosByDate = todos.sort(sortOrder)
 
-    todosByDate.forEach((item) => {
-      console.log(item)
-    })
-
     return todosByDate.map((todo, i) => {
       const { data, ref } = todo
       const id = getTodoId(todo)
@@ -181,10 +181,9 @@ class App extends Component {
           </button>
         )
       }
-      const completedClass = (data.completed) ? 'todo-completed' : ''
+      const boxIcon = (data.completed) ? '#todo__box__done' : '#todo__box'
-      const icon = (data.completed) ? '#todo__box__done' : '#todo__box'
       return (
-        <div key={i} className={`todo-item ${completedClass}`}>
+        <div key={i} className='todo-item'>
           <label className="todo">
             <input
               data-id={id}
@@ -194,20 +193,19 @@ class App extends Component {
               checked={data.completed}
             />
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" className="todo__icon">
-              <use xlinkHref={`${icon}`} className="todo__box"></use>
+              <use xlinkHref={`${boxIcon}`} className="todo__box"></use>
               <use xlinkHref="#todo__check" className="todo__check"></use>
             </svg>
             <div className='todo-list-title'>
               <ContentEditable
                 tagName='span'
                 editKey={id}
-                // onChange={this.handleDataChange} // save on change
                 onBlur={this.updateTodoTitle} // save on enter/blur
                 html={data.title}
+                // onChange={this.handleDataChange} // save on change
               />
             </div>
           </label>
-
           {deleteButton}
         </div>
       )
@@ -216,6 +214,7 @@ class App extends Component {
   render() {
     return (
       <div className='app'>
+
         <AppHeader />
 
         <div className='todo-list'>
@@ -240,18 +239,6 @@ class App extends Component {
   }
 }
 
-function sortDate(dateKey, order) {
-  return function (a, b) {
-    const timeA = new Date(a[dateKey]).getTime()
-    const timeB = new Date(b[dateKey]).getTime()
-    if (order === 'asc') {
-      return timeA - timeB
-    }
-    // default 'desc' descending order
-    return timeB - timeA
-  }
-}
-
 function removeOptimisticTodo(todos) {
   // return all 'real' todos
   return todos.filter((todo) => {
@@ -265,5 +252,3 @@ function getTodoId(todo) {
   }
   return todo.ref['@ref'].split('/').pop()
 }
-
-export default App

src/utils/sortByDate.js

@@ -0,0 +1,11 @@
+export default function sortDate(dateKey, order) {
+  return function (a, b) {
+    const timeA = new Date(a[dateKey]).getTime()
+    const timeB = new Date(b[dateKey]).getTime()
+    if (order === 'asc') {
+      return timeA - timeB
+    }
+    // default 'desc' descending order
+    return timeB - timeA
+  }
+}