implement comments functions; refactor functions b00tc4mp#168

staff/javier-romera/unsocial/src/components/functional/AddComment.css

@@ -0,0 +1,16 @@
+.Form {
+    gap: 10px;
+
+    .Field {
+        width: 90%;
+    }
+
+    textarea {
+        width: 100%;
+    }
+
+    .send-button {
+        width: 75px;
+        margin: 0;
+    }
+}

staff/javier-romera/unsocial/src/components/functional/AddComment.jsx

@@ -0,0 +1,34 @@
+import { Button, Form, Field } from '../library'
+
+import logic from '../../logic'
+
+import './AddComment.css'
+
+export default ({ postId, onAdded }) => {
+    const handleSubmit = event => {
+        event.preventDefault()
+
+        const form = event.target
+
+        const { text: { value: text } } = form
+
+        try {
+            logic.addComment(postId, text)
+
+            form.reset()
+
+            onAdded()
+        } catch (error) {
+            alert(error.message)
+            console.error(error)
+        }
+    }
+
+    return <Form onSubmit={handleSubmit}>
+        <Field>
+            <textarea placeholder="Comment" id="text"></textarea>
+        </Field>
+
+        <Button classname="send-button" type="submit">Send</Button>
+    </Form>
+}

staff/javier-romera/unsocial/src/components/functional/Comment.css

@@ -0,0 +1,15 @@
+.Comment {
+    p {
+        padding-right: 0;
+    }
+
+    .username-delete {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .remove-comment {
+        width: 26px;
+        border: 0;
+    }
+}

staff/javier-romera/unsocial/src/components/functional/Comment.jsx

@@ -0,0 +1,34 @@
+import { Button } from '../library'
+
+import logic from '../../logic'
+
+import getElapsedTime from "../../utils/getElapsedTime"
+
+import './Comment.css'
+
+export default ({ postId, comment: { id, author, text, date }, onRemoved }) => {
+
+    const handleRemove = () => {
+        if (confirm('Delete comment?'))
+            try {
+                logic.removeComment(postId, id)
+
+                onRemoved()
+            } catch (error) {
+                alert(error.message)
+                console.error(error)
+            }
+    }
+
+    return <li className="Comment">
+        <div className="username-delete">
+            <h5>{author.username}</h5>
+
+            {logic.getUserId() === author.id && <Button classname="remove-comment" onClick={handleRemove}>❌</Button>}
+        </div>
+
+        <p>{text}</p>
+
+        <time>{getElapsedTime(date)}</time>
+    </li>
+}

staff/javier-romera/unsocial/src/components/functional/Comments.css

@@ -13,10 +13,6 @@
         margin: 1rem 0;
     }
 
-    textarea {
-        width: 100%;
-    }
-
     p,
     time {
         padding-left: .5rem;

staff/javier-romera/unsocial/src/components/functional/Comments.jsx

@@ -1,20 +1,20 @@
 import { Component } from 'react'
 import { Button, Form } from '../library'
+import AddComment from './AddComment'
+
 import './Comments.css'
 
 import logic from '../../logic'
-import CommentItem from './CommentItem'
+import Comment from './Comment'
 
 export default class extends Component {
     constructor(props) {
         super(props)
 
-        const { postId } = props
-
         let comments
 
         try {
-            comments = logic.getComments(postId)
+            comments = logic.getComments(props.postId)
         } catch (error) {
             alert(error.message)
             console.error(error)
@@ -23,31 +23,46 @@ export default class extends Component {
         this.state = { comments }
     }
 
-    render() {
-        return <section className="Comments">
-            <ul>
-                {this.state.comments.map(comment => <CommentItem id={comment} />)}
-            </ul>
-            <Form onSubmit={event => {
-                event.preventDefault()
+    onAdded = () => {
+        try {
+            const comments = logic.getComments(this.props.postId)
 
-                try {
-                    logic.createComment(logic.getUserId(), event.target['text-area'].value, this.props.postId)
+            this.setState({ comments })
 
-                    event.target['text-area'].value = ""
+            this.props.onAdded()
+        } catch (error) {
+            alert(error.message)
+            console.error(error)
+        }
+    }
 
-                    const comments = logic.getComments(this.props.postId)
+    onRemoved = () => {
+        try {
+            const comments = logic.getComments(this.props.postId)
 
-                    this.setState({ comments })
-                } catch (error) {
-                    alert(error.message)
+            this.setState({ comments })
 
-                    console.error(error)
-                }
-            }}>
-                <textarea id="text-area" placeholder="Comment"></textarea>
-                <Button type="submit">Comment</Button>
-            </Form>
+            this.props.onRemoved()
+        } catch (error) {
+            alert(error.message)
+            console.error(error)
+        }
+    }
+
+    render() {
+        return <section className="Comments">
+            <ul>
+                {this.state.comments.map(comment =>
+                    <Comment
+                        postId={this.props.postId}
+                        comment={comment}
+                        onRemoved={this.onRemoved}
+                    />)}
+            </ul>
+            <AddComment
+                postId={this.props.postId}
+                onAdded={this.onAdded}
+            />
         </section>
     }
 }

staff/javier-romera/unsocial/src/components/functional/Header.jsx

@@ -5,35 +5,35 @@ import { Anchor, Button } from '../library'
 import logic from '../../logic'
 
 export default ({ view, onHomeClick, onLoggedOut }) => {
-    // let name
     let username
 
     if (logic.isUserLoggedIn())
         try {
-            // name = logic.getUserName()
             username = logic.getUserUsername()
         } catch (error) {
             alert(error.message)
             console.error(error)
         }
 
-    return <header className="Header">
-        <h1>{view === 'new-post' ? <Anchor href="" onClick={event => {
-            event.preventDefault()
+    const handleHomeClick = event => {
+        event.preventDefault()
+
+        onHomeClick()
+    }
+
+    const handleLogout = () => {
+        logic.logoutUser()
 
-            onHomeClick()
-        }}>laicosnU</Anchor> : "laicosnU"}</h1>
+        onLoggedOut()
+    }
+
+    return <header className="Header">
+        <h1>{view === 'new-post' ? <Anchor href="" onClick={handleHomeClick}>laicosnU</Anchor> : "laicosnU"}</h1>
 
         <div className="name-button">
             {logic.isUserLoggedIn() && <h3>{username}</h3>}
 
-            {logic.isUserLoggedIn() && <Button classname="logout-button" type="button" onClick={() => {
-                // if (confirm('Are you sure you want to logout?')) {
-                logic.logoutUser()
-
-                onLoggedOut()
-                // }
-            }}>𐢫</Button>}
+            {logic.isUserLoggedIn() && <Button classname="logout-button" type="button" onClick={handleLogout}>𐢫</Button>}
         </div>
     </header>
 }

staff/javier-romera/unsocial/src/components/functional/PostItem.css → staff/javier-romera/unsocial/src/components/functional/Post.css

@@ -1,4 +1,4 @@
-.PostItem {
+.Post {
     .post-header {
         display: flex;
         justify-content: space-between;

staff/javier-romera/unsocial/src/components/functional/Post.jsx

@@ -0,0 +1,85 @@
+import { Button } from '../library'
+import Comments from './Comments'
+
+import logic from '../../logic'
+
+import getElapsedTime from '../../utils/getElapsedTime'
+
+import { Component } from 'react'
+
+import './Post.css'
+
+export default class extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = { view: null }
+    }
+
+    handleLikeClick = () => {
+        try {
+            logic.toggleLikePost(this.props.post.id)
+
+            this.props.onLiked()
+        } catch (error) {
+            alert(error.message)
+            console.error(error)
+        }
+    }
+
+    handleDeleteClick = () => {
+        if (confirm('Are you sure you want to delete this post?')) {
+            logic.deletePost(this.props.post.id)
+
+            this.props.onDeleted()
+        }
+    }
+
+    handleCommentsClick = () => {
+        this.setState({ view: this.state.view ? null : 'comments' })
+    }
+
+    handleViewCommentsShow = () => {
+        this.setState({ view: 'comments' })
+    }
+
+    handleViewCommentsHide = () => {
+        this.setState({ view: null })
+    }
+
+    render() {
+        const { post: { id, author, image, text, date, liked, likedBy, comments }, onCommentAdded, onCommentRemoved, } = this.props
+
+        return <article className="Post">
+            <div className="post-header">
+                <h4>{author.username}</h4>
+
+                {logic.getUserId() === author.id && <Button classname="delete-button" type="button" onClick={this.handleDeleteClick}>❌</Button>}
+            </div>
+
+            <img src={image}></img>
+
+            <div className="likes-div">
+                <Button classname="like-button" onClick={this.handleLikeClick}>{`${liked ? '❤️' : '🤍'}`}</Button>
+
+                <span>{likedBy.length}</span>
+
+                <Button classname="comment-button" onClick={this.handleCommentsClick}>💬 </Button>
+                <span>{comments}</span>
+            </div>
+
+            <p className="caption">{text}</p>
+
+            {this.state.view === 'comments' && <Comments
+                postId={id}
+                onAdded={onCommentAdded}
+                onRemoved={onCommentRemoved} />}
+
+            {this.state.view === 'comments' && <p onClick={this.handleViewCommentsHide}>Hide comments</p>}
+
+            {this.state.view !== 'comments' && <p onClick={this.handleViewCommentsShow}>View comments...</p>}
+
+            <time>{getElapsedTime(date)} ago</time>
+        </article >
+    }
+}