Add react, react-redux and extract logic of the calculator to components

danantal · Mar 11, 2019 · 7f2201a · 7f2201a
1 parent 59ec4d6
commit 7f2201a
Show file tree

Hide file tree

Showing 11 changed files with 272 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,9 @@
     "start": "webpack-dev-server --open"
   },
   "devDependencies": {
+    "@types/react": "^16.8.7",
+    "@types/react-dom": "^16.8.2",
+    "@types/react-redux": "^7.0.3",
     "babel-cli": "6.26.0",
     "babel-preset-env": "1.6.0",
     "clean-webpack-plugin": "^2.0.0",
@@ -24,6 +27,9 @@
   },
   "dependencies": {
     "@types/redux": "^3.6.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-redux": "^6.0.1",
     "redux": "^4.0.1"
   }
 }
diff --git a/src/Button.tsx b/src/Button.tsx
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+interface ButtonProps {
+    onClick: () => void;
+    title: string;
+}
+
+export default class Button extends Component<ButtonProps, {}> {
+    render() {
+        const {onClick, title} = this.props;
+           return (
+            <button onClick={onClick}>
+                {title}
+            </button>
+        );
+    }
+}
diff --git a/src/Display.tsx b/src/Display.tsx
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+interface DisplayProps {
+    value: number;
+}
+
+export class Display extends Component<DisplayProps, {}> {
+    render() {
+        return (
+            <div style={{border: "1px solid black"}}>
+                {this.props.value}
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = (state: any) => ({
+    value: state.total
+});
+
+export default connect(mapStateToProps, null)(Display)
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { setCurrent } from './store'
+
+interface InputProps {
+    value: number
+    setCurrent: (value: number) => void;
+}
+
+export class Input extends Component<InputProps, {}> {
+
+    onChange = (e: React.FormEvent<HTMLInputElement>) => {
+        this.props.setCurrent(parseInt(e.currentTarget.value));
+    }
+
+    render() {
+        const {value} = this.props;
+
+        return (
+            <input value={value} onChange={this.onChange } />
+        )
+    }
+}
+
+const mapStateToProps = (state: any) => ({
+    value: state.inputValue
+})
+
+const mapDispatchToProps = dispatch => ({
+    setCurrent: (value: number) => dispatch(setCurrent(value))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Input)
diff --git a/src/index.html b/src/index.html
@@ -9,27 +9,6 @@
 </head>
 <body>
 <div id="app">
-    <div style="margin-top: 20px">
-        <div class="row">
-            <div class="input-group col-sm">
-                <input id="op-number" type="number" placeholder="Enter a Number" />
-            </div>
-
-            <div class="col-sm">
-                <button id="add-btn">Add</button>
-
-                <button id="subtract-btn">Subtract</button>
-
-                <button id="reset-btn">Reset</button>
-            </div>
-        </div>
-
-        <hr>
-
-        <div class="row">
-            <h3 id="grand-total" style="margin: 0 auto">0</h3>
-        </div>
-    </div>
 </div>
 </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom"
+import { Provider } from 'react-redux'
+
+import Button from "./Button";
+import Input from "./Input";
+import Display from "./Display";
+
+import { add, subtract, reset, store } from './store'
+
+class App extends React.Component<{}, {}> {
+    render() {
+        return (
+            <Provider store={store}>
+                <div style={{ margin: "20px" }}>
+                    <Input />
+                    <Button title="Add" onClick={() => store.dispatch(add(store.getState().current))} />
+                    <Button title="Subtract" onClick={() => store.dispatch(subtract(store.getState().current))} />
+                    <Button title="Reset" onClick={() => store.dispatch(reset())} />
+                    <Display />
+                </div>
+            </Provider>
+        );
+    }
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById("app")
+);
diff --git a/src/store.ts b/src/store.ts
@@ -0,0 +1,41 @@
+import { createStore } from 'redux';
+
+// SET-UP
+const reducer = (state = {total: 0, current: 0}, action: {type: string, payload?: any}) => {
+  console.log(action);
+
+  switch(action.type) {
+    case 'SET_CURRENT':
+      return {...state, current: action.payload.value};
+    case 'ADD':
+      return {...state, total: state.total + action.payload.value};
+    case 'SUBTRACT':
+      return {...state, total: state.total - action.payload.value};
+    case 'RESET':
+      return {...state, total: 0};
+    default:
+      return state;
+  }
+};
+
+const enhancer = ((window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__())
+
+// ACTION-CREATORS
+export const add = (value: number) => ({
+  type: 'ADD',
+  payload: { value },
+});
+
+export const subtract = (value: number) => ({
+  type: 'SUBTRACT',
+  payload: { value },
+});
+
+export const setCurrent = (value: number) => ({
+    type: 'SET_CURRENT',
+    payload: { value },
+  });
+
+export const reset = () => ({ type: 'RESET' });
+
+export const store = createStore(reducer, enhancer);
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,10 +2,11 @@
     "compilerOptions": {
         "outDir": "./dist/",
         "sourceMap": true,
-        "noImplicitAny": true,
-        "module": "commonjs",
+        "noImplicitAny": false,
+        "module": "es2015",
         "target": "es5",
         "jsx": "react",
-        "allowJs": true
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 
 module.exports = {
-  entry: "./src/index.ts",
+  entry: "./src/index.tsx",
   module: {
     rules: [
       {