add redux and server api

Author: meanstackmax

index.js

@@ -3,6 +3,7 @@ const app = express()
 const cors = require('cors')
 const path = require('path')
 const PORT = process.env.PORT || 3000
+const favicon = require('serve-favicon')
 
 
 
@@ -15,10 +16,10 @@ const PORT = process.env.PORT || 3000
 
 
 
+app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
 
 app.use(express.static(path.join(__dirname, 'public')))
 
-
 app.use(cors())
 
 app.get('*', (req, res) => {

package-lock.json

@@ -76,6 +76,7 @@
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^5.0.0",
     "redux-thunk": "^2.2.0",
+    "serve-favicon": "^2.4.5",
     "smoothscroll-polyfill": "^0.4.0",
     "sugarss": "^1.0.0",
     "webpack-bundle-analyzer": "^2.9.1"

package.json

@@ -0,0 +1,14 @@
+import * as API from "../api/api";
+
+export const GET_TABLE = "GET_TABLE"
+export const SAVE_TABLE = "SAVE_TABLE"
+
+export const getTable = () => ({
+    type: GET_TABLE,
+    payload: API.get('/table')
+})
+
+export const saveTable = (data) => ({
+    type: SAVE_TABLE,
+    payload: API.post('/table', data)
+})

public/favicon.ico

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import urlencodeForm from "../services/urlencodeForm";
 
-export const API_URL = 'https://transfer-api.herokuapp.com'
+export const API_URL = 'http://localhost:8080'
 
 
 export async function get(url) {
@@ -13,36 +13,3 @@ export async function post(url, data) {
     const response = await axios.post(API_URL + url, data)
     return response.data
 }
-
-export function registerUser(form) {
-
-    form = urlencodeForm(form)
-
-    return new Promise((resolve, reject) => {
-        axios.post(API_URL + '/register', form)
-            .then(response => {
-                resolve(response.data.token)
-
-            }).catch(error => {
-            reject(error.response.data)
-        })
-    })
-}
-
-export async function loginUser(form) {
-
-    form = urlencodeForm(form)
-
-    // const data = await post('/login', form)
-    //
-    // return data.token
-    return new Promise((resolve, reject) => {
-        axios.post(API_URL + '/login', form)
-            .then(response => {
-                resolve(response.data.token)
-
-            }).catch(error => {
-            reject(error.response.data)
-        })
-    })
-}

src/actions/table.action.js

@@ -12,7 +12,6 @@ export default class DinamicTable extends React.Component {
     componentDidMount() {
         const dataSource = this.props.data
         const columns = this.props.columns
-
         dataSource.forEach((item) => {
             while (item.length < columns.length) {
                 item.push("")
@@ -35,10 +34,15 @@ export default class DinamicTable extends React.Component {
                 items: JSON.parse(target.dataset.select)
             }
         } else {
-            dataSource[rowIndex][columnIndex] = fieldValue;
-        }
+            if (!isNaN(parseFloat(fieldValue)) && isFinite(fieldValue)) {
+                dataSource[rowIndex][columnIndex] = parseFloat(fieldValue);
 
+            } else {
+                dataSource[rowIndex][columnIndex] = fieldValue;
+            }
+        }
 
+        this.props.onChange(this.state.dataSource, this.state.columns)
         this.setState({dataSource})
     }
 
@@ -50,7 +54,7 @@ export default class DinamicTable extends React.Component {
         const {columns} = this.state
 
         columns[rowIndex] = fieldValue;
-
+        this.props.onChange(this.state.dataSource, this.state.columns)
         this.setState({columns})
     }
 
@@ -64,12 +68,14 @@ export default class DinamicTable extends React.Component {
             return item
         })
 
+        this.props.onChange(this.state.dataSource, this.state.columns)
         this.setState({columns, dataSource})
     }
 
     handleAddRow() {
         const {columns, dataSource} = this.state
         dataSource.push(Array(columns.length).fill(""))
+        this.props.onChange(this.state.dataSource, this.state.columns)
         this.setState({dataSource})
     }
 
@@ -80,7 +86,7 @@ export default class DinamicTable extends React.Component {
             <thead>
             <tr>
                 {columns.map((column, key) =>
-                    <HeaderCell value={column} onEdit={this.handleAddColumn.bind(this)} key={key} data={{key}}/>
+                    <HeaderCell value={column} onEdit={this.editColumn.bind(this)} key={key} data={{key}}/>
                 )}
                 <th>
                     <i className='fa fa-plus' onClick={this.handleAddColumn.bind(this)}/>
@@ -102,4 +108,3 @@ export default class DinamicTable extends React.Component {
         </Table>
     }
 }
-

src/api/api.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react'
-
+import {getTable, saveTable} from "../actions/table.action";
+import {connect} from "react-redux";
 import Layout from "../components/Layout";
 import DinamicTable from "../components/DinamicTable";
 
@@ -39,15 +40,51 @@ const table = {
         'DROPDOWN',
     ]
 }
-
+@connect((store) => store.table)
 export default class Index extends Component {
 
+    timer = null
+
+    componentDidMount() {
+        this.props.dispatch(getTable())
+    }
+
+    getUpdatedTable(dataSource, columns) {
+
+        clearTimeout(this.timer)
+        const data = dataSource.map(item => ({
+            text: item[0],
+            number1: item[1],
+            number2: item[2],
+            dropdown: item[4]
+        }))
+
+        const table = {
+            data,
+            columns
+        }
+
+        this.timer = setTimeout(() => {
+            this.props.dispatch(saveTable(table))
+        }, 1000);
+    }
 
     render() {
+        const {data,columns} = this.props
+
+        if (!data) return null
         return <Layout>
             <DinamicTable
-                data={table.dataSource}
-                columns={table.columns}
+                columns={columns}
+                data={data.map(item => [
+                    item.text,
+                    item.number1,
+                    item.number2,
+                    item.number1 + item.number2,
+                    item.dropdown
+                ])}
+                onChange={this.getUpdatedTable.bind(this)}
+
             />
         </Layout>
     }

src/components/DinamicTable.jsx

@@ -0,0 +1,37 @@
+import {GET_TABLE} from "../actions/table.action";
+
+const initialState = {
+    token: null,
+    loading: false,
+    errors: [],
+};
+
+export default (state = initialState, {type, payload}) => {
+    switch (type) {
+        case GET_TABLE + "_PENDING":
+            return {
+                ...state,
+                loading: true,
+            }
+
+        case GET_TABLE + "_FULFILLED":
+            return {
+                ...state,
+                data: payload.data,
+                columns: payload.columns,
+                loading: false
+            }
+
+        case GET_TABLE + "_REJECTED":
+            return {
+                ...state,
+                errors: payload,
+                loading: false
+            }
+
+
+        default: {
+            return state;
+        }
+    }
+};

src/pages/Index.jsx

@@ -4,9 +4,10 @@ import {createBrowserHistory} from 'history'
 import {routerMiddleware, routerReducer} from 'react-router-redux'
 import {composeWithDevTools} from 'redux-devtools-extension'
 import promiseMiddleware from 'redux-promise-middleware'
-
+import tableReducer from './reducers/table.reducer.js'
 const reducers = combineReducers({
     router: routerReducer,
+    table: tableReducer
 })