added better favicons, moved from sass to glamor, moved components

and utils to src dir, and removed packages no longer being used
2018-11-04 01:28:46 -06:00
parent b47f3917bd
commit 31321e635a
99 changed files with 3821 additions and 21818 deletions
--- a/src/app.js
+++ b/src/app.js
@@ -1,4 +1,3 @@
-const favicon = require('serve-favicon')
 const fs = require('fs')
 const path = require('path')
 const compress = require('compression')
@@ -21,24 +20,24 @@ const channels = require('./channels')
 const authentication = require('./authentication')

 const dev = process.env.NODE_ENV !== 'production'
-const pathPrefix = require('../util/pathPrefix')
-const stripBase = require('../util/stripPrefix')
-const getUrl = require('../util/getUrl')
+const pathPrefix = require('./util/pathPrefix')
+const stripBase = require('./util/stripPrefix')
+const getUrl = require('./util/getUrl')
 const { parse } = require('url')
-const nxt = require('next')({ dev, quiet: true })
-const nxtHandler = nxt.getRequestHandler()
+const Next = require('next')({ dev, quiet: true })
+const nextHandler = Next.getRequestHandler()

 const app = express(feathers())
 global.app = app

 app.run = async port => {
  const server = app.listen(port)
-  await nxt.prepare()
+  await Next.prepare()

  if (dev) {
    server.on('upgrade', (req, socket) => {
      req.url = stripBase(req.url)
-      nxtHandler(req, socket, parse(req.url, true))
+      nextHandler(req, socket, parse(req.url, true))
    })
  }
  return server
@@ -82,17 +81,18 @@ app.use(
  })
 )

+app.use(getUrl('/'), express.static(path.join(__dirname, '../public')))
+
 if (!dev) app.use(compress())
 app.use(express.json()) // use { limit } option to increase max post size
 app.use(express.urlencoded({ extended: true }))
-app.use(getUrl('/'), favicon('favicon.ico'))
 app.configure(express.rest()) // Set up Plugins and providers
 app.configure(middleware) // middleware/index.js
 app.configure(authentication) // Set up authentication
 app.configure(services) // Set up our services (see `services/index.js`)
 app.configure(channels) // Set up event channels (see channels.js)

-nxt.setAssetPrefix(pathPrefix)
+Next.setAssetPrefix(pathPrefix)

 const checkJWT = async (req, res, next) => {
  const result = await req.app.authenticate('jwt', {})(req)
@@ -106,12 +106,12 @@ const checkJWT = async (req, res, next) => {
 ;['/', '/logout', '/new', '/settings'].forEach(route => {
  app.get(getUrl(route), cookieParser, checkJWT, (req, res) => {
    const { query } = parse(req.url, true)
-    nxt.render(req, res, route, query)
+    Next.render(req, res, route, query)
  })
 })
 ;['/k', '/edit'].forEach(route => {
  app.get(getUrl(route + '/:id'), cookieParser, checkJWT, (req, res) => {
-    nxt.render(req, res, route, { id: req.params.id })
+    Next.render(req, res, route, { id: req.params.id })
  })
 })

@@ -121,10 +121,10 @@ app.use((req, res, next) => {
  if (accept && accept.toLowerCase() === 'application/json')
    return notFound(req, res, next)
  if (req.url.substr(0, pathPrefix.length) !== pathPrefix)
-    return nxt.render404(req, res)
+    return Next.render404(req, res)

  req.url = stripBase(req.url)
-  nxtHandler(req, res, parse(req.url, true))
+  nextHandler(req, res, parse(req.url, true))
 })

 app.use(express.errorHandler({ logger }))
--- a/src/authentication.js
+++ b/src/authentication.js
@@ -1,7 +1,7 @@
 const authentication = require('@feathersjs/authentication')
 const jwt = require('@feathersjs/authentication-jwt')
 const local = require('@feathersjs/authentication-local')
-const getUrl = require('../util/getUrl')
+const getUrl = require('./util/getUrl')

 module.exports = function(app) {
  const config = app.get('authentication')
--- a/src/components/AddDoc.js
+++ b/src/components/AddDoc.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import fetch from 'isomorphic-unfetch'
+import mapUser from '../util/mapUser'
+import getUrl from '../util/getUrl'
+import getJwt from '../util/getJwt'
+
+const getDoc = async (id, req) => {
+  let found, doc
+  const jwt = getJwt(req)
+  if (!jwt) return { found, doc, id }
+  const docRes = await fetch(getUrl('docs/' + id, Boolean(req)), {
+    method: 'GET',
+    headers: { Authorization: jwt },
+  })
+  if (docRes.ok) {
+    doc = await docRes.json()
+    found = true
+  }
+  return { found, doc, id }
+}
+
+export default ComposedComponent => {
+  class DocComp extends Component {
+    state = {
+      found: false,
+      id: null,
+      doc: {},
+    }
+
+    static async getInitialProps({ query, req }) {
+      return await getDoc(query.id, req)
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+      const { found, id, doc } = nextProps
+      if (prevState.found !== found && !prevState.didInit) {
+        return { found, id, doc, didInit: true }
+      }
+      return null
+    }
+
+    updateDoc = async id => {
+      this.setState(await getDoc(id))
+    }
+
+    componentDidMount() {
+      this.updateDoc(this.props.id)
+    }
+
+    componentDidUpdate(prevProps) {
+      const { user, found, id } = this.props
+      if (prevProps.user.email === user.email || found) return
+      if (!user.email) return
+      this.updateDoc(id)
+    }
+
+    render() {
+      return <ComposedComponent {...this.state} />
+    }
+  }
+  return connect(mapUser)(DocComp)
+}
--- a/src/components/CodeMirror.js
+++ b/src/components/CodeMirror.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import cm from 'codemirror'
+import { getKey, isCtrlKey } from '../util/keys'
+
+if (typeof window !== 'undefined') {
+  require('codemirror/mode/markdown/markdown')
+}
+export default class CodeMirror extends Component {
+  handleChange = () => {
+    if (!this.editor) return
+    const value = this.editor.getValue()
+    if (value !== this.props.value) {
+      this.props.onChange && this.props.onChange(value)
+      if (this.editor.getValue() !== this.props.value) {
+        if (this.state.isControlled) {
+          this.editor.setValue(this.props.value)
+        } else {
+          this.props.value = value
+        }
+      }
+    }
+  }
+  checkSubmit = (cm, e) => {
+    const key = getKey(e)
+    if (isCtrlKey(key)) {
+      this.ctrlKey = true
+    } else if (key === 13 && this.ctrlKey) {
+      this.props.onSubmit()
+    }
+  }
+  handleKeyUp = (cm, e) => {
+    if (isCtrlKey(getKey(e))) this.ctrlKey = false
+  }
+  componentDidMount() {
+    if (typeof window === 'undefined') return
+    this.editor = cm.fromTextArea(this.textarea, this.props.options)
+    this.editor.on('change', this.handleChange)
+    if (typeof this.props.onSubmit === 'function') {
+      this.editor.on('keydown', this.checkSubmit)
+      this.editor.on('keyup', this.handleKeyUp)
+      this.setupSubmitKey = true
+    }
+  }
+  componentWillUnmount() {
+    if (this.setupSubmitKey) {
+      this.editor.off('keydown', this.checkSubmit)
+      this.editor.off('keyup', this.handleKeyUp)
+      this.setupSubmitKey = false
+    }
+  }
+  componentDidUpdate() {
+    if (!this.editor || !this.props.value) return
+    if (this.editor.getValue() !== this.props.value) {
+      this.editor.setValue(this.props.value)
+    }
+  }
+  render() {
+    const { value, className, onChange } = this.props
+    return (
+      <div {...{ className }}>
+        <textarea {...{ value, onChange }} ref={el => (this.textarea = el)} />
+      </div>
+    )
+  }
+}
--- a/src/components/DocItem.js
+++ b/src/components/DocItem.js
@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import getUrl from '../util/getUrl'
+
+const DocItem = ({ id, name, dir, updated }) => {
+  name = dir + (dir.length > 0 ? '/' : '') + name
+  const as = getUrl('k/' + id)
+  const href = { pathname: '/k', query: { id } }
+  return (
+    <tr>
+      <td>
+        <Link {...{ href, as }}>
+          <a>
+            <p className="noMargin">
+              {name}
+              <span className="float-right">
+                {new Date(updated).toLocaleDateString('en-US')}
+              </span>
+            </p>
+          </a>
+        </Link>
+      </td>
+    </tr>
+  )
+}
+
+export default DocItem
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -0,0 +1,29 @@
+import { css } from 'glamor'
+import theme from '../styles/theme';
+
+const style = {
+  textAlign: 'center',
+  padding: '10px 10px 15px',
+  background: theme.primaryAlt,
+  
+  '& p': {
+    marginBottom: 0,
+  }
+}
+
+const Footer = () => (
+  <footer className={ css(style) }>
+    <p>
+      Powered by{' '}
+      <a
+        href="//github.com/ijjk/mykb"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        MYKB
+      </a>
+    </p>
+  </footer>
+)
+
+export default Footer
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -0,0 +1,170 @@
+import React, { Component } from 'react'
+import { css } from 'glamor'
+import theme from '../styles/theme'
+import { withRouter } from 'next/router'
+import { connect } from 'react-redux'
+import { doLogout } from '../redux/actions/userAct'
+import Link from 'next/link'
+import getUrl from '../util/getUrl'
+import mapUser from '../util/mapUser'
+
+const style = {
+  background: theme.primaryAlt, 
+  display: 'flex', 
+  flexDirection: 'row', 
+  alignItems: 'center', 
+  height: 55, 
+  
+  '& .navbar-brand': {
+    marginLeft: '0.75em', 
+    marginRight: 'auto',
+    
+    '& h3': {
+      marginBottom: 0, 
+    },
+  },
+
+  '& .navbar-burger': {
+    width: 32,
+    display: 'none', 
+    marginRight: 10,  
+
+    '&.active div': {
+      '&:nth-child(1)': {
+        transformOrigin: 'center', 
+        transform: 'translateY(8px) rotate(45deg)',
+      },
+      '&:nth-child(2)': {
+        opacity: 0, 
+      },
+      '&:nth-child(3)': {
+        transformOrigin: 'left -6px', 
+        transform: 'translateY(8px) rotate(-45deg)',
+      },
+    },
+    '& div': {
+      transition: 'all ease-in-out 150ms',
+      width: '100%',
+      height: 2, 
+      margin: '5px 0', 
+      borderRadius: 1, 
+      background: theme.text, 
+    },
+  },
+
+  '& .navbar-items': {
+    display: 'inline-flex', 
+    flexDirection: 'row', 
+    
+    '& .active .item, .item:hover': {
+      background: theme.primary, 
+    },
+    '& .item': {
+      margin: 0, 
+      cursor: 'pointer', 
+      padding: '15px 20px',
+    }
+  },
+
+  '@media screen and (max-width: 840px)': {
+    '& .navbar-burger': {
+      display: 'inline-block',
+    }, 
+
+    '& .navbar-items': {
+      display: 'block', 
+      overflow: 'hidden',
+      position: 'fixed', 
+      top: 55, 
+      left: 0, 
+      zIndex: 5, 
+      background: theme.primaryAlt, 
+      width: '100%', 
+      transform: 'scaleY(0)', 
+      transformOrigin: 'top', 
+      transition: 'all ease-in-out 125ms', 
+
+      '&.active': {
+        transform: 'scaleY(1)', 
+        overflow: 'auto', 
+      },
+      '& .item': {
+        width: '100%', 
+        padding: '5px 0', 
+        textAlign: 'center',
+      }
+    }
+  }
+}
+
+const NavLink = ({ children, href, active }) => {
+  const activeClass = active ? ' active' : ''
+  return (
+    <Link href={href} as={getUrl(href)}>
+      <a className={activeClass}>{children}</a>
+    </Link>
+  )
+}
+const navItems = [['/', 'Home'], ['/new', 'New Doc'], ['/settings', 'Settings']]
+
+class Header extends Component {
+  state = {
+    open: false,
+  }
+  hideNav = () => this.setState({ open: false })
+  toggleNav = () =>
+    this.setState({
+      open: !this.state.open,
+    })
+  isActive = url => getUrl(this.props.router.pathname) === getUrl(url)
+  logout = e => {
+    e.preventDefault()
+    this.hideNav()
+    doLogout()
+  }
+
+  render() {
+    const expandClass = this.state.open ? ' active' : ''
+    const { user } = this.props
+    return (
+      <nav className={ "navbar " + css(style) } role="navigation" aria-label="main navigation">
+        <div className="navbar-brand">
+          <NavLink href="/">
+            <h3 onClick={this.hideNav}>MYKB</h3>
+          </NavLink>
+        </div>
+
+        {!user.email
+          ? null
+          : [
+              <div
+                className={'navbar-burger ' + expandClass}
+                onClick={this.toggleNav}
+                key="burger"
+              >
+                <div />
+                <div />
+                <div />
+              </div>,
+              <div className={'navbar-items' + expandClass} key="items">
+                {navItems.map(item => (
+                  <NavLink
+                    key={item[0]}
+                    href={item[0]}
+                    active={this.isActive(item[0])}
+                  >
+                    <p className="item" onClick={this.hideNav}>
+                      {item[1]}
+                    </p>
+                  </NavLink>
+                ))}
+                <a href="/logout" onClick={this.logout}>
+                  <p className="item">Logout</p>
+                </a>
+              </div>,
+            ]}
+      </nav>
+    )
+  }
+}
+export default withRouter(connect(mapUser)(Header))
--- a/src/components/KeyShortcuts.js
+++ b/src/components/KeyShortcuts.js
@@ -0,0 +1,71 @@
+import { Component } from 'react'
+import Router from 'next/router'
+import getUrl from '../util/getUrl'
+import { getKey } from '../util/keys'
+import { doLogout } from '../redux/actions/userAct'
+
+/* - keyboard shortcuts
+  g then h -> navigate home
+  g then n -> navigate to new doc
+  g then s -> navigate to settings
+  g then l -> logout
+  e (when on doc page) -> edit doc
+  / (when on home page) -> focus search
+  ctrl/cmd + enter -> submit new doc (handled in CodeMirror component)
+*/
+const keyToUrl = {
+  72: '/',
+  78: '/new',
+  83: '/settings',
+}
+const keyToEl = {
+  69: { sel: '#edit', func: 'click' },
+  191: { sel: '.search', func: 'focus' },
+}
+
+class KeyShortcuts extends Component {
+  handleDown = e => {
+    const tag = e.target.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA') return
+    const key = getKey(e)
+    if (this.prevKey === 71) {
+      // prev key was g
+      switch (key) {
+        case 72:
+        case 78:
+        case 83: {
+          const url = keyToUrl[key]
+          Router.push(url, getUrl(url))
+          break
+        }
+        case 76: {
+          setTimeout(doLogout, 1)
+          break
+        }
+        default:
+          break
+      }
+    }
+    switch (key) {
+      case 69:
+      case 191: {
+        const { sel, func } = keyToEl[key]
+        const el = document.querySelector(sel)
+        if (el) setTimeout(() => el[func](), 1)
+        break
+      }
+      default:
+        break
+    }
+    this.prevKey = key
+  }
+  componentDidMount() {
+    window.addEventListener('keydown', this.handleDown)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleDown)
+  }
+  render = () => null
+}
+
+export default KeyShortcuts
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { doLogin } from '../redux/actions/userAct'
+import Spinner from './Spinner'
+import PaddedRow from './PaddedRow'
+import mapUser from '../util/mapUser'
+
+class Login extends Component {
+  state = {
+    email: '',
+    pass: '',
+  }
+
+  updVal = e => {
+    const el = e.target
+    const val = el.value
+    if (el.getAttribute('type') === 'email') {
+      return this.setState({ email: val })
+    }
+    this.setState({ pass: val })
+  }
+
+  submit = e => {
+    const { pending } = this.props.user
+    let { email, pass } = this.state
+    email = email.trim()
+    pass = pass.trim()
+    e.preventDefault()
+
+    if (pending || email.length === 0 || pass.length == 0) {
+      return
+    }
+    doLogin({ email, password: pass })
+  }
+
+  render() {
+    const { pending, error } = this.props.user
+    return (
+      <div className="container content">
+        <PaddedRow amount={25} vCenter>
+          <h4>Please login to continue</h4>
+          <form noValidate>
+            <fieldset>
+              <label htmlFor="email">Email:</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                autoFocus
+                placeholder="John@deux.com"
+                onChange={this.updVal}
+              />
+              <label htmlFor="pass">Pass:</label>
+              <input
+                type="password"
+                id="pass"
+                name="password"
+                placeholder="Super secret password..."
+                onChange={this.updVal}
+              />
+            </fieldset>
+            <button
+              className={'float-right' + (pending ? ' disabled' : '')}
+              onClick={this.submit}
+            >
+              {pending ? <Spinner /> : 'Submit'}
+            </button>
+
+            {!error ? null : <p>{error}</p>}
+          </form>
+        </PaddedRow>
+      </div>
+    )
+  }
+}
+export default connect(mapUser)(Login)
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.js
@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic'
+import freezeSSR from '../util/freezeSSR'
+
+const Markdown = dynamic(import('react-markdown'), freezeSSR('.Markdown'))
+const link = props => <a {...props} target="_blank" rel="noopener noreferrer" />
+const renderers = { link }
+const AddRenderers = ({ className, source }) => (
+  <Markdown {...{ className, source, renderers }} />
+)
+
+export default AddRenderers
--- a/src/components/MngDoc.js
+++ b/src/components/MngDoc.js
@@ -0,0 +1,181 @@
+import React, { Component } from 'react'
+import Router from 'next/router'
+import dynamic from 'next/dynamic'
+import getUrl from '../util/getUrl'
+import getJwt from '../util/getJwt'
+import Page from '../components/Page'
+import Markdown from '../components/Markdown'
+import updStateFromId from '../util/updStateFromId'
+import { checkDir, checkName } from '../util/checkDirParts'
+import '../styles/monokai'
+import '../styles/codemirror'
+
+const CodeMirrorSkel = () => (
+  <div className="column">
+    <textarea style={{ height: 'calc(300px - 1.2rem)', margin: 0 }} />
+  </div>
+)
+const CodeMirror = dynamic(typeof window !== 'undefined' && import('../components/CodeMirror'), {
+  loading: CodeMirrorSkel,
+  ssr: false,
+})
+const initState = {
+  name: '',
+  dir: '',
+  md: '## New Document!!',
+  editMode: false,
+  error: null,
+  pending: false,
+}
+
+class MngDoc extends Component {
+  state = initState
+
+  updVal = updStateFromId.bind(this)
+
+  updMd = md => this.setState({ md })
+
+  submit = async () => {
+    let { name, md, dir, editMode } = this.state
+    let data = {
+      name: checkName(name),
+      dir: checkDir(dir),
+      md,
+    }
+    const doErr = error => this.setState({ pending: false, error })
+    const dirErr =
+      'can only contain A-Z, a-z, 0-9, -, or . and not start or end with .'
+
+    if (!data.name)
+      return doErr(
+        'Document name ' + (data.name === 0 ? 'can not be empty' : dirErr)
+      )
+    if (!data.dir && data.dir !== 0) {
+      return doErr('Directory ' + dirErr)
+    } else if (data.dir === 0) {
+      data.dir = ''
+    }
+    if (data.md.trim().length === 0) {
+      return doErr('Content can not be empty')
+    }
+    let url = getUrl('docs'),
+      method = 'POST',
+      headers = {
+        Authorization: getJwt(),
+        'Content-Type': 'application/json',
+      }
+    if (editMode) {
+      let numRemoved = 0
+      const dataKeys = Object.keys(data)
+      dataKeys.forEach(k => {
+        if (data[k] === this.props.doc[k]) {
+          delete data[k]
+          numRemoved++
+        }
+      })
+      if (dataKeys.length === numRemoved) return
+      url = getUrl('docs/' + this.props.doc.id)
+      method = 'PATCH'
+    }
+    this.setState({ error: null, pending: true })
+    const res = await fetch(url, {
+      headers,
+      method,
+      body: JSON.stringify(data),
+    }).catch(doErr)
+    try {
+      data = await res.json()
+    } catch (err) {
+      data = { message: 'An error occurred submitting doc' }
+    }
+    if (res.ok) {
+      const { id } = data
+      return Router.push(
+        {
+          pathname: '/k',
+          query: { id },
+        },
+        getUrl(`k/${id}`)
+      )
+    }
+    doErr(data.message)
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const { doc } = nextProps
+    if (doc && !prevState.didInit) {
+      const { name, dir, md } = doc
+      return { name, md, dir, editMode: true, didInit: true }
+    } else if (!prevState.didInit && prevState.id) {
+      return { ...initState, didInit: true }
+    } else if (!prevState.didInit) {
+      return { didInit: true }
+    }
+    return null
+  }
+
+  render() {
+    const { md, dir, name, error, pending } = this.state
+    const rowStyle = { paddingTop: 10 }
+    return (
+      <Page>
+        <div className="row fill" style={rowStyle}>
+          <div className="column column-50">
+            <Markdown className="fill Markdown" source={md} />
+          </div>
+          <div className="column column-50">
+            <div className="row">
+              <div className="column column-60">
+                <input
+                  type="text"
+                  maxLength={250}
+                  placeholder="New document name"
+                  id="name"
+                  value={name}
+                  onChange={this.updVal}
+                />
+              </div>
+              <div className="column">
+                <input
+                  type="text"
+                  maxLength={1024}
+                  placeholder="Subdirectory (optional)"
+                  id="dir"
+                  value={dir}
+                  onChange={this.updVal}
+                />
+              </div>
+            </div>
+            <div className="row">
+              <CodeMirror
+                value={md}
+                className="column WrapCodeMirror"
+                onChange={this.updMd}
+                onSubmit={this.submit}
+                options={{
+                  theme: 'monokai',
+                  mode: 'markdown',
+                  lineWrapping: true,
+                }}
+              />
+            </div>
+            <div className="row" style={{ marginTop: 5 }}>
+              <div className="column">
+                <span>{error}</span>
+                <button
+                  className="float-right"
+                  style={{ marginTop: 5 }}
+                  onClick={pending ? null : this.submit}
+                >
+                  Submit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Page>
+    )
+  }
+}
+
+export default MngDoc
--- a/src/components/PaddedRow.js
+++ b/src/components/PaddedRow.js
@@ -0,0 +1,16 @@
+const PaddedRow = ({ children, amount, vCenter }) => {
+  amount = amount || 20
+  const PadItem = () => <div className={'column column-' + amount + ' nomob'} />
+  let rowProps = { className: 'row' }
+  if (vCenter) rowProps = { className: 'row v-center' }
+  else rowProps = { ...rowProps, style: { paddingTop: amount } }
+
+  return (
+    <div {...rowProps}>
+      <PadItem />
+      <div className="column">{children}</div>
+      <PadItem />
+    </div>
+  )
+}
+export default PaddedRow
--- a/src/components/Page.js
+++ b/src/components/Page.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import Header from './Header'
+import KeyShortcuts from './KeyShortcuts'
+import Footer from './Footer'
+import Login from './Login'
+import Setup from './Setup'
+import mapUser from '../util/mapUser'
+
+const Page = ({ user, children }) => {
+  return (
+    <div>
+      <Header />
+      <KeyShortcuts />
+      {(() => {
+        if (user.email) {
+          return <div className="container content">{children}</div>
+        }
+        return user.setup ? <Setup /> : <Login {...{ user }} />
+      })()}
+      <Footer />
+    </div>
+  )
+}
+export default connect(mapUser)(Page)
--- a/src/components/Setup.js
+++ b/src/components/Setup.js
@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+import { doLogin } from '../redux/actions/userAct'
+import PaddedRow from './PaddedRow'
+import Spinner from './Spinner'
+import getUrl from '../util/getUrl'
+
+export default class Setup extends Component {
+  state = {
+    email: '',
+    password: '',
+    confirmPass: '',
+    pending: false,
+    error: null,
+  }
+  updVal = e => {
+    const el = e.target
+    let key = 'email'
+    if (el.id === 'pass') key = 'password'
+    else if (el.id === 'pass2') key = 'confirmPass'
+    const obj = {}
+    obj[key] = el.value
+    this.setState(obj)
+  }
+  submit = e => {
+    e.preventDefault()
+    let { email, password, confirmPass, pending } = this.state
+    if (pending) return
+    email = email.trim()
+    password = password.trim()
+    confirmPass = confirmPass.trim()
+    const hasEmpty = [email, password, confirmPass].some(
+      val => val.length === 0
+    )
+
+    if (hasEmpty) return
+    if (password.toLowerCase() !== confirmPass.toLowerCase()) {
+      return this.setState({ error: "Passwords don't match" })
+    }
+    this.setState({ pending: true, error: null })
+    const defaultErr = 'Could not create account'
+
+    fetch(getUrl('users'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password, admin: true }),
+    })
+      .then(res => {
+        if (res.ok) {
+          return doLogin({ email, password }, null, true)
+        }
+        res.json().then(({ message }) => {
+          const error = message || defaultErr
+          this.setState({ pending: false, error })
+        })
+      })
+      .catch(err => {
+        const error = err.message || defaultErr
+        this.setState({ pending: false, error })
+      })
+  }
+  render() {
+    const { pending, error } = this.state
+    return (
+      <div className="container content">
+        <PaddedRow amount={25} vCenter>
+          <div className="column">
+            <h3>Setup account</h3>
+            <form noValidate>
+              <fieldset>
+                <label htmlFor="email">Email:</label>
+                <input
+                  type="email"
+                  autoFocus
+                  id="email"
+                  placeholder={"Your email (does't have to be actual email)"}
+                  onChange={this.updVal}
+                />
+                <label htmlFor="pass">Password:</label>
+                <input
+                  type="password"
+                  id="pass"
+                  maxLength={512}
+                  placeholder="A super secret password"
+                  onChange={this.updVal}
+                />
+                <label htmlFor="pass2">Confirm Password:</label>
+                <input
+                  type="password"
+                  id="pass2"
+                  maxLength={512}
+                  placeholder="Confirm your super secret password"
+                  onChange={this.updVal}
+                />
+                <button className="float-right" onClick={this.submit}>
+                  {pending ? <Spinner /> : 'Submit'}
+                </button>
+                {!error ? null : <p className="danger">{error}</p>}
+              </fieldset>
+            </form>
+          </div>
+        </PaddedRow>
+      </div>
+    )
+  }
+}
--- a/src/components/Spinner.js
+++ b/src/components/Spinner.js
@@ -0,0 +1,2 @@
+const Spinner = props => <div className="spinner" {...props} />
+export default Spinner
--- a/src/redux/actions/userAct.js
+++ b/src/redux/actions/userAct.js
@@ -0,0 +1,82 @@
+import fetch from 'isomorphic-unfetch'
+import store from '../store'
+import getUrl from '../../util/getUrl'
+
+// define action types
+export const SET_USER = 'SET_USER'
+export const LOGIN_PENDING = 'LOGIN_PENDING'
+export const LOGIN_FAILED = 'LOGIN_FAILED'
+export const LOGOUT = 'LOGOUT'
+
+export const setUser = user => {
+  store.dispatch({
+    type: SET_USER,
+    data: user,
+  })
+} // setUser
+
+export const doLogout = () => {
+  if (typeof window !== 'undefined') {
+    window.localStorage.removeItem('jwt')
+    document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;'
+  }
+  store.dispatch({ type: LOGOUT })
+} // doLogout
+
+export async function doLogin(creds, jwt, noPend) {
+  !noPend && store.dispatch({ type: LOGIN_PENDING })
+  const authReqOpts = { method: 'POST', credentials: 'include' }
+  const authReqHead = {
+    headers: jwt
+      ? { Authorization: jwt }
+      : {
+          'Content-Type': 'application/json',
+        },
+  }
+  const authReqBody = jwt
+    ? null
+    : {
+        body: JSON.stringify({ ...creds, strategy: 'local' }),
+      }
+  const authReq = new Request(getUrl('auth'), {
+    ...authReqOpts,
+    ...authReqHead,
+    ...authReqBody,
+  })
+  const authRes = await fetch(authReq).catch(err => {
+    store.dispatch({ type: LOGIN_FAILED, data: err.message })
+  })
+  if (!authRes.ok) {
+    let error
+    try {
+      error = await authRes.json()
+      error = error.message
+    } catch (err) {
+      error =
+        authRes.status === 429
+          ? 'Max login attempts reached'
+          : 'An error occurred during login'
+    }
+    return store.dispatch({
+      type: LOGIN_FAILED,
+      data: error,
+    })
+  }
+  const { accessToken } = await authRes.json()
+  const payload = accessToken.split('.')[1]
+  const { userId } = JSON.parse(atob(payload))
+  const userReq = new Request(getUrl(`/users/${userId}`), {
+    headers: {
+      Authorization: accessToken,
+    },
+  })
+  const userRes = await fetch(userReq)
+  if (!userRes.ok) {
+    return store.dispatch({
+      type: LOGIN_FAILED,
+      data: 'failed to get user',
+    })
+  }
+  window.localStorage.setItem('jwt', accessToken)
+  setUser(await userRes.json())
+} // doLogin
--- a/src/redux/reducers/userRed.js
+++ b/src/redux/reducers/userRed.js
@@ -0,0 +1,46 @@
+import {
+  SET_USER,
+  LOGIN_PENDING,
+  LOGIN_FAILED,
+  LOGOUT,
+} from '../actions/userAct'
+
+const initState = {
+  setup: false,
+  _id: null,
+  email: null,
+  admin: null,
+  pending: false,
+  error: null,
+}
+
+function user(state = initState, action) {
+  switch (action.type) {
+    case SET_USER: {
+      return {
+        ...initState,
+        ...action.data,
+      }
+    }
+    case LOGIN_PENDING: {
+      return {
+        ...initState,
+        pending: true,
+      }
+    }
+    case LOGIN_FAILED: {
+      return {
+        ...state,
+        pending: false,
+        error: action.data,
+      }
+    }
+    case LOGOUT: {
+      return initState
+    }
+    default:
+      return state
+  }
+}
+
+export default user
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -0,0 +1,19 @@
+import { applyMiddleware, combineReducers, createStore } from 'redux'
+
+import user from './reducers/userRed'
+
+let middleware
+if (process.env.NODE_ENV !== 'production') {
+  const logger = require('redux-logger').default
+  if (typeof window !== 'undefined') {
+    middleware = applyMiddleware(logger)
+  }
+}
+
+const reducers = combineReducers({
+  user,
+})
+
+export default (middleware
+  ? createStore(reducers, middleware)
+  : createStore(reducers))
--- a/src/services/docs/docs.hooks.js
+++ b/src/services/docs/docs.hooks.js
@@ -1,7 +1,7 @@
 const { authenticate } = require('@feathersjs/authentication').hooks
-const { checkDir, checkName } = require('../../../util/checkDirParts')
+const { checkDir, checkName } = require('../../util/checkDirParts')
 const { disable, invalid, adminOnly } = require('../hooksUtil')
-const getUrl = require('../../../util/getUrl')
+const getUrl = require('../../util/getUrl')
 const nameIsValid = name => {
  name = checkName(name)
  if (!name) return invalid('name')
--- a/src/services/docs/docs.service.js
+++ b/src/services/docs/docs.service.js
@@ -1,7 +1,7 @@
 // Initializes the `docs` service on path `/docs`
 const createService = require('./docs.class.js')
 const hooks = require('./docs.hooks')
-const getUrl = require('../../../util/getUrl')
+const getUrl = require('../../util/getUrl')

 module.exports = function(app) {
  const paginate = app.get('paginate')
--- a/src/services/users/users.service.js
+++ b/src/services/users/users.service.js
@@ -2,7 +2,7 @@
 const createService = require('feathers-nedb')
 const createModel = require('../../models/users.model')
 const hooks = require('./users.hooks')
-const getUrl = require('../../../util/getUrl')
+const getUrl = require('../../util/getUrl')

 module.exports = function(app) {
  const Model = createModel(app)
--- a/src/styles/Roboto.js
+++ b/src/styles/Roboto.js
@@ -0,0 +1,225 @@
+import { css } from 'glamor'
+css.insert(`/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc3CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc-CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc2CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc5CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc1CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc0CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsTYl4BO.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}`)
--- a/src/styles/codemirror.js
+++ b/src/styles/codemirror.js
@@ -0,0 +1,350 @@
+import { css } from 'glamor'
+console.log('codemirror styles!!!')
+css.insert(`
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
+`)
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -0,0 +1,209 @@
+import { css, rehydrate, media, keyframes } from 'glamor'
+import theme from './theme'
+
+// rehydrate must be called before any glamor calls
+// or else styles will duplicate
+if (typeof window !== 'undefined') {
+  rehydrate(window.__NEXT_DATA__.ids)
+}
+
+// must be required after rehydrate or it will duplicate
+require('./milligram')
+require('./Roboto')
+
+css.global('body, code, pre', {
+  background: theme.primary,
+  color: theme.text,
+  margin: 0,
+})
+
+css.global('pre, code', {
+  fontSize: '1.5rem',
+})
+
+css.global('input, textarea, select, button, .button, .cm-s-monokai.CodeMirror', {
+  color: theme.text,
+  borderRadius: '.4rem',
+  border: 'none !important',
+  backgroundColor: `${theme.primaryAlt} !important`,
+})
+
+css.global('button[disabled], button.disabled', {
+  cursor: 'default',
+})
+
+css.global('input, textarea', {
+  fontSize: '1.6rem',
+  fontFamily: theme.fontFamily,
+  fontWeight: 300,
+  resize: 'none',
+})
+
+css.global('input[disabled], textarea[disabled]', {
+  opacity: 0.8,
+  cursor: 'not-allowed',
+})
+
+css.global('input::placeholder, textarea::placeholder', {
+  opacity: 0.85,
+  color: theme.text,
+})
+
+css.global('select', {
+  WebkitAppearance: 'none',
+  MozAppearance: 'none',
+  textOverflow: '',
+  background: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat`,
+})
+
+css.global('select:focus', {
+  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')`,
+})
+
+css.global('a', {
+  color: theme.link,
+  cursor: 'pointer',
+})
+
+css.global('a:visited, a:focus', {
+  color: theme.link,
+})
+
+css.global('a:hover', {
+  color: theme.linkAct,
+})
+
+css.global('.danger', {
+  color: theme.danger,
+})
+
+css.global('.noMargin', {
+  margin: '0 !important',
+})
+
+css.global('.float-right', {
+  marginLeft: 'auto',
+})
+
+css.global('.float-left', {
+  marginRight: 'auto',
+})
+
+css.global('.container', {
+  display: 'flex',
+  flexDirection: 'column',
+})
+
+css.global('.CodeMirror', {
+  width: '100%',
+})
+
+css.global('.cm-s-monokai span.cm-comment', {
+  color: '#ccc9ba',
+})
+
+css.global('.content', {
+  minHeight: 'calc(100vh - 55px - 50px)',
+  padding: 10,
+})
+
+css.global('.content p, .content pre', {
+  wordWrap: 'break-word',
+})
+
+css.global('.v-center', {
+  minHeight: 'calc(100vh - 55px - 50px - 20px)',
+  flexDirection: 'row',
+  alignItems: 'center',
+})
+
+css.global('.nomob', {
+  display: 'none !important',
+})
+
+css.global('.inline', {
+  display: 'inline-flex !important',
+  alignItems: 'center',
+})
+
+css.global('.inline select, .inline input', {
+  width: 'auto',
+  height: 28,
+  flexGrow: 1,
+  marginLeft: 5,
+  marginBottom: 0,
+  padding: 6,
+  border: 'none',
+})
+
+css.global('.Markdown pre', {
+  marginBottom: '2.5rem',
+})
+
+const spinKeys = keyframes('spinner', {
+  from: {
+    transform: 'rotate(0deg)',
+  },
+  to: {
+    transform: 'rotate(360deg)',
+  },
+})
+
+css.global('.spinner', {
+  height: 24,
+  width: 24,
+  borderRadius: '100%',
+  border: `2px solid ${theme.text}`,
+  borderRight: 'none',
+  borderBottom: 'none',
+  animation: `${spinKeys} 500ms linear infinite`,
+})
+
+css.global('.paginate', {
+  listStyle: 'none', 
+  textAlign: 'center', 
+  userSelect: 'none', 
+  margin: 0,
+})
+
+css.global('.paginate li', {
+  display: 'inline-block',
+})
+    
+css.global('.paginate li.active a', {
+  borderColor: theme.link,
+})
+
+css.global('.paginate a', {
+  outline: 0,
+  borderRadius: '50%', 
+  border: '1px solid',
+  borderColor: 'transparent',
+  padding: '3px 8px',
+})
+
+css.insert(`
+  @media screen and (max-width: 639px) {
+    .row .column.column-50 {
+      max-width: 100%;
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    .nomob {
+      display: block !important; 
+    }
+  }
+`)
+
+media('screen and (max-width: 639px)', {
+  '.row .column.column-50': {
+    maxWidth: '100%'
+  }
+})
+
+media('screen and (min-width: 640px)', {
+  '.nomob': {
+    display: 'block !important',
+  }
+})
--- a/src/styles/milligram.js
+++ b/src/styles/milligram.js
--- a/src/styles/monokai.js
+++ b/src/styles/monokai.js
@@ -0,0 +1,44 @@
+import { css } from 'glamor'
+css.insert(`
+/* Based on Sublime Text's Monokai theme */
+
+.cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }
+.cm-s-monokai div.CodeMirror-selected { background: #49483E; }
+.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
+.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
+.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }
+.cm-s-monokai .CodeMirror-guttermarker { color: white; }
+.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
+.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }
+.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+
+.cm-s-monokai span.cm-comment { color: #75715e; }
+.cm-s-monokai span.cm-atom { color: #ae81ff; }
+.cm-s-monokai span.cm-number { color: #ae81ff; }
+
+.cm-s-monokai span.cm-comment.cm-attribute { color: #97b757; }
+.cm-s-monokai span.cm-comment.cm-def { color: #bc9262; }
+.cm-s-monokai span.cm-comment.cm-tag { color: #bc6283; }
+.cm-s-monokai span.cm-comment.cm-type { color: #5998a6; }
+
+.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }
+.cm-s-monokai span.cm-keyword { color: #f92672; }
+.cm-s-monokai span.cm-builtin { color: #66d9ef; }
+.cm-s-monokai span.cm-string { color: #e6db74; }
+
+.cm-s-monokai span.cm-variable { color: #f8f8f2; }
+.cm-s-monokai span.cm-variable-2 { color: #9effff; }
+.cm-s-monokai span.cm-variable-3, .cm-s-monokai span.cm-type { color: #66d9ef; }
+.cm-s-monokai span.cm-def { color: #fd971f; }
+.cm-s-monokai span.cm-bracket { color: #f8f8f2; }
+.cm-s-monokai span.cm-tag { color: #f92672; }
+.cm-s-monokai span.cm-header { color: #ae81ff; }
+.cm-s-monokai span.cm-link { color: #ae81ff; }
+.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }
+
+.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
+.cm-s-monokai .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}
+`)
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -0,0 +1,9 @@
+export default {
+  primary: '#202225', 
+  primaryAlt: '#2c2f33',
+  danger: '#d44848', 
+  text: '#dcddde',
+  link: '#00d1b2', 
+  linkAct: '#009e87', 
+  fontFamily: `'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif`,
+}
--- a/src/util/checkDirParts.js
+++ b/src/util/checkDirParts.js
@@ -0,0 +1,52 @@
+const isOkDirPart = str => {
+  if (str.length > 255 || str.length === 0) return false
+  const end = str.length - 1
+  for (let i = 0; i < str.length; i++) {
+    const c = str.charCodeAt(i)
+    if (
+      !(c > 47 && c < 58) && // 0-9
+      !(c > 64 && c < 91) && // A-Z
+      !(c > 96 && c < 123) && // a-z
+      !(c === 95) &&
+      !(c === 45) && // _ and -
+      !(
+        (c === 46 || c === 32) && // period or space if not first or last
+        i !== 0 &&
+        i !== end
+      )
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+module.exports = {
+  checkDir: dir => {
+    if (typeof dir !== 'string') return false
+    dir = dir.trim()
+    if (dir.length === 0) return 0
+    if (dir.indexOf('/') > -1) {
+      dir = dir.split('/').filter(p => p.length !== 0)
+      if (dir.length === 1) {
+        if (!isOkDirPart(dir[0])) false
+        dir = dir[0]
+      } else if (dir.length === 0) {
+        dir = ''
+      } else if (dir.some(part => !isOkDirPart(part))) {
+        return false
+      }
+    } else if (!isOkDirPart(dir)) {
+      return false
+    }
+    return Array.isArray(dir) ? dir.join('/') : dir
+  },
+
+  checkName: name => {
+    if (typeof name !== 'string') return false
+    name = name.trim()
+    if (name.length === 0) return 0
+    if (!isOkDirPart(name)) return false
+    return name
+  },
+}
--- a/src/util/freezeSSR.js
+++ b/src/util/freezeSSR.js
@@ -0,0 +1,21 @@
+const freezeSSR = selector => {
+  const FrozenSSR = () => {
+    let __html = ''
+    let props = {}
+    if (typeof document !== 'undefined') {
+      let el = document.querySelector(selector)
+      if (el) {
+        __html = el.innerHTML
+        el.getAttributeNames().forEach(attr => {
+          const attrKey = attr === 'class' ? 'className' : attr
+          props[attrKey] = el.getAttribute(attr)
+        })
+      }
+    }
+    return <div {...props} dangerouslySetInnerHTML={{ __html }} />
+  }
+
+  return { loading: FrozenSSR }
+}
+
+export default freezeSSR
--- a/src/util/getDocs.js
+++ b/src/util/getDocs.js
@@ -0,0 +1,39 @@
+import fetch from 'isomorphic-unfetch'
+import parseSort from './parseSort'
+import getUrl from './getUrl'
+import getJwt from './getJwt'
+
+export const $limit = 12 // number of docs per page
+export const select = ['id', 'name', 'updated', 'dir'].map((f, i) => ({
+  [`$select[${i}]`]: f,
+}))
+
+export const getDocs = async (q, jwt) => {
+  const docsRes = await fetch(getUrl('docs', Boolean(jwt)) + q, {
+    headers: { Authorization: jwt || getJwt() },
+  }).catch(({ message }) => ({ ok: false, error: message }))
+  if (docsRes.ok) {
+    const res = await docsRes.json()
+    const total = res.total || 0
+    const docs = res.data || []
+    return { docs, total }
+  }
+  return { total: 0, docs: [], error: docsRes.message }
+}
+
+export const buildQ = q => {
+  if (!q.$search) delete q.$search
+  if (!q.$skip) delete q.$skip
+  else {
+    q.$skip = (q.$skip - 1) * $limit
+  }
+  const $sort = parseSort(q.$sort ? q.$sort : 'updated:-1')
+  delete q.$sort
+  select.forEach(sel => (q = { ...q, ...sel }))
+  q = { $limit, ...q }
+  let url = Object.keys(q)
+    .map(k => `${k}=${encodeURIComponent(q[k])}`)
+    .join('&')
+  url = `?${url}&${$sort}`
+  return url
+}
--- a/src/util/getJwt.js
+++ b/src/util/getJwt.js
@@ -0,0 +1,6 @@
+export default req => {
+  if (req) return req.jwt
+  if (typeof window !== 'undefined') {
+    return window.localStorage.getItem('jwt')
+  }
+}
--- a/src/util/getUrl.js
+++ b/src/util/getUrl.js
@@ -0,0 +1,18 @@
+const url = require('url')
+const urljoin = require('url-join')
+
+module.exports = (path, absolute) => {
+  const { pathPrefix } =
+    typeof window === 'undefined' ? app.get('kbConf') : window.kbConf
+
+  path = urljoin(pathPrefix, path)
+  if (!absolute) return path
+
+  // absolute should only be used during ssr
+  return url.format({
+    hostname: app.get('host'),
+    port: app.get('port'),
+    pathname: path,
+    protocol: 'http',
+  })
+}
--- a/src/util/keys.js
+++ b/src/util/keys.js
@@ -0,0 +1,4 @@
+module.exports = {
+  getKey: e => e.which || e.keyCode,
+  isCtrlKey: key => key === 91 || key === 93 || key === 17,
+}
--- a/src/util/mapUser.js
+++ b/src/util/mapUser.js
@@ -0,0 +1 @@
+export default ({ user }) => ({ user })
--- a/src/util/parseSort.js
+++ b/src/util/parseSort.js
@@ -0,0 +1,19 @@
+export default sort => {
+  let key, ascDesc
+  switch (typeof sort) {
+    case 'object': {
+      key = Object.keys(sort).pop()
+      ascDesc = sort[key]
+      break
+    }
+    case 'string': {
+      const parts = sort.split(':')
+      key = parts[0]
+      ascDesc = parts[1]
+      break
+    }
+    default:
+      break
+  }
+  return `$sort[${key}]=${ascDesc}`
+}
--- a/src/util/pathPrefix.js
+++ b/src/util/pathPrefix.js
@@ -0,0 +1,8 @@
+// make sure basePath doesn't end with /
+let { pathPrefix } = require('../../config/host.json')
+const urlChars = pathPrefix.split('')
+
+if (pathPrefix.length > 1 && urlChars.pop() === '/') {
+  pathPrefix = urlChars.join('')
+}
+module.exports = pathPrefix
--- a/src/util/stripPrefix.js
+++ b/src/util/stripPrefix.js
@@ -0,0 +1,8 @@
+const pathPrefix = require('./pathPrefix')
+
+module.exports = url => {
+  if (pathPrefix !== '/') {
+    url = url.split(pathPrefix).join('')
+  }
+  return url
+}
--- a/src/util/updStateFromId.js
+++ b/src/util/updStateFromId.js
@@ -0,0 +1,4 @@
+export default function updateStateFromId(e) {
+  const el = e.target
+  this.setState({ [el.id]: el.value })
+}