Merge branch 'master' into 'jonathan'

# Conflicts:
#   src/components/profile/UpdateProfileForm.jsx
#   src/components/topic/CreateTopicForm.jsx
#   src/components/topic/TopicList.jsx
#   src/components/utility/Footer.jsx

src/components/LoginForm.jsx

@@ -3,7 +3,7 @@ import '../styles/LoginForm.css';
 import { GoogleLogin } from 'react-google-login';
 import { API_URL, CLIENT_ID } from '../config/keys';
 import axios from 'axios';
-import authHeader from '../helpers/services/authHeader.service';
+import { authHeader } from '../helpers/services/auth.service';
 
 export default function LoginForm(props) {
   const handleGoogleLogin = (response) => {
@@ -24,7 +24,9 @@ export default function LoginForm(props) {
 
   return (
     <div className="loginFormContainer">
-      <h1><b>Login to discuss anything on Diskuy</b></h1>
+      <h1>
+        <b>Login to discuss anything on Diskuy</b>
+      </h1>
       <div className="App">
         <GoogleLogin
           clientId={CLIENT_ID}

src/components/Search.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import ThreadList from './thread/ThreadList';
 import { API_URL } from '../config/keys';
 import Pagination from './thread/Pagination';
-import "../styles/Search.css"
+import '../styles/Search.css';
 
 export default function Search(props) {
   const { params } = props.match;
@@ -37,7 +37,9 @@ export default function Search(props) {
 
   return (
     <div className="searchresultContainer">
-      <h1><b>Search Results for "{searchParam}"</b></h1>
+      <h1>
+        <b>Search Results for "{searchParam}"</b>
+      </h1>
       <ThreadList thread={threads} />
       {totalItems == 0 && (
         <p>Can't find any thread with your keyword.</p>

src/components/profile/Profile.jsx

 /* eslint-disable eqeqeq */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import '../../styles/profile/Profile.css';
 import Button from '../utility/Button';
 import ThreadList from '../thread/ThreadList';
@@ -14,6 +14,7 @@ export default function Profile(props) {
   const currentPage = params.pageNumber;
 
   const username = AuthService.getCurrentUsername();
+  const isUser = profileUsername == username;
 
   const [user, setUser] = useState({
     id: '',
@@ -55,49 +56,45 @@ export default function Profile(props) {
       </div>
       <div className="profile_section">
         <div className="userIcon">
-          {user.picture == 'None' && <i className="far fa-user-circle" />}
-          {user.picture != 'None' && (
+          {user.picture == 'None' ? (
+            <i className="far fa-user-circle" />
+          ) : (
             <img alt="profile pic" src={user.picture} />
           )}
         </div>
         <h2>
           <b>{user.username}</b>
         </h2>
-        {username == profileUsername && (
+        {isUser && (
           <Button text="Edit Profile" color="orange" url="profile/update" />
         )}
       </div>
       <div className="my_threads_section">
         <div className="sub_header_my_threads">
           <h3>
-            {username == profileUsername && (
-              <b>Your threads</b>
-            )}
-            {username != profileUsername && (
-              <b>{user.username}'s threads</b>
-            )}
+            <b>{isUser ? 'Your' : user.username}'s threads</b>
           </h3>
-
-          {username == profileUsername && (
+          {isUser && (
             <Button text="Create Thread" color="orange" url="create/thread" />
           )}
         </div>
-        {totalItems == 0 && username == profileUsername && (
-            <p>You don't have any thread. Why don't you make one?</p>
-        )}
-        {totalItems == 0 && username != profileUsername && (
-            <p>{user.username} doesn't have any threads.</p>
-        )}
-
-        {totalItems != 0 && <ThreadList thread={usersThreads} />}
-        {totalItems != 0 && (
-          <div className="paginationContainer">
-            <Pagination
-              activePage={currentPage}
-              totalItems={totalItems}
-              switchPage={switchPage}
-            />
-          </div>
+        {totalItems == 0 ? (
+          <p>
+            {isUser
+              ? "You don't have any thread. Why don't you make one?"
+              : `${user.username} doesn't have any threads.`}
+          </p>
+        ) : (
+          <Fragment>
+            <ThreadList thread={usersThreads} />
+            <div className="paginationContainer">
+              <Pagination
+                activePage={currentPage}
+                totalItems={totalItems}
+                switchPage={switchPage}
+              />
+            </div>
+          </Fragment>
         )}
       </div>
     </div>

src/components/profile/UpdateProfileForm.jsx

@@ -2,9 +2,8 @@ import axios from 'axios';
 import React, { useState } from 'react';
 import { useInput } from '../../helpers/hooks/input-hook';
 import '../../styles/thread/Form.css';
-import authHeader from '../../helpers/services/authHeader.service';
 import { API_URL } from '../../config/keys';
-import AuthService from '../../helpers/services/auth.service';
+import AuthService, { authHeader } from '../../helpers/services/auth.service';
 
 export default function FormCreateThread(props) {
   const {

src/components/thread/CreateThread.jsx

 import axios from 'axios';
 import React, { useState, useEffect } from 'react';
 import { useInput } from '../../helpers/hooks/input-hook';
-import authHeader from '../../helpers/services/authHeader.service';
+import { authHeader } from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
 import '../../styles/thread/Form.css';
 

src/components/thread/EditThread.jsx

 import axios from 'axios';
 import React, { useState, useEffect } from 'react';
 import { useInput } from '../../helpers/hooks/input-hook';
-import authHeader from '../../helpers/services/authHeader.service';
+import authHeader from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
 import '../../styles/thread/Form.css';
 

src/components/thread/ListThreads.jsx

@@ -3,7 +3,7 @@ import '../../styles/thread/ListThreads.css';
 import Button from '../utility/Button';
 import TopThreads from './TopThreads';
 import RecentThreads from './RecentThreads';
-import { loggedIn } from '../../helpers/services/loggedIn.service';
+import { loggedIn } from '../../helpers/services/auth.service';
 import { Link } from 'react-router-dom';
 
 export default function ListThreads(props) {

src/components/thread/Pagination.jsx

@@ -21,7 +21,7 @@ export default function Pagination(props) {
         onChange={handlePageChange}
         itemClass="page-item"
         linkClass="page-link"
-        hideNavigation="false"
+        hideNavigation={false}
       />
     </div>
   );

src/components/thread/Post.jsx

 /* eslint-disable eqeqeq */
 import '../../styles/thread/Post.css';
 import axios from 'axios';
-import AuthService from '../../helpers/services/auth.service';
-import authHeader from '../../helpers/services/authHeader.service';
+import AuthService, {
+  authHeader,
+  loggedIn,
+} from '../../helpers/services/auth.service';
 import React, { useState, useEffect } from 'react';
-import { loggedIn } from '../../helpers/services/loggedIn.service';
 import { translate } from '../../helpers/time-util';
 import { API_URL } from '../../config/keys';
 import Button from '../utility/Button';
@@ -88,8 +89,11 @@ export default function Post(props) {
       <div id="postHeader">
         <div id="headerData">
           <div className="userImage">
-            {user.picture == 'None' && <i className="far fa-user-circle" />}
-            {user.picture != 'None' && <img alt="profile" src={user.picture} />}
+            {user.picture == 'None' ? (
+              <i className="far fa-user-circle" />
+            ) : (
+              <img alt="profile" src={user.picture} />
+            )}
           </div>
           <div className="creator">
             <p>
@@ -106,12 +110,14 @@ export default function Post(props) {
           <div className="buttonContainer">
             {content.user_id == AuthService.getCurrentUserId() && (
               <div>
-                <Button
-                  type="button"
-                  text="Edit"
-                  color="none-green"
-                  url={`thread/edit/${content.id}`}
-                />
+                {checkType == 'threads' && (
+                  <Button
+                    type="button"
+                    text="Edit"
+                    color="none-green"
+                    url={`thread/edit/${content.id}`}
+                  />
+                )}
                 <button
                   type="button"
                   className="deleteButton"
@@ -130,7 +136,11 @@ export default function Post(props) {
         <div className="likeSection">
           {loggedIn && (
             <button className="likeButton" onClick={handleLike}>
-              <i className={`far fa-thumbs-up ${isLiked ? 'active' : 'inactive'}`} />
+              <i
+                className={`far fa-thumbs-up ${
+                  isLiked ? 'active' : 'inactive'
+                }`}
+              />
             </button>
           )}
           <div className="pointContainer">

src/components/thread/PreviewThread.jsx

@@ -16,7 +16,8 @@ export default function PreviewThread(props) {
       <div id="threadCardContent">
         <p>
           By{' '}
-          <Link to={`/profile/${content.username}/1`}>{content.username}</Link> - {time} - <i className="far fa-thumbs-up" /> {content.points}
+          <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
+          - {time} - <i className="far fa-thumbs-up" /> {content.points}
         </p>
       </div>
     </div>

src/components/thread/RecentThreads.jsx

 /* eslint-disable eqeqeq */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
 import axios from 'axios';
 import ThreadList from './ThreadList';
 import { API_URL } from '../../config/keys';
@@ -34,20 +34,19 @@ export default function RecentThreads(props) {
 
   return (
     <div className="recentThreads">
-      {totalItems == 0 && (
-          <p>There is no thread yet.</p>
-      )}
-      {totalItems != 0 && (
+      {totalItems == 0 ? (
+        <p>There is no thread yet.</p>
+      ) : (
+        <Fragment>
           <ThreadList thread={threads} />
-      )}
-      {totalItems != 0 && (
-        <div className="paginationContainer">
-          <Pagination
-            activePage={currentPage}
-            totalItems={totalItems}
-            switchPage={switchPage}
-          />
-        </div>
+          <div className="paginationContainer">
+            <Pagination
+              activePage={currentPage}
+              totalItems={totalItems}
+              switchPage={switchPage}
+            />
+          </div>
+        </Fragment>
       )}
     </div>
   );

src/components/thread/Thread.jsx

@@ -5,9 +5,10 @@ import CommentList from './CommentList';
 import Post from './Post';
 import { useInput } from '../../helpers/hooks/input-hook';
 import axios from 'axios';
-import { loggedIn } from '../../helpers/services/loggedIn.service';
-import authHeader from '../../helpers/services/authHeader.service';
-import AuthService from '../../helpers/services/auth.service';
+import AuthService, {
+  authHeader,
+  loggedIn,
+} from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
 import Pagination from './Pagination';
 
@@ -131,13 +132,11 @@ export default function Thread(props) {
       )}
       <h2 className="commentText">Comments</h2>
 
-      {totalComments == '0' && (
+      {totalComments == 0 ? (
         <div className="noCommentLabel">
           <p>There are no comments yet.</p>
         </div>
-      )}
-
-      {totalComments != '0' && (
+      ) : (
         <div>
           <CommentList
             comment={comment}

src/components/thread/ThreadList.jsx

@@ -6,6 +6,7 @@ export default function ThreadList(props) {
     <div className="list_threads">
       {props.thread.map((value) => (
         <Link
+          key={value.id}
           to={`/topic/${value.topic_name}/${value.id}/page/1`}
           style={{ textDecoration: 'none' }}
         >

src/components/thread/TopThreads.jsx

 /* eslint-disable eqeqeq */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
 import axios from 'axios';
 import ThreadList from './ThreadList';
 import { API_URL } from '../../config/keys';
@@ -33,20 +33,19 @@ export default function TopThreads(props) {
 
   return (
     <div className="topThreads">
-      {totalItems == 0 && (
-          <p>There is no thread yet.</p>
-      )}
-      {totalItems != 0 && (
+      {totalItems == 0 ? (
+        <p>There is no thread yet.</p>
+      ) : (
+        <Fragment>
           <ThreadList thread={threads} />
-      )}
-      {totalItems != 0 && (
-        <div className="paginationContainer">
-          <Pagination
-            activePage={currentPage}
-            totalItems={totalItems}
-            switchPage={switchPage}
-          />
-        </div>
+          <div className="paginationContainer">
+            <Pagination
+              activePage={currentPage}
+              totalItems={totalItems}
+              switchPage={switchPage}
+            />
+          </div>
+        </Fragment>
       )}
     </div>
   );

src/components/topic/CreateTopicForm.jsx

@@ -3,16 +3,12 @@ import axios from 'axios';
 import React, { useState } from 'react';
 import { useInput } from '../../helpers/hooks/input-hook';
 import '../../styles/thread/Form.css';
-import authHeader from '../../helpers/services/authHeader.service';
 import { API_URL } from '../../config/keys';
-import AuthService from '../../helpers/services/auth.service';
-import { loggedIn } from '../../helpers/services/loggedIn.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") {
-    props.history.push("/page/1")
+  if (!isAdmin) {
+    props.history.push('/page/1');
   }
 
   const { value: name, bind: bindName, reset: resetName } = useInput('');
@@ -73,10 +69,11 @@ export default function CreateTopicForm(props) {
             {...bindName}
           />
           <div className="buttonContainer">
-            <input 
-              type="submit" 
+            <input
+              type="submit"
               value="Create Topic"
-              className="buttonSubmit" />
+              className="buttonSubmit"
+            />
           </div>
         </div>
       </form>

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 { loggedIn } from '../../helpers/services/loggedIn.service';
 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';
+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);
@@ -46,7 +47,7 @@ export default function Topic(props) {
       await axios.delete(`${API_URL}/topics/${topicParam}`, {
         headers: authHeader(),
       });
-      props.history.push(`/topic`)
+      props.history.push(`/topic`);
     } catch (error) {}
   };
 
@@ -57,36 +58,32 @@ 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" && (
+        {loggedIn && isAdmin && (
           <button
             type="button"
             className="deleteTopicButton"
             onClick={() => deleteTopic()}
           >
-          Delete This Topic
+            Delete This Topic
           </button>
         )}
       </div>
       <div className="list_threads_section">
-        {totalItems == 0 && (
+        {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>
+        ) : (
+          <Fragment>
+            <ThreadList thread={threads} />
+            <div className="paginationContainer">
+              <Pagination
+                activePage={currentPage}
+                totalItems={totalItems}
+                switchPage={switchPage}
+              />
+            </div>
+          </Fragment>
         )}
       </div>
     </div>

src/components/topic/TopicList.jsx

@@ -3,14 +3,12 @@ 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';
+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 () => {
@@ -24,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>

src/components/utility/Footer.jsx

@@ -38,22 +38,12 @@ function Footer() {
             </Link>
           </div>
           <div className="footerContentContainer">
-            <p>
-              <b>Source Code</b>
-            </p>
             <a
               target="_blank"
-              href="https://gitlab.cs.ui.ac.id/functional-programming/diskuy-backend"
+              href="https://gitlab.cs.ui.ac.id/functional-programming/diskuy-fullstack"
               className="footerMenu"
             >
-              Backend
-            </a>
-            <a
-              target="_blank"
-              href="https://gitlab.cs.ui.ac.id/functional-programming/diskuy-frontend"
-              className="footerMenu"
-            >
-              Frontend
+              <b>Source Code</b>
             </a>
           </div>
         </div>

src/components/utility/Navbar.jsx

 import React from 'react';
 import { ReactComponent as DiskuyLogo } from '../../images/Logo.svg';
 import '../../styles/utility/Navbar.css';
-import { useState } from 'react';
-import AuthService from '../../helpers/services/auth.service';
+import AuthService, { loggedIn } from '../../helpers/services/auth.service';
 import { useInput } from '../../helpers/hooks/input-hook';
 import { Link, withRouter } from 'react-router-dom';
 
 const Navbar = (props) => {
-  const [loggedIn, setLoggedIn] = useState(AuthService.getCurrentUser() && 1);
   const { value: search, bind: bindSearch, reset: resetSearch } = useInput('');
 
   const handleLogout = () => {
     AuthService.logout();
-    setLoggedIn(false);
     window.location.reload();
   };
 
@@ -71,14 +68,14 @@ const Navbar = (props) => {
             </Link>
           </li>
           {loggedIn && (
-          <li className="nav-item mr-auto">
-            <Link
-              to={`/profile/${AuthService.getCurrentUsername()}/1`}
-              className="nav-link"
-            >
-              <b>Profile</b>
-            </Link>
-          </li>
+            <li className="nav-item mr-auto">
+              <Link
+                to={`/profile/${AuthService.getCurrentUsername()}/1`}
+                className="nav-link"
+              >
+                <b>Profile</b>
+              </Link>
+            </li>
           )}
           {loggedIn ? (
             <li className="nav-item mr-auto" onClick={handleLogout}>

src/helpers/services/auth.service.js

@@ -8,20 +8,22 @@ class AuthService {
   }