Got static build working

davidgilbertson · Dec 7, 2016 · 3d4fdaf · 3d4fdaf
1 parent 19495e4
commit 3d4fdaf
Show file tree

Hide file tree

Showing 25 changed files with 10,424 additions and 330 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,6 +11,8 @@
       {
         "allow": [
           "info",
+          "time",
+          "timeEnd",
           "warn",
           "error"
         ]

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 .idea
-static/js
+static
 webpack/jsPackageName.json
 private
 

diff --git a/app/client/client.js b/app/client/client.js
@@ -1,10 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from '../components/App.jsx';
 import Perf from 'react-addons-perf';
+import App from '../components/App/App.jsx';
 
 window.Perf = Perf;
 
-const data = window.APP_DATA;
-
-ReactDOM.render(<App data={data} />, document.getElementById(`app`));
+// We don't want to inline this data cos it's HUGE
+// We fetch here, but we have already pre-fetched in the <head>
+// So it's already at least partially ready
+fetch(window.APP_DATA.dataFileName)
+.then(response => response.json())
+.then(data => {
+  ReactDOM.render(<App data={data} />, document.getElementById(`app`));
+});
diff --git a/app/components/App.jsx b/app/components/App.jsx
diff --git a/app/components/App/App.jsx b/app/components/App/App.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import SkillTable from '../SkillTable/SkillTable.jsx';
+
+if (process.env.IMPORT_SCSS) require(`./App.scss`); // eslint-disable-line global-require
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: props.data,
+      stats: [],
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <header className="header">
+          <h1 className="header__title">Know It All</h1>
+        </header>
+
+        <SkillTable {...this.state} />
+      </div>
+    );
+  }
+}
+
+App.propTypes = {
+  data: React.PropTypes.array,
+};
+
+export default App;
diff --git a/app/components/App/App.scss b/app/components/App/App.scss
@@ -0,0 +1,7 @@
+@import './reset';
+
+.header__title {
+    text-align: center;
+    font-size: 40px;
+    color: white;
+}
diff --git a/app/components/App/_reset.scss b/app/components/App/_reset.scss
@@ -0,0 +1,55 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+body, h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+    font-family: "Calibri Light", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 300;
+}
+
+body {
+    color: #333;
+    background: #bf4444;
+    overflow-y: scroll;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+a:focus {
+    outline: 0;
+}
+
+input {
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+    font-size: 1rem;
+    font-family: inherit;
+}
+
+body:not(.user-tabbing) input:focus {
+    outline: 0;
+}
+
+button {
+    background-color: transparent;
+    border: 0;
+    color: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    letter-spacing: 1px;
+}
diff --git a/app/components/SkillTable.jsx → app/components/SkillTable/SkillTable.jsx b/app/components/SkillTable.jsx → app/components/SkillTable/SkillTable.jsx
@@ -1,13 +1,14 @@
 import React from 'react';
 const Immutable = require(`immutable`);
 
-import TableRows from './TableRows';
-import { decorateData } from '../utils';
+import TableRows from '../TableRows/TableRows';
+import { decorateData } from '../../utils';
 import {
-  COLORS,
   KEYS,
   SCORES,
-} from '../constants';
+} from '../../constants';
+
+if (process.env.IMPORT_SCSS) require(`./SkillTable.scss`); // eslint-disable-line global-require
 
 function getArrayPath(stringPath) {
   return stringPath.replace(/\./g, `.children.`).split(`.`);
@@ -34,13 +35,26 @@ class SkillTable extends React.Component {
   constructor(props) {
     super(props);
 
-    const decoratedData = decorateData(props.data);
-    this.state = {
-      itemTree: Immutable.fromJS(decoratedData.itemTree),
-      currentNugget: decoratedData.itemTree[0],
-    };
-
-    this.nuggetList = decoratedData.itemList;
+    // TODO (davidg): we will always have data, since we wait for it before rendering on the client.
+    if (props.data) { // when rendered in Node, we will have data already
+      const decoratedData = decorateData(props.data);
+
+      // TODO (davidg): don't set currentNugget on load.
+      // but it will need to set it in any func that relies on it
+      this.state = {
+        itemTree: Immutable.fromJS(decoratedData.itemTree),
+        currentNugget: decoratedData.itemTree[0],
+      };
+
+      this.nuggetList = decoratedData.itemList;
+    } else { // when rendered on client we won't have data yet.
+      // this.state = {
+      //   itemTree: Immutable.fromJS([]),
+      //   currentNugget: {},
+      // };
+      //
+      // this.nuggetList = [];
+    }
 
     this.updateScore = this.updateScore.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
@@ -151,18 +165,9 @@ class SkillTable extends React.Component {
 
   render() {
     const { state } = this;
-    const styles = {
-      content: {
-        margin: `20px auto`,
-        maxWidth: 1000,
-        border: `1px solid ${COLORS.GREY_MID}`,
-        background: COLORS.WHITE,
-        boxShadow: `0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15)`,
-      },
-    };
 
     return (
-      <div style={styles.content}>
+      <div className="skill-table">
         <TableRows
           items={state.itemTree}
           currentNugget={state.currentNugget}
@@ -177,7 +182,7 @@ class SkillTable extends React.Component {
 }
 
 SkillTable.propTypes = {
-  data: React.PropTypes.array.isRequired,
+  data: React.PropTypes.array,
 };
 
 export default SkillTable;
diff --git a/app/components/SkillTable/SkillTable.scss b/app/components/SkillTable/SkillTable.scss
@@ -0,0 +1,8 @@
+@import '../global';
+
+.skill-table {
+    margin: 20px auto;
+    max-width: 1000px;
+    background: $WHITE;
+    box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,8 @@ @@
           {
             "allow": [
               "info",
+              "time",
+              "timeEnd",
               "warn",
               "error"
             ]
@@ Expand Down @@