add create post form compo and logic; add post list auto refresh on p…

…ost created; b00tc4mp#149
GoteoMamez · Jun 16, 2024 · 744728f · 744728f
1 parent b0e1cdc
commit 744728f
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 61 deletions.
diff --git a/staff/mateo-gomez/socialcode/api/data/posts.json b/staff/mateo-gomez/socialcode/api/data/posts.json
@@ -1 +1 @@
-[]
+[{"author":"doncic","title":"doncic","image":"https://media.giphy.com/media/l0ExdMHUDKteztyfe/giphy.gif?cid=790b7611b1gu00qk8rbgliucmzz3s3zkyr97bfj5gunwfq0u&ep=v1_gifs_search&rid=giphy.gif&ct=g","description":"klk","date":"2024-06-13T10:56:31.500Z","id":"31351023829888214-1718276191500"},{"author":"doncic","title":"hola","image":"https://media.giphy.com/media/lJNoBCvQYp7nq/giphy.gif?cid=790b7611evab4y6j4wimm5zlr11t8447uuplrw52hurba6va&ep=v1_gifs_search&rid=giphy.gif&ct=g","description":"k tal","date":"2024-06-14T07:34:46.627Z","id":"7169851230536599-1718350486628"},{"author":"doncic","title":"1","image":"https://media.giphy.com/media/lJNoBCvQYp7nq/giphy.gif?cid=790b7611evab4y6j4wimm5zlr11t8447uuplrw52hurba6va&ep=v1_gifs_search&rid=giphy.gif&ct=g","description":"2","date":"2024-06-14T07:54:09.256Z","id":"987646978818935-1718351649256"},{"author":"doncic","title":"3","image":"https://media.giphy.com/media/dT7LBdAZP1Rh6/giphy.gif?cid=790b7611evab4y6j4wimm5zlr11t8447uuplrw52hurba6va&ep=v1_gifs_search&rid=giphy.gif&ct=g","description":"1","date":"2024-06-14T07:54:45.305Z","id":"3817116222012884-1718351685305"}]
diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Form.css b/staff/mateo-gomez/socialcode/app/src/components/core/Form.css
@@ -4,6 +4,6 @@
     background-color: rgb(228, 179, 34);
     border-radius: 30%;
     align-items: center;
-    width: 20rem;
+    width: 30rem;
 
 }
diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Heading.jsx b/staff/mateo-gomez/socialcode/app/src/components/core/Heading.jsx
@@ -1,7 +1,7 @@
 function Heading({ level, className, children }) {
     const Tag = `h${level}`
 
-    return <Tag >{children}</Tag>
+    return <Tag className={`className ${className ? className : ''}`}>{children}</Tag>
 
 }
 

diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Image.css b/staff/mateo-gomez/socialcode/app/src/components/core/Image.css
@@ -1,3 +1,8 @@
 .Image {
-    width: 100%;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    border-radius: 5%;
+    display: block;
+    margin: 2rem auto;
 }
diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Title.css b/staff/mateo-gomez/socialcode/app/src/components/core/Title.css
@@ -0,0 +1,9 @@
+.MainTitle {
+    font-family: 'Pacifico', sans-serif;
+    font-size: 60px;
+    display: flex;
+    justify-content: center;
+    margin-top: -100px;
+    -webkit-text-stroke: 0.01rem rgb(111, 59, 7);
+    text-shadow: 10px 7px 6px rgba(54, 29, 3, 0.64);
+}
diff --git a/staff/mateo-gomez/socialcode/app/src/components/core/Title.jsx b/staff/mateo-gomez/socialcode/app/src/components/core/Title.jsx
@@ -1,8 +1,9 @@
 import Heading from './Heading'
+import './Title.css'
 
 
-function Title({ children }) {
-    return <Heading level='1'>{children}</Heading>
+function Title({ className, children }) {
+    return <Heading className={`MainTitle ${className ? className : ''}`} level='1'>{children}</Heading>
 }
 
 export default Title
diff --git a/staff/mateo-gomez/socialcode/app/src/components/library/View.css b/staff/mateo-gomez/socialcode/app/src/components/library/View.css
@@ -1,7 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Micro+5+Charted&family=Pacifico&display=swap');
 
 .View {
-    height: 100vh;
+    height: auto;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -10,12 +11,12 @@
 }
 
 
-.MainTitle {
-    font-family: 'Pacifico', sans-serif;
-    font-size: 60px;
-    display: flex;
-    justify-content: center;
-    margin-top: -100px;
-    -webkit-text-stroke: 0.01rem rgb(111, 59, 7);
-    text-shadow: 10px 7px 6px rgba(54, 29, 3, 0.64);
+
+
+.View .FormWithFeedback {
+    margin-top: 15rem;
+}
+
+.View .login {
+    color: blue;
 }
diff --git a/staff/mateo-gomez/socialcode/app/src/views/Home.jsx b/staff/mateo-gomez/socialcode/app/src/views/Home.jsx
@@ -1,18 +1,19 @@
 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'
 import Footer from './components/Footer'
+import CreatePostForm from './components/CreatePostForm'
 
 function Home({ onUserLoggedOut }) {
     console.log('Home -> render')
 
     const [name, setName] = useState('')
     const [view, setView] = useState('')
+    const [postListRefreshStamp, setPostListRefreshStamp] = useState(0)
 
     const handleLogout = () => {
         logic.logoutUser()
@@ -31,6 +32,8 @@ function Home({ onUserLoggedOut }) {
                     return
                 }
 
+                console.log('Home -> setName')
+
                 setName(name)
             })
 
@@ -43,34 +46,26 @@ function Home({ onUserLoggedOut }) {
 
     const handleCreatePostClick = () => setView('create-post')
 
-    const handleCancelCreatePost = () => setView('')
+    const handleCancelCreatePostClick = () => setView('')
+
+    const handlePostCreated = () => {
+        setPostListRefreshStamp(Date.now())
+
+        setView('')
+    }
+
+
 
     return <View>
         <Header>
             <Heading level="3">{name}</Heading>
             <Button onClick={handleLogout}>Logout</Button>
         </Header>
+
         <View tag='main'>
-            <PostList />
-
-            {view === 'create-post' && <form class="Form FormWithFeedback CreatePostForm">
-                <div class="Field FormInput">
-                    <label for="title">Title</label>
-                    <input class="Input" id="username" type="text" placeholder="title" />
-                </div>
-
-                <div class="Field FormInput">
-                    <label for="image">Image</label>
-                    <input class="Input" id="username" type="text" placeholder="image" />
-                </div>
-                <div class="Field description-input">
-                    <label for="description">Description</label>
-                    <input class="Input" id="username" type="text" placeholder="description" />
-                </div>
-
-                <button class="Button" type="button" onClick={handleCancelCreatePost}>Cancel</button>
-                <button class="Button SubmitButton" type="submit">Create</button>
-            </form>}
+            <PostList refreshStamp={postListRefreshStamp} />
+
+            {view === 'create-post' && <CreatePostForm onnCancelCreatePostClick={handleCancelCreatePostClick} onPostCreated={handlePostCreated} />}
 
         </View>
         <Footer onCreatePostClick={handleCreatePostClick} />

diff --git a/staff/mateo-gomez/socialcode/app/src/views/Login.jsx b/staff/mateo-gomez/socialcode/app/src/views/Login.jsx
@@ -3,8 +3,8 @@ import Field from '../components/core/Field'
 import SubmitButton from '../components/core/SubmitButton'
 import FormWithFeedback from '../components/library/FormWithFeedBack'
 import Link from '../components/core/Link'
-import Title from '../components/core/Title'
 import View from '../components/library/View'
+import Title from '../components/core/Title'
 
 function Login({ onUserLoggedIn, onRegisterLinkClick }) {
     console.log('Login -> render')
@@ -43,7 +43,7 @@ function Login({ onUserLoggedIn, onRegisterLinkClick }) {
     }
 
     return <View tag="main">
-        <Title>Login</Title>
+        <Title className='MainTitle'>Login</Title>
 
         <FormWithFeedback onSubmit={handleLoginSubmit}>
             <Field id="username" placeholder="username">Username</Field>

diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.css b/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.css
@@ -0,0 +1,10 @@
+.CreatePostForm {
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    bottom: 10rem;
+    width: 30rem;
+    box-sizing: border-box;
+    background-color: rgba(255, 191, 0, 0.792);
+
+}
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/CreatePostForm.jsx
@@ -0,0 +1,63 @@
+import logic from '../../logic'
+import './CreatePostForm.css'
+
+function CreatePostForm({ onCancelCreatePostClick, onPostCreated }) {
+    console.log('CreatePostForm -> render')
+
+    const handleCancelCreatePostClick = () => onCancelCreatePostClick()
+
+    const handleCreatePostSubmit = event => {
+        event.preventDefault()
+
+        const form = event.target
+
+        const title = form.title.value
+        const image = form.image.value
+        const description = form.description.value
+
+        try {
+            logic.createPost(title, image, description, error => {
+                if (error) {
+                    console.error(error)
+
+                    alert(error.message)
+
+                    return
+                }
+
+                onPostCreated()
+
+            })
+
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+
+    }
+
+    return <form className="Form FormWithFeedback CreatePostForm" onSubmit={handleCreatePostSubmit}>
+        <div className="Field FormInput">
+            <label htmlFor="title">Title</label>
+            <input className="Input" id="title" type="text" placeholder="title" />
+        </div>
+
+        <div className="Field FormInput">
+            <label htmlFor="image">Image</label>
+            <input className="Input" id="image" type="text" placeholder="image" />
+        </div>
+        <div className="Field description-input">
+            <label htmlFor="description">Description</label>
+            <input className="Input" id="description" type="text" placeholder="description" />
+        </div>
+
+        <button className="Button" type="button" onClick={handleCancelCreatePostClick}>Cancel</button>
+        <button className="Button SubmitButton" type="submit">Create</button>
+
+        <p className='Feedback'>image is not valid</p>
+    </form>
+}
+
+
+export default CreatePostForm
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/Footer.css b/staff/mateo-gomez/socialcode/app/src/views/components/Footer.css
@@ -7,6 +7,7 @@
     justify-content: center;
     padding: 1 rem 0;
     box-sizing: content-box;
+    height: 3.5rem;
 
 
 }
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/Post.css b/staff/mateo-gomez/socialcode/app/src/views/components/Post.css
@@ -5,46 +5,60 @@
     border: 1px solid orange;
     margin: 2rem;
     border-radius: 4%;
+
 }
 
 .PostTitle {
     display: flex;
-    justify-content: center;
+    justify-content: left;
     font-size: 3rem;
     margin-top: 0%;
+    margin-left: 3rem;
 }
 
 
 .PostImage {
-    width: 46rem;
     display: flex;
     justify-content: center;
-    margin: 2rem;
+    border-radius: 5%;
 }
 
 .AuthorTitle {
-    margin: 2rem;
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    border-radius: 10%;
-    border: 1px outset orange;
-    right: 0;
-    width: 5rem;
+    display: inline-block;
+    justify-content: flex-end;
+    margin-right: 3rem;
+    margin-top: 2rem;
     margin-left: auto;
+    border: 1px outset orange;
+    padding: 1rem;
+    margin-left: 40rem;
+    border-radius: 50%;
+    font-size: 1.3rem;
+
 
 }
 
 .PostDescription {
     margin: 2rem;
     border: 1px dotted orange;
     margin-top: 3px;
+    height: auto;
+
 }
 
 .DescriptionTitle {
     margin-left: 2rem;
     margin-right: 2rem;
-    margin-bottom: 3px;
+    margin-bottom: 1rem;
     border-bottom: 1px solid orange;
+}
+
+.DeleteButton {
+    display: inline-block;
+    justify-content: flex-end;
+    margin-left: 25rem;
+    margin-bottom: 2rem;
+    color: red;
+    border: 1px solid red;
+    cursor: pointer;
 }
diff --git a/staff/mateo-gomez/socialcode/app/src/views/components/Post.jsx b/staff/mateo-gomez/socialcode/app/src/views/components/Post.jsx
@@ -1,5 +1,6 @@
 import Image from "../../components/core/Image"
 import Heading from '../../components/core/Heading'
+import logic from "../../logic"
 
 import './Post.css'
 
@@ -29,15 +30,21 @@ function Post({ post, onPostDeleted }) {
 
     return <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>
-        {post.author === logic.getLoggedInUsername() && <button className="Button" onClick={() => handleDeletePost(post.id)}>Delete</button>}
+
+        {post.author === logic.getLoggedInUsername() && <button className="DeleteButton" onClick={() => handleDeletePost(post.id)}>Delete</button>}
     </article>
 }