130 lines
4.4 KiB
JavaScript
130 lines
4.4 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
|
import PostCommentList from './components/PostCommentList';
|
|
import NewPostForm from './components/NewPostForm';
|
|
import './App.scss';
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faTimes} from "@fortawesome/free-solid-svg-icons";
|
|
import {postApi} from "./api/posts.api";
|
|
import {locationUtils} from "./utils/location";
|
|
import PostComment from "./components/PostComment";
|
|
import keycloak from "./Authentification/Keycloak";
|
|
|
|
const App = () => {
|
|
const [posts, setPosts] = useState([]);
|
|
const [comments, setComments] = useState([]);
|
|
const [selectedPost, setSelectedPost] = useState(null);
|
|
const [comment, setComment] = useState('');
|
|
|
|
useEffect(() => {
|
|
if(posts.length === 0) {
|
|
reload().then(null);
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if(selectedPost) {
|
|
setSelectedPost(posts.find(post => post.id === selectedPost.id));
|
|
}
|
|
console.log(posts);
|
|
}, [posts]);
|
|
|
|
useEffect(() => {
|
|
if(selectedPost) {
|
|
setComments(selectedPost.comments);
|
|
}
|
|
}, [selectedPost]);
|
|
|
|
const reload = async () => {
|
|
await loadPosts().then(data => {
|
|
setPosts(data);
|
|
});
|
|
}
|
|
|
|
const loadPosts = async () => {
|
|
const location = await locationUtils.getCurrentLocation();
|
|
return await postApi.getPostsByCoords(location.lon, location.lat);
|
|
}
|
|
|
|
const addPost = async (title, text) => {
|
|
await postApi.createNewPost(title, text);
|
|
await reload();
|
|
};
|
|
|
|
const addComment = async (postId, commentText) => {
|
|
await postApi.createNewPost("", commentText, postId).then(await reload);
|
|
};
|
|
|
|
const vote = (postId, reaction) => {
|
|
// TODO postApi.reactToPost(postId)
|
|
console.log(postId, reaction);
|
|
};
|
|
|
|
const handlePostClick = (post) => {
|
|
setSelectedPost(post);
|
|
};
|
|
|
|
const handleCommentSubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (comment.trim() && selectedPost) {
|
|
await addComment(selectedPost.id, comment);
|
|
setComment('');
|
|
await reload();
|
|
handlePostClick(selectedPost);
|
|
}
|
|
};
|
|
|
|
const closePost = () => {
|
|
setSelectedPost(null);
|
|
setComment('');
|
|
};
|
|
|
|
return (
|
|
<div className="app">
|
|
<button onClick={() => keycloak.logout()}>Logout</button>
|
|
<h1>SWA - Jodel</h1>
|
|
{!selectedPost && (
|
|
<div>
|
|
<NewPostForm addPost={addPost}/>
|
|
<PostCommentList
|
|
posts={posts}
|
|
addComment={addComment}
|
|
vote={vote}
|
|
onPostClick={handlePostClick}
|
|
type={"posts"}
|
|
/>
|
|
</div>
|
|
)}
|
|
{selectedPost && (
|
|
<div className="single-post-view">
|
|
<div className="close-post">
|
|
<FontAwesomeIcon className={"close-button"} onClick={closePost} icon={faTimes}/>
|
|
</div>
|
|
<PostComment post={selectedPost} vote={vote} type={"post"}></PostComment>
|
|
<form className="comment-form" onSubmit={handleCommentSubmit}>
|
|
<div className="textarea-container">
|
|
<textarea
|
|
rows={15}
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
placeholder="Kommentieren..."
|
|
maxLength={500}
|
|
/>
|
|
<div className="char-count-container">
|
|
<span className={comment.length === 500 ? "char-count max-char-count" : "char-count"}>
|
|
{comment.length} / 500
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button type="submit">Kommentieren</button>
|
|
</form>
|
|
<div className="comments">
|
|
{comments && <PostCommentList posts={comments} onPostClick={null} vote={vote}
|
|
type={"comments"}></PostCommentList>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App; |