Admin features

Admin authorization, admin dashboard, admin crud events

Author: maryam-olabisi

package-lock.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.1",
+    "material-table": "^1.69.3",
     "moment": "^2.29.4",
     "node-sass": "^6.0.0",
     "react": "^17.0.2",

package.json

@@ -44,7 +44,7 @@ class Header extends Component {
                             </li>
                         </ul>
                         <a className="nav-link" href="signout">Log Out</a>
-                        <a href="dashboard"><button className="btn btn-outline my-2 my-sm-0">Lola</button></a>
+                        <a href="/dashboard"><button className="btn btn-outline my-2 my-sm-0">{user?.username}</button></a>
                     </div>
                 </nav>
             </React.Fragment>

src/components/admin-head.js

@@ -0,0 +1,83 @@
+import Axios from "axios"
+export default new (class Http {
+  API_URL = "https://wosca-backend.herokuapp.com/api/v1"
+
+
+  AxiosSetup = () => {
+    const token = localStorage.getItem("ad_token")
+    const axiosInstance = Axios.create({
+      baseURL: this.API_URL,
+    })
+    axiosInstance.defaults.headers.common.Authorization = "Bearer " + token;
+    axiosInstance.interceptors.response.use(
+      (response) => {
+        return response
+      },
+      (error) => {
+        return Promise.reject(error)
+      }
+    )
+    return axiosInstance
+  }
+
+  post = async (urlpath, data, config) => {
+    try {
+      const response = await this.AxiosSetup().post(urlpath, data, config)
+      if (
+        response.data.errorMsg !== null
+      ) {
+        localStorage.removeItem("jwt_token")
+        // window.location.reload()
+      }
+      return response
+    } catch (err) {
+      return err
+    }
+  }
+
+  put = async (urlpath, data, config) => {
+    try {
+      const response = await this.AxiosSetup().put(urlpath, data, config)
+      if (
+        response.data.errorMsg !== null
+      ) {
+        localStorage.removeItem("jwt_token")
+        // window.location.reload()
+      }
+      return response
+    } catch (err) {
+      return err
+    }
+  }
+
+  get = async (urlpath) => {
+    const url = `${urlpath}`
+    try {
+      const response = await this.AxiosSetup().get(url)
+      if (
+        response.data.errorMsg !== null
+      ) {
+        localStorage.removeItem("jwt_token")
+        // window.location.reload()
+      }
+      return response
+    } catch (err) {
+      return err
+    }
+  }
+
+  delete = async (urlpath, data) => {
+    try {
+      const response = await this.AxiosSetup().delete(urlpath, data)
+      if (
+        response.data.errorMsg !== null
+      ) {
+        localStorage.removeItem("jwt_token")
+        // window.location.reload()
+      }
+      return response
+    } catch (err) {
+      return err
+    }
+  }
+})()

src/services/admin_api.js

@@ -0,0 +1,44 @@
+.MuiTableCell-body {
+    color: #FFFFFF !important;
+}
+
+.MuiTableCell-root {
+    border-bottom: 0px !important;
+}
+
+.MuiPaper-elevation2 {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.MTableToolbar-root-12 {
+    padding-right: 8px;
+    color: #B70569;
+}
+
+.MuiSvgIcon-root {
+color: #B70569;
+}
+
+.MuiInputBase-input {
+color: #FFFFFF !important;
+/* color: #B70569 !important; */
+}
+
+.MuiTypography-caption {
+    color: #FFFFFF !important;
+}
+
+.MuiTypography-h6 {
+    font-family: 'Axiforma' !important;
+    padding-left: 15px !important;
+    color: #B70569;
+}
+
+.MuiTypography-body1, .MuiTypography-body2, .MuiPickersYear-root {
+    color: #B70569 !important;
+}
+
+.MuiPickersYear-yearSelected {
+    color: #FFFFFF !important;
+}

src/styles/views/admin-page.css

@@ -0,0 +1,22 @@
+import http from "../../services/admin_api"
+
+// PRS
+export const prs = () => {
+    return http.get('/pulls/');   
+}
+
+export const _all_events = () => {
+    return http.get('/events/');   
+}
+
+export const _add_event = e => {
+    return http.post(`/events/`, e);
+}
+
+export const _update_event = (s, e) => {
+    return http.put(`/events/${s}`, e);
+}
+
+export const _delete_event = (e) => {
+    return http.delete(`/events/${e}`);
+}

src/views/admin/adminService.js

@@ -1,19 +1,55 @@
-import React from 'react';
-import { AiOutlineLink } from 'react-icons/ai'
-import { BsCheckAll } from 'react-icons/bs'
+import React, { Component } from 'react';
+import { AiOutlineLink } from 'react-icons/ai';
+import { BsCheckAll } from 'react-icons/bs';
 import { Card } from "../../components/Card";
+import { UserContext } from "../../context/AuthContext";
+import { prs } from "./adminService";
 
-function Dashboard() {
-    return (
-        <React.Fragment>
-            <div className="admin-greeting"> <p>Welcome Here, Lola</p></div>
-            <div className="contribution-cards admin-cards">
-                <Card title="Total Contributions" value="345" icon={<AiOutlineLink color={'#fff'} />} />
-                <Card title="Total Submitted PRs" value="345" icon={<AiOutlineLink color={'#fff'} />} />
-                <Card title="Accepted Contributions" value="345" icon={<BsCheckAll color={'#fff'} />} />
-            </div>
-        </React.Fragment >
-    );
-}
+class Dashboard extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            pr: 1,
+            total_users: 2,
+            total_events: 3,
+        };
+    }
+
+    render() {
+        const { token, user } = this.context
+        return (
+            <React.Fragment>
+                <div className="admin-greeting"> <p>Welcome Here, {user?.username}</p></div>
+                <div className="contribution-cards admin-cards">
+                    <Card title="Total Users" value={this.state.total_users} icon={<AiOutlineLink color={'#fff'} />} />
+                    <Card title="Total Submitted PRs" value={this.state.pr} icon={<AiOutlineLink color={'#fff'} />} />
+                    <Card title="Accepted Contributions" value={this.state.total_events} icon={<BsCheckAll color={'#fff'} />} />
+                </div>
+            </React.Fragment >
+        );
+    }
 
+    async componentDidMount() {
+        var au = this.context.user;
+        if (!au) {
+            window.location.replace('/signin')
+        } else if (au.role !== 'admin') {
+            window.location.replace('/dashboard')
+        } else {
+            // find totalcontributions
+            // find PRS
+            await prs()
+                .then((response) => {
+                    var count = response.data.data.pullRequests.length
+                    this.setState({ pr: count })
+                })
+                .catch((error) => {
+                    console.log(error)
+                    // alert.error(error)
+                })
+            // find acceptedcontributions
+        }
+    }
+}
+Dashboard.contextType = UserContext
 export default Dashboard;