Fakultas Ilmu Komputer UI

Commit 42cff267 authored by Jonathan Chandra's avatar Jonathan Chandra
Browse files

Merge branch 'master' of...

Merge branch 'master' of https://gitlab.cs.ui.ac.id/functional-programming/diskuy-frontend into jonathan
parents 6373868a 300aeb66
......@@ -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}
......
......@@ -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>
......
/* 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>
......
......@@ -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 {
......
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';
......
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';
......
......@@ -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) {
......
......@@ -21,7 +21,7 @@ export default function Pagination(props) {
onChange={handlePageChange}
itemClass="page-item"
linkClass="page-link"
hideNavigation="false"
hideNavigation={false}
/>
</div>
);
......
/* 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">
......
......@@ -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>
......
/* 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>
);
......
......@@ -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';
......@@ -133,13 +134,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}
......
......@@ -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' }}
>
......
/* 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,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>
......
/* 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>
......
......@@ -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>
......
......@@ -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>
......
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}>
......
......@@ -8,20 +8,22 @@ class AuthService {
}