add comment logic and functionaliity; move validations to validate b0…

…0tc4mp#173

staff/angelzrc/unsocial/src/App.jsx

@@ -2,39 +2,39 @@ import { Component } from 'react'
 
 import { Login, Register, Home, CreatePost } from './view'
 
-import { Header, Footer, PostList, PostItem } from './components/functional'
-import logic from './logic'
+import Header from './components/functional/Header'
+import Footer from './components/functional/Footer'
 
-class App extends Component {
-  constructor(props) {
-    console.log('App -> constructor')
+import logic from './logic'
 
-    super(props)
+export default class extends Component {
+    constructor(props) {
+        console.log('App -> constructor')
 
-    this.state = { view: logic.isUserLoggedIn() ? 'home' : 'login' }
-  }
+        super(props)
 
-  render() {
-    console.log('App -> render')
+        this.state = { view: logic.isUserLoggedIn() ? 'home' : 'login' }
+    }
 
-    return <>
-      <Header view={this.state.view} onHomeClick={() => this.setState({ view: 'home' })} onLoggedOut={() => this.setState({ view: 'login' })} />
+    render() {
+        console.log('App -> render')
 
-      {this.state.view === 'login' && <Login
-        onLoggedIn={() => this.setState({ view: 'home' })}
-        onRegisterClick={() => this.setState({ view: 'register' })}
-      />}
-      {this.state.view === 'register' && <Register
-        onLoginClick={() => this.setState({ view: 'login' })}
-        onRegistered={() => this.setState({ view: 'login' })}
-      />}
-      {this.state.view === 'home' && <Home />}
+        return <>
+            <Header view={this.state.view} onHomeClick={() => this.setState({ view: 'home' })} onLoggedOut={() => this.setState({ view: 'login' })} />
 
-      {this.state.view === 'new-post' && <CreatePost onCreated={() => this.setState({ view: 'home' })} />}
+            {this.state.view === 'login' && <Login
+                onLoggedIn={() => this.setState({ view: 'home' })}
+                onRegisterClick={() => this.setState({ view: 'register' })}
+            />}
+            {this.state.view === 'register' && <Register
+                onLoginClick={() => this.setState({ view: 'login' })}
+                onRegistered={() => this.setState({ view: 'login' })}
+            />}
+            {this.state.view === 'home' && <Home />}
 
-      <Footer onNewPostClick={() => this.setState({ view: 'new-post' })} view={this.state.view} />
-    </>
-  }
-}
+            {this.state.view === 'new-post' && <CreatePost onCreated={() => this.setState({ view: 'home' })} />}
 
-export default App
+            <Footer onNewPostClick={() => this.setState({ view: 'new-post' })} view={this.state.view} />
+        </>
+    }
+}

staff/angelzrc/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/angelzrc/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 onClick={handleRemove}>🗑️</Button>}
+    </li>
+}

staff/angelzrc/unsocial/src/components/functional/Comments.jsx

@@ -1,32 +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 o/* nSubmit= {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/angelzrc/unsocial/src/components/functional/Header.jsx

@@ -16,21 +16,25 @@ export default ({ view, onHomeClick, onLoggedOut }) => {
             console.error(error)
         }
 
-    return <header className="Header">
-        <h1>{view === 'new-post' ? <a href="" onClick={event => {
-            event.preventDefault()
+    const handleHomeClick = event => {
+        event.preventDefault()
 
-            onHomeClick()
-        }}>Unsocial</a> : 'Unsocial'}</h1>
+        onHomeClick()
+    }
 
-        {logic.isUserLoggedIn() && <h3>{name}</h3>}
+    const handleLogout = () => {
+        if (confirm('Logout?')) {
+            logic.logoutUser()
+
+            onLoggedOut()
+        }
+    }
 
-        {logic.isUserLoggedIn() && <Button type="button" onClick={() => {
-            if (confirm('Logout?')) {
-                logic.logoutUser()
+    return <header className="Header">
+        <h1>{view === 'new-post' ? <a href="" onClick={handleHomeClick}>Unsocial</a> : 'Unsocial'}</h1>
+
+        {logic.isUserLoggedIn() && <h3>{name}</h3>}
 
-                onLoggedOut()
-            }
-        }}>Logout</Button>}
+        {logic.isUserLoggedIn() && <Button type="button" onClick={handleLogout}>Logout</Button>}
     </header>
 }