creating categories from the client side

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));
+};

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";

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;

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>