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; b00tc4mp#149

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

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

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

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));
 }
 

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

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>,
 )

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>
 

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%;
+}

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);
+}

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