Admin ui

src/components/Admin/AdminNavbar.js

@@ -1,10 +1,8 @@
 import React, { Component, Fragment } from 'react';
 import "antd/dist/antd.css";
 import { connect } from "react-redux";
-import { Layout, Menu, Icon } from 'antd';
 import { Link } from 'react-router-dom';
-
-const { Sider } = Layout;
+import './navbar.css'
 
 class AdminNavbar extends Component {
 
@@ -13,29 +11,15 @@ class AdminNavbar extends Component {
     if (isAuthenticated && user.isVendor === false && user.isAdmin === true) {
       return (
         <Fragment>
-          <Sider
-            style={{ left: 0, overflow: 'auto', minHeight: '100vh', marginTop: '63px' }}
-          >
-            <h2 style={{ color: 'white', textAlign: 'center', paddingTop: '10px' }}>Admin Panel</h2>
-            <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
-              <Menu.Item key="1">
-                <Icon type="form" />
-                <span>Dashboard</span>
-              </Menu.Item>
-              <Menu.Item key="2">
-                <Link to="/admin/categories">
-                  <Icon type="form" />
-                  <span>Categories</span>
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="3">
-                <Link to="/admin/users">
-                  <Icon type="form" />
-                  <span>Users</span>
-                </Link>
-              </Menu.Item>
-            </Menu>
-          </Sider>
+          <br/>
+          <header className="header">
+            <ul className="main-nav">
+                <li><Link to="/admin/">Dashboard</Link></li>
+                <li><Link to="/admin/categories">Categories</Link></li>
+                <li><Link to="/admin/users">Users</Link></li>
+            </ul>
+	        </header> 
+
         </Fragment>
       )
     }

src/components/Admin/Categories.js

@@ -1,29 +1,23 @@
 import React, { Component, Fragment } from 'react';
 import "antd/dist/antd.css";
 import { connect } from "react-redux";
-import { Button,Modal,Input,Table, Divider } from 'antd';
-
-const data = [
-  {
-    key: '1',
-    Name: 'Mechanic',
-    number: 32,
-  },
-  {
-    key: '2',
-    Name: 'Plumber',
-    number: 42,
-  },
-  {
-    key: '3',
-    Name: 'Electrician',
-    number: 32,
-  },
-];
-
+import { Button,Modal,Input,Table, Divider,notification,Icon } from 'antd';
+import {fetchCategory,addCategory,deleteCategory,updateCategory} from '../../redux/actions/categoryActions'
+import './users.css'
 class Categories extends Component {
 
-  state = { visible: false }
+  state = { 
+    visible: false ,
+    visibleUpdateModal: false,
+    newCategoryName : '',
+    updateCategoryName : '',
+  }
+
+  onChange = (e) => {
+    this.setState({
+      [e.target.name]:e.target.value
+    })
+  }
 
   showModal = () => {
     this.setState({
@@ -32,24 +26,73 @@ class Categories extends Component {
   }
 
   handleOk = (e) => {
+    this.props.addCategory(this.state.newCategoryName);
     this.setState({
       visible: false,
+      newCategoryName: ''
     });
   }
 
   handleCancel = (e) => {
     this.setState({
       visible: false,
+      newCategoryName: ''
     });
   }
 
+  updateShowModal = () => {
+    this.setState({
+      visibleUpdateModal: true,
+    });
+  }
+
+  handleOkUpdate = (id) => {
+    this.props.updateCategory(this.state.updateCategoryName,id);
+    this.setState({
+      visibleUpdateModal: false,
+      newCategoryName: ''
+    });
+  }
+
+  handleCancelUpdate = (e) => {
+    this.setState({
+      visibleUpdateModal: false,
+      newCategoryName: ''
+    });
+  }
+
+  handleDelete = (id) => {
+    this.props.deleteCategory(id);
+  }
+
+  sucessfulNotification=(type)=>{
+    notification.open({
+      message: type,
+      description:
+        '',
+      icon: <Icon type="check-circle" style={{ color: '#108ee9' }} />,
+  });
+  }
+
+  componentDidUpdate(){
+    this.props.fetchCategory();
+    if(this.props.status===200&&this.props.statusType!=='fetchCategory'){
+      this.sucessfulNotification(this.props.statusType);
+    }
+  }
+  componentDidMount(){
+    this.props.fetchCategory();
+  }
+
+
   render() {
-    const { isAuthenticated, user } = this.props;
+    const { isAuthenticated, user} = this.props;
     const { Column } = Table;
+
     if (isAuthenticated && user.isVendor === false && user.isAdmin === true) {
       return (
         <Fragment>
-          Categories
+          <h1 className="mainHeader">Categories</h1>
           <br />
           <Button type="primary" onClick={this.showModal}>
           Add Category
@@ -60,20 +103,26 @@ class Categories extends Component {
             onOk={this.handleOk}
             onCancel={this.handleCancel}
           >
-               <Input placeholder="Enter the name of the category" />
+               <Input placeholder="Enter the name of the category" name="newCategoryName" onChange={this.onChange} />
            </Modal>
-           <Table dataSource={data}>
-            <Column title="Category Name" dataIndex="Name" key="Name" />
-            <Column title="Number" dataIndex="number" key="number" />
-
+           <Table dataSource={this.props.category.categories} rowKey="_id">
+            <Column title="Category Name" dataIndex="name" key="name" />
             <Column
               title="Action"
-              key="action"
+              key="_id"
               render={(text, record) => (
                 <span>
-                  <a href="/">Update</a>
+                  <span onClick={this.updateShowModal} style={{cursor:'pointer',color:'blue'}}>Update</span>
+                  <Modal
+                    title="Update Modal"
+                    visible={this.state.visibleUpdateModal}
+                    onOk={() => this.handleOkUpdate(record._id)}
+                    onCancel={this.handleCancelUpdate}
+                  >
+                      <Input placeholder="Enter the new name of the category" name="updateCategoryName" onChange={this.onChange} />
+                  </Modal>
                   <Divider type="vertical" />
-                  <a href="/">Delete</a>
+                  <span onClick={()=>{this.handleDelete(record._id)}} style={{cursor:'pointer',color:'red'}}>Delete</span>
                 </span>
               )}
             />
@@ -91,10 +140,13 @@ class Categories extends Component {
 
 const mapStateToProps = state => ({
   isAuthenticated: state.auth.isAuthenticated,
-  user: state.auth.user
+  user: state.auth.user,
+  category: state.category.categories,
+  status:state.category.status,
+  statusType:state.category.statusType,
 });
 
 export default connect(
   mapStateToProps,
-  {}
+  {fetchCategory,addCategory,deleteCategory,updateCategory}
 )(Categories);

src/components/Admin/navbar.css

@@ -0,0 +1,97 @@
+
+* {
+	box-sizing: border-box;
+}
+body {
+	font-family: 'Montserrat', sans-serif;
+	line-height: 1.6;
+	margin: 0;
+	min-height: 100vh;
+}
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.header{
+    padding: 105px;
+}
+h2,
+h3,
+a {
+	color: #34495e;
+}
+
+a {
+	text-decoration: none;
+}
+
+.main-nav {
+	margin-top: 5px;
+
+}
+ a,
+.main-nav a {
+	padding: 10px 15px;
+	text-transform: uppercase;
+	text-align: center;
+	display: block;
+}
+
+.main-nav a {
+	color: #34495e;
+	font-size: .99em;
+}
+
+.main-nav a:hover {
+	color: #718daa;
+}
+
+
+
+.header {
+	padding-top: .5em;
+	padding-bottom: .5em;
+	border: 1px solid #a2a2a2;
+	background-color: #f4f4f4;
+	-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
+	box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+}
+
+
+/* ================================= 
+  Media Queries
+==================================== */
+
+
+
+
+@media (min-width: 769px) {
+	.header,
+	.main-nav {
+		display: flex;
+	}
+	.header {
+		flex-direction: column;
+		align-items: center;}
+    	.header{
+		width: 80%;
+		margin: 0 auto;
+		max-width: 1150px;
+
+	}
+
+}
+
+@media (min-width: 1025px) {
+	.header {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+}

src/redux/actions/categoryActions.js

@@ -0,0 +1,51 @@
+import { FETCH_CATEGORY_SUCCESS,ADD_CATEGORY_SUCCESS,DELETE_CATEGORY_SUCCESS ,UPDATE_CATEGORY_SUCCESS} from "./type";
+import axios from "axios";
+import { tokenConfig } from "./authActions";
+import { url } from "../../helper/url";
+
+export const fetchCategory = () => (dispatch,getState) => {
+    axios
+      .get(`${url}/categories`, tokenConfig(getState))
+      .then(res =>{
+        dispatch({
+          type:FETCH_CATEGORY_SUCCESS,
+          payload:res.data
+        })
+      })
+  }
+
+export const addCategory = (name) => (dispatch,getState) => {
+    const body = JSON.stringify({ name });
+    axios
+        .post(`${url}/categories`,body,tokenConfig(getState))
+        .then((res) => {
+          dispatch({
+            type:ADD_CATEGORY_SUCCESS,
+            payload:res.data
+          })
+        })
+}
+
+export const deleteCategory = (id) => (dispatch,getState) => {
+    axios
+        .delete(`${url}/categories/`+id, tokenConfig(getState))
+        .then(() => {
+          dispatch({
+            type:DELETE_CATEGORY_SUCCESS,
+            payload:id
+          })
+        })
+}
+
+export const updateCategory = (name,id) => (dispatch,getState) => {
+    const body = JSON.stringify({ name });
+    axios
+        .patch(`${url}/categories/`+id,body,tokenConfig(getState))
+        .then((res) => {
+          dispatch({
+            type:UPDATE_CATEGORY_SUCCESS,
+            payload:id,
+            packet:res.data
+          })
+        })
+}

src/redux/actions/type.js

@@ -27,6 +27,11 @@ export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SU
 export const GET_SERVICE_PENDING = 'GET_SERVICE_PENDING';
 export const GET_SERVICE_SUCCESS = 'GET_SERVICE_SUCCESS';
 
+export const FETCH_CATEGORY_SUCCESS = 'FETCH_CATEGORY_SUCCESS';
+export const ADD_CATEGORY_SUCCESS =  'ADD_CATEGORY_SUCCESS';
+export const DELETE_CATEGORY_SUCCESS = 'DELETE_CATEGORY_SUCCESS';
+export const UPDATE_CATEGORY_SUCCESS = 'UPDATE_CATEGORY_SUCCESS';
+
 export const GET_VENDOR_SERVICES = 'GET_VENDOR_SERVICES';
 export const GET_VENDOR_SERVICES_FAIL = 'GET_VENDOR_SERVICES_FAIL';