implement hook b00tc4mp#167

staff/anna-gonzalez/unsocial/api/data/posts.json

@@ -1 +1 @@
-[{"id":"m34nya7bwg","image":"https://www.alltrails.com/_next/image?url=https%3A%2F%2Fimages.alltrails.com%2FeyJidWNrZXQiOiJhc3NldHMuYWxsdHJhaWxzLmNvbSIsImtleSI6InVwbG9hZHMvcGhvdG8vaW1hZ2UvNjM0MDYyOTUvOWU5NWZhNDcyNzc0YjcxMGJiNTI3NTVjZGZhZmVkZWIuanBnIiwiZWRpdHMiOnsidG9Gb3JtYXQiOiJ3ZWJwIiwicmVzaXplIjp7IndpZHRoIjoxMDgwLCJoZWlnaHQiOjcwMCwiZml0IjoiY292ZXIifSwicm90YXRlIjpudWxsLCJqcGVnIjp7InRyZWxsaXNRdWFudGlzYXRpb24iOnRydWUsIm92ZXJzaG9vdERlcmluZ2luZyI6dHJ1ZSwib3B0aW1pc2VTY2FucyI6dHJ1ZSwicXVhbnRpc2F0aW9uVGFibGUiOjN9fX0%3D&w=3840&q=90","text":"Yo he estado en ese lago","author":"m34apnqkwjc","date":"2024-11-05T16:27:32.519Z","likes":["m2w6ehc8bg"],"comments":[{"id":"m34nzupejfl","author":"m2w6ehc8bg","text":"De k vas flipao","date":"2024-11-05T16:28:45.746Z"}],"saves":[]},{"id":"m34nzmywn5f","image":"https://a1.elespanol.com/metropoliabierta/2022/03/12/el-pulso-de-la-ciudad/656694325_9262068_1706x960.jpg","text":"Yo vengo del barri","author":"m2w6ehc8bg","date":"2024-11-05T16:28:35.720Z","likes":[],"comments":[],"saves":[]}]
+[{"id":"m34nya7bwg","image":"https://www.alltrails.com/_next/image?url=https%3A%2F%2Fimages.alltrails.com%2FeyJidWNrZXQiOiJhc3NldHMuYWxsdHJhaWxzLmNvbSIsImtleSI6InVwbG9hZHMvcGhvdG8vaW1hZ2UvNjM0MDYyOTUvOWU5NWZhNDcyNzc0YjcxMGJiNTI3NTVjZGZhZmVkZWIuanBnIiwiZWRpdHMiOnsidG9Gb3JtYXQiOiJ3ZWJwIiwicmVzaXplIjp7IndpZHRoIjoxMDgwLCJoZWlnaHQiOjcwMCwiZml0IjoiY292ZXIifSwicm90YXRlIjpudWxsLCJqcGVnIjp7InRyZWxsaXNRdWFudGlzYXRpb24iOnRydWUsIm92ZXJzaG9vdERlcmluZ2luZyI6dHJ1ZSwib3B0aW1pc2VTY2FucyI6dHJ1ZSwicXVhbnRpc2F0aW9uVGFibGUiOjN9fX0%3D&w=3840&q=90","text":"Yo he estado en ese lago","author":"m34apnqkwjc","date":"2024-11-05T16:27:32.519Z","likes":["m2w6ehc8bg","m34apnqkwjc"],"comments":[{"id":"m34nzupejfl","author":"m2w6ehc8bg","text":"De k vas flipao","date":"2024-11-05T16:28:45.746Z"}],"saves":[]},{"id":"m34nzmywn5f","image":"https://a1.elespanol.com/metropoliabierta/2022/03/12/el-pulso-de-la-ciudad/656694325_9262068_1706x960.jpg","text":"Yo vengo del barri","author":"m2w6ehc8bg","date":"2024-11-05T16:28:35.720Z","likes":["m34apnqkwjc"],"comments":[],"saves":[]},{"id":"m35u1jifjz","image":"https://images.travelandleisureasia.com/wp-content/uploads/sites/3/2024/02/29031558/Bergen.jpg","text":"A winter in Norway","author":"m34apnqkwjc","date":"2024-11-06T12:05:48.423Z","likes":["m34apnqkwjc"],"comments":[{"id":"m35u1pbt0lu","author":"m34apnqkwjc","text":"Woooowwwww","date":"2024-11-06T12:05:55.961Z"}],"saves":["m34apnqkwjc"]}]

staff/anna-gonzalez/unsocial/api/data/users.json

@@ -1 +1 @@
-[{"id":"m2w6ehc8bg","name":"Pepito Grillo","email":"[email protected]","username":"pepitogrillo","password":"123123123"},{"id":"m2x9gwhcj9","name":"Pin Otto","email":"[email protected]","username":"pinotto","password":"123123123"},{"id":"m333adaqub","name":"Javi","email":"[email protected]","username":"javi","password":"123123123"},{"id":"m334sfuvens","name":"Aaron","email":"[email protected]","username":"aaron","password":"123123123"},{"id":"m33a9ffghob","name":"Pepita Grillo","email":"[email protected]","username":"pepitagrillo","password":"123123123"},{"id":"m34apnqkwjc","name":"Peter","email":"[email protected]","username":"peterpan","password":"123123123"}]
+[{"id":"m2w6ehc8bg","name":"Pepito Grillo","email":"[email protected]","username":"pepitogrillo","password":"123123123"},{"id":"m2x9gwhcj9","name":"Pin Otto","email":"[email protected]","username":"pinotto","password":"123123123"},{"id":"m333adaqub","name":"Javi","email":"[email protected]","username":"javi","password":"123123123"},{"id":"m334sfuvens","name":"Aaron","email":"[email protected]","username":"aaron","password":"123123123"},{"id":"m33a9ffghob","name":"Pepita Grillo","email":"[email protected]","username":"pepitagrillo","password":"123123123"},{"id":"m34apnqkwjc","name":"Peter","email":"[email protected]","username":"peterpan","password":"123123123"},{"id":"m360g4wlpds","name":"Aleix","email":"[email protected]","username":"aleix","password":"123123123"}]

staff/anna-gonzalez/unsocial/api/index.js

@@ -174,7 +174,7 @@ server.patch('/posts/:postId/likes', (req, res) => {
     try {
         logic.toggleLikePost(userId, postId)
 
-        res.status(200).send()
+        res.status(204).send()
     } catch (error) {
         res.status(400).json({ error: error.constructor.name, message: error.message })
 
@@ -190,7 +190,7 @@ server.patch('/posts/:postId/saves', (req, res) => {
     try {
         logic.toggleSavePost(userId, postId)
 
-        res.status(200).send()
+        res.status(204).send()
     } catch (error) {
         res.status(400).json({ error: error.constructor.name, message: error.message })
 

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

@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import { useState } from 'react'
 
 import { Login, Register, Posts, CreatePost } from './view'
 
@@ -7,47 +7,39 @@ import Footer from './components/functional/Footer'
 
 import logic from './logic'
 
-export default class extends Component {
-  constructor(props) {
-    console.log('App -> constructor')
+export default function App() {
+  const [view, setView] = useState(logic.isUserLoggedIn() ? 'posts' : 'login')
 
-    super(props)
-    //initial state:
-    this.state = { view: logic.isUserLoggedIn() ? 'posts' : 'login' }
-  }
+  const handlePostCreated = () => setView('posts')
 
-  handlePostCreated = () => this.setState({ view: 'posts' })
+  const handleUserLoggedOut = () => setView('login')
 
-  handleUserLoggedOut = () => this.setState({ view: 'login' })
+  const handleUserLoggedIn = () => setView('posts')
 
-  handleUserLoggedIn = () => this.setState({ view: 'posts' })
+  const handleRegisterClick = () => setView('register')
 
-  handleRegisterClick = () => this.setState({ view: 'register' })
+  const handleLoginClick = () => setView('login')
 
-  handleLoginClick = () => this.setState({ view: 'login' })
+  const handleUserRegistered = () => setView('login')
 
-  handleUserRegistered = () => this.setState({ view: 'login' })
+  const handleNewPostClick = () => setView('new-post')
 
-  handleNewPostClick = () => this.setState({ view: 'new-post' })
+  const handleHomeClick = () => setView('posts')
 
-  handleHomeClick = () => this.setState({ view: 'posts' })
 
-  render() {
-    console.log('App -> render')
+  console.log('App -> render')
 
-    return <>
-      <Header view={this.state.view} onHomeClick={this.handleHomeClick} onLoggedOut={this.handleUserLoggedOut} />
+  return <>
+    <Header view={view} onHomeClick={handleHomeClick} onLoggedOut={handleUserLoggedOut} />
 
-      {this.state.view === 'login' && <Login
-        onLoggedIn={this.handleUserLoggedIn} onRegisterClick={this.handleRegisterClick} />}
+    {view === 'login' && <Login onLoggedIn={handleUserLoggedIn} onRegisterClick={handleRegisterClick} />}
 
-      {this.state.view === 'register' && <Register onLoginClick={this.handleLoginClick} onRegistered={this.handleUserRegistered} />}
+    {view === 'register' && <Register onLoginClick={handleLoginClick} onRegistered={handleUserRegistered} />}
 
-      {this.state.view === 'posts' && <Posts />}
+    {view === 'posts' && <Posts />}
 
-      {this.state.view === 'new-post' && <CreatePost onCreated={this.handlePostCreated} />}
+    {view === 'new-post' && <CreatePost onCreated={handlePostCreated} />}
 
-      <Footer onNewPostClick={this.handleNewPostClick} view={this.state.view} />
-    </>
-  }
+    <Footer onNewPostClick={handleNewPostClick} view={view} />
+  </>
 }

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

@@ -2,7 +2,7 @@ import { Label, Button, Form, Field } from '../library'
 
 import logic from '../../logic'
 
-export default ({ postId, onAdded }) => {
+export default function AddComment({ postId, onAdded }) {
     console.log('AddComment -> render')
 
     const handleSubmit = event => {

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

@@ -1,22 +1,18 @@
-import { Component } from 'react'
+import { useState, useEffect } 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')
+export default function Comments(props) {
+    const [comments, setComments] = useState([])
 
-        super(props)
+    useEffect(() => {
+        console.log('Comments -> useEffect "componentDidMount')
 
-        this.state = { comments: [] }
-    }
-
-    componentDidMount() {
         try {
-            logic.getComments(this.props.postId, (error, comments) => {
+            logic.getComments(props.postId, (error, comments) => {
                 if (error) {
                     alert(error.message)
 
@@ -25,18 +21,18 @@ export default class extends Component {
                     return
                 }
 
-                this.setState({ comments })
+                setComments(comments)
             })
         } catch (error) {
             alert(error.message)
 
             console.error(error)
         }
-    }
+    }, [])
 
-    onAdded = () => {
+    const handleAdded = () => {
         try {
-            logic.getComments(this.props.postId, (error, comments) => {
+            logic.getComments(props.postId, (error, comments) => {
                 if (error) {
                     alert(error.message)
 
@@ -45,9 +41,9 @@ export default class extends Component {
                     return
                 }
 
-                this.setState({ comments })
+                setComments(comments)
 
-                this.props.onAdded()
+                props.onAdded()
             })
         } catch (error) {
             alert(error.message)
@@ -56,9 +52,9 @@ export default class extends Component {
         }
     }
 
-    onRemoved = () => {
+    const handleRemoved = () => {
         try {
-            logic.getComments(this.props.postId, (error, comments) => {
+            logic.getComments(props.postId, (error, comments) => {
                 if (error) {
                     alert(error.message)
 
@@ -67,36 +63,35 @@ export default class extends Component {
                     return
                 }
 
-                this.setState({ comments })
+                setComments(comments)
 
-                this.props.onRemoved()
+                props.onRemoved()
             })
+
         } catch (error) {
             alert(error.message)
 
             console.error(error)
         }
     }
 
-    render() {
-        console.log('Comments -> render')
-
-        return <section>
-            <ul>
-                {this.state.comments.map(comment =>
-                    <Comment
-                        key={comment.id}
-                        postId={this.props.postId}
-                        comment={comment}
-                        onRemoved={this.onRemoved}
-                    />)
-                }
-            </ul>
-
-            <AddComment
-                postId={this.props.postId}
-                onAdded={this.onAdded}
-            />
-        </section>
-    }
+    console.log('Comments -> render')
+
+    return <section>
+        <ul>
+            {comments.map(comment =>
+                <Comment
+                    key={comment.id}
+                    postId={props.postId}
+                    comment={comment}
+                    onRemoved={handleRemoved}
+                />)
+            }
+        </ul>
+
+        <AddComment
+            postId={props.postId}
+            onAdded={handleAdded}
+        />
+    </section >
 }

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

@@ -1,69 +1,62 @@
-import { Component } from 'react'
+import { useState, useEffect } from 'react'
 
 import { Button, Anchor } from '../library'
 
 import logic from '../../logic'
 
 import './Header.css'
 
-export default class extends Component {
-    constructor(props) {
-        console.log('Header -> constructor')
+export default function Header({ view, onHomeClick, onLoggedOut }) {
+    const [name, setName] = useState(null)
 
-        super(props)
+    useEffect(() => {
+        console.log('Header -> componentDidMount & componentWillReceiveProps')
 
-        this.state = { name: null }
-    }
-
-    componentDidMount() {
-        console.log('Header -> componentDidMount')
+        if (logic.isUserLoggedIn()) {
+            if (!name)
+                try {
+                    logic.getUserName((error, name) => {
+                        if (error) {
+                            alert(error.message)
 
-        if (logic.isUserLoggedIn())
-            try {
-                logic.getUserName((error, name) => {
-                    if (error) {
-                        alert(error.message)
+                            console.error(error)
 
-                        console.error(error)
+                            return
+                        }
 
-                        return
-                    }
+                        setName(name)
+                    })
+                } catch (error) {
+                    alert(error.message)
 
-                    this.setState({ name })
-                })
-            } catch (error) {
-                alert(error.message)
+                    console.error(error)
+                }
+        } else setName(null)
+    }, [view])
 
-                console.error(error)
-            }
-
-    }
-
-    handleHomeClick = event => {
+    const handleHomeClick = event => {
         event.preventDefault()
 
-        this.props.onHomeClick()
+        onHomeClick()
     }
 
-    handleLogout = () => {
+    const handleLogout = () => {
         if (confirm('Logout?')) {
             logic.logoutUser()
 
-            this.props.onLoggedOut()
+            onLoggedOut()
         }
     }
 
-    render() {
-        return <header className={`Header ${this.props.view !== 'posts' && this.props.view !== 'new-post' ? 'Header--transparent' : ''}`}>
+    return <header className={`Header ${view !== 'posts' && view !== 'new-post' ? 'Header--transparent' : ''}`}>
 
-            <h1>{this.props.view === 'new-post' ? <Anchor className="header-anchor" href=""
-                onClick={this.handleHomeClick}>UNSOCIAL</Anchor> : 'UNSOCIAL'}</h1>
+        <h1>{view === 'new-post' ? <Anchor className="header-anchor" href=""
+            onClick={handleHomeClick}>UNSOCIAL</Anchor> : 'UNSOCIAL'}</h1>
 
-            {this.state.name && <h3>{this.state.name}</h3>}
+        {logic.isUserLoggedIn() && <h3>{name}</h3>}
 
-            {logic.isUserLoggedIn() && <Button className="header-button" type="button"
-                onClick={this.handleLogout}>Logout</Button>
-            }
-        </header >
-    }
+        {logic.isUserLoggedIn() && <Button className="header-button" type="button"
+            onClick={handleLogout}>Logout</Button>
+        }
+    </header >
 }