Add cancel button for editing all post types + bio (#310)

* Add cancel button when editing any post type

* Add cancel button when editing bio

---------

Co-authored-by: ekzyis <ek@stacker.news>

components/bounty-form.js

@@ -5,7 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize'
 import Countdown from './countdown'
 import AdvPostForm, { AdvPostInitial } from './adv-post-form'
 import FeeButton, { EditFeeButton } from './fee-button'
-import { InputGroup } from 'react-bootstrap'
+import { InputGroup, Button } from 'react-bootstrap'
 import { bountySchema } from '../lib/validate'
 import { SubSelectInitial } from './sub-select-form'
 
@@ -115,13 +115,16 @@ export function BountyForm ({
       <div className='mt-3'>
         {item
           ? (
-            <EditFeeButton
-              paidSats={item.meSats}
-              parentId={null}
-              text='save'
-              ChildButton={SubmitButton}
-              variant='secondary'
-            />
+            <div className='d-flex'>
+              <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+              <EditFeeButton
+                paidSats={item.meSats}
+                parentId={null}
+                text='save'
+                ChildButton={SubmitButton}
+                variant='secondary'
+              />
+            </div>
             )
           : (
             <FeeButton

components/discussion-form.js

@@ -106,10 +106,13 @@ export function DiscussionForm ({
               <Delete itemId={item.id} onDelete={() => router.push(`/items/${item.id}`)}>
                 <Button variant='grey-medium'>delete</Button>
               </Delete>
-              <EditFeeButton
-                paidSats={item.meSats}
-                parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
-              />
+              <div className='d-flex'>
+                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <EditFeeButton
+                  paidSats={item.meSats}
+                  parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
+                />
+              </div>
             </div>)
           : <FeeButton
               baseFee={1} parentId={null} text={buttonText}

components/job-form.js

@@ -1,6 +1,6 @@
 import { Checkbox, Form, Input, MarkdownInput, SubmitButton } from './form'
 import TextareaAutosize from 'react-textarea-autosize'
-import { InputGroup, Form as BForm, Col, Image } from 'react-bootstrap'
+import { InputGroup, Form as BForm, Col, Image, Button } from 'react-bootstrap'
 import { useEffect, useState } from 'react'
 import Info from './info'
 import AccordianItem from './accordian-item'
@@ -146,7 +146,12 @@ export default function JobForm ({ item, sub }) {
         {item && <StatusControl item={item} />}
         <div className='d-flex align-items-center mt-3'>
           {item
-            ? <SubmitButton variant='secondary'>save</SubmitButton>
+            ? (
+              <div className='d-flex'>
+                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <SubmitButton variant='secondary'>save</SubmitButton>
+              </div>
+              )
             : (
               <ActionTooltip overlayText='1000 sats'>
                 <SubmitButton variant='secondary'>post <small> 1000 sats</small></SubmitButton>

components/link-form.js

@@ -177,10 +177,13 @@ export function LinkForm ({ item, sub, editThreshold, children }) {
               <Delete itemId={item.id} onDelete={() => router.push(`/items/${item.id}`)}>
                 <Button variant='grey-medium'>delete</Button>
               </Delete>
-              <EditFeeButton
-                paidSats={item.meSats}
-                parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
-              />
+              <div className='d-flex'>
+                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <EditFeeButton
+                  paidSats={item.meSats}
+                  parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
+                />
+              </div>
             </div>)
           : (
             <div className='d-flex align-items-center'>

components/poll-form.js

@@ -94,10 +94,13 @@ export function PollForm ({ item, sub, editThreshold, children }) {
               <Delete itemId={item.id} onDelete={() => router.push(`/items/${item.id}`)}>
                 <Button variant='grey-medium'>delete</Button>
               </Delete>
-              <EditFeeButton
-                paidSats={item.meSats}
-                parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
-              />
+              <div className='d-flex'>
+                <Button className='mr-2' variant='grey-medium' onClick={() => router.push(`/items/${item.id}`)}>cancel</Button>
+                <EditFeeButton
+                  paidSats={item.meSats}
+                  parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
+                />
+              </div>
             </div>)
           : <FeeButton
               baseFee={1} parentId={null} text='post'

pages/[name]/index.js

@@ -18,7 +18,7 @@ import { bioSchema } from '../../lib/validate'
 export const getServerSideProps = getGetServerSideProps(USER_FULL, null,
   data => !data.user)
 
-export function BioForm ({ handleSuccess, bio }) {
+export function BioForm ({ handleDone, bio }) {
   const [upsertBio] = useMutation(
     gql`
       ${ITEM_FIELDS}
@@ -56,7 +56,7 @@ export function BioForm ({ handleSuccess, bio }) {
           if (error) {
             throw new Error({ message: error.toString() })
           }
-          handleSuccess && handleSuccess()
+          handleDone?.()
         }}
       >
         <MarkdownInput
@@ -65,7 +65,11 @@ export function BioForm ({ handleSuccess, bio }) {
           as={TextareaAutosize}
           minRows={6}
         />
-        <div className='mt-3'>
+        <div className='d-flex mt-3'>
+          <Button
+            className='mr-2' variant='grey-medium' type='button' onClick={handleDone}
+          >cancel
+          </Button>
           {bio?.text
             ? <EditFeeButton
                 paidSats={bio?.meSats}
@@ -102,14 +106,14 @@ export default function User ({ data: { user } }) {
         ? (edit
             ? (
               <div className={styles.create}>
-                <BioForm bio={user.bio} handleSuccess={() => setEdit(false)} />
+                <BioForm bio={user.bio} handleDone={() => setEdit(false)} />
               </div>)
             : <ItemFull item={user.bio} bio handleClick={setEdit} />
           )
         : (mine &&
           <div className={styles.create}>
             {create
-              ? <BioForm handleSuccess={() => setCreate(false)} />
+              ? <BioForm handleDone={() => setCreate(false)} />
               : (
                   mine &&
                     <div className='text-center'>