diff --git a/diskuy/src/App.js b/diskuy/src/App.js index 0922e0817c3356cb6c65ee44158a750386dc5e58..bea072ecee1a97a86efda395bf27d95496055d67 100644 --- a/diskuy/src/App.js +++ b/diskuy/src/App.js @@ -8,6 +8,7 @@ import Form from './Form'; import LoginForm from './LoginForm' import TopicList from './TopicList'; import RegisterForm from './RegisterForm' +import CreateTopicForm from './CreateTopicForm' import { BrowserRouter as Router, Route, @@ -23,7 +24,8 @@ function App() { <Route exact path='/profile' component={Profile} /> <Route exact path='/login' component={LoginForm} /> <Route exact path='/register' component={RegisterForm} /> - <Route exact path='/topic/:topic/thread/create' component={Form} /> + <Route exact path='/create/topic' component={CreateTopicForm} /> + <Route exact path='/create/:topic/thread' component={Form} /> <Route exact path='/topic/:topic/:thread' component={Thread} /> <Route exact path='/topic/:topic' component={Topic} /> <Route exact path='/threads' component={ListThreads} /> diff --git a/diskuy/src/CreateTopicForm.js b/diskuy/src/CreateTopicForm.js new file mode 100644 index 0000000000000000000000000000000000000000..027b318290ab0d481b6f3accee3dd16593ce2c0c --- /dev/null +++ b/diskuy/src/CreateTopicForm.js @@ -0,0 +1,37 @@ +import axios from "axios"; +import React from "react"; +import { useInput } from './hooks/input-hook'; +import './Form.css'; +import authHeader from './services/auth-header' + +const LINK = 'http://localhost:4000'; + +export default function CreateTopicForm(props){ + const { value: name, bind: bindName, reset: resetName } = useInput('') + + const handleSubmit = async (event) => { + event.preventDefault(); + + try { + await axios.post(`${LINK}/api/topics`, { + topic : { + name: name + } + }, + {headers: authHeader()}) + props.history.push(`/`) + } + catch(error){} + resetName(); + } + + return ( + <form onSubmit={handleSubmit}> + <div className="form_container"> + <label for="title">Name</label> + <input type='text' name="title" placeholder="Your topic name" required="true" {...bindName}/> + <input type="submit" value="Submit"/> + </div> + </form> + ) +} diff --git a/diskuy/src/RegisterForm.js b/diskuy/src/RegisterForm.js index 6a128318c0ee9cffe69b14cb3ee2cebf523e20d0..04c0dccd22fb6cc2b1b21802e2a1817dc4186d94 100644 --- a/diskuy/src/RegisterForm.js +++ b/diskuy/src/RegisterForm.js @@ -28,7 +28,6 @@ export default function RegisterForm(props){ try { const response = AuthService.register(username, email, password) - setMessage(response.data.message) setSuccesful(true) props.history.push('/') window.location.reload() diff --git a/diskuy/src/Threads/Post.js b/diskuy/src/Threads/Post.js index 38732d0e93b8537428c60b3dc1373cd5f0d94806..8169ebbcf2eb67d756b2c3f5ee90d97b109c9597 100644 --- a/diskuy/src/Threads/Post.js +++ b/diskuy/src/Threads/Post.js @@ -3,24 +3,40 @@ import './Comment.css'; import axios from 'axios'; import AuthService from '../services/auth.service' import authHeader from '../services/auth-header' +import React, { useState } from 'react' +import { loggedIn } from '../services/loggedInService' -const LINK = 'http://localhost:4000/'; +const LINK = 'http://localhost:4000/api'; export default function Post(props){ + const [points, setPoints] = useState(props.points) const deletePost = async () => { try { if(props.type === "thread") { - await axios.delete(`${LINK}api/threads/${props.id}` + await axios.delete(`${LINK}/threads/${props.id}` ,{headers: authHeader()}); props.redirect() } else { - await axios.delete(`${LINK}api/post/${props.id}` + await axios.delete(`${LINK}/post/${props.id}` ,{headers: authHeader()}); window.location.reload(); } } catch (error) {} } + const handleLike = async () => { + const checkType = props.type === 'thread' ? 'threads' : 'post' + try { + await axios.get(`${LINK}/${checkType}/checklike/${props.id}`, {headers: authHeader()}) + await axios.post(`${LINK}/${checkType}/dislike/${props.id}`, {}, {headers: authHeader()}) + setPoints(points - 1) + } + catch(error) { + await axios.post(`${LINK}/${checkType}/like/${props.id}`, {}, {headers: authHeader()}) + setPoints(points + 1) + } + } + return ( <div id="post"> <div id="postHeader"> @@ -38,7 +54,10 @@ export default function Post(props){ <div id="postContent"> <h1 id="judul">{props.header}</h1> <p id="isi">{props.text}</p> - <p className='inline'>{props.points}</p> + <p className='inline'>{points}</p> + {loggedIn && ( + <button onClick={handleLike}>like</button> + )} </div> </div> ) diff --git a/diskuy/src/Threads/Thread.js b/diskuy/src/Threads/Thread.js index 26b7d8a12a159e35273afe48d629043f3e2b3a37..838b801bf0c3e8903a18a94f73ad0b63833798ac 100644 --- a/diskuy/src/Threads/Thread.js +++ b/diskuy/src/Threads/Thread.js @@ -95,7 +95,7 @@ export default function Thread(props){ text={thread.content} header={thread.title} user={thread.username} - points={thread.point} + points={thread.points} id={thread.id} user_id={thread.user_id} thread_id={thread.thread_id} diff --git a/diskuy/src/Topic.js b/diskuy/src/Topic.js index 5728ae9f0d8ada0a048e7c73149d20ce60908e43..2f61644813c800de81f6bd8a520806e5c3b40370 100644 --- a/diskuy/src/Topic.js +++ b/diskuy/src/Topic.js @@ -29,7 +29,7 @@ export default function Topic(props){ <div> {loggedIn && ( - <Link to={`/topic/${topicParam}/thread/create`}> + <Link to={`/create/${topicParam}/thread`}> <button type="button" className="btn btn-primary btn_cancel newThreadButton">Create New Thread</button> </Link> )} diff --git a/diskuy/src/services/auth.service.js b/diskuy/src/services/auth.service.js index 05eb4031eaf919b8893c734de9bc99cb1bf36667..7077c0fa348cc35da56c428abf2cd899b5f428a9 100644 --- a/diskuy/src/services/auth.service.js +++ b/diskuy/src/services/auth.service.js @@ -20,7 +20,7 @@ class AuthService { password } }) - this.login(username, password) + this.login(email, password) return response }