create post form component complete in app b00tc4mp#160

GoteoMamez · Aug 8, 2024 · 07bd461 · 07bd461
1 parent b49f99a
commit 07bd461
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 40 deletions.
diff --git a/staff/mateo-gomez/project/api/logic/logoutUser.js b/staff/mateo-gomez/project/api/logic/logoutUser.js
diff --git a/staff/mateo-gomez/project/app/components/core/Button.css b/staff/mateo-gomez/project/app/components/core/Button.css
@@ -25,4 +25,10 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+}
+
+.PostType {
+    height: 6rem;
+    font-size: xx-large;
+    color: white;
 }
diff --git a/staff/mateo-gomez/project/app/components/core/Heading.css b/staff/mateo-gomez/project/app/components/core/Heading.css
@@ -15,4 +15,10 @@
     flex-direction: column;
     position: absolute;
     padding: 2rem;
+}
+
+.CreatePostFormHeading {
+    color: white;
+    font-family: "Langar", system-ui;
+
 }
diff --git a/staff/mateo-gomez/project/app/src/components/view/Home.jsx b/staff/mateo-gomez/project/app/src/components/view/Home.jsx
@@ -1,17 +1,21 @@
 import { useEffect, useState } from "react"
+
 import View from "../../../components/library/View"
 import Heading from "../../../components/core/Heading"
 import Header from "./components/Header"
 import logic from "../../logic/index"
 import Button from "../../../components/core/Button"
 import Footer from "./components/Footer"
+import CreatePostForm from "./components/CreatePostForm"
+import PostTypeSelection from "./components/PostTypeSelection"
 
 
 function Home({ onUserLoggedOut }) {
     console.log('Home -> render')
 
     const [name, setName] = useState('')
     const [view, setView] = useState('')
+    const [postType, setPostType] = useState(null)
 
 
     const handleLogout = () => {
@@ -22,9 +26,20 @@ function Home({ onUserLoggedOut }) {
 
 
     const handleCreatePostClick = () => {
+        setView('postTypeSelection')
+    }
+
+    const handlePostTypeSelection = (type) => {
+        console.log('Post Type Selected', type)
+        setPostType(type)
+
         setView('createPost')
     }
 
+    const handleCancelCreatePost = () => {
+        setView('')
+    }
+
     const handlePostCreated = () => {
         setView('')
     }
@@ -63,6 +78,17 @@ function Home({ onUserLoggedOut }) {
             </div>
         </Header>
         <View tag="main">
+            {view === 'postTypeSelection' && (
+                <PostTypeSelection onSelectType={handlePostTypeSelection}></PostTypeSelection>
+            )}
+            {view === 'createPost' && postType && (
+                <CreatePostForm
+                    postType={postType}
+                    onCancelCreatePostClick={handleCancelCreatePost}
+                    onHostPostCreated={handlePostCreated}
+                    onGuestPostCreated={handlePostCreated}
+                > </CreatePostForm>
+            )}
 
         </View>
         <Footer onCreatePostClick={handleCreatePostClick} className='Footer' >+</Footer>

diff --git a/staff/mateo-gomez/project/app/src/components/view/components/CreatePostForm.css b/staff/mateo-gomez/project/app/src/components/view/components/CreatePostForm.css
@@ -0,0 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
+
+
+.CreatePostFormHeading {
+    color: white;
+    font-family: "Langar", system-ui;
+
+}
+
+.CreateCancelButtons {
+    display: flex;
+    justify-content: center;
+}
diff --git a/staff/mateo-gomez/project/app/src/components/view/components/CreatePostForm.jsx b/staff/mateo-gomez/project/app/src/components/view/components/CreatePostForm.jsx
@@ -6,27 +6,25 @@ import FormWithFeedback from "../../../../components/library/FormWithFeedBack";
 import Field from "../../../../components/core/Field"
 import Heading from "../../../../components/core/Heading";
 import Button from "../../../../components/core/Button";
-import PostTypeSelection from "./PostTypeSelection";
+import './CreatePostForm.css'
 
-function CreatePostForm({ onCancelCreatePostClick, onHostPostCreated, onGuestPostCreated }) {
+function CreatePostForm({ postType, onCancelCreatePostClick, onHostPostCreated, onGuestPostCreated }) {
     console.log('CreatePostForm -> render')
 
     const [message, setMessage] = useState('')
-    const [postType, setPostType] = useState(null)
 
-    const handlePostTypeSelection = (type) => {
-        setPostType(type)
-    }
+
 
     const handleCreatePostSubmit = (event) => {
         event.preventDefault()
 
-        const form = event.target
 
-        const image = form.image.value
-        const description = form.description.value
 
         if (postType === 'HostPost') {
+            const form = event.target
+
+            const image = form.image.value
+            const description = form.description.value
             const city = form.city.value
             const age = form.age.value
             const offer = form.offer.value
@@ -36,13 +34,18 @@ function CreatePostForm({ onCancelCreatePostClick, onHostPostCreated, onGuestPos
                     .then(() => onHostPostCreated())
                     .catch((error) => {
                         console.error(error)
+
                         setMessage(error.message)
                     })
             } catch (error) {
                 console.error(error)
                 setMessage(error.message)
             }
         } else if (postType === 'GuestPost') {
+            const form = event.target
+
+            const image = form.image.value
+            const description = form.description.value
             const date = form.date.value
             const fromLocation = form.fromLocation.value
             const toLocation = form.toLocation.value
@@ -53,49 +56,48 @@ function CreatePostForm({ onCancelCreatePostClick, onHostPostCreated, onGuestPos
                     .then(() => onGuestPostCreated())
                     .catch((error) => {
                         console.error(error)
+
                         setMessage(error.message)
                     })
             } catch (error) {
                 console.error(error)
+
                 setMessage(error.message)
             }
         }
     }
 
     return (
         <View className='CreatePostForm'>
-            <Heading level={2}>Create your post</Heading>
-            {!postType && (
-                <PostTypeSelection onSelect={handlePostTypeSelection} />)}
-            {!postType && (
-                <div>
-                    <Button onClick={() => handlePostTypeSelection('HostPost')}>Host Post</Button>
-                    <Button onClick={() => handlePostTypeSelection('GuestPost')}>Guest Post</Button>
-                </div>
-            )}
-            {postType && (
-                <FormWithFeedback onSubmit={handleCreatePostSubmit} message={message}>
-                    <Field type="text" name="image" label="Image URL" required />
-                    <Field type="text" name="description" label="Description" required />
-                    {postType === 'HostPost' && (
-                        <>
-                            <Field type="text" name="city" label="City" required />
-                            <Field type="text" name="age" label="Age" required />
-                            <Field type="text" name="offer" label="Offer" required />
-                        </>
-                    )}
-                    {postType === 'GuestPost' && (
-                        <>
-                            <Field type="text" name="date" label="Date" required />
-                            <Field type="text" name="age" label="Age" required />
-                            <Field type="text" name="fromLocation" label="From Location" required />
-                            <Field type="text" name="toLocation" label="To Location" required />
-                        </>
-                    )}
+            <Heading className='CreatePostFormHeading' level={2}>Create your post</Heading>
+
+            <FormWithFeedback onSubmit={handleCreatePostSubmit} >
+
+                {postType === 'HostPost' && (
+                    <>
+                        <Field type="text" id="image" placeholder="Image URL" required >Image</Field>
+                        <Field type="text" id="description" placeholder="Description" required >Description</Field>
+                        <Field type="text" id="city" placeholder="City" required >City</Field>
+                        <Field type="text" id="age" placeholder="Age" required >Age</Field>
+                        <Field type="text" id="offer" placeholder="Offer" required >Offer</Field>
+                    </>
+                )}
+                {postType === 'GuestPost' && (
+                    <>
+                        <Field type="text" id="image" placeholder="Image URL" required >Image</Field>
+                        <Field type="text" id="description" placeholder="Description" required >Description</Field>
+                        <Field type="text" id="date" placeholder="Date" required >Date</Field>
+                        <Field type="text" id="age" placeholder="Age" required >Age</Field>
+                        <Field type="text" id="fromLocation" placeholder="From Location" required >From Location</Field>
+                        <Field type="text" id="toLocation" placeholder="To Location" required >To Location</Field>
+                    </>
+                )}
+                <div className="CreateCancelButtons">
                     <Button type="submit">Create Post</Button>
                     <Button type="Button" onClick={onCancelCreatePostClick}>Cancel</Button>
-                </FormWithFeedback>
-            )}
+                </div>
+            </FormWithFeedback>
+
         </View>
     )
 }

diff --git a/staff/mateo-gomez/project/app/src/components/view/components/PostTypeSelection.css b/staff/mateo-gomez/project/app/src/components/view/components/PostTypeSelection.css
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
+
+
+.PostTypeSelection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    width: 100%;
+    top: 10rem;
+}
+
+.PostTypeSelectionHeading {
+    color: white;
+    font-family: "Langar", system-ui;
+
+}
diff --git a/staff/mateo-gomez/project/app/src/components/view/components/PostTypeSelection.jsx b/staff/mateo-gomez/project/app/src/components/view/components/PostTypeSelection.jsx
@@ -1,9 +1,10 @@
 import { useState } from "react";
 import Heading from "../../../../components/core/Heading";
 import Button from "../../../../components/core/Button";
+import './PostTypeSelection.css'
 
 function PostTypeSelection({ onSelectType }) {
-    return <div>
+    return <div className="PostTypeSelection">
         <Heading className='PostTypeSelectionHeading' level='1'>What do you want to be?</Heading>
         <Button className='PostType' onClick={() => onSelectType('HostPost')}>Host</Button>
         <Button className='PostType' onClick={() => onSelectType('GuestPost')}>Guest</Button>