From 5fbddd5b7160e3d39cfee87e9afe40d5c9ab2a5a Mon Sep 17 00:00:00 2001
From: unknown <Mateo Gómez-Lucía>
Date: Wed, 12 Jun 2024 09:57:22 +0200
Subject: [PATCH] add heading and image core components; update title and view
 compos; add user name retrieval and rendering in home; add post list compo in
 home with posts retrieval and redering; #149

---
 .../app/src/components/core/Heading.jsx       |  8 +++
 .../app/src/components/core/Image.jsx         |  7 +++
 .../app/src/components/core/Title.jsx         |  5 +-
 .../app/src/components/library/View.css       |  2 +-
 .../app/src/components/library/View.jsx       |  4 +-
 staff/mateo-gomez/socialcode/app/src/main.jsx |  6 +-
 .../socialcode/app/src/views/Home.jsx         | 30 ++++++++-
 .../app/src/views/components/Post.css         |  8 +++
 .../app/src/views/components/PostList.css     |  8 +++
 .../app/src/views/components/PostList.jsx     | 61 +++++++++++++++++++
 10 files changed, 130 insertions(+), 9 deletions(-)
 create mode 100644 staff/mateo-gomez/socialcode/app/src/components/core/Heading.jsx
 create mode 100644 staff/mateo-gomez/socialcode/app/src/components/core/Image.jsx
 create mode 100644 staff/mateo-gomez/socialcode/app/src/views/components/Post.css
 create mode 100644 staff/mateo-gomez/socialcode/app/src/views/components/PostList.css
 create mode 100644 staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx

diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Heading.jsx b/staff/mateo-gomez/socialcode/app/src/components/core/Heading.jsx
new file mode 100644
index 000000000..f72ee1c95
--- /dev/null
+++ b/staff/mateo-gomez/socialcode/app/src/components/core/Heading.jsx
@@ -0,0 +1,8 @@
+function Heading({ level, className, children }) {
+    const Tag = `h${level}`
+
+    return <Tag className={` ${className ? className : ''}`}>{children}</Tag>
+
+}
+
+export default Heading
\ No newline at end of file
diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Image.jsx b/staff/mateo-gomez/socialcode/app/src/components/core/Image.jsx
new file mode 100644
index 000000000..e21b748b7
--- /dev/null
+++ b/staff/mateo-gomez/socialcode/app/src/components/core/Image.jsx
@@ -0,0 +1,7 @@
+import './Image.css'
+
+function Image({ src, className }) {
+    return <img className={`Image ${className ? className : ''}`} src={src} />
+}
+
+export default Image
\ No newline at end of file
diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Title.jsx b/staff/mateo-gomez/socialcode/app/src/components/core/Title.jsx
index d1e2afe42..188369f33 100644
--- a/staff/mateo-gomez/socialcode/app/src/components/core/Title.jsx
+++ b/staff/mateo-gomez/socialcode/app/src/components/core/Title.jsx
@@ -1,5 +1,8 @@
+import Heading from './Heading'
+
+
 function Title({ children }) {
-    return <h1>{children}</h1>
+    return <Heading level='1'>{children}</Heading>
 }
 
 export default Title
\ No newline at end of file
diff --git a/staff/mateo-gomez/socialcode/app/src/components/library/View.css b/staff/mateo-gomez/socialcode/app/src/components/library/View.css
index eca9f6374..724332225 100644
--- a/staff/mateo-gomez/socialcode/app/src/components/library/View.css
+++ b/staff/mateo-gomez/socialcode/app/src/components/library/View.css
@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 20rem;
+    padding: 1rem;
     background: linear-gradient(to bottom right, rgb(241, 178, 5), rgb(234, 205, 127));
 }
 
diff --git a/staff/mateo-gomez/socialcode/app/src/components/library/View.jsx b/staff/mateo-gomez/socialcode/app/src/components/library/View.jsx
index e3ec2d439..a52cd107f 100644
--- a/staff/mateo-gomez/socialcode/app/src/components/library/View.jsx
+++ b/staff/mateo-gomez/socialcode/app/src/components/library/View.jsx
@@ -1,7 +1,7 @@
 import './View.css'
 
-function View({ tag: Tag = 'div', children }) {
-    return <Tag className="View">{children}</Tag>
+function View({ tag: Tag = 'div', className, children }) {
+    return <Tag className={`View ${className ? className : ''}`}>{children}</Tag>
 }
 
 export default View
\ No newline at end of file
diff --git a/staff/mateo-gomez/socialcode/app/src/main.jsx b/staff/mateo-gomez/socialcode/app/src/main.jsx
index 54b39dd1d..12d81a005 100644
--- a/staff/mateo-gomez/socialcode/app/src/main.jsx
+++ b/staff/mateo-gomez/socialcode/app/src/main.jsx
@@ -4,7 +4,7 @@ import App from './App.jsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  //<React.StrictMode>
+  <App />
+  //</React.StrictMode>,
 )
diff --git a/staff/mateo-gomez/socialcode/app/src/views/Home.jsx b/staff/mateo-gomez/socialcode/app/src/views/Home.jsx
index e54c43b94..d9b717330 100644
--- a/staff/mateo-gomez/socialcode/app/src/views/Home.jsx
+++ b/staff/mateo-gomez/socialcode/app/src/views/Home.jsx
@@ -1,25 +1,51 @@
-
+import { useState, useEffect } from 'react'
 import Title from '../components/core/Title'
 import View from '../components/library/View'
 import Header from './components/Header'
 import Button from '../components/core/Button'
 import logic from '../logic'
+import Heading from '../components/core/Heading'
+import PostList from './components/PostList'
 
 function Home({ onUserLoggedOut }) {
     console.log('Home -> render')
 
+    const [name, setName] = useState('')
+
     const handleLogout = () => {
         logic.logoutUser()
 
         onUserLoggedOut()
     }
 
+    useEffect(() => {
+        try {
+            logic.getUserName((error, name) => {
+                if (error) {
+                    console.error(error)
+
+                    alert(error.message)
+
+                    return
+                }
+
+                setName(name)
+            })
+
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    })
+
     return <View>
         <Header>
+            <Heading level="3">{name}</Heading>
             <Button onClick={handleLogout}>Logout</Button>
         </Header>
         <View tag='main'>
-            <Title>Hello, Home!</Title>
+            <PostList />
         </View>
         <footer></footer>
 
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/Post.css b/staff/mateo-gomez/socialcode/app/src/views/components/Post.css
new file mode 100644
index 000000000..dfe1ba89e
--- /dev/null
+++ b/staff/mateo-gomez/socialcode/app/src/views/components/Post.css
@@ -0,0 +1,8 @@
+.Post {
+    width: 50rem;
+    height: auto;
+    background-color: aliceblue;
+    border: 1px solid orange;
+    margin: 2rem;
+    border-radius: 4%;
+}
\ No newline at end of file
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/PostList.css b/staff/mateo-gomez/socialcode/app/src/views/components/PostList.css
new file mode 100644
index 000000000..7b64b2203
--- /dev/null
+++ b/staff/mateo-gomez/socialcode/app/src/views/components/PostList.css
@@ -0,0 +1,8 @@
+.PostList {
+    position: center;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    box-sizing: border-box;
+    background-color: rgba(255, 191, 0, 0.792);
+}
\ No newline at end of file
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx
new file mode 100644
index 000000000..b77cd97af
--- /dev/null
+++ b/staff/mateo-gomez/socialcode/app/src/views/components/PostList.jsx
@@ -0,0 +1,61 @@
+import './PostList.css'
+import './Post.css'
+
+import Image from "../../components/core/Image"
+import Heading from '../../components/core/Heading'
+import View from "../../components/library/View"
+
+import logic from '../../logic'
+import { useEffect, useState } from 'react'
+
+function PostList() {
+    console.log('PostList -> render')
+
+    const [posts, setPosts] = useState([])
+
+    useEffect(() => {
+        console.log('PostList -> useEffect')
+
+        try {
+            logic.getAllPosts((error, posts) => {
+                if (error) {
+                    console.error(error)
+
+                    alert(error.message)
+
+                    return
+                }
+
+                setPosts(posts)
+            })
+
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }, [])
+
+    return <View tag="section" className='PostList'>
+
+        {posts.map(post => <article className="Post">
+            <p className="AuthorTitle">{post.author}</p>
+            <Heading level='2' className="PostTitle">{post.title}</Heading>
+            <Image className="PostImage" src={post.image} />
+            <Heading level='4' className="DescriptionTitle">
+                Description:
+            </Heading>
+            <p className="PostDescription">
+                {post.description}</p>
+            <time>{post.date}</time>
+            <button className="Button">Delete</button>
+        </article>
+
+        )}
+
+
+    </View>
+
+}
+
+export default PostList
\ No newline at end of file