componetize create post form, and others; add more features to view c…

…ompo; add feedback panel to form with feedback b00tc4mp#136
Eduardolans · Jun 18, 2024 · 501d0df · 501d0df
1 parent 779b19a
commit 501d0df
Show file tree

Hide file tree

Showing 116 changed files with 10,884 additions and 57 deletions.
diff --git a/staff/eduardo-sanchez/socialcode/api/data/posts.json b/staff/eduardo-sanchez/socialcode/api/data/posts.json
@@ -1 +1 @@
-[{"author":"pepitogrillo","title":"blah","image":"https://m.media-amazon.com/images/I/41xsPjrM-pL._AC_UF350,350_QL50_.jpg","description":"blah blah","id":"5879244716997389-1716667549269","date":"2024-05-25T20:05:49.269Z"},{"id":"5424401351689265-1716995937318","author":"WendyD","title":"asfaF","image":"https://media.giphy.com/media/xTiTntKyFNFbCNuqkw/giphy.gif?cid=790b76117ksklq64slgwdawn5cmtm14enobheew3nkecwdq1&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"ASAFA","date":"2024-05-29T15:18:57.318Z"},{"author":"peterpan","title":"hello world","image":"https://miro.medium.com/v2/resize:fit:1024/1*OohqW5DGh9CQS4hLY5FXzA.png","description":"console.log(\"hello world\")","date":"2024-05-30T13:46:33.345Z","id":"2575794271140359-1717076793345"},{"author":"peterpan","title":"blah","image":"https://upload.wikimedia.org/wikipedia/commons/1/1d/Blah_Blah_Blah.jpg","description":"blah blah","date":"2024-05-30T14:07:06.222Z","id":"03238060139373644-1717078026222"},{"author":"peterpan","title":"i love js","image":"https://images-na.ssl-images-amazon.com/images/I/61VmREcLaFL._SLDPMOBCAROUSELAUTOCROP288221_MCnd_AC_SR462,693_.jpg","description":"t-shirt","date":"2024-05-30T15:07:38.101Z","id":"7052022051791447-1717081658101"},{"author":"ManoloC","title":"i love debugging","image":"https://ih1.redbubble.net/image.5079675350.2246/gptr,1400x,front,black-c,188,133,1000,1000-bg,f8f8f8.jpg","description":"otra tshirt","date":"2024-05-30T15:12:22.193Z","id":"3242603140750757-1717081942193"},{"author":"peterpan","title":"I hate onions","image":"https://res.cloudinary.com/teepublic/image/private/s--jk8hOZj1--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,h_563/c_crop,g_north_west,h_626,w_470,x_-40,y_-15/g_north_west,u_upload:v1462829018:production:blanks:ekerz3afkzxin2pgqj8h,x_-435,y_-340/b_rgb:eeeeee/c_limit,f_auto,h_630,q_auto:good:420,w_630/v1704062586/production/designs/55814456_0.jpg","description":"camiseta","date":"2024-05-30T15:19:04.125Z","id":"4007381802005925-1717082344121"},{"author":"pepitogrillo","title":"this is me","image":"https://pastaypizzagrossi.com/wp-content/uploads/2015/11/pepito.png","description":"PepitoG","date":"2024-06-03T15:37:09.141Z","id":"7816694399029667-1717429029143"},{"author":"PabloP","title":"yo","image":"https://imgs.search.brave.com/shWZquMWkPDaIeX0KktOS6CA0nC8DjMZ7f8UNHr3FIc/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9oaXBz/LmhlYXJzdGFwcHMu/Y29tL2htZy1wcm9k/L2ltYWdlcy9hdXRv/cnJldHRhcm8tMTkw/Ny0xNjU3ODA0Mzg5/LmpwZWc_Y3JvcD0x/eHc6MXhoO2NlbnRl/cix0b3AmcmVzaXpl/PTk4MDoq","description":"my portrait","date":"2024-06-03T16:49:06.088Z","id":"6226364135019973-1717433346091"},{"author":"peterpan","title":"NBA","image":"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHJla2VldzRxODB3M25lZmw4eHo4aXBnb2dnOGZkNjR0aHAxZGw2MCZlcD12MV9naWZzX3RyZW5kaW5nJmN0PWc/q45TMknC4xNUCfZt6H/giphy.gif","description":"PlayOffs","date":"2024-06-05T14:54:30.056Z","id":"8142909801569895-1717599270057"},{"author":"WendyD","title":"dancing","image":"https://media.giphy.com/media/iibH5ymW6LFvSIVyUc/giphy.gif?cid=790b76118rekeew4q80w3nefl8xz8ipgogg8fd64thp1dl60&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"girl dancing","date":"2024-06-05T16:59:52.426Z","id":"9678571314947659-1717606792429"},{"author":"peterpan","title":"thursday","image":"https://media.giphy.com/media/H3NC55FLtoF3RXM3eL/giphy.gif?cid=790b7611yhopdjk154taitnd087agc4kk9f1mv61gmkvlv4l&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"hege","date":"2024-06-13T17:37:30.738Z","id":"15869690379310386-1718300250740"},{"author":"peterpan","title":"foto","image":"https://media.giphy.com/media/4Jxa0QgHF2HSw/giphy.gif?cid=790b7611uw89e4dpo4svai7q6sulh4u7yeaudqipse0i8d2o&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"look","date":"2024-06-17T08:35:29.759Z","id":"9106929267928583-1718613329760"},{"author":"peterpan","title":"carrey","image":"https://media.giphy.com/media/dRvEZLV0ORAmHT1L5u/giphy.gif?cid=790b7611uw89e4dpo4svai7q6sulh4u7yeaudqipse0i8d2o&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"jim","date":"2024-06-17T09:06:47.560Z","id":"35807982447313225-1718615207560"},{"author":"peterpan","title":"corazon","image":"https://media.giphy.com/media/R6gvnAxj2ISzJdbA63/giphy.gif?cid=790b7611uw89e4dpo4svai7q6sulh4u7yeaudqipse0i8d2o&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"heart","date":"2024-06-17T09:21:21.170Z","id":"3338800772065065-1718616081171"},{"author":"peterpan","title":"sdgdDG","image":"https://media.giphy.com/media/iGqP4DYXe4zVJbCY5N/giphy.gif?cid=82a1493bljazeirf80bswzzbztripbnc5hfph6gll89r3spz&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"xbxbB","date":"2024-06-17T11:27:38.535Z","id":"9130813019067745-1718623658536"},{"author":"peterpan","title":"dfhdfhz","image":"https://media.giphy.com/media/UuB5lh1bL1Dl6svihe/giphy.gif?cid=82a1493bljazeirf80bswzzbztripbnc5hfph6gll89r3spz&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"hugs","date":"2024-06-17T11:31:15.209Z","id":"27637147804292184-1718623875210"},{"author":"peterpan","title":"vaqueroooo","image":"https://media.giphy.com/media/SAUOBJogCbegrukfwR/giphy.gif?cid=82a1493b1bk1hxb7r6ubjt02jfxyvwxpt4sqx0x3j3h0zc03&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"yayyyy!","date":"2024-06-17T11:49:05.188Z","id":"381087757154702-1718624945188"}]
+[{"author":"pepitogrillo","title":"blah","image":"https://m.media-amazon.com/images/I/41xsPjrM-pL._AC_UF350,350_QL50_.jpg","description":"blah blah","id":"5879244716997389-1716667549269","date":"2024-05-25T20:05:49.269Z"},{"id":"5424401351689265-1716995937318","author":"WendyD","title":"asfaF","image":"https://media.giphy.com/media/xTiTntKyFNFbCNuqkw/giphy.gif?cid=790b76117ksklq64slgwdawn5cmtm14enobheew3nkecwdq1&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"ASAFA","date":"2024-05-29T15:18:57.318Z"},{"author":"peterpan","title":"hello world","image":"https://miro.medium.com/v2/resize:fit:1024/1*OohqW5DGh9CQS4hLY5FXzA.png","description":"console.log(\"hello world\")","date":"2024-05-30T13:46:33.345Z","id":"2575794271140359-1717076793345"},{"author":"peterpan","title":"blah","image":"https://upload.wikimedia.org/wikipedia/commons/1/1d/Blah_Blah_Blah.jpg","description":"blah blah","date":"2024-05-30T14:07:06.222Z","id":"03238060139373644-1717078026222"},{"author":"peterpan","title":"i love js","image":"https://images-na.ssl-images-amazon.com/images/I/61VmREcLaFL._SLDPMOBCAROUSELAUTOCROP288221_MCnd_AC_SR462,693_.jpg","description":"t-shirt","date":"2024-05-30T15:07:38.101Z","id":"7052022051791447-1717081658101"},{"author":"ManoloC","title":"i love debugging","image":"https://ih1.redbubble.net/image.5079675350.2246/gptr,1400x,front,black-c,188,133,1000,1000-bg,f8f8f8.jpg","description":"otra tshirt","date":"2024-05-30T15:12:22.193Z","id":"3242603140750757-1717081942193"},{"author":"peterpan","title":"I hate onions","image":"https://res.cloudinary.com/teepublic/image/private/s--jk8hOZj1--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,h_563/c_crop,g_north_west,h_626,w_470,x_-40,y_-15/g_north_west,u_upload:v1462829018:production:blanks:ekerz3afkzxin2pgqj8h,x_-435,y_-340/b_rgb:eeeeee/c_limit,f_auto,h_630,q_auto:good:420,w_630/v1704062586/production/designs/55814456_0.jpg","description":"camiseta","date":"2024-05-30T15:19:04.125Z","id":"4007381802005925-1717082344121"},{"author":"pepitogrillo","title":"this is me","image":"https://pastaypizzagrossi.com/wp-content/uploads/2015/11/pepito.png","description":"PepitoG","date":"2024-06-03T15:37:09.141Z","id":"7816694399029667-1717429029143"},{"author":"PabloP","title":"yo","image":"https://imgs.search.brave.com/shWZquMWkPDaIeX0KktOS6CA0nC8DjMZ7f8UNHr3FIc/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9oaXBz/LmhlYXJzdGFwcHMu/Y29tL2htZy1wcm9k/L2ltYWdlcy9hdXRv/cnJldHRhcm8tMTkw/Ny0xNjU3ODA0Mzg5/LmpwZWc_Y3JvcD0x/eHc6MXhoO2NlbnRl/cix0b3AmcmVzaXpl/PTk4MDoq","description":"my portrait","date":"2024-06-03T16:49:06.088Z","id":"6226364135019973-1717433346091"},{"author":"peterpan","title":"NBA","image":"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHJla2VldzRxODB3M25lZmw4eHo4aXBnb2dnOGZkNjR0aHAxZGw2MCZlcD12MV9naWZzX3RyZW5kaW5nJmN0PWc/q45TMknC4xNUCfZt6H/giphy.gif","description":"PlayOffs","date":"2024-06-05T14:54:30.056Z","id":"8142909801569895-1717599270057"},{"author":"WendyD","title":"dancing","image":"https://media.giphy.com/media/iibH5ymW6LFvSIVyUc/giphy.gif?cid=790b76118rekeew4q80w3nefl8xz8ipgogg8fd64thp1dl60&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"girl dancing","date":"2024-06-05T16:59:52.426Z","id":"9678571314947659-1717606792429"},{"author":"peterpan","title":"thursday","image":"https://media.giphy.com/media/H3NC55FLtoF3RXM3eL/giphy.gif?cid=790b7611yhopdjk154taitnd087agc4kk9f1mv61gmkvlv4l&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"hege","date":"2024-06-13T17:37:30.738Z","id":"15869690379310386-1718300250740"},{"author":"peterpan","title":"foto","image":"https://media.giphy.com/media/4Jxa0QgHF2HSw/giphy.gif?cid=790b7611uw89e4dpo4svai7q6sulh4u7yeaudqipse0i8d2o&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"look","date":"2024-06-17T08:35:29.759Z","id":"9106929267928583-1718613329760"},{"author":"peterpan","title":"carrey","image":"https://media.giphy.com/media/dRvEZLV0ORAmHT1L5u/giphy.gif?cid=790b7611uw89e4dpo4svai7q6sulh4u7yeaudqipse0i8d2o&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"jim","date":"2024-06-17T09:06:47.560Z","id":"35807982447313225-1718615207560"},{"author":"peterpan","title":"dfhdfhz","image":"https://media.giphy.com/media/UuB5lh1bL1Dl6svihe/giphy.gif?cid=82a1493bljazeirf80bswzzbztripbnc5hfph6gll89r3spz&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"hugs","date":"2024-06-17T11:31:15.209Z","id":"27637147804292184-1718623875210"},{"author":"peterpan","title":"vaqueroooo","image":"https://media.giphy.com/media/SAUOBJogCbegrukfwR/giphy.gif?cid=82a1493b1bk1hxb7r6ubjt02jfxyvwxpt4sqx0x3j3h0zc03&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"yayyyy!","date":"2024-06-17T11:49:05.188Z","id":"381087757154702-1718624945188"},{"author":"ManoloC","title":"ghjkgh","image":"https://media.giphy.com/media/n1rwdMK9xlxxNNMyQo/giphy.gif?cid=790b7611uw89e4dpo4svai7q6sulh4u7yeaudqipse0i8d2o&ep=v1_gifs_trending&rid=giphy.gif&ct=g","description":"dfhdzfh","date":"2024-06-18T14:08:39.919Z","id":"9633525110445467-1718719719920"}]
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/core/Text.css b/staff/eduardo-sanchez/socialcode/app/src/components/core/Text.css
@@ -0,0 +1,3 @@
+.Text {
+    color: tomato;
+}
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/core/Text.jsx b/staff/eduardo-sanchez/socialcode/app/src/components/core/Text.jsx
@@ -0,0 +1,7 @@
+import './Text.css'
+
+function Text({ children }) {
+    return <p className="Text">{children}</p>
+}
+
+export default Text
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/core/Time.css b/staff/eduardo-sanchez/socialcode/app/src/components/core/Time.css
@@ -0,0 +1,3 @@
+.Time {
+    color: dodgerblue;
+}
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/core/Time.jsx b/staff/eduardo-sanchez/socialcode/app/src/components/core/Time.jsx
@@ -0,0 +1,11 @@
+import './Time.css'
+
+function Time({ children: time }) {
+    const formattedTime = new Date(time).toLocaleString()
+
+    return <time className="Time">{formattedTime}</time>
+
+    { /*return <time>{formattedTime}</time>*/ }
+}
+
+export default Time
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/library/FormWithFeedback.css b/staff/eduardo-sanchez/socialcode/app/src/components/library/FormWithFeedback.css
@@ -2,7 +2,7 @@
     padding: 1rem;
 }
 
-.FormWithFeedback .Feedback {
+.FormWithFeedback .Feedback.error {
     color: tomato;
 }
 

diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/library/FormWithFeedback.jsx b/staff/eduardo-sanchez/socialcode/app/src/components/library/FormWithFeedback.jsx
@@ -1,9 +1,13 @@
 import Form from '../core/Form'
+import Text from '../core/Text'
 
 import './FormWithFeedback.css'
 
-function FormWithFeedback({ onSubmit, children }) {
-    return <Form className="FormWithFeedback" onSubmit={onSubmit}>{children}</Form>
+function FormWithFeedback({ onSubmit, children, message, level = 'error' }) {
+    return <Form className="FormWithFeedback" onSubmit={onSubmit}>
+        {children}
+        {message && <Text className={`Feedback ${level}`}>{message}</Text>}
+    </Form>
 }
 
 export default FormWithFeedback
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/library/View.css b/staff/eduardo-sanchez/socialcode/app/src/components/library/View.css
@@ -1,5 +1,16 @@
 .View {
     display: flex;
+}
+
+.View--column {
     flex-direction: column;
+}
+
+.View--row {
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.View--center {
     align-items: center;
 }
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/library/View.jsx b/staff/eduardo-sanchez/socialcode/app/src/components/library/View.jsx
@@ -1,7 +1,8 @@
 import './View.css'
 
-function View({ tag: Tag = 'div', className, children }) {
-    return <Tag className={`View ${className ? className : ''}`}>{children}</Tag>
+function View({ tag: Tag = 'div', className, children, direction = 'column', align = 'center' }) {
+
+    return <Tag className={`View ${className ? className : ''} ${direction === 'column' ? 'View--column' : 'View--row'} ${align === 'center' ? 'View--center' : ''}`}>{children}</Tag>
 }
 
-export default View
+export default View
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/Login.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/Login.jsx
@@ -1,14 +1,20 @@
+import { useState } from 'react'
+
 import logic from '../logic'
+
 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 FormWithFeedback from '../components/library/FormWithFeedback'
 import View from '../components/library/View'
 
 function Login({ onUserLoggedIn, onRegisterLinkClick }) {
     console.log('Login -> render')
 
+    const [message, setMessage] = useState('')
+
     const handleLoginSubmit = event => {
         event.preventDefault()
 
@@ -22,7 +28,7 @@ function Login({ onUserLoggedIn, onRegisterLinkClick }) {
                 if (error) {
                     console.log(error)
 
-                    alert(error.message)
+                    setMessage(error.message)
 
                     return
                 }
@@ -32,7 +38,7 @@ function Login({ onUserLoggedIn, onRegisterLinkClick }) {
         } catch (error) {
             console.log(error)
 
-            alert(error.message)
+            setMessage(error.message)
         }
     }
 
@@ -45,7 +51,7 @@ function Login({ onUserLoggedIn, onRegisterLinkClick }) {
     return <View tag="main">
         <Title>Login</Title>
 
-        <FormWithFeedback onSubmit={handleLoginSubmit}>
+        <FormWithFeedback onSubmit={handleLoginSubmit} message={message}>
             <Field id="username" placeholder="username">Username</Field>
 
             <Field id="password" type="password" placeholder="password">Password</Field>
@@ -57,5 +63,4 @@ function Login({ onUserLoggedIn, onRegisterLinkClick }) {
     </View>
 }
 
-export default Login
-
+export default Login
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/Register.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/Register.jsx
@@ -1,13 +1,20 @@
+import { useState } from 'react'
+
 import logic from '../logic'
+
 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 FormWithFeedback from '../components/library/FormWithFeedback'
 import View from '../components/library/View'
 
 function Register({ onUserRegistered, onLoginLinkClick }) {
     console.log('Register -> render')
+
+    const [message, setMessage] = useState('')
+
     const handleRegisterSubmit = event => {
         event.preventDefault()
 
@@ -25,7 +32,7 @@ function Register({ onUserRegistered, onLoginLinkClick }) {
                 if (error) {
                     console.log(error)
 
-                    alert(error.message)
+                    setMessage(error.message)
 
                     return
                 }
@@ -35,7 +42,7 @@ function Register({ onUserRegistered, onLoginLinkClick }) {
         } catch (error) {
             console.error(error)
 
-            alert(error.message)
+            setMessage(error.message)
         }
     }
 
@@ -48,7 +55,7 @@ function Register({ onUserRegistered, onLoginLinkClick }) {
     return <View tag="main">
         <Title>Register</Title>
 
-        <FormWithFeedback onSubmit={handleRegisterSubmit}>
+        <FormWithFeedback onSubmit={handleRegisterSubmit} message={message}>
             <Field id="name" placeholder="name">Name</Field>
 
             <Field id="surname" placeholder="surname">Surname</Field>

diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/CreatePostForm.css b/staff/eduardo-sanchez/socialcode/app/src/views/components/CreatePostForm.css
@@ -0,0 +1,8 @@
+.CreatePostForm {
+    position: fixed;
+    bottom: 3rem;
+    width: 100%;
+    left: 0;
+    box-sizing: border-box;
+    background-color: var(--second-color);
+}
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/CreatePostForm.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/components/CreatePostForm.jsx
@@ -1,8 +1,21 @@
+import { useState } from 'react'
+
+import './CreatePostForm.css'
+
 import logic from '../../logic'
 
+import Field from '../../components/core/Field'
+import Button from '../../components/core/Button'
+import SubmitButton from '../../components/core/SubmitButton'
+
+import FormWithFeedback from '../../components/library/FormWithFeedback'
+import View from '../../components/library/View'
+
 function CreatePostForm({ onCancelCreatePostClick, onPostCreated }) {
     console.log('CreatePostForm -> render')
 
+    const [message, setMessage] = useState('')
+
     const handleCancelCreatePostClick = () => onCancelCreatePostClick()
 
     const handleCreatePostSubmit = event => {
@@ -19,7 +32,8 @@ function CreatePostForm({ onCancelCreatePostClick, onPostCreated }) {
                 if (error) {
                     console.error(error)
 
-                    alert(error.message)
+                    //alert(error.message)
+                    setMessage(error.message)
 
                     return
                 }
@@ -29,27 +43,23 @@ function CreatePostForm({ onCancelCreatePostClick, onPostCreated }) {
         } catch (error) {
             console.error(error)
 
-            alert(error.message)
+            //alert(error.message)
+            setMessage(error.message)
         }
     }
 
-    return <form className="Form FormWithFeedback CreatePostForm" onSubmit={handleCreatePostSubmit}>
-        <div className="Field">
-            <label htmlFor="title">Title</label>
-            <input className="Input" id="title" type="text" placeholder="title" />
-        </div>
-        <div className="Field">
-            <label htmlFor="image">Image</label>
-            <input className="Input" id="image" type="text" placeholder="image" />
-        </div>
-        <div className="Field">
-            <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, please, correct it</p>
-    </form>
+    return < View className="CreatePostForm">
+        <FormWithFeedback onSubmit={handleCreatePostSubmit} message={message}>
+            <Field id="title">Title</Field>
+            <Field id="image">Image</Field>
+            <Field id="description">Description</Field>
+
+            <View direction='row'>
+                <SubmitButton>Create</SubmitButton>
+                <Button onClick={handleCancelCreatePostClick}>Cancel</Button>
+            </View>
+        </FormWithFeedback>
+    </View >
 }
 
 export default CreatePostForm