simplify example

Author: casperlamboo

index.js

@@ -15,24 +15,32 @@ const reducer = combineReducers({ sketcher: sketcherReducer });
 const enhancer = compose(applyMiddleware(thunkMiddleware, promiseMiddleware(), createLogger({ collapsed: true })));
 const store = createStore(reducer, enhancer);
 
-// prepare html (SHOULDN'T BE DONE LIKE THIS)
-document.body.style.margin = 0;
-document.body.style.padding = 0;
-document.body.style.height = '100%';
-document.documentElement.style.height = '100%';
-document.documentElement.style.overflow = 'hidden';
-document.getElementById('app').style.height = '100%';
-
+// add actions to window
 import actionWrapper from 'redux-action-wrapper';
 import * as actions from './src/actions/index.js';
 window.actions = actionWrapper(actions, store.dispatch);
 
+// add model to store
 import modelData from './models/noodlebot.d3sketch';
 import JSONToSketchData from './src/shape/JSONToSketchData.js';
-(async () => {
-  const data = await JSONToSketchData(JSON.parse(modelData));
+JSONToSketchData(JSON.parse(modelData)).then(data => {
   store.dispatch(actions.openSketch({ data }));
-})();
+});
+
+// default css
+import jss from 'jss';
+import preset from 'jss-preset-default';
+import normalize from 'normalize-jss';
+jss.setup(preset());
+jss.createStyleSheet({
+  '@global body, html, #app': {
+    height: '100%'
+  },
+  '@global body': {
+    overflow: 'hidden'
+  },
+  ...normalize
+}).attach();
 
 // render dom
 import React from 'react';

package-lock.json

@@ -68,6 +68,8 @@
     "css-loader": "^0.28.7",
     "html-webpack-plugin": "^2.30.1",
     "html-webpack-template": "^6.0.2",
+    "jss-preset-default": "^4.0.1",
+    "normalize-jss": "^4.0.0",
     "raw-loader": "^0.5.1",
     "react-dom": "^16.1.1",
     "react-router-redux": "^4.0.8",