544 - Polish persisted form example (#545)

* Add success message when indexedDB submitted

* Bold code

* Added h3 to step 4

---------

Co-authored-by: theangchen <theangchen@yahoo.com>

Author: jaygiang

examples/persisted-form/README.md

@@ -6,7 +6,7 @@ This example shows you how to configure a persisted form that saves the data loc
 
 The `FormWrapper` component is a context provider for form data. It provides a context that contains the current form data, a function to update the form data, and a function to handle form input changes.
 
-Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples)
+Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples).
 
 ### Imports
 
@@ -53,7 +53,8 @@ The `useFormState` hook is a custom hook for accessing the `FormContext`.
 
 ## Steps
 
-1. In the `index.jsx` file, import the `OfflineStorageWrapper`, then create a configuration object:
+### 1. Configure Offline Storage
+In the `index.jsx` file, import the `OfflineStorageWrapper`, then create a configuration object:
 
 ```jsx
 import { OfflineStorageWrapper } from "@nmfs-radfish/react-radfish";
@@ -72,7 +73,8 @@ const offlineStorageConfig = {
 };
 ```
 
-2. In the `index.jsx` file, wrap the `App` component with `OfflineStorageWrapper` and pass the config object:
+### 2. Wrap the App Component with OfflineStorageWrapper
+In the `index.jsx` file, wrap the `App` component with `OfflineStorageWrapper` and pass the config object:
 
 ```jsx
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -86,8 +88,10 @@ root.render(
 );
 ```
 
-3. Use the provided `FormWrapper` context provider in this example, located in the `/src/contexts/FormWrapper.jsx` directory, to wrap child form components in a parent component. In this example `App.jsx` is the parent component.
-   1. Create a `handleOnSubmit` handler and pass it to the wrapper:
+### 3. Add FormWrapper Context Provider
+Use the provided `FormWrapper` context provider in this example, located in the `/src/contexts/FormWrapper.jsx` directory, to wrap child form components in a parent component. In this example `App.jsx` is the parent component.
+
+Create a `handleOnSubmit` handler and pass it to the wrapper:
 
 ```jsx
 const { createOfflineData } = useOfflineStorage();
@@ -114,7 +118,8 @@ return (
 );
 ```
 
-4. Construct your form using the `react-radfish` components. See the `/src/pages/Form.jsx` file to see how to construct the form and use the methods available from `FormWrapper`.
+### 4. Build the Form
+Construct your form using the `react-radfish` components. See the `/src/pages/Form.jsx` file to see how to construct the form and use the methods available from `FormWrapper`.
 
 ## Preview
 This example will render as shown in this screenshot:

examples/persisted-form/src/App.jsx

@@ -25,7 +25,7 @@ const FormInfoAnnotation = () => {
   return (
     <Alert type="info" heading="Information" headingLevel="h2">
       This is an example of a live form with data populated from IndexDB. The form data is stored in
-      the browser's IndexedDB using methods from the <code>useOfflineStorage</code> hook, which uses
+      the browser's IndexedDB using methods from the <strong>useOfflineStorage</strong> hook, which uses
       Dexie.js behind the scenes.
       <br />
       <br />

examples/persisted-form/src/pages/Home.jsx

@@ -2,7 +2,7 @@ import "../index.css";
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { FormGroup, TextInput, Label, Button, Form } from "@trussworks/react-uswds";
-import { useOfflineStorage } from "@nmfs-radfish/react-radfish";
+import { useOfflineStorage, dispatchToast } from "@nmfs-radfish/react-radfish";
 
 const HomePage = () => {
   const navigate = useNavigate();
@@ -35,8 +35,10 @@ const HomePage = () => {
     if (!id) {
       const formId = await createOfflineData("formData", values);
       navigate(`${formId}`);
+      dispatchToast({ status: "success", message: "Your form has been successfully saved offline! You can now revisit it anytime." });
     } else {
-      await saveOfflineData("formData", [formData]);
+      await saveOfflineData("formData", [values]);
+      dispatchToast({ status: "success", message: "Your changes have been saved! The form has been updated successfully." });
       // after updating the data in IndexedDB, we can execute any other logic here
       // eg. execute a POST request to an API
     }
@@ -123,4 +125,4 @@ const HomePage = () => {
   );
 };
 
-export default HomePage
+export default HomePage;