add names to functions unsocial b00tc4mp#177

staff/juanp-arias/unsocial/api/data/posts.json

@@ -1 +1 @@
-[{"id":"m32t2w8d0yi","image":"https://media.giphy.com/media/3ohhwfAa9rbXaZe86c/giphy.gif?cid=790b7611vkbow49vtlhlh26tztuwge5f7tsvouu717wswm5m&ep=v1_gifs_trending&rid=giphy.gif&ct=g","text":"dancing","author":"m2x63gb7wns","date":"2024-11-04T09:15:33.422Z","likes":["m2x3s1fei2j"],"comments":[{"id":"m334yw6e0bp","author":"m2x3s1fei2j","text":"yeaaaah!","date":"2024-11-04T14:48:22.118Z"}]},{"id":"m34qfoc79f","image":"https://media.giphy.com/media/3o6fJ2J2Ct3zcv1u7K/giphy.gif?cid=82a1493bo701yn1qku7idmqtxj64051wwvcjjciv9xfpkjdo&ep=v1_gifs_trending&rid=giphy.gif&ct=g","text":"what?","author":"m2x3s1fei2j","date":"2024-11-05T17:37:03.223Z","likes":["m2x3s1fei2j"],"comments":[]},{"id":"m34rvj64rue","image":"https://media.giphy.com/media/MuztdWJQ4PR7i/giphy.gif?cid=82a1493bk9c1o75hwpz97wxjt4xrlr382ihmekfn278tae9c&ep=v1_gifs_trending&rid=giphy.gif&ct=g","text":"showertime","author":"m2x63gb7wns","date":"2024-11-05T18:17:22.637Z","likes":[],"comments":[]}]
+[{"id":"m32t2w8d0yi","image":"https://media.giphy.com/media/3ohhwfAa9rbXaZe86c/giphy.gif?cid=790b7611vkbow49vtlhlh26tztuwge5f7tsvouu717wswm5m&ep=v1_gifs_trending&rid=giphy.gif&ct=g","text":"dancing","author":"m2x63gb7wns","date":"2024-11-04T09:15:33.422Z","likes":["m2x3s1fei2j","m2x63gb7wns"],"comments":[{"id":"m334yw6e0bp","author":"m2x3s1fei2j","text":"yeaaaah!","date":"2024-11-04T14:48:22.118Z"}]},{"id":"m34qfoc79f","image":"https://media.giphy.com/media/3o6fJ2J2Ct3zcv1u7K/giphy.gif?cid=82a1493bo701yn1qku7idmqtxj64051wwvcjjciv9xfpkjdo&ep=v1_gifs_trending&rid=giphy.gif&ct=g","text":"what?","author":"m2x3s1fei2j","date":"2024-11-05T17:37:03.223Z","likes":["m2x3s1fei2j","m2x63gb7wns"],"comments":[{"id":"m35zmkr2rsh","author":"m2x3s1fei2j","text":"holaaaa\n","date":"2024-11-06T14:42:07.887Z"}]},{"id":"m34rvj64rue","image":"https://media.giphy.com/media/MuztdWJQ4PR7i/giphy.gif?cid=82a1493bk9c1o75hwpz97wxjt4xrlr382ihmekfn278tae9c&ep=v1_gifs_trending&rid=giphy.gif&ct=g","text":"showertime","author":"m2x63gb7wns","date":"2024-11-05T18:17:22.637Z","likes":["m2x3s1fei2j"],"comments":[{"id":"m35neztvyc7","author":"m2x3s1fei2j","text":"🥰🥰","date":"2024-11-06T09:00:18.788Z"}]}]

staff/juanp-arias/unsocial/app/src/App.jsx

@@ -7,7 +7,7 @@ import Footer from './components/function/Footer'
 
 import logic from './logic'
 
-export default class extends Component {
+export default class App extends Component {
     constructor(props) {
         super(props)
 

staff/juanp-arias/unsocial/app/src/components/function/AddComments.css

@@ -0,0 +1,3 @@
+.Form {
+    display: inline-flex;
+}

staff/juanp-arias/unsocial/app/src/components/function/AddComments.jsx

@@ -1,8 +1,8 @@
 import { Button, Form, Label } from '../library'
 import logic from '../../logic'
+import './AddComments.css'
 
-
-export default ({ postId, onAdded }) => {
+export default function AddComments({ postId, onAdded }) {
     const handleSubmit = event => {
         event.preventDefault()
 

staff/juanp-arias/unsocial/app/src/components/function/Comment.jsx

@@ -1,10 +1,10 @@
 import { Button } from '../library'
-
+import './Comment.css'
 import logic from '../../logic'
 
 import dateAgo from '../../utilities/dateAgo'
 
-export default ({ postId, comment: { id, author, text, date }, onRemoved }) => {
+export default function Comment({ postId, comment: { id, author, text, date }, onRemoved }) {
 
     const handleRemove = () => {
         if (confirm('Delete comment?'))
@@ -30,7 +30,7 @@ export default ({ postId, comment: { id, author, text, date }, onRemoved }) => {
 
         <p>{text}</p>
 
-        <time>{dateAgo(date)}</time>
+        <time>{dateAgo(date)} ago...</time>
 
         {logic.getUserId() === author.id && <Button onClick={handleRemove}>🗑️</Button>}
     </section>

staff/juanp-arias/unsocial/app/src/components/function/Comments.css

@@ -0,0 +1,3 @@
+.comments {
+    display: block;
+}

staff/juanp-arias/unsocial/app/src/components/function/Comments.jsx

@@ -1,11 +1,11 @@
 import { Component } from 'react'
-
+import './Comments.css'
 import AddComments from './AddComments'
 import Comment from './Comment'
 
 import logic from '../../logic'
 
-export default class extends Component {
+export default class Comments extends Component {
     constructor(props) {
         super(props)
 
@@ -71,7 +71,7 @@ export default class extends Component {
 
     render() {
         return <section>
-            <ul>
+            <ul className='comments'>
                 {this.state.comments.map(comment =>
                     <Comment
                         key={comment.id}

staff/juanp-arias/unsocial/app/src/components/function/Footer.jsx

@@ -2,7 +2,7 @@ import './Footer.css'
 
 import Button from '../library/Button'
 
-export default ({ onNewPostClick, view }) => {
+export default function Footer({ onNewPostClick, view }) {
     return <footer className="Footer">
         {view === 'posts' && <Button type="button" onClick={onNewPostClick}>+</Button>}
     </footer>

staff/juanp-arias/unsocial/app/src/components/function/Header.jsx

@@ -3,7 +3,7 @@ import logic from '../../logic'
 import './Header.css'
 import { Component } from 'react'
 
-export default class extends Component {
+export default class Header extends Component {
     constructor(props) {
         super(props)
         this.state = { name: null }
@@ -28,6 +28,30 @@ export default class extends Component {
             }
     }
 
+    componentWillReceiveProps(nextProps) {
+        if (this.props.view !== nextProps.view)
+            if (logic.isUserLoggedIn())
+                if (!this.state.name) {
+                    try {
+                        logic.getUserName((error, name) => {
+                            if (error) {
+                                alert(error.message)
+
+                                console.error(error)
+
+                                return
+                            }
+
+                            this.setState({ name })
+                        })
+                    } catch (error) {
+                        alert(error.message)
+                        console.error(error)
+                    }
+                } else this.setState({ name: null })
+    }
+
+
     handleHomeClick = event => {
         event.preventDefault()
 

staff/juanp-arias/unsocial/app/src/components/function/PostItem.css

@@ -40,4 +40,19 @@
         text-align: end;
     }
 
-}
+    .headerpost {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .buttondelete {
+            background-color: whitesmoke;
+            text-align: center;
+            border: 0px;
+            width: 2rem;
+            font-size: 0.7rem;
+        }
+    }
+
+
+}

staff/juanp-arias/unsocial/app/src/components/function/PostItem.jsx

@@ -7,7 +7,7 @@ import dateAgo from '../../utilities/dateAgo'
 
 import { Component } from 'react'
 
-export default class extends Component {
+export default class PostItem extends Component {
     constructor(props) {
         super(props)
         this.state = { view: null }
@@ -60,8 +60,10 @@ export default class extends Component {
 
         const { props: { post: { id, author, image, text, date, liked, likes, comments }, onCommentAdded, onCommentRemoved } } = this
         return <article className="PostItem">
-            <h4>{author.username}</h4>
-
+            <div className='headerpost'>
+                <h4>{author.username}</h4>
+                {author.id === logic.getUserId() && <button className="buttondelete" onClick={this.handleDeleteClick}>❌</button>}
+            </div>
             <img src={image} />
 
             <p>{text}</p>
@@ -71,7 +73,6 @@ export default class extends Component {
 
                 <Button className="ButtonPost" onClick={this.handleCommentsClick}>🗨️{comments}</Button>
 
-                {author.id === logic.getUserId() && <Button onClick={this.handleDeleteClick}>🗑️</Button>}
             </div>
             {this.state.view === 'comments' && <Comments
                 postId={id}

staff/juanp-arias/unsocial/app/src/components/library/Button.jsx

@@ -1,5 +1,5 @@
 import './Button.css'
 
-export default ({ type, children, onClick }) =>
-    <button type={type} className="Button" onClick={onClick}>{children}</button>
-
+export default function Button({ type, children, onClick }) {
+    return <button type={type} className="Button" onClick={onClick}>{children}</button>
+}

staff/juanp-arias/unsocial/app/src/components/library/Field.jsx

@@ -1,5 +1,5 @@
 import './Field.css'
 
-export default ({ children }) =>
-    <div className="Field">{children}</div>
-
+export default function Field({ children }) {
+    return <div className="Field">{children}</div>
+}

staff/juanp-arias/unsocial/app/src/components/library/Form.jsx

@@ -1,6 +1,6 @@
 import './Form.css'
 
-export default ({ children, onSubmit }) =>
-    <form className="Form" onSubmit={onSubmit}>{children}</form>
-
+export default function Form({ children, onSubmit }) {
+    return <form className="Form" onSubmit={onSubmit}>{children}</form>
+}
 

staff/juanp-arias/unsocial/app/src/components/library/Input.jsx

@@ -1,5 +1,5 @@
 import './Input.css'
 
-export default ({ type, id, placeholder }) =>
-    <input type={type} id={id} placeholder={placeholder} className="Input" />
-
+export default function Input({ type, id, placeholder }) {
+    return <input type={type} id={id} placeholder={placeholder} className="Input" />
+}

staff/juanp-arias/unsocial/app/src/components/library/Label.jsx

@@ -1,6 +1,6 @@
 import './Label.css'
 
-export default ({ htmlfor, children }) =>
-     <label hmtlfor={htmlfor} className="Label">{children}</label>
-
+export default function Label({ htmlfor, children }) {
+     return <label hmtlfor={htmlfor} className="Label">{children}</label>
+}
 

staff/juanp-arias/unsocial/app/src/components/library/PasswordInput.jsx

@@ -1,7 +1,7 @@
 import { Component } from 'react'
 import './PasswordInput.css'
 
-export default class extends Component {
+export default class PasswordInput extends Component {
     constructor(props) {
 
         super(props) // es igual que this.props = props

staff/juanp-arias/unsocial/app/src/logic/addComments.js

@@ -16,7 +16,7 @@ export default (postId, text, callback) => {
         }
 
         const { error, message } = JSON.parse(response)
-        callbaxck(new Error(message))
+        callback(new Error(message))
     })
 
     xhr.open('POST', `http://localhost:7070/posts/${postId}/comments`)

staff/juanp-arias/unsocial/app/src/view/CreatePost.css

@@ -7,20 +7,22 @@
     flex-direction: column;
     align-items: center;
     margin-top: 30%;
-    justify-content: center ;
+    justify-content: center;
     margin-left: 4rem;
     margin-right: 4rem;
     height: auto;
 
     h4 {
         margin-top: 1rem;
     }
-    Input{
+
+    Input {
         height: 2rem;
         width: 96%;
         background-color: #c694003b;
     }
-    Button{
+
+    Button {
 
         align-self: center;
         background-color: rgb(191, 191, 191);
@@ -29,5 +31,10 @@
         margin-top: 1.50rem;
         box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, .5);
     }
-
+
+    Form {
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+    }
 }

staff/juanp-arias/unsocial/app/src/view/CreatePost.jsx

@@ -3,7 +3,7 @@ import logic from '../logic'
 import { Label, Input, Button, Form, Field } from '../components/library'
 import './CreatePost.css'
 
-export default ({ onCreated }) => {
+export default function CreatePost({ onCreated }) {
 
     const handleSubmit = event => {
         event.preventDefault()

staff/juanp-arias/unsocial/app/src/view/Login.css

@@ -6,26 +6,33 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 30%;
-    justify-content: center ;
+    margin-top: 15%;
+    justify-content: center;
     margin-left: 4rem;
     margin-right: 4rem;
     height: auto;
 
     h4 {
         margin-top: 1rem;
     }
-    Input{
+
+    Input {
         height: 2rem;
         background-color: #c694003b;
     }
-    Button{
 
+    Button {
         align-self: center;
         background-color: rgb(191, 191, 191);
         height: 2rem;
         width: 100%;
         margin-top: 1.50rem;
         box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, .5);
     }
+
+    Form {
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+    }
 }

staff/juanp-arias/unsocial/app/src/view/Login.jsx

@@ -3,7 +3,7 @@ import { PasswordInput, Input, Button, Form, Label } from '../components/library
 import logic from '../logic'
 
 
-export default (props) => {
+export default function Login(props) {
 
     const handleSubmit = event => {
         event.preventDefault()

staff/juanp-arias/unsocial/app/src/view/PostList.jsx

@@ -4,7 +4,7 @@ import PostItem from '../components/function/PostItem'
 import './PostList.css'
 import logic from '../logic'
 
-export default class extends Component {
+export default class PostList extends Component {
 
     constructor(props) {
         super(props)

staff/juanp-arias/unsocial/app/src/view/Register.css

@@ -7,24 +7,32 @@
     flex-direction: column;
     align-items: center;
     margin-top: 20%;
-    justify-content: center ;
+    justify-content: center;
     margin-left: 4rem;
     margin-right: 4rem;
     height: auto;
 
     h4 {
         margin-top: 1rem;
     }
-    Input{
+
+    Input {
         height: 2rem;
         background-color: #c694003b;
     }
-    Button{
+
+    Button {
         align-self: center;
         background-color: rgb(191, 191, 191);
         height: 2rem;
         width: 100%;
         margin-top: 1.50rem;
         box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, .5);
     }
-} 
+
+    Form {
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+    }
+}