add date logic and comments to unsocial b00tc4mp#177

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

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

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

@@ -0,0 +1,23 @@
+import { Button, Form, Label } from '../library'
+
+export default () =>
+    <section>
+        <ul>
+            <li>
+                <h4>juanpablo</h4>
+                <p>Lovely!</p>
+                <time>1 day ago</time>
+            </li>
+            <li>
+                <h4>pepito</h4>
+                <p>Nice pic!</p>
+                <time>2 days ago</time>
+            </li>
+        </ul>
+        <Form>
+            <Label htmlFor="text">New comment</Label>
+            <textarea id="text"></textarea>
+
+            <Button type="submit">Send</Button>
+        </Form>
+    </section>

staff/juanp-arias/unsocial/src/components/function/Footer.css

@@ -1,5 +1,5 @@
 .Footer {
-    height: 5%;
+    height: 2rem;
     background-color: rgba(255, 255, 255, 0.449);
     box-sizing: border-box;
     position: fixed;
@@ -8,4 +8,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    button{
+        font-size: x-large;
+    }
 }

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

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

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

@@ -4,7 +4,7 @@ import logic from '../../logic'
 
 import './Header.css'
 
-function Header({ view, onHomeClick, onLoggedOut }) {
+export default ({ view, onHomeClick, onLoggedOut }) => {
     let name
 
     if (logic.isUserLoggedIn())
@@ -33,4 +33,3 @@ function Header({ view, onHomeClick, onLoggedOut }) {
     </header>
 }
 
-export default Header

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

@@ -1,25 +1,51 @@
+import './PostItem.css'
 import { Button } from '../library'
 
 import logic from '../../logic'
+import dateAgo from '../../utilities/dateAgo'
+import Comments from './Comments'
 
-import './PostItem.css'
+import { Component } from 'react'
+
+export default class extends Component {
+    constructor(props) {
+        super(props)
+        this.state = { view: null }
+    }
+
+    render() {
+
+        const { item: { id, author, image, text, date, liked, likes }, onLikeClicked, onDeleted } = this.props
+        return <article className="PostItem">
+            <h4>{author.username}</h4>
+
+            <img src={image} />
+
+            <p>{text}</p>
+
+            <time>{dateAgo(date)}ago</time>
 
-function PostItem({ item: { id, author, image, text, date, liked, likes }, onLikeClicked }) {
-    return <article className="PostItem">
-        <h4>{author.username}</h4>
+            <Button onClick={() => {
+                logic.toggleLikePosts(id)
 
-        <img src={image} />
+                onLikeClicked()
+            }}>{`${liked ? '❤️' : '🤍'} ${likes.length} likes`}</Button>
 
-        <p>{text}</p>
+            {author.id === logic.getUserId() &&
+                <Button onClick={() => {
+                    if (confirm('Delete post?')) {
+                        logic.deletePost(id)
 
-        <time>{date}</time>
+                        onDeleted()
+                    }
+                }}>Delete</Button>}
 
-        <Button onClick={() => {
-            logic.toggleLikePosts(id)
+            <Button onClick={() => {
+                this.setState({ view: this.state.view ? null : 'comments' })
+            }}>Comment</Button>
 
-            onLikeClicked()
-        }}>{`${liked ? '❤️' : '🤍'} ${likes.length} likes`}</Button>
-    </article>
+            {this.state.view === 'comments' && <Comments />}
+        </article>
+    }
 }
 
-export default PostItem

staff/juanp-arias/unsocial/src/components/function/PostList.jsx

@@ -4,7 +4,7 @@ import PostItem from './PostItem'
 import './PostList.css'
 import getPosts from '../../logic/getPosts'
 
-class PostList extends Component {
+export default class extends Component {
     constructor(props) {
 
         super(props)
@@ -24,21 +24,33 @@ class PostList extends Component {
 
     render() {
         return <div className='PostList'>
-            <h2>POSTS</h2>
 
-            {this.state.posts.map(post => <PostItem item={post} onLikeClicked={() => {
-                try {
-                    const posts = getPosts()
+            {this.state.posts.map(post => <PostItem item={post}
 
-                    this.setState({ posts })
-                } catch (error) {
-                    alert(error.message)
+                onLikeClicked={() => {
+                    try {
+                        const posts = getPosts()
 
-                    console.error(error)
-                }
-            }} />)}
+                        this.setState({ posts })
+                    } catch (error) {
+                        alert(error.message)
+
+                        console.error(error)
+                    }
+                }}
+                onDeleted={() => {
+                    try {
+                        const posts = getPosts()
+
+                        this.setState({ posts })
+                    } catch (error) {
+                        alert(error.message)
+
+                        console.error(error)
+                    }
+                }}
+            />)}
         </div>
     }
 }
-
-export default PostList
+//Estas funciones lo que hacen es repintar, la de delete lo que hace es traer de nuevo los posts al home.

staff/juanp-arias/unsocial/src/components/function/index.js

@@ -2,10 +2,12 @@ import Header from './Header'
 import Footer from './Footer'
 import PostList from './PostList'
 import PostItem from './PostItem'
+import Comments from './Comments'
 
 export {
     Header,
     Footer,
     PostList,
-    PostItem
+    PostItem,
+    Comments
 }

staff/juanp-arias/unsocial/src/components/library/Button.css

@@ -0,0 +1,3 @@
+.Button {
+    border-radius: 0.5rem;
+}

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

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

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

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

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

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

staff/juanp-arias/unsocial/src/components/library/Input.css

@@ -0,0 +1,5 @@
+.Input {
+    border-radius: 0.2rem;
+    width: 13rem;
+    background-color: white;
+}

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

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

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

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

staff/juanp-arias/unsocial/src/components/library/PasswordInput.css

@@ -0,0 +1,3 @@
+.emoji{
+    margin-right: 4.4rem;
+}

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

@@ -1,7 +1,7 @@
 import { Component } from 'react'
 import './PasswordInput.css'
 
-class PasswordInput extends Component {
+export default class extends Component {
     constructor(props) {
         console.log('PasswordInput -> constructor') // chivato para ver como construye la password input
 
@@ -11,7 +11,7 @@ class PasswordInput extends Component {
     render() {
 
         return <div>
-            <input type={this.state.type} id={this.props.id} />
+            <input className='Input' type={this.state.type} id={this.props.id} />
             <span className="emoji"
                 style={{ cursor: 'pointer', position: 'absolute', right: '10px' }}
                 onClick={() => this.setState({
@@ -22,4 +22,3 @@ class PasswordInput extends Component {
         </div>
     }
 }
-export default PasswordInput

staff/juanp-arias/unsocial/src/data/uuid.js

@@ -1,3 +1,2 @@
-const uuid = () => (Date.now() + Math.random()).toString(36).replace('.', '')
+export default () => (Date.now() + Math.random()).toString(36).replace('.', '')
 
-export default uuid

staff/juanp-arias/unsocial/src/logic/createPostLogic.js

@@ -1,6 +1,6 @@
 import uuid from '../data/uuid'
 
-const createPostLogic = (image, text) => {
+export default (image, text) => {
     if (typeof image !== 'string') throw new Error('invalid image')
     if (typeof text !== 'string') throw new Error('invalid text')
 
@@ -19,5 +19,5 @@ const createPostLogic = (image, text) => {
 
     localStorage.posts = JSON.stringify(posts)
 }
-export default createPostLogic
+
 

staff/juanp-arias/unsocial/src/logic/deletePost.js

@@ -0,0 +1,13 @@
+export default postId => {
+    const posts = JSON.parse(localStorage.posts)
+
+    const index = posts.findIndex(({ id }) => id === postId)
+
+
+    if (index < 0) throw new Error('post not found')
+
+    posts.splice(index, 1)
+
+    localStorage.posts = JSON.stringify(posts)
+}
+//función deletePost para eliminar los posts que queremos, le estamos dando funcionalidad a el botón delete

staff/juanp-arias/unsocial/src/logic/getPosts.js

@@ -1,4 +1,4 @@
-const getPosts = () => {
+export default () => {
     const users = JSON.parse(localStorage.users)
     const posts = JSON.parse(localStorage.posts)
 
@@ -17,4 +17,3 @@ const getPosts = () => {
     return posts.toReversed()
 }
 
-export default getPosts

staff/juanp-arias/unsocial/src/logic/getUserId.js

@@ -0,0 +1 @@
+export default () => sessionStorage.userId

staff/juanp-arias/unsocial/src/logic/getUserName.js

@@ -1,10 +1,10 @@
-const getUserName = () => {
+export default () => {
     const users = JSON.parse(localStorage.users)
     const user = users.find(user => user.id === sessionStorage.userId)
 
     if (!user) throw new Error('user not found')
 
     return user.name
 }
-export default getUserName
+