Merge pull request nmfs-ocio#195 from NMFS-RADFish/lesson-5-cleanup

Lesson 5 cleanup

Author: jaygiang

docs/learn/lesson-1.mdx

@@ -105,7 +105,7 @@ onClick={() => {
 ```
 
 **The complete `Button` component with the new `onClick` handler will look like this:**
-```jsx title="src/pages/Home.jsx" showLineNumbers=293
+```jsx title="src/pages/Home.jsx" showLineNumbers=309
 <Button
   type="button"
   className="bg-primary hover:bg-primary-darker width-full"

docs/learn/lesson-2.mdx

@@ -48,7 +48,7 @@ These components work together to create accessible, well-structured forms that
 
 **Add the `FormGroup`, `Label`, and `DatePicker` input within the `Form` component:**
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=272
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=287
 // diff-add-start
 <Form onSubmit={handleSubmit} large>
   <FormGroup>
@@ -65,7 +65,7 @@ These components work together to create accessible, well-structured forms that
       name="tripDate"
       defaultValue={formData.tripDate}
       onChange={handleDateChange}
-      aria-describedby="tripDateHint"
+      aria-describedby="tripDate-hint"
       required
     />
     <span id="tripDateHint" className="usa-sr-only">
@@ -82,7 +82,7 @@ Let's look at two key aspects of how React manages state with this form:
 
 1. **Initial State with `defaultValue`**:
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=289
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=303
    defaultValue={formData.tripDate}
    ```
 
@@ -102,14 +102,14 @@ Let's look at two key aspects of how React manages state with this form:
 
 2. **Updating State with `onChange`**:
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=290
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=304
    onChange = { handleDateChange };
    ```
 
    - The `onChange` attribute is a required prop for controlled inputs. It is called whenever the input's value changes (on every keystroke or selection). Without this handler, React would revert the input to its original value after each change.
    - When a user selects a date, the `handleDateChange` function is called
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=149
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=162
    const handleDateChange = (value) => {
      setFormData((prevData) => ({ ...prevData, tripDate: value || "" }));
    };
@@ -148,7 +148,7 @@ import {
 
 Let's add the `TimePicker` input below the `DatePicker` form group:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=315
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=325
 // diff-add-start
 <FormGroup>
   <Label htmlFor="startTime" className="input-time-label" requiredMarker>
@@ -162,9 +162,9 @@ Let's add the `TimePicker` input below the `DatePicker` form group:
     minTime="00:00"
     maxTime="23:45"
     step={15}
-    aria-describedby="startTimeHint"
+    aria-describedby="start-time-hint"
   />
-  <span id="startTimeHint" className="usa-sr-only">
+  <span id="start-time-hint" className="usa-sr-only">
     Please enter or select the time you started fishing.
   </span>
 </FormGroup>
@@ -209,7 +209,7 @@ import {
 
 Add the following code below the `TimePicker` form group:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=352
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=362
 // diff-add-start
 <FormGroup>
   <Label htmlFor="startWeather" requiredMarker>
@@ -220,14 +220,14 @@ Add the following code below the `TimePicker` form group:
     name="startWeather"
     value={formData.startWeather}
     onChange={handleInputChange}
-    aria-describedby="startWeatherHint"
+    aria-describedby="start-weather-hint"
   >
     <option value="">-Select-</option>
     <option value="Sunny">Sunny</option>
     <option value="Cloudy">Cloudy</option>
     <option value="Rainy">Rainy</option>
   </Select>
-  <span id="startWeatherHint" className="usa-sr-only">
+  <span id="start-weather-hint" className="usa-sr-only">
     Please select the weather conditions at the start of your fishing trip.
   </span>
 </FormGroup>
@@ -240,7 +240,7 @@ Add the following code below the `TimePicker` form group:
 - `onChange={handleInputChange}` uses the standard input handler (already present) because the `Select` component behaves like a standard HTML select element in this regard.
 - We define the available weather options using standard HTML `<option>` tags within the `Select` component. The first option has an empty `value` to represent the default, unselected state.
 
-The complete **Form** will look like this:
+The complete **Form** will look like this: 
 
 ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=272
 // diff-add-start
@@ -259,10 +259,10 @@ The complete **Form** will look like this:
       name="tripDate"
       defaultValue={formData.tripDate}
       onChange={handleDateChange}
-      aria-describedby="tripDateHint"
+      aria-describedby="trip-date-hint"
       required
     />
-    <span id="tripDateHint" className="usa-sr-only">
+    <span id="trip-date-hint" className="usa-sr-only">
       Please enter or select the date of your fishing trip.
     </span>
   </FormGroup>
@@ -278,9 +278,9 @@ The complete **Form** will look like this:
       minTime="00:00"
       maxTime="23:45"
       step={15}
-      aria-describedby="startTimeHint"
+      aria-describedby="start-time-hint"
     />
-    <span id="startTimeHint" className="usa-sr-only">
+    <span id="start-time-hint" className="usa-sr-only">
       Please enter or select the time you started fishing.
     </span>
   </FormGroup>
@@ -293,18 +293,18 @@ The complete **Form** will look like this:
       name="startWeather"
       value={formData.startWeather}
       onChange={handleInputChange}
-      aria-describedby="startWeatherHint"
+      aria-describedby="start-weather-hint"
     >
       <option value="">-Select-</option>
       <option value="Sunny">Sunny</option>
       <option value="Cloudy">Cloudy</option>
       <option value="Rainy">Rainy</option>
     </Select>
-    <span id="startWeatherHint" className="usa-sr-only">
+    <span id="start-weather-hint" className="usa-sr-only">
       Please select the weather conditions at the start of your fishing trip.
     </span>
   </FormGroup>
-</Form>;
+</Form>
 // diff-add-end
 ```
 
@@ -316,15 +316,15 @@ Before we learn how to save data to storage in the next lesson, let's first see
 
 Open `src/pages/StartTrip.jsx` and locate the `handleSubmit` function. Replace the existing submission logic with the following code that will log the form data to the console:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=191
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=214
 if (Object.keys(newErrors).length === 0) {
   //diff-add-start
   console.log("Form Data:", {
     tripDate: formData.tripDate,
     startWeather: formData.startWeather,
     startTime: formData.startTime,
     status: "in-progress",
-    step: 2,
+    step: 2
   });
   //diff-add-end
 }

docs/learn/lesson-3.mdx

@@ -77,7 +77,7 @@ This schema ensures data consistency and provides validation when we create or u
 
 To save data, we first need to access the appropriate RADFish store and collection within our `handleSubmit` function.
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=202
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=203
 try {
   //diff-add-start
   const tripStore = app.stores["trip"];

docs/learn/lesson-4.mdx

@@ -12,7 +12,7 @@ RADFish organizes different types of data into separate **collections**. While o
 
 Open `src/index.jsx` and locate the `collections` section within the trip store. **You'll need to add the Catch collection schema after the Form collection as shown in the highlighted lines below:**
 
-```jsx title="src/index.jsx" showLineNumbers=60
+```jsx title="src/index.jsx" showLineNumbers=66
         },
       },
       // diff-add-start
@@ -91,8 +91,7 @@ First, we need to access the RADFish Catch collection within our form submission
 
 Open `src/pages/CatchLog.jsx` and locate the `handleAddCatch` function. Find the comment `// Create record in RADFish/IndexedDB` and replace it with the following code:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=247
-// Create record in RADFish/IndexedDB
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=265
 // diff-add-start
 await Catch.create(newCatchData);
 // diff-add-end
@@ -111,7 +110,7 @@ After successfully saving to IndexedDB, we need to update React's component stat
 
 In the same `handleAddCatch` function, below the `await Catch.create(newCatchData)`, add the following code:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=250
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=269
 // diff-add-start
 setCatches(prev => [newCatchData, ...prev]);
 // diff-add-end
@@ -133,8 +132,7 @@ This triggers React's re-rendering process, immediately updating the "Recorded C
 
 The complete `handleAddCatch` function also handles form cleanup after successful submission. Here's how the full process works:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=252
-// Reset the form
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=272
 setCurrentCatch({ species: "", weight: "", length: "", latitude: "", longitude: "", time: "" });
 setCatchTimeKey(prevKey => prevKey + 1); // Reset TimePicker
 setSubmitted(false); // Reset submission status