Feature/categories

src/components/Pages/AddCategory/AddCategory.js

@@ -1,23 +1,51 @@
-import React from "react";
-import { Form, FormGroup, Label, Input } from "reactstrap";
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Form, FormGroup, Label, Input } from 'reactstrap';
+import { Link } from 'react-router-dom';
 
 class AddCategory extends React.Component {
+  state = {
+    category: {
+      categoryName: '',
+      description: '',
+      icon: '',
+      date: '',
+    },
+  };
+  addNewCategory = (e) => {
+    const now = new Date();
+    let description = document.getElementById('description').value;
+    let total = document.getElementById('total').value;
+    this.setState({
+      category: {
+        categoryName: total,
+        description: description,
+        icon: e.target.value,
+        date: now.toLocaleDateString(),
+      },
+    });
+  };
+
+  pushCategories = () => {
+    let categories = JSON.parse(localStorage.getItem('categories')) || [];
+    let newCategories = [...categories, this.state.category];
+    localStorage.setItem('categories', JSON.stringify(newCategories));
+  };
+
   render() {
     return (
       <div className="container">
         <Form
           style={{
-            width: "60%",
-            marginTop: "50px",
-            border: "1px solid lightgrey",
-            padding: "30px",
-            borderRadius: "4px",
+            width: '60%',
+            marginTop: '50px',
+            border: '1px solid lightgrey',
+            padding: '30px',
+            borderRadius: '4px',
           }}
         >
           <FormGroup>
             <Label for="total">Total</Label>
-            <Input type="text" name="total" id="total" placeholder="total" />
+            <Input type="text" name="total" id="total" placeholder="Category" />
           </FormGroup>
 
           <FormGroup>
@@ -26,21 +54,33 @@ class AddCategory extends React.Component {
               type="text"
               name="description"
               id="description"
-              placeholder="description"
+              placeholder="Description"
             />
           </FormGroup>
 
           <FormGroup>
             <Label for="selectIcon">Select icon</Label>
-            <Input type="select" name="selectIcon" id="selectIcon">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
+            <Input
+              type="select"
+              name="selectIcon"
+              id="selectIcon"
+              onChange={this.addNewCategory}
+            >
+              <option value="none" hidden="">
+                Chose icon
+              </option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
             </Input>
           </FormGroup>
-          <Link to="/categories" className="btn btn-secondary">
+          <Link
+            to="/categories"
+            className="btn btn-secondary"
+            onClick={this.pushCategories}
+          >
             Add new category
           </Link>
         </Form>

src/components/Pages/Categories/ActionMenu.js

@@ -1,19 +1,21 @@
-import React from "react";
+import React from 'react';
 import {
   UncontrolledDropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
-} from "reactstrap";
+} from 'reactstrap';
 
-export default function ActionMenu() {
+export default function ActionMenu({ handleRemove, id }) {
   return (
     <UncontrolledDropdown>
-      <DropdownToggle style={{ background: "none", color: "grey" }}>
+      <DropdownToggle style={{ background: 'none', color: 'grey' }}>
         Edit
       </DropdownToggle>
       <DropdownMenu>
-        <DropdownItem>Delete category</DropdownItem>
+        <DropdownItem onClick={() => handleRemove(id)}>
+          Delete category
+        </DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
   );

src/components/Pages/Categories/Categories.js

@@ -1,22 +1,28 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Link } from 'react-router-dom';
 
-import ActionMenu from "./ActionMenu";
+import ActionMenu from './ActionMenu';
 
 class Categories extends React.Component {
   state = {
-    categories: [
-      { categoryName: "Food", description: "my food", date: "10.04.20" },
-      { categoryName: "Clothes", description: "", date: "10.04.20" },
-      { categoryName: "Restaurants", description: "", date: "10.04.20" },
-      { categoryName: "Utility bills", description: "", date: "10.04.20" },
-      { categoryName: "Pets", description: "", date: "10.04.20" },
-    ],
+    categories: JSON.parse(localStorage.getItem('categories')),
+  };
+  handleRemove = (id) => {
+    this.filteredArrey = this.state.categories.filter(
+      (el) => el.categoryName !== id
+    );
+    this.setState(() => {
+      return {
+        categories: this.filteredArrey,
+      };
+    });
+    localStorage.removeItem('categories');
+    localStorage.setItem('categories', JSON.stringify(this.filteredArrey));
   };
-
   render() {
     return (
       <div className="container">
+        {console.log(this.state.categories)}
         <div className="categories-header d-flex justify-content-between mt-4">
           <h2>Categories</h2>
           <Link to="/add_category" className="btn btn-primary">
@@ -27,25 +33,34 @@ class Categories extends React.Component {
           <div
             className="row mt-4"
             style={{
-              borderBottom: "1px solid lightgrey",
-              fontWeight: "bolder",
+              borderBottom: '1px solid lightgrey',
+              fontWeight: 'bolder',
             }}
           >
             <div className="col-3 text-center">Category</div>
             <div className="col-3 text-center">Description</div>
             <div className="col-3 text-center">Date</div>
             <div className="col-3 text-center">Action</div>
           </div>
-          {this.state.categories.map((category) => (
-            <div className="row mt-2" key={category.categoryName}>
-              <div className="col-3 text-center">{category.categoryName}</div>
-              <div className="col-3 text-center">{category.description}</div>
-              <div className="col-3 text-center">{category.date}</div>
-              <div className="col-3 text-center">
-                <ActionMenu />
-              </div>
-            </div>
-          ))}
+          {this.state.categories
+            ? this.state.categories.map((category) => (              
+                <div className="row mt-2" key={category.categoryName}>
+                  <div className="col-3 text-center">
+                    {category.categoryName}
+                  </div>
+                  <div className="col-3 text-center">
+                    {category.description}
+                  </div>
+                  <div className="col-3 text-center">{category.date}</div>
+                  <div className="col-3 text-center">
+                    <ActionMenu
+                      handleRemove={this.handleRemove}
+                      id={category.categoryName}
+                    />
+                  </div>
+                </div>
+              ))
+            : null}
         </div>
       </div>
     );