Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Functional Programming
Diskuy-Backend
Commits
5ede3057
Commit
5ede3057
authored
Jan 13, 2021
by
jonathanchandra15
Browse files
add styling
parent
fe46bc32
Changes
21
Expand all
Hide whitespace changes
Inline
Side-by-side
diskuy/.eslintcache
View file @
5ede3057
This diff is collapsed.
Click to expand it.
diskuy/src/App.js
View file @
5ede3057
...
...
@@ -10,7 +10,7 @@ import TopicList from './TopicList';
import
RegisterForm
from
'
./RegisterForm
'
import
CreateTopicForm
from
'
./CreateTopicForm
'
import
Search
from
'
./Search
'
import
EditThread
Form
from
'
./Threads/EditThread
Form
'
;
import
EditThread
from
'
./Threads/EditThread
'
;
import
{
BrowserRouter
as
Router
,
Route
,
...
...
@@ -34,7 +34,7 @@ function App() {
<
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/edit/:thread
'
component
=
{
EditThread
Form
}
/
>
<
Route
exact
path
=
'
/thread/edit/:thread
'
component
=
{
EditThread
}
/
>
<
/Router
>
);
}
...
...
diskuy/src/LoginForm.css
0 → 100644
View file @
5ede3057
.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
;
}
diskuy/src/LoginForm.js
View file @
5ede3057
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
>
)
}
diskuy/src/Profile/Profile.css
View file @
5ede3057
...
...
@@ -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
}
diskuy/src/Profile/Profile.js
View file @
5ede3057
...
...
@@ -38,15 +38,17 @@ function Profile(props) {
<
h1
><
b
>
Profile
<
/b></
h1
>
<
/div
>
<
div
className
=
"
profile_section
"
>
<
div
className
=
"
icon
"
><
/div
>
<
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
>
Threads
Created
<
/b></
h3
>
<
h3
><
b
>
Threads
Created
by
{
user
.
username
}
<
/b></
h3
>
{
userId
==
profileId
&&
(
<
Button
type
=
"
button
"
text
=
"
Create Thread
"
color
=
"
orange
"
url
=
"
aaa
"
/>
<
Button
text
=
"
Create Thread
"
color
=
"
orange
"
url
=
"
create/thread
"
/>
)}
<
/div
>
...
...
diskuy/src/RegisterForm.css
0 → 100644
View file @
5ede3057
.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
;
}
diskuy/src/RegisterForm.js
View file @
5ede3057
...
...
@@ -2,6 +2,7 @@ import React from 'react'
import
AuthService
from
'
./services/auth.service
'
import
{
useInput
}
from
'
./hooks/input-hook
'
;
import
{
useState
}
from
"
react
"
;
import
'
./RegisterForm.css
'
const
required
=
value
=>
{
if
(
!
value
)
{
...
...
@@ -44,35 +45,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
>
)}
...
...
diskuy/src/Threads/EditThread.css
0 → 100644
View file @
5ede3057
.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
;
}
diskuy/src/Threads/EditThread.js
0 → 100644
View file @
5ede3057
import
React
from
"
react
"
;
import
'
./EditThread.css
'
;
import
FormEditThread
from
'
./FormEditThread
'
function
EditThread
(
props
)
{
const
back
=
()
=>
{
props
.
history
.
goBack
();
}
const
redirect
=
(
path
)
=>
{
props
.
history
.
push
(
path
);
}
const
threadId
=
props
.
match
.
params
.
thread
return
(
<
div
>
<
div
className
=
"
back
"
onClick
=
{
back
}
>
<
h5
>
Back
<
/h5>
<
/div
>
<
div
className
=
"
header
"
>
<
h1
><
b
>
Edit
a
Thread
<
/b></
h1
>
<
/div
>
<
div
className
=
"
form_section
"
>
<
FormEditThread
redirect
=
{
redirect
}
threadId
=
{
threadId
}
/
>
<
/div
>
<
/div
>
)
}
export
default
EditThread
;
\ No newline at end of file
diskuy/src/Threads/EditThreadForm.css
deleted
100644 → 0
View file @
fe46bc32
.form_container
{
display
:
flex
;
flex-direction
:
column
;
}
diskuy/src/Threads/FormCreateThread.js
View file @
5ede3057
...
...
@@ -54,16 +54,16 @@ export default function FormCreateThread(props){
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
form_container
"
>
<
label
for
=
"
title
"
>
Title
<
/label
>
<
input
type
=
'
text
'
className
=
"
title
"
name
=
"
title
"
placeholder
=
"
Your threads title
"
required
=
{
false
}
{...
bindTitle
}
/
>
<
input
type
=
'
text
'
className
=
"
title
"
name
=
"
title
"
placeholder
=
"
Your threads title
"
required
=
"
false
"
{...
bindTitle
}
/
>
<
label
>
Topic
<
/label
>
<
select
className
=
"
topic
"
name
=
"
topic
"
{...
bindTopicId
}
>
<
select
className
=
"
topic
"
name
=
"
topic
"
required
=
"
false
"
{...
bindTopicId
}
>
<
option
value
=
""
><
/option
>
{
listTopic
.
map
((
topic
)
=>
(
<
option
value
=
{
topic
.
id
}
>
{
topic
.
name
}
<
/option
>
))}
<
/select
>
<
label
for
=
"
body
"
>
Body
<
/label
>
<
textarea
className
=
"
body
"
name
=
"
body
"
placeholder
=
"
Tulis
"
required
=
{
false
}
{...
bindBody
}
/
>
<
textarea
className
=
"
body
"
name
=
"
body
"
placeholder
=
"
Tulis
"
required
=
"
false
"
{...
bindBody
}
/
>
<
div
className
=
"
buttonContainer
"
>
<
input
type
=
"
submit
"
className
=
"
buttonSubmit
"
value
=
"
Create Thread
"
/>
<
/div
>
...
...
diskuy/src/Threads/FormEditThread.css
0 → 100644
View file @
5ede3057
.form_container
{
display
:
flex
;
flex-direction
:
column
;
}
label
{
font-family
:
"DM Sans"
;
font-size
:
18px
;
color
:
#000000
;
font-weight
:
bold
;
margin-bottom
:
12px
;
}
.title
{
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
;
}
.topic
{
width
:
400px
;
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
;
}
.body
{
width
:
1205px
;
max-width
:
1296px
;
font-family
:
"DM Sans"
;
height
:
320px
;
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
;
}
diskuy/src/Threads/EditThread
Form
.js
→
diskuy/src/Threads/
Form
EditThread.js
View file @
5ede3057
import
axios
from
"
axios
"
;
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
{
useInput
}
from
'
../hooks/input-hook
'
;
import
'
./EditThread
Form
.css
'
;
import
'
./
Form
EditThread.css
'
;
import
authHeader
from
'
../services/auth-header
'
import
{
API_URL
}
from
'
../services/api_link
'
...
...
@@ -12,7 +12,7 @@ export default function CreateThreadForm(props){
const
[
listTopic
,
setlistTopic
]
=
useState
([]);
const
[
point
,
setPoint
]
=
useState
(
0
);
const
threadIdParam
=
props
.
match
.
params
.
thread
const
threadIdParam
=
props
.
thread
Id
useEffect
(()
=>
{
async
function
getListTopic
()
{
...
...
@@ -60,17 +60,19 @@ export default function CreateThreadForm(props){
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
form_container
"
>
<
label
for
=
"
title
"
>
Title
<
/label
>
<
input
type
=
'
text
'
name
=
"
title
"
placeholder
=
"
Your threads title
"
required
=
{
false
}
{...
bindTitle
}
/
>
<
input
type
=
'
text
'
className
=
"
title
"
name
=
"
title
"
placeholder
=
"
Your threads title
"
required
=
"
false
"
{...
bindTitle
}
/
>
<
label
>
Topic
<
/label
>
<
select
name
=
"
topic
"
{...
bindTopicId
}
>
<
select
className
=
"
topic
"
name
=
"
topic
"
required
=
"
false
"
{...
bindTopicId
}
>
<
option
value
=
""
><
/option
>
{
listTopic
.
map
((
topic
)
=>
(
<
option
value
=
{
topic
.
id
}
>
{
topic
.
name
}
<
/option
>
))}
<
/select
>
<
label
for
=
"
body
"
>
Body
<
/label
>
<
input
type
=
'
text
'
name
=
"
body
"
placeholder
=
"
Tulis
"
required
=
{
false
}
{...
bindBody
}
/
>
<
input
type
=
"
submit
"
value
=
"
Submit
"
/>
<
textarea
className
=
"
body
"
name
=
"
body
"
placeholder
=
"
Tulis
"
required
=
"
false
"
{...
bindBody
}
/
>
<
div
className
=
"
buttonContainer
"
>
<
input
type
=
"
submit
"
className
=
"
buttonSubmit
"
value
=
"
Edit Thread
"
/>
<
/div
>
<
/div
>
<
/form
>
)
...
...
diskuy/src/Threads/Post.css
View file @
5ede3057
...
...
@@ -3,6 +3,7 @@
max-width
:
1296px
;
margin-left
:
72px
;
margin-right
:
72px
;
margin-bottom
:
20px
;
font-family
:
"DM Sans"
;
}
...
...
@@ -99,3 +100,7 @@
.pointContainer
.point
{
height
:
24px
;
}
button
:focus
{
outline
:
none
;
}
diskuy/src/Threads/Thread.css
View file @
5ede3057
...
...
@@ -23,8 +23,11 @@
}
.commentText
{
margin-top
:
20px
;
margin-left
:
100px
;
margin-left
:
72px
;
color
:
#FEA02F
;
font-size
:
24px
;
font-weight
:
bold
;
margin-bottom
:
12px
;
}
#addCommentSection
{
...
...
@@ -33,7 +36,7 @@
margin-top
:
40px
;
display
:
flex
;
flex-direction
:
column
;
margin-top
:
4
0px
;
margin-top
:
2
0px
;
}
#addCommentSection
h3
{
...
...
@@ -43,21 +46,11 @@
margin-bottom
:
12px
;
}
.commentBox
{
border-radius
:
8px
;
padding
:
12px
;
}
#addCommentButton
{
margin-top
:
20px
;
margin-left
:
auto
;
margin-right
:
auto
;
margin-bottom
:
20px
;
}