OrangIT JavaScript code review, thanks to Wunderdog

client.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

let originalData = {}

class Update extends Component {
  render() {
    return <button onClick={() => this.props.onClick()}>Refresh</button>
  }
}

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rows: Object.keys(props.rows).length
    }
  }

  render() {
    if (this.state.rows === 0) {
      return <h1>Loading <Update onClick={this.props.onClick}/></h1>
    } else {
      return <h1>Loaded {this.state.rows} <Update onClick={this.props.onClick}/></h1>
    }
  }
}

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      load: false,
      data: {},
      names: false
    }
  }

  componentDidMount() {
    // (function(d, s, id){
    //   var js, fjs = d.getElementsByTagName(s)[0];
    //   if (d.getElementById(id)) {return;}
    //   js = d.createElement(s); js.id = id;
    //   js.src = "//connect.facebook.net/en_US/sdk.js";

    //   fjs.parentNode.insertBefore(js, fjs);
    // }(document, 'script', 'facebook-jssdk'));
  }

  componentWillMount() {
    this.setState({load: true})
    try {
      fetch('http://localhost:3131/api/data')
        .then(response => response.json())
        .then(data => this.state.data = data)
        .then(() => this.setState({load: false}))
    } catch (e) {
      // @todo
    }
  }

  render() {
    const a = this.state.data ? this.state.data.length === undefined ? 'o' : 'a' : null
    return <div>
      <Header rows={this.state.data} onClick={() => {
        this.setState({load: true})
        fetch('http://localhost:3131/api/data')
          .then(response => response.json())
          .then(data => this.state.data = data)
          .then(() => this.setState({load: false}))
      }}/>
      <input placeholder="filter by name" ref="filter" onKeyUp={() => {
        if (Object.keys(originalData).length === 0 && this.refs.filter.value) {
          originalData = this.state.data
          const fk = Object.keys(this.state.data).filter(key => {
            return originalData[key].name.toLowerCase().includes(this.refs.filter.value.toLowerCase())
          })

          this.setState({
            data: fk.reduce((obj, k) => {
              obj[k] = originalData[k]
              return obj
            }, {})
          })
        } else if (this.refs.filter.value) {
          const fk = Object.keys(this.state.data).filter(key => {
            return originalData[key] ? originalData[key].name.toLowerCase().includes(this.refs.filter.value.toLowerCase()) : false
          })
          this.setState({
            data: fk.reduce((obj, k) => {
              obj[k] = originalData[k]
              return obj
            }, {})
          })
        }
        else if (!this.refs.filter.value) {
          this.setState({data: originalData})
          originalData = {}
        }
      }}/>
      {a === 'o' ?
        Object.keys(this.state.data).map((key, index) => <h1 key={index}>{this.state.data[key].name}</h1>)
        : null}
      {a === 'a' ?
        this.state.data.map((key, index) => <h1 key={index}>{this.state.data.name}</h1>)
        : null}
    </div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

express-server.js

var x = require('express')
var app = x()
var fs = require('fs')
var _ = require('lodash')
import fetch from 'node-fetch'
const {promisify} = require('util')
const readFileAsync = promisify(fs.readFile)

app.use(x.static('dist'))
app.use('/dist', x.static('dist'))

// Read json file
var cache = null

function read(fields, req) {
  return new Promise(function (resolve) {
    try {
      const json = JSON.parse(fs.readFileSync('./AllSets-x.json').toString())

      if (cache == true) {
        fields.results = cache
      } else {
        try {
          cache = JSON.parse(fs.readFileSync('./.cache/cache.json').toString())
          fields.results = cache
        } catch (e) {
          console.log('ERR',e)
        }
      }

      fields.json = json
      return resolve({success: true})
    } catch (e) {
      return resolve({success: false})
    }
  })
}

export function getdata (req, res) {
  console.log(JSON.stringify(req, null, 2))
  let fields = {name: 1}

  if (req.query.insert === true) {
    fields.insert = true;
  }

  read(fields, req).then(function (response) {
    console.log(response.success == true ? 'parse success' : 'parse failure')
    if (req.query.names) {
      res.send(fields.results)
    } else {
      res.json(fields.json);
    }
  })
}

// Get root route and return json
app.get('/api/data', getdata)

/*
 * Load info page
 */
function loadStatisticsPage(req, res, next) {
  var value = null
  var card = null

  // try {
  //   var card = _.flattenDeep(_.flattenDeep(_.random(fs.readFileSync('./AllSets-x.json').toString())))
  //   try {
  //     var value = fs.readFileSync('./AllSets-x.json').toString()
  //   } catch (e) {
  //     throw e
  //   }
  // } catch (e) {
  //   throw e
  // }

  fetch('https://api.scryfall.com/cards/random').then(response => {
    readFileAsync('./AllSets-x.json').then(content => {
      value = content
    })
    if (response.status === 200) {
      return response.json()
    }
  }).then(randomCard => {
    card = randomCard
  })

  // return res.json({waiting: true})

  let done = false
  setInterval(() => {
    const dataLoaded = !!value && !!card
    console.log('waiting for data ...')
    if (dataLoaded === true && done === false) {
      done = true
      console.log('data loaded', {value: value.toString(), card: card})
      return res.json({value: JSON.parse(value.toString()), card: card})
    }
  }, 1000)
}

app.get('/statistics', loadStatisticsPage)

app.listen(3131, () => console.log('App listening on port 3000!'))

test-express-server.js

import fs from 'fs'
import { getdata } from './express-server.js'

describe('tests', () => {
  it('get data should take between 1 - 5 seconds', (done) => {

    let finalValue = null
    let request = {}
    let request2 = {}

    //query with names and insert

    request.query = {insert: true, names: true}
    let response = {}
    response.json = (value) => finalValue = value
    response.send = (value) => finalValue = value


    let dataWithNames = false

    let circles = 0
    setInterval(() => {
      if (circles < 2 && finalValue) {
        throw new Error('test was too fast did data load right?')
      } else if (circles > 2000 && finalValue) {
        throw new Error('test was too slow')
      } else if (finalValue) {
        dataWithNames = finalValue
        // done()
      }
      circles = circles + 1
    }, 1)

    setTimeout(() => getdata(request, response), 50) // fix too fast

    // test data

    setInterval(() => {
      if (dataWithNames) {

        const results = []
        results.push(Object.keys(dataWithNames).length)
        for (const result of results) {
          console.log('RESPONSE', result)
          if (result !== 220) {
            throw new Error('error with data')
          }
        }
        done()

        // if (Object.keys(dataWithNames).length !== 220) {
        // }
      }
    }, 10)

  })
})