refactor topic

src/components/topic/CreateTopicForm.jsx

@@ -4,17 +4,10 @@ import React, { useState } from 'react';
 import { useInput } from '../../helpers/hooks/input-hook';
 import '../../styles/topic/CreateTopicForm.css';
 import { API_URL } from '../../config/keys';
-import AuthService, {
-  loggedIn,
-  authHeader,
-} from '../../helpers/services/auth.service';
+import { authHeader, isAdmin } from '../../helpers/services/auth.service';
 
 export default function CreateTopicForm(props) {
-  const isAdmin = loggedIn
-    ? AuthService.getCurrentUser().data.role
-    : 'unregistered';
-
-  if (isAdmin != 'admin') {
+  if (!isAdmin) {
     props.history.push('/page/1');
   }
 

src/components/topic/Topic.jsx

 /* eslint-disable eqeqeq */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
 import axios from 'axios';
 import ThreadList from '../thread/ThreadList';
 import { API_URL } from '../../config/keys';
 import '../../styles/topic/Topic.css';
 import Button from '../utility/Button';
 import Pagination from '../thread/Pagination';
-import AuthService, {
+import {
   loggedIn,
   authHeader,
+  isAdmin,
 } from '../../helpers/services/auth.service';
 
 export default function Topic(props) {
   const { params } = props.match;
   const currentPage = params.pageNumber;
   const topicParam = params.topic;
-  const isAdmin = loggedIn
-    ? AuthService.getCurrentUser().data.role
-    : 'unregistered';
 
   const [threads, setThreads] = useState([]);
   const [totalItems, setTotalItems] = useState(0);
@@ -62,7 +60,7 @@ export default function Topic(props) {
         {loggedIn && (
           <Button text="Create Thread" color="orange" url="create/thread" />
         )}
-        {loggedIn && isAdmin == 'admin' && (
+        {loggedIn && isAdmin && (
           <button
             type="button"
             className="deleteTopicButton"
@@ -73,16 +71,19 @@ export default function Topic(props) {
         )}
       </div>
       <div className="list_threads_section">
-        {totalItems == 0 && <p>There are no threads with this topic yet.</p>}
-        {totalItems != 0 && <ThreadList thread={threads} />}
-        {totalItems != 0 && (
-          <div className="paginationContainer">
-            <Pagination
-              activePage={currentPage}
-              totalItems={totalItems}
-              switchPage={switchPage}
-            />
-          </div>
+        {totalItems == 0 ? (
+          <p>There are no threads with this topic yet.</p>
+        ) : (
+          <Fragment>
+            <ThreadList thread={threads} />
+            <div className="paginationContainer">
+              <Pagination
+                activePage={currentPage}
+                totalItems={totalItems}
+                switchPage={switchPage}
+              />
+            </div>
+          </Fragment>
         )}
       </div>
     </div>

src/components/topic/TopicList.jsx

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