comments

Author: Git-push-01

package-lock.json

@@ -4,11 +4,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "dotenv": "^8.0.0",
     "http-proxy-middleware": "^0.19.1",
     "jquery": "^3.4.0",
+    "local-storage": "^2.0.0",
     "material-ui": "^0.20.2",
     "moment": "^2.24.0",
     "popper.js": "^1.15.0",

package.json

@@ -0,0 +1,100 @@
+import React, { Component } from "react";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import { Card } from "react-bootstrap";
+
+class Comments extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { comments: [], pendingItem: "" };
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+
+    console.log(this.state, "state");
+  }
+
+  onChange(e) {
+    e.preventDefault();
+    console.log(e.target.value);
+
+    this.setState({ pendingItem: e.target.value });
+  }
+
+  onSubmit(e) {
+    e.preventDefault();
+    this.setState({
+      comments: [
+        {
+          comment: this.state.pendingItem
+        },
+        ...this.state.comments
+      ],
+      pendingItem: ""
+    });
+  }
+  deleteComment(index) {
+    const newComments = [...this.state.comments]
+    newComments.splice(index, 1);
+    this.setState({
+      comments: newComments
+    });
+  }
+  sortComment(){
+    const sortedComments = [...this.state.comments]
+    sortedComments.sort((a, b) => ( a.comment > b.comment ) ? 1 : -1)
+    this.setState({
+      comments: sortedComments
+    })
+
+  }
+
+  render() {
+    console.log(this.state.comments, "comments at render");
+    return (
+      <div>
+        <Form onSubmit={this.onSubmit}>
+          <Form.Control
+            type="text"
+            className="input"
+            placeholder="Your Comments Here"
+            value={this.state.pendingItem}
+            onChange={this.onChange}
+          />
+
+          <Button variant="primary" type="submit">
+            Add Your Comments
+          </Button>
+
+          <Button variant="primary" onClick={()=> {
+            this.sortComment()
+          }}>
+            Sort Comments
+          </Button>
+
+        </Form>
+        <div>
+          {this.state.comments.map((comment, index) => {
+            return (
+              <Card
+                key={index}
+                style={{ background: "#31e8e8", opacity: "0.7" }}
+              >
+                {comment.comment}
+                <Button
+                  onClick={() => {
+                    this.deleteComment(index);
+                  }}
+                >
+                  DELETE
+                </Button>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Comments;

src/components/comments.js

@@ -32,8 +32,9 @@ class EmployeeForm extends Component {
 
   onSubmit(e) {
     e.preventDefault();
-
+    console.log('A');
     this.props.createEmployee(this.state);
+    console.log('B');
     this.setState({
       employeename: "",
       user_id: "",

src/components/employeesForm.js

@@ -6,6 +6,7 @@ import { loginUser } from "../redux/actions/userActions";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import logo from "../images/logo.png";
+import Comments from "./comments"
 
 function validate(email, password) {
   // true means invalid, so our conditions got reversed
@@ -56,6 +57,8 @@ class Login extends Component {
     return !isDisabled;
   }
 
+
+
   render() {
     console.log(this.state);
     const errors = validate(this.state.email, this.state.password);
@@ -132,6 +135,9 @@ class Login extends Component {
             </a>
           </div>
         </Form>
+
+        <Comments/>
+
       </div>
     );
   }

src/components/login.js

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-
 import BreakContainer from "../containers/breakContainer";
 import CompanyContainer from "../containers/companyContainer";
 import ManagerContainer from "../containers/managerContainer";

src/containers/profileContainer.js

@@ -21,6 +21,7 @@ export const fetchEmployees = () => {
   }
 }
 export const createEmployee = employee => {
+  console.log('C');
   let data = {
     method: 'POST',
     headers: {
@@ -34,12 +35,15 @@ export const createEmployee = employee => {
   return dispatch => {
     fetch(`${ baseUrl }/employees`, data)
       .then(response => response.json())
-      .then(employees => dispatch({
+      .then(employees =>{
+        console.log('D');
+         dispatch({
         type: 'CREATE_EMPLOYEE',
         payload: employees
-      }))
+      })})
       .catch(err => err)
   }
+  console.log('E');
 }
 
 export const deleteEmployee = id => {