add comments and delete them WIP b00tc4mp#167

staff/anna-gonzalez/unsocial/src/App.jsx

@@ -20,7 +20,9 @@ export default class extends Component {
     console.log('App -> render')
 
     return <>
-      <Header view={this.state.view} onHomeClick={() => this.setState({ view: 'home' })} onLoggedOut={() => this.setState({ view: 'login' })} />
+      <Header view={this.state.view}
+        onHomeClick={() => this.setState({ view: 'home' })}
+        onLoggedOut={() => this.setState({ view: 'login' })} />
       {this.state.view === 'login' && <Login
         onLoggedIn={() => this.setState({ view: "home" })}
         onRegisterClick={() => this.setState({ view: "register" })}

staff/anna-gonzalez/unsocial/src/components/functional/AddComment.jsx

@@ -0,0 +1,36 @@
+import { Label, Button, Form, Field } from '../library'
+
+import logic from '../../logic'
+
+export default ({ postId, onAdded }) => {
+    console.log('AddComment -> render')
+
+    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>
+            <Label htmlFor="text">New comment</Label>
+            <textarea id="text"></textarea>
+        </Field>
+
+        <Button type="submit">Send</Button>
+    </Form>
+}

staff/anna-gonzalez/unsocial/src/components/functional/Comment.jsx

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

staff/anna-gonzalez/unsocial/src/components/functional/Comments.jsx

@@ -1,30 +1,75 @@
-export default () => <section>
-    <ul>
-        <li>
-            <h4>username</h4>
-            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam in maxime id, expedita quaerat, corporis dolorum earum vero culpa omnis officia ducimus ipsum ipsam sequi praesentium dolores dolor. Ipsam, possimus.</p>
-            <time>4 days</time>
-        </li>
-
-        <li>
-            <h4>username</h4>
-            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam in maxime id, expedita quaerat, corporis dolorum earum vero culpa omnis officia ducimus ipsum ipsam sequi praesentium dolores dolor. Ipsam, possimus.</p>
-            <time>4 days</time>
-        </li>
-
-        <li>
-            <h4>username</h4>
-            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam in maxime id, expedita quaerat, corporis dolorum earum vero culpa omnis officia ducimus ipsum ipsam sequi praesentium dolores dolor. Ipsam, possimus.</p>
-            <time>4 days</time>
-        </li>
-
-        <form onSubmit={event => {
-            event.preventDefault()
-        }}>
-            <label htmlFor="text">New comment</label>
-            <textarea id="text"></textarea>
-
-            <button type="submit">Send</button>
-        </form>
-    </ul>
-</section>
+import { Component } from 'react'
+
+import Comment from './Comment'
+import AddComment from './AddComment'
+
+import logic from '../../logic'
+
+export default class extends Component {
+    constructor(props) {
+        console.log('Comments -> constructor')
+
+        super(props)
+
+        let comments
+
+        try {
+            comments = logic.getComments(props.postId)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+
+        this.state = { comments }
+    }
+
+    onAdded = () => {
+        try {
+            const comments = logic.getComments(this.props.postId)
+
+            this.setState({ comments })
+
+            this.props.onAdded()
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    }
+
+    onRemoved = () => {
+        try {
+            const comments = logic.getComments(this.props.postId)
+
+            this.setState({ comments })
+
+            this.props.onRemoved()
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    }
+
+    render() {
+        console.log('Comments -> render')
+
+        return <section>
+            <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/anna-gonzalez/unsocial/src/components/functional/Footer.jsx

@@ -3,6 +3,8 @@ import './Footer.css'
 import Button from '../library/Button'
 
 export default ({ onNewPostClick, view }) => {
+    console.log('Footer -> render')
+
     return <footer className={"Footer " + (view !== 'home' ? 'Footer--transparent' : '')}>
         {view === 'home' && <Button className="footer-button" type="button" onClick={onNewPostClick}>+</Button>}
     </footer>

staff/anna-gonzalez/unsocial/src/components/functional/Header.jsx

@@ -4,7 +4,7 @@ import logic from '../../logic'
 
 import './Header.css'
 
-export default ({ view, onHomeClick, onLoggedOut, className }) => {
+export default ({ view, onHomeClick, onLoggedOut, className }) => { //props destructure
     let name
 
     if (logic.isUserLoggedIn())
@@ -16,24 +16,28 @@ export default ({ view, onHomeClick, onLoggedOut, className }) => {
             console.error(error)
         }
 
-    return <header className={
-        "Header " + (view !== 'home' && view !== 'new-post' ? 'Header--transparent' : '')
-    }>
-        <h1>{view === 'new-post' ? <Anchor className="header-anchor" href="" onClick={event => {
-            event.preventDefault()
+    const handleHomeClick = event => {
+        event.preventDefault()
 
-            onHomeClick()
-        }}>UNSOCIAL</Anchor> : 'UNSOCIAL'}</h1>
+        onHomeClick()
+    }
+
+    const handleLogout = () => {
+        if (confirm('Logout?')) {
+            logic.logoutUser()
+
+            onLoggedOut()
+        }
+    }
+
+    return <header className={"Header " + (view !== 'home' && view !== 'new-post' ? className = 'Header--transparent' : '')}>
+        <h1>{view === 'new-post' ? <Anchor className="header-anchor" href=""
+            onClick={handleHomeClick}>UNSOCIAL</Anchor> : 'UNSOCIAL'}</h1>
 
         {logic.isUserLoggedIn() && <h3>{name}</h3>}
 
-        {
-            logic.isUserLoggedIn() && <Button className="header-button" type="button" onClick={() => {
-                if (confirm('Are you sure to logout?')) {
-                    logic.logoutUser()
-                    onLoggedOut()
-                }
-            }}>Logout</Button>
+        {logic.isUserLoggedIn() && <Button className="header-button" type="button"
+            onClick={handleLogout}>Logout</Button>
         }
     </header >
 }

staff/anna-gonzalez/unsocial/src/components/functional/PostItem.css → staff/anna-gonzalez/unsocial/src/components/functional/Post.css

@@ -1,11 +1,9 @@
-.PostItem {
-    width: 80%;
+.Post {
+    width: 20rem;
     display: flex;
     flex-direction: column;
     border: 2px #2A31FF solid;
     border-radius: 15px;
-    padding: 0;
-    color: black;
     margin-bottom: 2rem;
 
     h4 {
@@ -17,7 +15,14 @@
     time {
         padding-left: 1rem;
         padding-right: 0.75rem;
+        margin-bottom: 0.1rem;
+    }
+
+    time {
+        font-size: x-small;
+        margin-top: 0;
         margin-bottom: 1rem;
+        color: gray;
     }
 
     img {
@@ -61,20 +66,23 @@
         flex-direction: column;
         gap: 5px;
         border: none;
+        border-radius: 0px;
         outline: none;
-        padding-left: 1rem;
-        padding-right: 1rem;
+        margin: 0;
+        background-color: rgb(226, 226, 226);
 
         textarea {
             border: 1px solid black;
             border-radius: 10px;
+            width: 18rem;
         }
 
         button {
             background-color: black;
             color: white;
             border-style: none;
             margin-bottom: 1rem;
+            width: 7rem;
         }
     }
 }