cphfront · kraenhansen · May 22, 2016
diff --git a/index.html b/index.html
@@ -2,10 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>Data-driven Recursive Graphics in React!</title>
   </head>
   <body>
     <div id='app'></div>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
     <script src="build/index.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -13,6 +13,10 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "node-sass": "^3.7.0",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
     "webpack": "^1.13.1"
   },
   "dependencies": {

diff --git a/src/app.js b/src/app.js
@@ -1,77 +1,42 @@
 import React from 'react';
 
-import Form from './form.js';
+import Organ from './organ.js';
 
-const fields = [
-  {
-    id: 'name',
-    inputComponentName: 'TextInput',
-    placeholder: 'Enter your name'
-  },
-  {
-    id: 'age',
-    inputComponentName: 'TextInput',
-    placeholder: 'Enter your age'
-  },
-  {
-    id: 'gender',
-    inputComponentName: 'Radio',
-    options: ['male', 'female', 'other']
-  }
-];
+const BASE_URL = 'http://api.socialsquare.dk/';
+const AUTH_TOKEN = '';
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
+    this.getURL = (path) => {
+      return BASE_URL + path + '/?auth_token=' + AUTH_TOKEN;
+    };
     this.state = {
-      isActive: false,
-      formData: {
-        name: '',
-        age: ''
-      }
+      organ: null
     };
-    this.toggleActiveState = this.toggleActiveState.bind(this);
-    this.handleFormFieldChange = this.handleFormFieldChange.bind(this);
-  }
-
-  render() {
-    console.log(this.state);
-    const style = this.state.isActive
-      ?
-      {backgroundColor: 'teal', color: 'white'}
-      :
-      {};
-    return (
-      <div style={style} onClick={this.toggleActiveState}>
-        <h1>Marathon Estimate</h1>
-        <Form
-          fields={fields}
-          formData={this.state.formData}
-          onChange={this.handleFormFieldChange}
-        />
-      </div>
-    );
   }
 
-  toggleActiveState() {
-    this.setState({
-      isActive: !this.state.isActive
-    });
+  componentDidMount() {
+    this.serverRequest = $.get(this.getURL('organs/socialsquare/tree'), function (result) {
+      this.setState({
+        organ: result
+      });
+    }.bind(this));
   }
 
-  handleFormFieldChange(value, id) {
-    this.setState({
-      formData: Object.assign({}, this.state.formData, {
-        [id]: value
-      })
-    });
+  componentWillUnmount() {
+    this.serverRequest.abort();
   }
 
-  // TODO: implement
-  sendFormData() {
-    fetch('marathon.com/api', {
-      method: 'POST',
-      body: JSON.stringify(this.state.formData)
-    });
+  render() {
+    return (
+      <div>
+        <header>
+          <h1>&ldquo;Data-driven Recursive Graphics in React!&rdquo;</h1>
+          <h2>{this.state.organ ? this.state.organ.name : 'Loading ...'}</h2>
+        </header>
+        <Organ organ={this.state.organ} />
+      </div>
+    );
   }
 }
diff --git a/src/circle.js b/src/circle.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Organ(props) {
+  console.log(props);
+  return null;
+
+  return (
+    {/*<circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="none" />*/}
+  );
+}
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,8 @@ import domReady from 'domready';
 
 import App from './app.js';
 
+require('../styles/main.scss');
+
 domReady(() => {
   const container = document.getElementById('app');
   render(<App/>, container);

diff --git a/src/organ.js b/src/organ.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Circle from './circle.js'
+
+export default function Organ(props) {
+  return (
+    <svg className="canvas">
+      <Circle />
+    </svg>
+  );
+}
diff --git a/styles/main.scss b/styles/main.scss
@@ -0,0 +1,27 @@
+@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
+
+html {
+  height: 100%;
+}
+
+body {
+  font-family: 'Slabo 27px', serif;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
+header {
+  text-align: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1; /* This is really strange - why would I need that? */
+}
+
+svg.canvas {
+  background-color: #eee;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -18,6 +18,9 @@ module.exports = {
       test: /\.jsx?$/,
       loader: 'babel',
       exclude: /node_modules/
+    }, {
+        test: /\.scss$/,
+        loaders: ["style", "css", "sass"]
     }]
   },
   resolve: {