Fakultas Ilmu Komputer UI

Commit b95faacf authored by FadhilP's avatar FadhilP
Browse files

optimize and refactor code

parent e6afeeda
......@@ -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) => {
......
/* 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,47 @@ 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>
......
......@@ -2,9 +2,8 @@ import axios from 'axios';
import React, { useState } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
import '../../styles/profile/UpdateProfileForm.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 {
......
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/CreateThread.css';
......
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/EditThread.css';
......
......@@ -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) {
......
/* 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';
......
/* 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 && (
{totalItems == 0 ? (
<p>There is no thread yet.</p>
)}
{totalItems != 0 && (
) : (
<Fragment>
<ThreadList thread={threads} />
)}
{totalItems != 0 && (
<div className="paginationContainer">
<div className="paginationContainer">
<Pagination
activePage={currentPage}
totalItems={totalItems}
switchPage={switchPage}
/>
</div>
</Fragment>
)}
</div>
);
......
......@@ -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';
......@@ -129,13 +130,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}
......
/* 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>
);
......
......@@ -3,16 +3,19 @@ import axios from 'axios';
import React, { useState } from 'react';
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';
import { loggedIn } from '../../helpers/services/loggedIn.service';
import AuthService, {
loggedIn,
authHeader,
} from '../../helpers/services/auth.service';
export default function CreateTopicForm(props) {
const isAdmin = loggedIn ? AuthService.getCurrentUser().data.role : "unregistered";
const isAdmin = loggedIn
? AuthService.getCurrentUser().data.role
: 'unregistered';
if (isAdmin != "admin") {
props.history.push("/page/1")
if (isAdmin != 'admin') {
props.history.push('/page/1');
}
const { value: name, bind: bindName, reset: resetName } = useInput('');
......@@ -73,10 +76,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>
......
......@@ -2,19 +2,22 @@
import React, { useEffect, useState } 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 AuthService, {
loggedIn,
authHeader,
} 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 isAdmin = loggedIn
? AuthService.getCurrentUser().data.role
: 'unregistered';
const [threads, setThreads] = useState([]);
const [totalItems, setTotalItems] = useState(0);
......@@ -46,7 +49,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,28 +60,21 @@ 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 == 'admin' && (
<button
type="button"
className="deleteTopicButton"
onClick={() => deleteTopic()}
>
Delete This Topic
Delete This Topic
</button>
)}
</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 && <p>There are no threads with this topic yet.</p>}
{totalItems != 0 && <ThreadList thread={threads} />}
{totalItems != 0 && (
<div className="paginationContainer">
<Pagination
......
......@@ -3,14 +3,13 @@ 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 AuthService, { loggedIn } from '../../helpers/services/auth.service';
export default function TopicList(props) {
const [topics, setTopics] = useState([]);
const isAdmin = loggedIn ? AuthService.getCurrentUser().data.role : "unregistered";
const isAdmin = loggedIn ? AuthService.getCurrentUser()?.data?.role : "unregistered";
useEffect(() => {
const fetch = async () => {
......
......@@ -36,22 +36,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>
......
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();
};
......
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