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,24 @@
 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,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 : '',
+    categoryNumber: 0,
+  }
+
+  onChange = (e) => {
+    this.setState({
+      [e.target.name]:e.target.value
+    })
+  }
 
   showModal = () => {
     this.setState({
@@ -32,24 +27,77 @@ 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 = (id,name) => {
+    this.setState({
+      visibleUpdateModal: true,
+      categoryNumber:id,
+      updateCategoryName:name,
+    });
+  }
+
+  handleOkUpdate = () => {
+    this.props.updateCategory(this.state.updateCategoryName,this.state.categoryNumber);
+    this.setState({
+      visibleUpdateModal: false,
+      updateCategoryName: '',
+      categoryNumber: 0
+    });
+  }
+
+  handleCancelUpdate = (e) => {
+    this.setState({
+      visibleUpdateModal: false,
+      newCategoryName: '',
+      categoryNumber: 0
+    });
+  }
+
+  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,24 +108,32 @@ class Categories extends Component {
             onOk={this.handleOk}
             onCancel={this.handleCancel}
           >
-               <Input placeholder="Enter the name of the category" />
+              <input type="text" name="newCategoryName" onChange={this.onChange} />
            </Modal>
-           <Table dataSource={data}>
-            <Column title="Category Name" dataIndex="Name" key="Name" />
-            <Column title="Number" dataIndex="number" key="number" />
-
-            <Column
-              title="Action"
-              key="action"
-              render={(text, record) => (
-                <span>
-                  <a href="/">Update</a>
-                  <Divider type="vertical" />
-                  <a href="/">Delete</a>
-                </span>
-              )}
-            />
-          </Table>
+           <div className="padding"> 
+            <Table dataSource={this.props.category.categories} rowKey="_id">
+              <Column title="Category Name" dataIndex="name" key="name" />
+              <Column
+                title="Action"
+                key="_id"
+                render={(text, record) => (
+                  <span>
+                    <span onClick={()=> {this.updateShowModal(record._id,record.name)}} style={{cursor:'pointer',color:'blue'}}>Update</span>
+                    <Modal
+                      title="Update Modal"
+                      visible={this.state.visibleUpdateModal}
+                      onOk={() => {this.handleOkUpdate()}}
+                      onCancel={this.handleCancelUpdate}
+                    >
+                        <input type="text" name="updateCategoryName" onChange={this.onChange} value={this.state.updateCategoryName} />
+                    </Modal>
+                    <Divider type="vertical" />
+                    <span onClick={()=>{this.handleDelete(record._id)}} style={{cursor:'pointer',color:'red'}}>Delete</span>
+                  </span>
+                )}
+              />
+            </Table>
+          </div>
         </Fragment>
       )
     }
@@ -91,10 +147,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/components/Admin/users.css

@@ -29,4 +29,17 @@
     background: #188ed2;
     bottom: 0;
     left: calc(50% - 25px);
-}
+}
+.padding{
+    padding-left: 330px;
+    padding-right: 330px;
+}
+
+input[type=text] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: 2px solid black;
+    border-radius: 4px;
+  }