Fakultas Ilmu Komputer UI

Commit 8aa427cc authored by FadhilP's avatar FadhilP
Browse files

resolve conflict

parents 83197446 4b7a84dd
This diff is collapsed.
......@@ -3,3 +3,4 @@
[1218/002045.689:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0103/131625.457:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0103/150109.622:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0112/193848.393:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
......@@ -4,13 +4,13 @@ import Topic from './Topic';
import Navbar from './Navbar';
import Profile from './Profile/Profile';
import ListThreads from './Threads/ListThreads';
import CreateThreadForm from './CreateThreadForm';
import CreateThread from './Threads/CreateThread';
import LoginForm from './LoginForm'
import TopicList from './TopicList';
import RegisterForm from './RegisterForm'
import CreateTopicForm from './CreateTopicForm'
import Search from './Search'
import EditThreadForm from './Threads/EditThreadForm';
import EditThread from './Threads/EditThread';
import {
BrowserRouter as Router,
Route,
......@@ -25,16 +25,16 @@ function App() {
<Route exact path='/' component={() => <ListThreads isRecent={true} />} />
<Route exact path='/top' component={() => <ListThreads isRecent={false} />} />
<Route exact path='/topic' component={TopicList} />
<Route exact path='/profile' component={Profile} />
<Route exact path='/profile/:user' component={Profile} />
<Route exact path='/login' component={LoginForm} />
<Route exact path='/register' component={RegisterForm} />
<Route exact path='/create/topic' component={CreateTopicForm} />
<Route exact path='/create/thread' component={CreateThreadForm} />
<Route exact path='/create/thread' component={CreateThread} />
<Route exact path='/search/:input' component={Search} />
<Route exact path='/topic/:topic/:thread' component={Thread} />
<Route exact path='/topic/:topic' component={Topic} />
<Route exact path='/threads' component={ListThreads} />
<Route exact path='/thread/:thread' component={EditThreadForm} />
<Route exact path='/thread/edit/:thread' component={EditThread} />
</Router>
);
}
......
......@@ -15,4 +15,10 @@
.green {
background-color: #007A7A;
border-color: #007A7A;
}
.none-green {
color: #007A7A!important;
padding: 0px!important;
border-radius: 0px!important;
}
\ No newline at end of file
.form_container {
display: flex;
flex-direction: column;
}
import axios from "axios";
import React from "react";
import { useInput } from './hooks/input-hook';
import './CreateThreadForm.css';
import './Threads/FormCreateThread.css';
import authHeader from './services/auth-header'
import { API_URL } from './services/api_link'
......
.login_form-container {
display: flex;
flex-direction: column;
margin-top: 60px;
}
.formContainer {
margin-top:36px;
padding-left: 72px;
}
.loginButton {
border-radius: 4px;
border-width: 0px;
padding: 8px;
font-family: "DM Sans";
color: #ffffff;
border-style: none;
background-color: #DE6600;
border-color: #DE6600;
margin-right: 24px;
}
.formContainer h1 {
font-family: "DM Sans";
font-size: 36px;
font-weight: bold;
color: #003F5A;
}
label {
font-family: "DM Sans";
font-size: 18px;
color: #000000;
font-weight: bold;
margin-bottom: 12px;
}
.email {
width: 1205px;
max-width: 1296px;
font-family: "DM Sans";
height: 45px;
padding: 12px 16px;
border-radius: 8px;
border: 0;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
margin-bottom: 32px;
}
.password {
width: 1205px;
max-width: 1296px;
font-family: "DM Sans";
height: 45px;
padding: 12px 16px;
border-radius: 8px;
border: 0;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
margin-bottom: 32px;
}
.buttonSubmit {
border-radius: 4px;
border-width: 0px;
padding: 8px;
font-family: "DM Sans";
color: #ffffff;
border-style: none;
background-color: #DE6600;
border-color: #DE6600;
}
textarea:focus, input:focus, select:focus{
outline: none;
}
import React from 'react'
import { useInput } from './hooks/input-hook';
import { useState } from "react";
import AuthService from './services/auth.service'
import Button from './Button'
import './LoginForm.css';
const required = value => {
if (!value) {
......@@ -39,30 +40,39 @@ export default function LoginForm(props){
}
return (
<div>
<div className="formContainer">
<h1>Login</h1>
<form onSubmit={handleLogin}>
<div className="login_form-container">
<label htmlFor='username'>Email</label>
<input
type='text'
name='username'
className="email"
{...bindUsername}
validations={[required]}
placeholder="Your email"
/>
<label htmlFor='password'>Password</label>
<input
type='password'
name='password'
className="password"
{...bindPassword}
validations={[required]}
placeholder="Your password"
/>
<button className='btn btn-primary' disabled={loading}>
{loading && (
<span className='spinner-border spinner-border-sm'></span>
)}
<span>Login</span>
</button>
<div className="buttonContainer">
<button className='loginButton' disabled={loading}>
{loading && (
<span className='spinner-border spinner-border-sm'></span>
)}
<span>Login</span>
</button>
<Button text="Register" color="green" url="register" />
</div>
{message && (
<div>
......@@ -71,10 +81,8 @@ export default function LoginForm(props){
</div>
</div>
)}
</div>
</form>
<button className='btn btn-primary' onClick={() => props.history.push('/register')}>
Register
</button>
</div>
)
}
......@@ -42,7 +42,7 @@ const Navbar = (props) => {
<Link to="/topic" className="nav-link"><b>Topics</b></Link>
</li>
<li className="nav-item ml-auto">
<Link to="/profile" className="nav-link"><b>Profile</b></Link>
<Link to={`/profile/${AuthService.getCurrentUserId()}`} className="nav-link"><b>Profile</b></Link>
</li>
{loggedIn ? (
<li className='nav-item ml-auto' onClick={handleLogout}>
......
......@@ -25,8 +25,7 @@
.icon {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #C4C4C4;
font-size: 180px;
}
.my_threads_section {
......@@ -47,4 +46,4 @@
font-family: "DM Sans";
font-size: 20px;
color: #DE6600;
}
\ No newline at end of file
}
......@@ -7,17 +7,28 @@ import AuthService from '../services/auth.service'
import { API_URL } from '../services/api_link'
import { Link } from "react-router-dom"
function Profile() {
const userId = AuthService.getCurrentUserId()
function Profile(props) {
const userId = AuthService.getCurrentUserId();
const profileId = props.match.params.user;
const [user, setUser] = useState({
id:"",
name:"",
username: ""
});
const [usersThreads, setUsersThreads] = useState([]);
useEffect(() => {
async function getUsersThreads(userId) {
async function getUsersThreads(profileId) {
const allThreads = await axios.get(`${API_URL}/threads`);
const usersThreads = allThreads.data.data.filter(thread => thread.user_id === userId);
const usersThreads = allThreads.data.data.filter(thread => thread.user_id == profileId);
const getUser = await axios.get(`${API_URL}/users/${profileId}`);
const currentUser = getUser.data.data;
setUsersThreads(usersThreads);
setUser(currentUser);
}
getUsersThreads(userId);
getUsersThreads(profileId);
}, [userId]);
......@@ -27,13 +38,19 @@ function Profile() {
<h1><b>Profile</b></h1>
</div>
<div className="profile_section">
<div className="icon"></div>
<h2><b>{AuthService.getCurrentUser().username}</b></h2>
<div className="userIcon">
<i class="far fa-user-circle icon"></i>
</div>
<h2><b>{user.username}</b></h2>
</div>
<div className="my_threads_section">
<div className="sub_header_my_threads">
<h3><b>My Threads</b></h3>
<Button type="button" text="Create Thread" color="orange" url="aaa" />
<h3><b>Threads Created by {user.username}</b></h3>
{userId == profileId && (
<Button text="Create Thread" color="orange" url="create/thread" />
)}
</div>
<div className="list_threads">
{usersThreads.map((thread) => (
......@@ -43,7 +60,8 @@ function Profile() {
user={thread.username}
points={thread.points}
time={thread.updated_at}
topic={thread.topic_name}>
topic={thread.topic_name}
user_id={thread.user_id}>
</ThreadList>
</Link>
))}
......
.register_form-container {
display: flex;
flex-direction: column;
margin-top: 60px;
}
.formContainer {
margin-top:36px;
padding-left: 72px;
}
.registerButton {
border-radius: 4px;
border-width: 0px;
padding: 8px;
font-family: "DM Sans";
color: #ffffff;
border-style: none;
background-color: #DE6600;
border-color: #DE6600;
margin-right: 24px;
}
.formContainer h1 {
font-family: "DM Sans";
font-size: 36px;
font-weight: bold;
color: #003F5A;
}
label {
font-family: "DM Sans";
font-size: 18px;
color: #000000;
font-weight: bold;
margin-bottom: 12px;
}
.email {
width: 1205px;
max-width: 1296px;
font-family: "DM Sans";
height: 45px;
padding: 12px 16px;
border-radius: 8px;
border: 0;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
margin-bottom: 32px;
}
.username {
width: 1205px;
max-width: 1296px;
font-family: "DM Sans";
height: 45px;
padding: 12px 16px;
border-radius: 8px;
border: 0;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
margin-bottom: 32px;
}
.password {
width: 1205px;
max-width: 1296px;
font-family: "DM Sans";
height: 45px;
padding: 12px 16px;
border-radius: 8px;
border: 0;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
margin-bottom: 32px;
}
.buttonSubmit {
border-radius: 4px;
border-width: 0px;
padding: 8px;
font-family: "DM Sans";
color: #ffffff;
border-style: none;
background-color: #DE6600;
border-color: #DE6600;
}
textarea:focus, input:focus, select:focus{
outline: none;
}
......@@ -3,6 +3,7 @@ import AuthService from './services/auth.service'
import { useInput } from './hooks/input-hook';
import { useState } from "react";
import { loggedIn } from './services/loggedInService';
import './RegisterForm.css'
const required = value => {
if (!value) {
......@@ -46,35 +47,43 @@ export default function RegisterForm(props){
}
return (
<div>
<div className="formContainer">
<h1>Register</h1>
<form onSubmit={handleRegister}>
{!successful && (
<div>
<div className="register_form-container">
<label htmlFor='username'>Username</label>
<input
type='text'
name='username'
className="username"
{...bindUsername}
validations={[required]}
placeholder="Your username"
/>
<label htmlFor='email'>Email</label>
<input
type='text'
name='email'
className="email"
{...bindEmail}
validations={[required]}
placeholder="Your email"
/>
<label htmlFor='password'>Password</label>
<input
type='text'
name='password'
className="password"
{...bindPassword}
validations={[required]}
placeholder="password"
/>
<button className='btn btn-primary'>Sign Up</button>
<div className="buttonContainer">
<button className='registerButton'>Sign Up</button>
</div>
</div>
)}
......
/* #comment {
background-color: aqua;
} */
#round {
margin-top: auto;
margin-bottom: auto;
background: grey;
border-radius: 100%;
width: 36px;
height: 36px;
}
#comment {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 900px;
}
#commentHeader {
height: 84px;
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
border-radius: 8px 8px 0px 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 20px;
}
#headerData {
display: flex;
flex-direction: row;
}
#headerButton {
margin-top: auto;
margin-bottom: auto;
margin-right: 20px;
height: 36px;
}
#creator {
margin-top: 30px;
margin-left: 12px;
}
#commentContent {
padding-left: 20px;
box-shadow: 0px 4px 3px 1px rgba(0,0,0,0.25);
border-radius: 0px 0px 8px 8px;
padding-top: 20px;
padding-bottom: 20px;
}
.deleteButton {
margin: 0;
}
#isi {
margin: 0;
}
\ No newline at end of file
......@@ -9,6 +9,10 @@
font-size: 18px;
}
.back:hover {
cursor: pointer;
}
.header {
margin-top: 36px;
margin-left: 72px;
......
......@@ -3,17 +3,26 @@ import './CreateThread.css';
import FormCreateThread from './FormCreateThread'
function ListThreads() {
function ListThreads(props) {
const back = () => {
props.history.goBack();
}
const redirect = (path) => {
props.history.push(path);
}
return (
<div>
<div className="back">
<div className="back" onClick={back}>
<h5>Back</h5>
</div>
<div className="header">
<h1><b>Create a Thread</b></h1>
</div>
<div className="form_section">
<FormCreateThread />
<FormCreateThread redirect={redirect}/>
</div>
</div>
)
......
.back {
margin-top: 32px;
margin-left: 72px;
color: #007A7A;
}
.back h5 {
font-family: 'DM Sans';
font-size: 18px;
}
.back:hover {
cursor: pointer;
}
.header {
margin-top: 36px;
margin-left: 72px;
}
.header h1 {
font-family: "DM Sans";
font-size: 36px;
color: #003F5A;
}
.form_section {
margin-top: 60px;
margin-left: 72px;
margin-right: 72px;
}
import React from "react";
import './EditThread.css';
import FormEditThread from './FormEditThread'
function EditThread(props) {