diff --git a/index.html b/index.html
index d7cf6be..bf66141 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,11 @@
-
+ Data-driven Recursive Graphics in React!
+
diff --git a/package.json b/package.json
index 98a5d96..b538cf1 100644
--- 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
index 5542500..f37c760 100644
--- 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 (
-
-
Marathon Estimate
-
-
- );
}
- 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 (
+
+
+ “Data-driven Recursive Graphics in React!”
+ {this.state.organ ? this.state.organ.name : 'Loading ...'}
+
+
+
+ );
}
}
diff --git a/src/circle.js b/src/circle.js
new file mode 100644
index 0000000..1bd52dc
--- /dev/null
+++ b/src/circle.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Organ(props) {
+ console.log(props);
+ return null;
+
+ return (
+ {/**/}
+ );
+}
diff --git a/src/index.js b/src/index.js
index 089559f..061a01d 100644
--- 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(, container);
diff --git a/src/organ.js b/src/organ.js
new file mode 100644
index 0000000..8e1c93e
--- /dev/null
+++ b/src/organ.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Circle from './circle.js'
+
+export default function Organ(props) {
+ return (
+
+ );
+}
diff --git a/styles/main.scss b/styles/main.scss
new file mode 100644
index 0000000..7e45d62
--- /dev/null
+++ 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
index 79a9591..1125174 100644
--- 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: {