Update all the things

featurist · Jan 7, 2020 · bd167ae · bd167ae
1 parent 584ced5
commit bd167ae
Show file tree

Hide file tree

Showing 8 changed files with 1,538 additions and 2,204 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/preset-react"]
+  "presets": ["@babel/preset-react"],
+  "plugins": ["@babel/plugin-transform-modules-commonjs"]
 }
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-12
+13
diff --git a/browser/app.jsx b/browser/app.jsx
@@ -1,16 +1,23 @@
-const React = require('react')
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class App extends React.Component {
+  static get propTypes() {
+    return {
+      apiUrl: PropTypes.string,
+    }
+  }
 
-module.exports = class App extends React.Component {
   constructor(props) {
-    super(props);
-    this.state = {user: ''};
+    super(props)
+    this.state = {user: ''}
 
-    this.handleNameChange = this.handleNameChange.bind(this);
-    this.fetchTodos = this.fetchTodos.bind(this);
+    this.handleNameChange = this.handleNameChange.bind(this)
+    this.fetchTodos = this.fetchTodos.bind(this)
   }
 
   handleNameChange(event) {
-    this.setState({user: event.target.value});
+    this.setState({user: event.target.value})
   }
 
   async fetchTodos(event) {
@@ -33,7 +40,7 @@ module.exports = class App extends React.Component {
     return this.state.todos
       ?
         <>
-          <h1>{this.state.user}'s TODOs</h1>
+          <h1>{this.state.user}&apos;s TODOs</h1>
           <ul>
             {this.state.todos.map((todo, n) => <li key={n}>{todo.title}</li>)}
           </ul>

diff --git a/browser/index.jsx b/browser/index.jsx
@@ -2,4 +2,4 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './app'
 
-ReactDOM.render(<App apiUrl={window.location.href}/>, document.body)
+ReactDOM.render(<App apiUrl={window.location.href}/>, document.querySelector('main'))
diff --git a/package.json b/package.json
@@ -4,34 +4,35 @@
     "start": "./scripts/start.sh",
     "postinstall": "electron-rebuild",
     "dev": "nf start",
-    "test": "electron-mocha -r @babel/register --color --renderer ./test/*Spec.js",
+    "test": "electron-mocha -r @babel/register --no-timeout --color --renderer ./test/*Spec.js",
     "lint": "eslint $(git ls-files | grep -E '\\.js$')",
     "build": "webpack",
     "heroku-postbuild": "npm run build",
     "watch-assets": "yarn build --watch"
   },
   "dependencies": {
     "@babel/core": "latest",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "latest",
     "babel-loader": "latest",
-    "electron-rebuild": "^1.8.4",
-    "eslint-plugin-react": "^7.13.0",
+    "electron-rebuild": "latest",
+    "eslint-plugin-react": "latest",
     "express": "latest",
     "morgan": "latest",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "sqlite3": "^4.0.8",
+    "react": "latest",
+    "react-dom": "latest",
+    "sqlite3": "latest",
     "webpack": "latest",
     "webpack-cli": "latest",
     "webpack-manifest-plugin": "latest"
   },
   "devDependencies": {
-    "@babel/register": "^7.4.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.7.5",
+    "@babel/register": "latest",
     "browser-monkey": "latest",
     "chai": "latest",
     "chokidar": "latest",
-    "electron": "^4",
-    "electron-mocha": "^7",
+    "electron": "latest",
+    "electron-mocha": "latest",
     "eslint": "latest",
     "foreman": "latest",
     "mocha": "latest",

diff --git a/server/app.js b/server/app.js
@@ -1,6 +1,5 @@
 const http = require('http')
 const express = require('express')
-const morgan = require('morgan')
 const loadManifest = require('./loadManifest')
 const sqlite3 = require('sqlite3')
 const LiveReload = require('./liveReload')
@@ -18,6 +17,7 @@ function renderIndexHtml () {
     <title>TODOs</title>
   </head>
   <body>
+    <main></main>
     ${scripts.map(url => `<script type="text/javascript" src="/dist/${url}"></script>`).join('\n')}
   </body>
 </html>
@@ -26,7 +26,6 @@ function renderIndexHtml () {
 
 module.exports = function () {
   const app = express()
-  app.use(morgan('dev'))
 
   app.get('/api/todos/:user', (req, res) => {
     const db = new sqlite3.Database(process.env.DB || process.cwd() + '/app.db')

diff --git a/test/todosSpec.js b/test/todosSpec.js
@@ -1,11 +1,11 @@
-const {existsSync, unlinkSync} = require('fs')
-const ReactDOM = require('react-dom')
-const React = require('react')
-const createMonkey = require('browser-monkey/create')
-const createTestDiv = require('browser-monkey/lib/createTestDiv')
-const {Database} = require('sqlite3')
-const App = require('../browser/app')
-const createServer = require('../server/app')
+import {existsSync, unlinkSync} from 'fs'
+import ReactDOM from 'react-dom'
+import React from 'react'
+import createMonkey from 'browser-monkey/create'
+import createTestDiv from 'browser-monkey/lib/createTestDiv'
+import {Database} from 'sqlite3'
+import createServer from '../server/app'
+import App from '../browser/app'
 
 let dbPath = process.env.DB = process.cwd() + '/test/test.db'
 
@@ -58,7 +58,7 @@ describe('todos app', () => {
   })
 
   context('user does not exist', () => {
-    it('shows a message', async () => {
+    it('shows a "not found" message', async () => {
       await page.find('input[name=user]').typeIn('Bob')
       await page.click('Fetch TODOs')
       await page.shouldHave({text: "Could not find Bob's TODOs"})