Merge pull request #543 from NMFS-RADFish/542-polish-on-device-storage

542 - Polish on device storage

Author: jaygiang

examples/on-device-storage/README.md

@@ -11,7 +11,8 @@ Learn more about RADFish examples at the official [documentation](https://nmfs-r
 
 ## 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";
@@ -33,7 +34,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 
+In the `index.jsx` file, wrap the `App` component with `OfflineStorageWrapper` and pass the config object:
 
 ```jsx
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -49,7 +51,7 @@ root.render(
 
 ## `useOfflineStorage` Hook API
 
-1. Use the `useOfflineStorage` context hook in any child components. See the `App.jsx` file for examples of how to use the provided hooks.
+Use the `useOfflineStorage` context hook in any child components. See the `App.jsx` file for examples of how to use the provided hooks.
 
 The `useOfflineStorage` hook returns an object with the following methods:
 

examples/on-device-storage/src/pages/Home.jsx

@@ -42,7 +42,6 @@ const HomePage = () => {
     const updateData = async (e, data) => {
       e.preventDefault();
 
-      // const dataToUpdate = formData.find((data) => data.uuid === uuid);
       const updatedData = {
         ...data,
         numberOfFish: Number((data.numberOfFish += 1)),
@@ -75,19 +74,19 @@ const HomePage = () => {
       <div className="grid-container">
         <h1>On Device Storage Example</h1>
         <Alert type="info" heading="Information" headingLevel="h2">
-          This is an example of how to use the <code>OfflineStorageWrapper</code>{" "}
-          context and the provided <code>useOfflineStorage</code> hook to interact
+          This is an example of how to use the <strong>OfflineStorageWrapper</strong>{" "}
+          context and the provided <strong>useOfflineStorage</strong> hook to interact
           with on-device storage. This example demonstrates how to create, read,
           update, and delete data from IndexedDB. The{" "}
-          <code>useOfflineStorage</code> hooks uses Dexie.js under the hood.
+          <strong>useOfflineStorage</strong> hooks uses Dexie.js under the hood.
           <br />
           <br />
           Please note that if you choose to test this example with the network
           connection offline, you won’t be able to refresh the page. To do this,
           you must ensure that Service Worker is registered, which requires the
           example to be served as a production build using{" "}
-          <code>npm run build</code> and serving that output using a basic HTTP
-          server such as <code>serve build</code>
+          <strong>npm run build</strong> and serving that output using a basic HTTP
+          server such as <strong>serve build</strong>.
           <br />
           <br />
           <Link