From d8dbb9eeec01ca95cbbe8924fcd4967b64d4097c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen=20=28Socialsquare=29?= Date: Sun, 22 May 2016 16:46:52 +0200 Subject: [PATCH] Initial commit of doom --- index.html | 3 +- package.json | 4 +++ src/app.js | 85 ++++++++++++++--------------------------------- src/circle.js | 10 ++++++ src/index.js | 2 ++ src/organ.js | 11 ++++++ styles/main.scss | 27 +++++++++++++++ webpack.config.js | 3 ++ 8 files changed, 84 insertions(+), 61 deletions(-) create mode 100644 src/circle.js create mode 100644 src/organ.js create mode 100644 styles/main.scss 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: {