feat: add graphql support (#349)

* fix: eslint warnings

* refactor: use ramda + sanctuary instead of lodash

* refactor: use prettier-standard for formatting

* feat: enable security

* feat: add graphql

* chore: remove trailing commas from linter

* docs: new scripts on react and new-admin-server

* feat: handle authentication on graphql

* fix: perf improvement to date picker

* chore: add insecure-dev script to run servers

new-lamassu-admin/src/App.js

@@ -1,17 +1,40 @@
-import React from 'react'
-import { create } from 'jss'
-import { StylesProvider, jssPreset, MuiThemeProvider, makeStyles } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
-import { BrowserRouter as Router } from 'react-router-dom'
+import {
+  StylesProvider,
+  jssPreset,
+  MuiThemeProvider,
+  makeStyles
+} from '@material-ui/core/styles'
+import { setAutoFreeze } from 'immer'
+import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import ApolloClient from 'apollo-boost'
+import { ApolloProvider } from '@apollo/react-hooks'
 
 import Header from './components/Header'
 import { tree, Routes } from './routing/routes'
-
-import theme from './styling/theme'
 import global from './styling/global'
+import theme from './styling/theme'
 import { backgroundColor, mainWidth } from './styling/variables'
 
+const client = new ApolloClient({
+  credentials: 'include',
+  uri:
+    process.env.NODE_ENV === 'development'
+      ? 'https://localhost:8070/graphql/'
+      : '/graphql'
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render')
+  whyDidYouRender(React, { include: [/Logs/] })
+}
+
+// disable immer autofreeze for performance
+setAutoFreeze(false)
+
 const jss = create({
   plugins: [extendJss(), ...jssPreset().plugins]
 })
@@ -42,19 +65,21 @@ const App = () => {
   const classes = useStyles()
 
   return (
-    <StylesProvider jss={jss}>
-      <MuiThemeProvider theme={theme}>
-        <CssBaseline />
-        <div className={classes.root}>
-          <Router>
-            <Header tree={tree} />
-            <main className={classes.wrapper}>
-              <Routes />
-            </main>
-          </Router>
-        </div>
-      </MuiThemeProvider>
-    </StylesProvider>
+    <ApolloProvider client={client}>
+      <StylesProvider jss={jss}>
+        <MuiThemeProvider theme={theme}>
+          <CssBaseline />
+          <div className={classes.root}>
+            <Router>
+              <Header tree={tree} />
+              <main className={classes.wrapper}>
+                <Routes />
+              </main>
+            </Router>
+          </div>
+        </MuiThemeProvider>
+      </StylesProvider>
+    </ApolloProvider>
   )
 }