diff --git a/.DS_Store b/.DS_Store
index c3e0826..8b4eed0 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/README.md b/README.md
index 26f9331..c73e236 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-## CsvEditor based on FLUX React JS Boilerplate
+## CsvEditor based on Flux-Chat example and some parts of FLUX React JS Boilerplate
Read more about FLUX over at [Facebook Flux Website](http://facebook.github.io/flux/)
Read more about RejactJS on [React JS Website](http://facebook.github.io/react/)
diff --git a/app/.DS_Store b/app/.DS_Store
index c328838..0647d0d 100644
Binary files a/app/.DS_Store and b/app/.DS_Store differ
diff --git a/app/App.js b/app/App.js
deleted file mode 100644
index 9f9f7a8..0000000
--- a/app/App.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/** @jsx React.DOM */
-var React = require('react');
-var Store = require('./Store.js');
-var actions = require('./actions.js');
-
-var App = React.createClass({
- getInitialState: function () {
- return {
- messages: Store.getMessages(),
- newMessage: ''
- };
- },
- componentWillMount: function () {
- Store.addChangeListener(this.changeState);
- },
- componentWillUnmount: function () {
- Store.removeChangeListener(this.changeState);
- },
- changeState: function () {
- this.setState({
- messages: Store.getMessages()
- });
- },
- addMessage: function (event) {
- event.preventDefault();
- var input = this.refs.newMessage.getDOMNode();
- actions.addMessage(input.value);
- this.setState({
- newMessage: ''
- });
- },
- updateNewMessage: function (event) {
- this.setState({
- newMessage: event.target.value
- });
- },
- renderMessages: function (message) {
- return (
- {message}
- );
- },
- render: function() {
- return (
-
- {this.state.messages.map(this.renderMessages)}
-
-
- );
- }
-
-});
-
-module.exports = App;
diff --git a/app/Store.js b/app/Store.js
deleted file mode 100644
index 7a7c0db..0000000
--- a/app/Store.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var flux = require('flux-react');
-var actions = require('./actions.js');
-
-module.exports = flux.createStore({
- messages: [],
- actions: [
- actions.addMessage
- ],
- addMessage: function (message) {
- this.messages.push(message);
- this.emitChange();
- },
- exports: {
- getMessages: function () {
- return this.messages;
- }
- }
-});
\ No newline at end of file
diff --git a/app/actions.js b/app/actions.js
deleted file mode 100644
index 1b98484..0000000
--- a/app/actions.js
+++ /dev/null
@@ -1,5 +0,0 @@
-var flux = require('flux-react');
-
-module.exports = flux.createActions([
- 'addMessage'
-]);
\ No newline at end of file
diff --git a/app/actions/.DS_Store b/app/actions/.DS_Store
new file mode 100644
index 0000000..a881c35
Binary files /dev/null and b/app/actions/.DS_Store differ
diff --git a/app/assets/index.html b/app/assets/index.html
index 99448bc..437509a 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -5,7 +5,6 @@
-
diff --git a/app/components/ChooseFile.react.js b/app/components/ChooseFile.react.js
new file mode 100644
index 0000000..87403a0
--- /dev/null
+++ b/app/components/ChooseFile.react.js
@@ -0,0 +1,12 @@
+var React = require('react');
+
+var ChooseFile = React.createClass({
+
+ render: function() {
+ return (
+
+ );
+ }
+});
+
+module.exports = ChooseFile;
\ No newline at end of file
diff --git a/app/components/SpreadSheet.react.js b/app/components/SpreadSheet.react.js
new file mode 100644
index 0000000..caba7ff
--- /dev/null
+++ b/app/components/SpreadSheet.react.js
@@ -0,0 +1,17 @@
+/** @jsx React.DOM */
+var React = require('react');
+var ChooseFile = require('./ChooseFile.react');
+
+var SpreadSheet = React.createClass({
+
+ render: function() {
+ return (
+
+
+
+ );
+ }
+
+});
+
+module.exports = SpreadSheet;
diff --git a/app/constants/CsvEditorConstants.js b/app/constants/CsvEditorConstants.js
new file mode 100644
index 0000000..6acea8d
--- /dev/null
+++ b/app/constants/CsvEditorConstants.js
@@ -0,0 +1,14 @@
+var keyMirror = require('keymirror');
+
+module.exports = {
+
+ ActionTypes: keyMirror({
+ CREATE_MESSAGE: null
+ }),
+
+ PayloadSources: keyMirror({
+ BACKEND_ACTION: null,
+ VIEW_ACTION: null
+ })
+
+};
diff --git a/app/dispatcher/CsvEditorDispatcher.js b/app/dispatcher/CsvEditorDispatcher.js
new file mode 100644
index 0000000..458f849
--- /dev/null
+++ b/app/dispatcher/CsvEditorDispatcher.js
@@ -0,0 +1,32 @@
+
+var Constants = require('../constants/CsvEditorConstants');
+
+var CsvEditorDispatcher = assign(new Dispatcher(), {
+
+ /**
+ * @param {object} action The details of the action, including the action's
+ * type and additional data coming from the server.
+ */
+ handleBackendAction: function(action) {
+ var payload = {
+ source: PayloadSources.BACKEND_ACTION,
+ action: action
+ };
+ this.dispatch(payload);
+ },
+
+ /**
+ * @param {object} action The details of the action, including the action's
+ * type and additional data coming from the view.
+ */
+ handleViewAction: function(action) {
+ var payload = {
+ source: PayloadSources.VIEW_ACTION,
+ action: action
+ };
+ this.dispatch(payload);
+ }
+
+});
+
+module.exports = CsvEditorDispatcher;
\ No newline at end of file
diff --git a/app/main.js b/app/main.js
index f5b9c1d..6ceaaea 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,4 +1,4 @@
/** @jsx React.DOM */
var React = require('react');
-var App = require('./App.js');
-React.render(, document.body);
\ No newline at end of file
+var SpreadSheet = require('./components/SpreadSheet.react');
+React.render(, document.body);
diff --git a/package.json b/package.json
index f59ecdf..0d1105a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,9 @@
"gulp-connect": "~2.2.0"
},
"dependencies": {
- "flux-react": "^2.6.0",
+ "flux": "^2.0.0",
+ "keymirror": "~0.1.0",
+ "object-assign": "^1.0.0",
"react": "^0.12.0"
}
}
diff --git a/styles/main.css b/styles/main.css
index a93b78e..ac03615 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,3 +1,12 @@
body {
background-color: #EAEAEA;
-}
\ No newline at end of file
+}
+
+.red-button {
+ background-color: white;
+ font-size: 2em;
+ font-color: red;
+ border-color: red;
+ border: 1px;
+}
+