Fakultas Ilmu Komputer UI

Commit 9601cde5 authored by Jonathan Chandra's avatar Jonathan Chandra
Browse files

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

parent 0cde542b
...@@ -4,8 +4,13 @@ import { useInput } from '../../helpers/hooks/input-hook'; ...@@ -4,8 +4,13 @@ import { useInput } from '../../helpers/hooks/input-hook';
import '../../styles/topic/CreateTopicForm.css'; import '../../styles/topic/CreateTopicForm.css';
import authHeader from '../../helpers/services/authHeader.service'; import authHeader from '../../helpers/services/authHeader.service';
import { API_URL } from '../../config/keys'; import { API_URL } from '../../config/keys';
import AuthService from '../../helpers/services/auth.service';
export default function CreateTopicForm(props) { 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 { value: name, bind: bindName, reset: resetName } = useInput('');
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
......
...@@ -6,11 +6,14 @@ import { API_URL } from '../../config/keys'; ...@@ -6,11 +6,14 @@ import { API_URL } from '../../config/keys';
import '../../styles/topic/Topic.css'; import '../../styles/topic/Topic.css';
import Button from '../utility/Button'; import Button from '../utility/Button';
import Pagination from '../thread/Pagination'; import Pagination from '../thread/Pagination';
import AuthService from '../../helpers/services/auth.service';
import authHeader from '../../helpers/services/authHeader.service';
export default function Topic(props) { export default function Topic(props) {
const { params } = props.match; const { params } = props.match;
const currentPage = params.pageNumber; const currentPage = params.pageNumber;
const topicParam = params.topic; const topicParam = params.topic;
const isAdmin = AuthService.getCurrentUser().data.role
const [threads, setThreads] = useState([]); const [threads, setThreads] = useState([]);
const [totalItems, setTotalItems] = useState(0); const [totalItems, setTotalItems] = useState(0);
...@@ -37,6 +40,15 @@ export default function Topic(props) { ...@@ -37,6 +40,15 @@ export default function Topic(props) {
window.location.reload(); window.location.reload();
} }
const deleteTopic = async () => {
try {
await axios.delete(`${API_URL}/topics/${topicParam}`, {
headers: authHeader(),
});
props.history.push(`/topic`)
} catch (error) {}
};
return ( return (
<div className="topicContainer"> <div className="topicContainer">
<div className="header"> <div className="header">
...@@ -44,7 +56,19 @@ export default function Topic(props) { ...@@ -44,7 +56,19 @@ export default function Topic(props) {
<b>Topic: {topicParam}</b> <b>Topic: {topicParam}</b>
</h1> </h1>
{loggedIn && ( {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>
<div className="list_threads_section"> <div className="list_threads_section">
......
...@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react'; ...@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { API_URL } from '../../config/keys'; import { API_URL } from '../../config/keys';
import { loggedIn } from '../../helpers/services/loggedIn.service';
import '../../styles/topic/TopicList.css'; import '../../styles/topic/TopicList.css';
import Button from '../utility/Button';
import AuthService from '../../helpers/services/auth.service';
export default function TopicList(props) { export default function TopicList(props) {
const [topics, setTopics] = useState([]); const [topics, setTopics] = useState([]);
const isAdmin = AuthService.getCurrentUser().data.role
useEffect(() => { useEffect(() => {
const fetch = async () => { const fetch = async () => {
...@@ -17,7 +21,12 @@ export default function TopicList(props) { ...@@ -17,7 +21,12 @@ export default function TopicList(props) {
return ( return (
<div className="topicContainer"> <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"> <div className="topics">
{topics.map((value) => ( {topics.map((value) => (
<Link <Link
......
...@@ -44,4 +44,15 @@ ...@@ -44,4 +44,15 @@
color: #DE6600 !important; color: #DE6600 !important;
font-weight: bold; font-weight: bold;
opacity: 1!important; 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
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
color: #003F5A; color: #003F5A;
margin-bottom: 60px;
} }
.topics { .topics {
...@@ -35,3 +34,10 @@ ...@@ -35,3 +34,10 @@
color: #DE6600!important; color: #DE6600!important;
margin: 0px; margin: 0px;
} }
.headerTopic {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60px;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment