adicionando tarefas

Author: alissonjr

package-lock.json

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+// import logo from './logo.svg';
+import Header from './components/header';
+import Text from './components/WelcomeText/Text';
+import TaskBar from './components/taskBar';
+import TaskList from './components/taskList';
+import TaskCount from './components/taskCount';
+import './App.css';
+
+class App extends Component {
+	render() {
+		return (
+			<div className="App">
+				<Header />
+				<Text />
+				<TaskBar />
+				<TaskCount />
+				<TaskList />
+			</div>
+		);
+	}
+}
+
+export default App;

src/App.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class Text extends Component {
+  render() {
+    return (
+       <p>Hello! Add your tasks at input</p>
+    )
+  }
+};
+
+export default Text;

src/components/WelcomeText/Text.jsx

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+export default class Header extends Component {
+    render () {
+        return (
+            <h1 class="m-3">Todo Application</h1>
+        );
+    }
+}

src/components/header/index.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from "redux";
+import { deleteTask } from "../../actions/";
+
+class Task extends Component {
+    render () {
+        return (
+            <tr>
+                <td>
+                    { this.props.task }
+                </td>
+                <td>
+                    <button onClick={() => {this.props.deleteTask(this.props.id)}} class="btn btn-sm btn-danger">Delete</button>
+                </td>
+            </tr>
+        );
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators({ deleteTask }, dispatch);
+}
+
+export default connect(() => {}, mapDispatchToProps)(Task);

src/components/task/index.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from "redux";
+import { addTask } from "../../actions/";
+
+class TaskBar extends Component {
+    render () {
+        return (
+            <div class="container">
+                <form class="form-inline" onSubmit={()=>this.props.addTask(this.refs.task.value)}>
+                    <div class="form-group mb-3">
+                        <label for="task" class="sr-only">New Task</label>
+                        <input type="text" name="task" ref="task" class="form-control" placeholder="add your tasks here" />
+                    </div>
+                    <button type="submit" class="btn btn-primary mb-3 ml-2">Add Task</button>
+                </form>
+            </div>
+        );
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators({ addTask }, dispatch);
+}
+
+export default connect(() => {}, mapDispatchToProps)(TaskBar);

src/components/taskBar/index.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class TaskCount extends Component {
+    render () {
+        return (
+            <div class="container text-left">
+                <p>
+                    <b>Total tasks:</b>
+                    <span class="ml-2">{this.props.tasks.length}</span>
+                </p>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    let { tasks } = state
+    return { tasks }
+}
+
+export default connect(mapStateToProps)(TaskCount);

src/components/taskCount/index.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Task from "../task";
+
+class TaskList extends Component {
+    render () {
+        return (
+            <div class="container">
+                <table class="table table-hover table-bordered table-sm">
+                    <thead>
+                        <tr>
+                            <th>Tasks</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {this.props.tasks.map((task, index) => <Task key={index} task={task} />)}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    let { tasks } = state
+    return { tasks }
+}
+
+export default connect(mapStateToProps)(TaskList);