started creating spreadsheet component

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 build
+.idea

app/actions/FIleActionsCreator.js

@@ -0,0 +1,17 @@
+/**
+ * Created by senadu on 12/22/14.
+ */
+
+var CsvEditorDispatcher = require('../dispatcher/CsvEditorDispatcher');
+var CsvEditorConstants = require('../constants/CsvEditorConstants');
+
+var ActionTypes = CsvEditorConstants.ActionTypes;
+
+module.exports = {
+    chooseFile: function(fileInput) {
+        CsvEditorDispatcher.handleViewAction({
+            type: ActionTypes.CHOOSE_FILE,
+            target: fileInput
+        })
+    }
+};

app/components/Application.react.js

@@ -0,0 +1,24 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var ChooseFile = require('./ChooseFile.react');
+var SpreadSheet = require('./SpreadSheet.react');
+
+var Application = React.createClass({
+
+    render: function () {
+        return (
+            <div>
+                <div className="menu">
+                    <ChooseFile />
+                </div>
+                <div className="spreadsheet">
+                    <SpreadSheet />
+                </div>
+            </div>
+        );
+    }
+
+});
+
+module.exports = Application;

app/components/ChooseFile.react.js

@@ -1,11 +1,22 @@
+/** @jsx React.DOM */
+
 var React = require('react');
 
 var ChooseFile = React.createClass({
 
-	render: function() {
+    getInitialState: function () {
-		return (
+        return {fileName: ""};
-		<button className="red-button">ChooseFile</button>
+    },
-		);
+
+    render: function () {
+        if (this.state.fileName === "") {
+            return (<input type="file" accept=".csv" onChange={this._onChange}/>);
+        } else
+            return (<div>Editing file.</div>);
+    },
+
+    _onChange: function(e) {
+        this.setState({fileName: e.target.value})
     }
 });
 

app/components/SpreadSheet.react.js

@@ -1,14 +1,36 @@
 /** @jsx React.DOM */
+
 var React = require('react');
-var ChooseFile = require('./ChooseFile.react');
+var LocalStore = require('../stores/LocalStore');
+
+
+var getStateFromStore = function () {
+    return {
+        columns: LocalStore.getColumns(),
+        data: LocalStore.getDataForColumns()
+    }
+};
+
 
 var SpreadSheet = React.createClass({
 
-	render: function() {
+    getInitialState: function() {
+        return getStateFromStore();
+    },
+
+    render: function () {
+
+        var columns = this.state.columns.map(function (column) {
+           return(<th>{column}</th>);
+        });
+
+
         return (
-		<div className="spreadsheet">
+            <table className="spreadsheet">
-		<ChooseFile />
+                <tr>
-		</div>
+		            {columns}
+                </tr>
+            </table>
         );
     }
 

app/constants/CsvEditorConstants.js

@@ -3,12 +3,16 @@ var keyMirror = require('keymirror');
 module.exports = {
 
   ActionTypes: keyMirror({    
-    CREATE_MESSAGE: null
+    CHOOSE_FILE: null
   }),
 
   PayloadSources: keyMirror({
     BACKEND_ACTION: null,
     VIEW_ACTION: null
+  }),
+
+  EventTypes: keyMirror({
+    FILE_CHOSEN: null
   })
 
 };

app/dispatcher/CsvEditorDispatcher.js

@@ -1,5 +1,8 @@
 
 var Constants = require('../constants/CsvEditorConstants');
+var Dispatcher = require('flux').Dispatcher;
+var assign = require('object-assign');
+
 
 var CsvEditorDispatcher = assign(new Dispatcher(), {
 

app/main.js

@@ -1,4 +1,4 @@
 /** @jsx React.DOM */
 var React = require('react');
-var SpreadSheet = require('./components/SpreadSheet.react');
+var Application = require('./components/Application.react');
-React.render(<SpreadSheet/>, document.body);
+React.render(<Application/>, document.body);

app/stores/LocalStore.js

@@ -0,0 +1,62 @@
+/**
+ * Created by senadu on 12/22/14.
+ */
+
+var CsvEditorDispatcher = require('../dispatcher/CsvEditorDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var CsvEditorConstants = require('../constants/CsvEditorConstants');
+var assign = require('object-assign');
+
+
+var ActionTypes = CsvEditorConstants.ActionTypes;
+var EventTypes =  CsvEditorConstants.EventTypes;
+
+
+var LocalStore = assign({}, EventEmitter.prototype, {
+
+    emitFileLoadedEvent: function() {
+        this.emit(EventTypes.FILE_CHOSEN);
+    },
+
+    /**
+     * @param {function} callback
+     */
+    addFileLoadedListener: function(callback) {
+        this.on(EventTypes.FILE_CHOSEN, callback);
+    },
+
+    removeFileLoadedListener: function(callback) {
+        this.removeListener(EventTypes.FILE_CHOSEN, callback);
+    },
+
+
+    getColumns: function() {
+        return ["First", "Second", "Third"];
+    },
+
+    getDataForColumns: function() {
+        return {
+            "First": [1,2,3,4,5],
+            "Second": [1.1,2.2,3.3,4.4,5.5],
+            "Third": ["Hamo", "Suljo","Aha", "Maha", "Vaha"]
+        }
+    }
+
+});
+
+
+LocalStore.dispatchToken = CsvEditorDispatcher.register(function(payload) {
+    var action = payload.action;
+
+    switch(action.type) {
+        case ActionTypes.FILE_CHOSEN:
+            LocalStore.emitFileLoadedEvent();
+            break;
+        default:
+            // do nothing
+    }
+});
+
+
+module.exports = LocalStore;
+