Merge branch 'jonathan' into 'master'

edit Topic pages and set only user with role admin can visit create topic page

See merge request !24

src/components/topic/CreateTopicForm.jsx

@@ -4,8 +4,13 @@ import { useInput } from '../../helpers/hooks/input-hook';
 import '../../styles/topic/CreateTopicForm.css';
 import authHeader from '../../helpers/services/authHeader.service';
 import { API_URL } from '../../config/keys';
+import AuthService from '../../helpers/services/auth.service';
 
 export default function CreateTopicForm(props) {
+  if (AuthService.getCurrentUser().data.role != "admin") {
+    props.history.push("/page/1")
+  }
+
   const { value: name, bind: bindName, reset: resetName } = useInput('');
   const [message, setMessage] = useState('');
 

src/components/topic/Topic.jsx

@@ -6,11 +6,14 @@ import { API_URL } from '../../config/keys';
 import '../../styles/topic/Topic.css';
 import Button from '../utility/Button';
 import Pagination from '../thread/Pagination';
+import AuthService from '../../helpers/services/auth.service';
+import authHeader from '../../helpers/services/authHeader.service';
 
 export default function Topic(props) {
   const { params } = props.match;
   const currentPage = params.pageNumber;
   const topicParam = params.topic;
+  const isAdmin = AuthService.getCurrentUser().data.role
 
   const [threads, setThreads] = useState([]);
   const [totalItems, setTotalItems] = useState(0);
@@ -37,6 +40,15 @@ export default function Topic(props) {
     window.location.reload();
   }
 
+  const deleteTopic = async () => {
+    try {
+      await axios.delete(`${API_URL}/topics/${topicParam}`, {
+        headers: authHeader(),
+      });
+      props.history.push(`/topic`)
+    } catch (error) {}
+  };
+
   return (
     <div className="topicContainer">
       <div className="header">
@@ -44,7 +56,19 @@ export default function Topic(props) {
           <b>Topic: {topicParam}</b>
         </h1>
         {loggedIn && (
-          <Button text="Create Thread" color="orange" url="create/thread" />
+          <Button 
+            text="Create Thread" 
+            color="orange" 
+            url="create/thread" />
+        )}
+        {loggedIn && isAdmin == "admin" && (
+          <button
+            type="button"
+            className="deleteTopicButton"
+            onClick={() => deleteTopic()}
+          >
+          Delete This Topic
+          </button>
         )}
       </div>
       <div className="list_threads_section">

src/components/topic/TopicList.jsx

@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
 import { API_URL } from '../../config/keys';
+import { loggedIn } from '../../helpers/services/loggedIn.service';
 import '../../styles/topic/TopicList.css';
+import Button from '../utility/Button';
+import AuthService from '../../helpers/services/auth.service';
 
 export default function TopicList(props) {
   const [topics, setTopics] = useState([]);
+  const isAdmin = AuthService.getCurrentUser().data.role
 
   useEffect(() => {
     const fetch = async () => {
@@ -17,7 +21,12 @@ export default function TopicList(props) {
 
   return (
     <div className="topicContainer">
-      <h1>Topic List</h1>
+      <div className="headerTopic">
+        <h1>Topic List</h1>
+        {loggedIn && isAdmin == "admin" && (
+          <Button text="Create Topic" color="orange" url="create/topic" />
+        )}
+      </div>
       <div className="topics">
         {topics.map((value) => (
           <Link

src/styles/topic/Topic.css

@@ -44,4 +44,15 @@
     color: #DE6600 !important;
     font-weight: bold;
     opacity: 1!important;
+}
+
+.deleteTopicButton {
+    border: 1px solid #D7443E;
+    border-radius: 4px;
+    padding: 8px;
+    font-size: 16px;
+    font-family: "DM Sans";
+    color: #D7443E;
+    margin-left: 24px;
+    background-color: transparent!important;
 }
\ No newline at end of file

src/styles/topic/TopicList.css

@@ -7,7 +7,6 @@
     font-size: 36px;
     font-weight: bold;
     color: #003F5A;
-    margin-bottom: 60px;
 }
 
 .topics {
@@ -35,3 +34,10 @@
     color: #DE6600!important;
     margin: 0px;
 }
+
+.headerTopic {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 60px;
+}
\ No newline at end of file