add new function at the app, in react method fav y follow at header c…

…omponent b00tc4mp#79

staff/fabian-romero/react/ponies/app/logic/getAllFollowingUserPost.mjs → staff/fabian-romero/react/ponies/app/logic/getAllPoniesPosts.mjs

@@ -1,6 +1,6 @@
 import data from '../data/index.mjs'
 
-const getAllFollowingUserPosts = () => {
+const getAllPoniesPosts = () => {
     const user = data.findUser(user => user.username === sessionStorage.username)
 
     if (user === null)
@@ -20,4 +20,4 @@ const getAllFollowingUserPosts = () => {
     return posts.reverse()
 }
 
-export default getAllFollowingUserPosts
+export default getAllPoniesPosts

staff/fabian-romero/react/ponies/app/logic/index.mjs

@@ -11,7 +11,7 @@ import deletePost from './deletePost.mjs'
 import toggleFavPost from './toggleFavPost.mjs'
 import getAllFavPosts from './getAllFavPosts.mjs'
 import toggleFollowUser from './toggleFollowUser.mjs'
-import getAllFollowingUserPosts from './getAllFollowingUserPosts.mjs'
+import getAllPoniesPosts from './getAllPoniesPosts.mjs'
 
 const logic = {
     getAllPosts,
@@ -27,7 +27,7 @@ const logic = {
     toggleFavPost,
     getAllFavPosts,
     toggleFollowUser,
-    getAllFollowingUserPosts
+    getAllPoniesPosts
 }
 
 export default logic

staff/fabian-romero/react/ponies/app/view/home/component/FavsPostList.jsx

@@ -0,0 +1,118 @@
+import logic from '../../../logic/index.mjs'
+
+const { Component } = React
+
+import Post from './Post.jsx'
+
+class FavsPostList extends Component {
+    constructor() {
+        console.debug('FavsPostList -> constructor')
+
+        super()
+
+        try {
+            const posts = logic.getAllFavPosts()
+
+            this.state = { posts }
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    componentWillReceiveProps(newProps) {
+        console.debug('FavsPostList -> componentWillReceiveProps', newProps, this.props)
+
+        if (newProps.refreshStamp !== this.props.refreshStamp)
+            try {
+                const posts = logic.getAllFavPosts()
+
+                this.setState({ posts })
+            } catch (error) {
+                console.error(error)
+
+                alert(error.message)
+            }
+    }
+
+    handlePostDeleted() {
+        try {
+            const posts = logic.getAllFavPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handlePostEdited() {
+        try {
+            const posts = logic.getAllFavPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handlePostLiked() {
+        try {
+            const posts = logic.getAllFavPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handlePostFavorited() {
+        try {
+            const posts = logic.getAllFavPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handleFollowedUser() {
+        try {
+            const posts = logic.getAllFavPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    render() {
+        console.debug('FavsPostList -> render')
+
+        return <section className="post-list">
+            {this.state.posts.map(post => <Post
+                key={post.id}
+                post={post}
+                onPostDeleted={this.handlePostDeleted.bind(this)}
+                onPostEdited={this.handlePostEdited.bind(this)}
+                onPostLiked={this.handlePostLiked.bind(this)}
+                onPostFavToggled={this.handlePostFavorited.bind(this)}
+                onFollowedUser={this.handleFollowedUser.bind(this)}
+            />)}
+        </section>
+    }
+}
+
+export default FavsPostList
+
+// esta logica es la misma que PostList pero ahora en Fav.. llamando a la logica anterior del JS get all FAV post! en vez del get all post...

staff/fabian-romero/react/ponies/app/view/home/component/Header.jsx

@@ -19,6 +19,24 @@ class Header extends Component {
         }
     }
 
+    handleHomeClick() {
+        console.debug('Header -> handleHomeClick')
+
+        this.props.onHomeClick() // saber por qué??
+    }
+
+    handlePoniesClick() {
+        console.debug('Header -> handlePoniesClick')
+
+        this.props.onPoniesClick()
+    }
+
+    handleFavsClick() {
+        console.debug('Header -> handleFavsClick')
+
+        this.props.onFavsClick()
+    }
+
     handleLogout() {
         console.debug('Header -> handleLogout')
 
@@ -33,18 +51,18 @@ class Header extends Component {
         }
     }
 
-    // state.name = es aqui cuando me pinta el nombre del usuario
+
     render() {
         console.debug('Header -> render')
 
         return <header className="header">
             <p className="header__user-name">Hello, {this.state.name}✨! </p>
 
-            <button className="Button Button--active">🏚️</button>
+            <button className="Button Button--active" onClick={this.handleHomeClick.bind(this)}>🏚️</button>
 
-            <button className="Button">🦄</button>
+            <button className="Button" onClick={this.handlePoniesClick.bind(this)}>🦄</button>
 
-            <button className="Button" >🏳️‍🌈</button>
+            <button className="Button" onClick={this.handleFavsClick.bind(this)}>🏳️‍🌈</button>
 
             <button className="Button" onClick={this.handleLogout}>🚪</button>
         </header>

staff/fabian-romero/react/ponies/app/view/home/component/PoniesPostList.jsx

@@ -0,0 +1,124 @@
+import logic from '../../../logic/index.mjs'
+
+const { Component } = React
+
+import Post from './Post.jsx'
+
+class PoniesPostList extends Component {
+    constructor() {
+        console.debug('PoniesPostList -> contructor')
+
+        super()
+
+        try {
+            const posts = logic.getAllPoniesPosts() // caambiar por la logica que trae solo los ffollower ya no seria get all post si no el get all fav post que ahora los ponies es followCORRIEGIR
+
+            this.state = { posts } // inicializar los post lo llamamos, se contruye y luego en render lo pinta y me devulve todo el DOM
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    componentWillReceiveProps(newProps) {
+        console.debug('PoniesPostList -> componentWillReceiveProps', newProps, this.props) // esto es una funcuon que tengo que saber que hace ciclo de vida del componente
+        // react lo llama cuando detecta que cambia un prop 
+        //se puede implementar a demanda y me dice que voy a recibir nuevos props (newProps)
+        // new props
+
+        if (newProps.refreshStamp !== this.props.refreshStamp)
+            try {
+                const posts = logic.getAllPoniesPosts()
+
+                this.setState({ posts })
+            } catch (error) {
+                console.error(error)
+
+                alert(error.message)
+            }
+    }
+
+    handlePostDeleted() {// aqui llamo a la logica de deleted dentro del post list abajo
+        try {
+            const posts = logic.getAllPoniesPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handlePostEdited() { // aqui llamo a la logica de edited  dentro del post list abajo
+        try {
+            const posts = logic.getAllPoniesPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handlePostLikeToggled() {
+
+        try {
+            const posts = logic.getAllPoniesPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handlePostFavToggled() {
+
+        try {
+            const posts = logic.getAllPoniesPosts()
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    handleUserFollowToggled() { // este es el mismo nombre que tengo en el renders
+
+        try {
+            const posts = logic.getAllPoniesPosts() // esta logica es la misma de arriba
+
+            this.setState({ posts })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+
+
+    render() {
+        console.debug('PoniesPostList -> render')
+
+        return <section className="post-list">
+            {this.state.posts.map(post => <Post
+                key={post.id}
+                post={post}
+                onPostDeleted={this.handlePostDeleted.bind(this)}
+                onPostEdited={this.handlePostEdited.bind(this)}
+                onPostLikeToggled={this.handlePostLikeToggled.bind(this)}
+                onPostFavToggled={this.handlePostFavToggled.bind(this)}
+                onUserFollowToggled={this.handleUserFollowToggled.bind(this)}
+            />)}
+        </section>
+    }
+}
+
+export default PoniesPostList