Add clear button to wipe proposals.

DA0-DA0 · Nov 8, 2023 · 3752bb9 · 3752bb9
1 parent 6ec9577
commit 3752bb9
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/stateful/components/dao/CreateDaoProposal.tsx b/packages/stateful/components/dao/CreateDaoProposal.tsx
@@ -81,6 +81,12 @@ export const CreateDaoProposal = () => {
     ),
   })
 
+  // Reset form to defaults and clear latest proposal save.
+  const clear = useCallback(() => {
+    formMethods.reset(makeDefaultNewProposalForm())
+    setLatestProposalSave({})
+  }, [formMethods, makeDefaultNewProposalForm, setLatestProposalSave])
+
   const [proposalCreatedCardProps, setProposalCreatedCardProps] =
     useRecoilState(proposalCreatedCardPropsAtom)
 
@@ -311,6 +317,7 @@ export const CreateDaoProposal = () => {
   return (
     <FormProvider {...formMethods}>
       <CreateProposal
+        clear={clear}
         newProposal={
           <SuspenseLoader
             fallback={<PageLoader />}

diff --git a/packages/stateless/pages/CreateProposal.tsx b/packages/stateless/pages/CreateProposal.tsx
@@ -1,17 +1,25 @@
+import { Clear } from '@mui/icons-material'
 import { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DaoTabId } from '@dao-dao/types'
 
-import { PageHeaderContent, RightSidebarContent } from '../components'
+import {
+  IconButton,
+  PageHeaderContent,
+  RightSidebarContent,
+  Tooltip,
+} from '../components'
 
-export interface CreateProposalProps {
+export type CreateProposalProps = {
   newProposal: ReactNode
+  clear?: () => void
   rightSidebarContent: ReactNode
 }
 
 export const CreateProposal = ({
   newProposal,
+  clear,
   rightSidebarContent,
 }: CreateProposalProps) => {
   const { t } = useTranslation()
@@ -31,7 +39,20 @@ export const CreateProposal = ({
       />
 
       <div className="mx-auto flex max-w-5xl flex-col items-stretch gap-6">
-        <p className="title-text text-text-body">{t('title.newProposal')}</p>
+        <div className="flex flex-row items-center justify-between gap-4">
+          <p className="title-text text-text-body">{t('title.newProposal')}</p>
+
+          {clear && (
+            <Tooltip title={t('button.clear')}>
+              <IconButton
+                Icon={Clear}
+                circular
+                onClick={clear}
+                variant="ghost"
+              />
+            </Tooltip>
+          )}
+        </div>
 
         {newProposal}
       </div>