diff --git a/diskuy/src/Profile/Profile.js b/diskuy/src/Profile/Profile.js index c70719a919d5a1d8a6229ae47c454053fd912388..752f740a93a75d55092b9abe414bf5e8a487b80b 100644 --- a/diskuy/src/Profile/Profile.js +++ b/diskuy/src/Profile/Profile.js @@ -1,12 +1,13 @@ import React, { useState, useEffect } from "react"; import './Profile.css'; import Button from '../Button'; -import PreviewThread from '../Threads/PreviewThread' import ThreadList from '../ThreadList' import axios from "axios"; +import AuthService from '../services/auth.service' + +import { Link } from "react-router-dom" const LINK = 'http://localhost:4000'; -const user_id = 1; // async function getUsersThreads(user_id) { // const allThreads = await axios.get(`${LINK}/api/threads`); @@ -15,17 +16,17 @@ const user_id = 1; // } function Profile() { - + const userId = AuthService.getCurrentUserId() const [usersThreads, setUsersThreads] = useState([]); useEffect(() => { - async function getUsersThreads(user_id) { + async function getUsersThreads(userId) { const allThreads = await axios.get(`${LINK}/api/threads`); - const usersThreads = allThreads.data.data.filter(thread => thread.user_id === user_id); + const usersThreads = allThreads.data.data.filter(thread => thread.user_id === userId); setUsersThreads(usersThreads); } - getUsersThreads(user_id); - }, []); + getUsersThreads(userId); + }, [userId]); return ( @@ -35,7 +36,7 @@ function Profile() { </div> <div className="profile_section"> <div className="icon"></div> - <h2><b>Coki Jul</b></h2> + <h2><b>{AuthService.getCurrentUser().username}</b></h2> </div> <div className="my_threads_section"> <div className="sub_header_my_threads"> @@ -44,13 +45,15 @@ function Profile() { </div> <div className="list_threads"> {usersThreads.map((thread) => ( - <ThreadList - header={thread.title} - user={thread.username} - points={thread.points} - time={thread.updated_at} - topic={thread.topic_name}> - </ThreadList> + <Link to={`/topic/${thread.topic_name}/${thread.id}`}> + <ThreadList + header={thread.title} + user={thread.username} + points={thread.points} + time={thread.updated_at} + topic={thread.topic_name}> + </ThreadList> + </Link> ))} </div> </div> diff --git a/diskuy/src/Threads/Post.js b/diskuy/src/Threads/Post.js index 79926d6906ef1fac6c1db06912b251b651c31388..b0db2751a767148bed87286f4075efea38430bb8 100644 --- a/diskuy/src/Threads/Post.js +++ b/diskuy/src/Threads/Post.js @@ -3,13 +3,14 @@ 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 React, { useState, useEffect} from 'react' import { loggedIn } from '../services/loggedInService' const LINK = 'http://localhost:4000/api'; export default function Post(props){ const checkType = props.type === 'thread' ? 'threads' : 'post' - const [points, setPoints] = useState(props.points) + const [points, setPoints] = useState(0) + const [isLiked, setIsLiked] = useState(false) const deletePost = async () => { try { @@ -20,15 +21,32 @@ export default function Post(props){ } catch (error) {} } + useEffect(() => { + const fetch = async () => { + try { + const postResponse = await axios.get(`${LINK}/${checkType}/${props.id}`) + setPoints(postResponse.data.data.points) + await axios.get(`${LINK}/${checkType}/checklike/${props.id}`, {headers: authHeader()}) + setIsLiked(true) + } + catch(error){ + setIsLiked(false) + } + } + fetch() + }, [checkType, props.id]) + const handleLike = async () => { try { await axios.get(`${LINK}/${checkType}/checklike/${props.id}`, {headers: authHeader()}) await axios.post(`${LINK}/${checkType}/dislike/${props.id}`, {}, {headers: authHeader()}) setPoints(points - 1) + setIsLiked(false) } catch(error) { await axios.post(`${LINK}/${checkType}/like/${props.id}`, {}, {headers: authHeader()}) setPoints(points + 1) + setIsLiked(true) } } @@ -51,7 +69,7 @@ export default function Post(props){ <p id="isi">{props.text}</p> <p className='inline'>{points}</p> {loggedIn && ( - <button onClick={handleLike}>like</button> + <button onClick={handleLike}>{isLiked ? 'Dislike' : 'Like'}</button> )} </div> </div>