post form styles + menu, and remove job post form

Prototypr · Feb 28, 2024 · aa04350 · aa04350
1 parent ea1634d
commit aa04350
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 56 deletions.
diff --git a/components/Navbar/parts/NewPostDialog.js b/components/Navbar/parts/NewPostDialog.js
@@ -90,14 +90,14 @@ const NewPostDialog = ({button}) => {
                     <h3 className="text-white text-lg transition transition-all duration-300 group-hover:scale-110 mt-2 font-medium text-center">Tool</h3>
                 </div>
             </Link>
-            <Link href="/jobs/post">
+            {/* <Link href="/jobs/post">
                 <div className="flex group cursor-pointer flex-col">
                     <IconButton className="bg-purple-500 transition transition-all duration-300 group-hover:scale-110 mx-auto">
                     <Briefcase weight="fill" size="44" />
                     </IconButton>
                     <h3 className="text-white text-lg transition transition-all duration-300 group-hover:scale-110 mt-2 font-medium text-center">Opportunity</h3>
                 </div>
-            </Link>
+            </Link> */}
 
           </div>
           </DialogDescription>

diff --git a/components/toolbox/forms/DescriptionExcerptForm.js b/components/toolbox/forms/DescriptionExcerptForm.js
@@ -136,23 +136,8 @@ const [disabled, setDisabled] = useState(false);
         >
             <FormContainer>
             <div className="flex flex-col mx-auto gap-5 max-w-2xl  w-auto">
-            <label className="text-md font-medium">
-                  Description
-                </label>
-                <div className="bg-white rounded-xl">
-                    <MiniEditor
-                    placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: Stripe payments, Google Sheets, blogging, and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
-                    title=""
-                    initialContent={content?content:''}
-                    disabled={isSubmitting}
-                    setDescription={(html)=>{
-                        formik.setFieldValue("content",html)
-                        setContent(html)
-                    }}/>
-                </div>
-                {formik.errors.content && <span className="text-red-600 text-xs">{formik.errors.content}</span>}
-
-                <label className="text-md font-medium mt-4">
+
+               <label className="text-md font-medium ">
                   Tagline
                 </label>
                 <div className="bg-white rounded-xl">
@@ -170,6 +155,23 @@ const [disabled, setDisabled] = useState(false);
                 </div>
                 {formik.errors.excerpt && <span className="text-red-600 text-xs">{formik.errors.excerpt}</span>}
 
+            <label className="text-md font-medium mt-4">
+                  Description
+                </label>
+                <div className="bg-white rounded-xl">
+                    <MiniEditor
+                    placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: Stripe payments, Google Sheets, blogging, and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
+                    title=""
+                    initialContent={content?content:''}
+                    disabled={isSubmitting}
+                    setDescription={(html)=>{
+                        formik.setFieldValue("content",html)
+                        setContent(html)
+                    }}/>
+                </div>
+                {formik.errors.content && <span className="text-red-600 text-xs">{formik.errors.content}</span>}
+
+
             </div>
             <div className="flex flex-col mx-auto max-w-2xl mt-12 w-auto"/>
 

diff --git a/components/toolbox/forms/MediaForm.js b/components/toolbox/forms/MediaForm.js
@@ -247,6 +247,7 @@ const [disabled, setDisabled] = useState(false);
                 <label htmlFor="image" className="text-md mt-10 font-medium">
                     Gallery
                 </label>
+                <p className="-mt-3 text-black/70">Please add a minimum of 3 images</p>
                 <GalleryUpload gallery={postObject?.gallery} updateField={(files)=>{
                     setGalleryChanged(true)
                     // formik.setFieldValue("logo",files)

diff --git a/components/toolbox/forms/TitleLinkForm.js b/components/toolbox/forms/TitleLinkForm.js
@@ -206,9 +206,10 @@ const [disabled, setDisabled] = useState(false);
                 className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
-                <div className="mx-auto w-6">
-                <Spinner />
-                </div>
+                <>Loading...</>
+                // <div className="mx-auto w-6">
+                // <Spinner />
+                // </div>
                 :
                 `Get Started`}
                 </Button>

diff --git a/components/toolbox/forms/TitleLinkFormEdit.js b/components/toolbox/forms/TitleLinkFormEdit.js
@@ -30,7 +30,7 @@ function isEmptyObject(obj) {
   };
 
 
-const TitleLinkFormEdit = ({user, postObject, onNext}) =>{
+const TitleLinkFormEdit = ({user, postObject, onNext, refetchPost}) =>{
 
     const [errores, setErrores] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
@@ -72,6 +72,7 @@ const TitleLinkFormEdit = ({user, postObject, onNext}) =>{
           .then(async function (response) {
 
             onNext()
+            refetchPost()
             setIsSubmitting(false)
           })
           .catch(function (error) {
@@ -111,7 +112,7 @@ const [disabled, setDisabled] = useState(false);
       <div className="flex justify-start pt-3 w-full h-full">
       <div className="max-w-2xl pt-3 w-full">
           <div className="my-2 mb-6 ">
-          <h1 className="text-4xl font-semibold mx-auto mb-3">Update tool</h1>
+          <h1 className="text-4xl font-semibold mx-auto mb-3">Update {postObject.title}</h1>
             <p className="text-gray-600">Make changes to the title and link.</p>
             </div>
             <form

diff --git a/components/toolbox/hooks/useLoad.js b/components/toolbox/hooks/useLoad.js
@@ -77,7 +77,8 @@ const useLoad = (user) => {
     postStatus,
     articleSlug,
     isOwner,
-    postObject
+    postObject,
+    refetch
   };
 };
 

diff --git a/pages/toolbox/post/[id]/edit.js b/pages/toolbox/post/[id]/edit.js
@@ -301,6 +301,19 @@ const ToolPostForm = ({user, isOwner, postObject}) => {
                     className={styles.input}
                   />
                 </FormInput>
+
+                <label className="text-md font-medium mt-4">
+                  Tagline
+                </label>
+                <MiniEditor
+                showToolbar={false}
+                title=""
+                placeholder="Unicorn platform is a landing page builder for SaaS products. Build and launch your marketing site in no time!"
+                initialContent={postObject?.excerpt?postObject.excerpt:''} 
+                setDescription={(html)=>{
+                    formik.setFieldValue("excerpt",html)
+                }}/>
+                {formik.errors.excerpt && <span className="text-red-600 text-xs">{formik.errors.excerpt}</span>}
 
 
                 <label className="text-md font-medium mt-4">
@@ -315,20 +328,6 @@ const ToolPostForm = ({user, isOwner, postObject}) => {
                     formik.setFieldValue("content",html)
                 }}/>
                 {formik.errors.content && <span className="text-red-600 text-xs">{formik.errors.content}</span>}
-
-                <label className="text-md font-medium mt-4">
-                  Tagline
-                </label>
-                <MiniEditor
-                showToolbar={false}
-                title=""
-                placeholder="Unicorn platform is a landing page builder for SaaS products. Build and launch your marketing site in no time!"
-                initialContent={postObject?.excerpt?postObject.excerpt:''} 
-                setDescription={(html)=>{
-                    formik.setFieldValue("excerpt",html)
-                }}/>
-                {formik.errors.excerpt && <span className="text-red-600 text-xs">{formik.errors.excerpt}</span>}
-
                {/* <FormInput id="title" label="Slug" error={formik.errors}>
                   <input
                     id="slug"

diff --git a/pages/toolbox/post/[id]/index.js b/pages/toolbox/post/[id]/index.js
@@ -36,9 +36,11 @@ const MenuItems =[
 {title:'Image and media'},
 // {title:'Done'},
 ]
-const Menu = ({}) => {
+const Menu = ({post}) => {
   const { activeStepIndex, steps, goTo } = useWizardContext();
 
+  const lastStepActive = activeStepIndex==3
+
   return (
     <div className="flex flex-col">
    {MenuItems.map((menuItem, index)=>{
@@ -51,6 +53,13 @@ const Menu = ({}) => {
       </div>
     )
    })}
+   {/* only show done step if info is there */}
+   {((post?.logo?.id && post?.gallery?.length))?
+    <div 
+    onClick={()=>{goTo(3)}}
+    className={`p-3 w-full cursor-pointer rounded-lg min-w-[300px] mb-2 ${lastStepActive?'bg-blue-100 font-semibold':''}`}>
+      Done
+    </div>:''}
     </div>
   );
 };
@@ -73,18 +82,18 @@ const PostToolPage = () =>{
       redirectTo: "/",
       redirectIfFound: false,
     });
-    const { loading, postObject, isOwner } =
+    const { loading, postObject, isOwner, refetch:refetchPost } =
     useLoad(user);
 
     return(
       !user && loading?<Fallback/>:
       postObject? 
-      <ToolPostForm isOwner={isOwner} postObject={postObject} user={user} />:null
+      <ToolPostForm refetchPost={refetchPost} isOwner={isOwner} postObject={postObject} user={user} />:null
     )
 
   }
 
-const ToolPostForm = ({user, isOwner, postObject}) =>{
+const ToolPostForm = ({user, isOwner, postObject,refetchPost}) =>{
 
   const [isSignUp, setSignUp] = useState(true);
 
@@ -93,6 +102,7 @@ const ToolPostForm = ({user, isOwner, postObject}) =>{
   };
 
 
+
   return(
     <Layout showFooter={false} padding={false} seo={seo} showWriteButton={false} background="#fff">
 
@@ -101,15 +111,15 @@ const ToolPostForm = ({user, isOwner, postObject}) =>{
         <div className="h-full min-h-screen w-full grid md:grid-cols-12">
         <div className="hidden w-full h-full md:block md:col-span-6 lg:col-span-4">
         <div className="flex pt-24 justify-center h-full w-full relative text-black/80">
-            <Menu/>
+            <Menu post={postObject}/>
             {/* <Progress/> */}
             {/* <LoginSide showArrow={false} title="Submit a tool or resource" user={user} /> */}
         </div>
         </div>
         <div className="col-span-12 md:col-span-6 lg:col-span-7">
         <div className="justify-center mt-20 w-full">
           {/* <Progress/> */}
-        <ToolSteps postObject={postObject} user={user}/>
+        <ToolSteps refetchPost={refetchPost} postObject={postObject} user={user}/>
           </div>
         </div>
         </div>
@@ -146,7 +156,7 @@ const ToolPostForm = ({user, isOwner, postObject}) =>{
 
 }
 
-const ToolSteps = ({user, postObject}) =>{
+const ToolSteps = ({user, postObject, refetchPost}) =>{
   const { activeStepIndex, onNext, onPrevious, goTo, isFirstStep, isLastStep } =useWizardContext();
   const router = useRouter();
   const { step } = router.query
@@ -165,7 +175,7 @@ const ToolSteps = ({user, postObject}) =>{
 
     <Step key={`page/1`} id={'1'}>
         <div className="flex items-center justify-start h-full w-full relative">
-          <TitleLinkFormEdit onNext={onNext} postObject={postObject} user={user} />
+          <TitleLinkFormEdit refetchPost={refetchPost} onNext={onNext} postObject={postObject} user={user} />
         </div>
     </Step>
     <Step key={`page/2`} id={'2'}>
@@ -184,29 +194,31 @@ const ToolSteps = ({user, postObject}) =>{
               <div className="my-2 mb-6">
               {postObject.status=='draft'?
               <>
-                <h1 className="text-3xl font-bold mx-auto mb-2">Your tool is submitted!</h1>
-                <p className="text-xl mt-4 text-gray-600">Thanks for submitting your tool. Our team will review and then publish your submission if it is relevant to the Prototypr audience.</p>
+                <h1 className="text-3xl font-semibold mx-auto mb-2">Thanks for your submission!</h1>
+                <p className="text-lg mt-4 text-gray-600">Thanks for submitting your tool. Our team will review and then publish your submission if it is relevant to the Prototypr audience.</p>
               </>
               :
               <>
-                <h1 className="text-3xl font-bold mx-auto mb-2">Your tool has been updated!</h1>
+                <h1 className="text-lg font-bold mx-auto mb-2">Your tool has been updated!</h1>
                 {/* <p className="text-xl my-4 text-gray-600">Thanks for submitting your tool. Our team will review and then publish your submission if it is relevant to the Prototypr audience.</p> */}
               </>
               }
-              <p className="text-xl mt-4 mb-6 text-gray-600">If you have a special offer or discount for the Prototypr audience, you can also create an offer for your tool to be featured on our Designer Deals page.</p>
+              <p className="text-lg mt-4 mb-6 text-gray-600">If you have a special offer or discount for the Prototypr audience, you can also create an offer for your tool to be featured on our Designer Deals page.</p>
               <div className="flex">
-              <Link href={`/toolbox/post/${postObject?.id}/deal`}>
+              {/* <Link href={`/toolbox/post/${postObject?.id}/deal`}>
                 <Button variant="confirmMedium">
                   Add a deal
                 </Button>
-              </Link>
-              <div className="ml-3">
+              </Link> */}
+              {/* <div className="ml-3"> */}
                 <Link href="/dashboard">
-                  <Button variant="confirmMediumSecondary">
+                  <Button 
+                                  className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 hover:bg-blue-600 disabled:cursor-not-allowed"
+                  variant="confirmMediumSecondary">
                     Continue to dashboard
                   </Button>
                 </Link>
-              </div>
+              {/* </div> */}
 
               </div>
               </div>