Add Reset Form button

newjersey · May 14, 2020 · c00929c · c00929c
1 parent 44264e0
commit c00929c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/public/form.yml b/public/form.yml
@@ -37,6 +37,9 @@ instructions:
   'download:button':
     en: Download
     es: Descargar
+  reset:
+    en: Reset Form
+    es: Restablecer formulario
   submit-instructions:
     en: |-
       Please review and verify the information section below. If there are errors in any section, you may select 'Edit' to revisit that page of your application.

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,10 +1,12 @@
 import React, { useContext } from 'react'
+import { Button } from './helper-components'
 import { Card } from './helper-components'
 import { Box, Text, Image, ResponsiveContext, Heading, Paragraph } from 'grommet'
 // import { LanguageContext } from '../contexts/language'
 import { FormContext } from '../contexts/form'
 import { range } from 'lodash'
 import { StyledSelect } from './helper-components/StyledSelect'
+import { Refresh } from 'grommet-icons'
 // import amplitude from 'amplitude-js'
 
 interface Props {
@@ -21,7 +23,7 @@ interface Props {
 
 const Sidebar: React.FC<Props> = (props) => {
   const { pages } = props
-  const { translateByID, form, pageIndex, setPage, completion } = useContext(FormContext)
+  const { resetForm, translateByID, form, pageIndex, setPage, completion } = useContext(FormContext)
   // const { language, setLanguage } = useContext(LanguageContext)
   const size = useContext(ResponsiveContext)
 
@@ -92,6 +94,13 @@ const Sidebar: React.FC<Props> = (props) => {
             >
               <Box style={{ width: `${percent}%`, height: '100%', borderRadius: '12px', background: '#3A80C2' }} />
             </Box>
+            <Box margin={{ top: '24px' }}>
+              <Button
+                onClick={resetForm}
+                label={translateByID('reset')}
+                icon={<Refresh style={{ marginRight: '4px' }} />}
+              />
+            </Box>
           </Box>
           <Box margin={{ top: '24px' }}>
             {size === 'large' ? (

diff --git a/src/contexts/form.tsx b/src/contexts/form.tsx
@@ -28,6 +28,7 @@ export interface FormState {
   completion: Record<string, boolean>
   pageIndex: number
   setPage: (index: number) => void
+  resetForm: () => void
 }
 
 const initialState = {
@@ -262,6 +263,13 @@ export const FormProvider: React.FC = (props) => {
   //   setPrefilled(true)
   // })
 
+  const resetForm = () => {
+    setValues({})
+    setErrors({})
+    setPageIndex(0)
+    setCompletion({})
+  }
+
   useEffect(() => {
     if (form) {
       // Update the page title
@@ -318,6 +326,7 @@ ${formValidationError.error ? '```' + JSON.stringify(formValidationError.error,
     completion,
     pageIndex,
     setPage,
+    resetForm,
   }
 
   return <FormContext.Provider value={value}>{props.children}</FormContext.Provider>