From 30b5b3d2492a5e3053f27bd7f98d5068b63cf100 Mon Sep 17 00:00:00 2001
From: pramit-marattha <pramitmarattha5497@gmail.com>
Date: Fri, 15 Jan 2021 16:30:33 +0545
Subject: [PATCH] creating categories from the client side

---
 client/actions/category.js                    | 20 +++++++
 client/components/Header.js                   |  2 +-
 client/components/update/Category.js          | 59 +++++++++++++++++++
 .../adminDashboard/update/category-tag.js     |  4 +-
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 client/actions/category.js
 create mode 100644 client/components/update/Category.js

diff --git a/client/actions/category.js b/client/actions/category.js
new file mode 100644
index 0000000..0c17012
--- /dev/null
+++ b/client/actions/category.js
@@ -0,0 +1,20 @@
+import fetch from "isomorphic-fetch";
+import {API} from "../config.js";
+import cookie from "js-cookie";
+
+export const create = (category,token) => {
+    return fetch(`${API}/api/category`, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization:`Bearer ${token}`
+
+        },
+        body: JSON.stringify(category)
+    })
+        .then(response => {
+            return response.json();
+        })
+        .catch(error => console.log(error));
+};
diff --git a/client/components/Header.js b/client/components/Header.js
index 2ca70bc..cfc8557 100644
--- a/client/components/Header.js
+++ b/client/components/Header.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState,useEffect } from 'react';
 import Link from "next/link";
 import {APP_NAME} from "../config.js";
 import NProgress from "nprogress";
diff --git a/client/components/update/Category.js b/client/components/update/Category.js
new file mode 100644
index 0000000..8edca1b
--- /dev/null
+++ b/client/components/update/Category.js
@@ -0,0 +1,59 @@
+import React,{useState,useEffect} from "react";
+import Link from "next/link";
+import Router from "next/router";
+import {isAuthenticated,getCookie} from "../../actions/authentication";
+import {create} from "../../actions/category";
+
+
+const Category =()=>{
+    const [infos,setInfos] = useState({name:"",error:false,success:false,categories:[],removed:false});
+
+    const {name,error,success,categories,removed} = infos
+    const token = getCookie("token")
+
+
+    const handleSubmit =(event)=>{
+        event.preventDefault()
+        // console.log("create",name)
+        create({name},token).then(data=>{
+            if(data.error){
+                setInfos({...infos,error:data.error,success:false})
+            } else{
+                setInfos({...infos,error:false,success:true,name:""})
+            }
+        });
+    };
+
+
+    const handleChange =(event)=>{
+        setInfos({...infos,name:event.target.value,error:false,success:false,remove:""})
+
+    }
+
+    const newCategoryForm =()=>(
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label className="text-muted">
+                    Name
+                </label>
+                <input type="text" className="form-control" onChange={handleChange} value={name} required/>
+            </div>
+            <div>
+            <button type="submit" className="btn btn-info">Create</button>
+            </div>
+        </form>
+    );
+
+    return (
+        <>
+        {newCategoryForm()}
+        </>
+    )
+
+
+
+
+
+}
+
+export default Category;
\ No newline at end of file
diff --git a/client/pages/adminDashboard/update/category-tag.js b/client/pages/adminDashboard/update/category-tag.js
index b8d0ebd..0bb4028 100644
--- a/client/pages/adminDashboard/update/category-tag.js
+++ b/client/pages/adminDashboard/update/category-tag.js
@@ -1,5 +1,6 @@
 import Layout from "../../../components/Layout";
 import Admin from "../../../components/authentication/Admin";
+import Category from "../../../components/update/Category";
 import Link from "next/link";
 
 
@@ -13,11 +14,12 @@ const CategoryTag =() =>{
         <h2>Create Catagories and Tags</h2>
         </div>
         <div className="col-md-6 pt-5 pb-5">
-        <a>Categories</a>
+        <Category/>
         </div>
         <div className="col-md-6 pt-5 pb-5">
             <a>Tags</a>
         </div>
+
         </div>
         </div>
         </Admin>