Skip to content

Lesson 5 cleanup #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaygiang merged 4 commits into from
Aug 4, 2025
Merged

Lesson 5 cleanup #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8bd8aa2
Update lesson-2 and lesson-5 to enhance form validation by standardiz…
jaygiang Jun 9, 2025
ea0504b
Fix syntax
jaygiang Jun 9, 2025
e17c115
Update showLineNumber values
jaygiang Jun 10, 2025
647e849
Add missing model and component steps
jaygiang Jun 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/learn/lesson-1.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
42 changes: 21 additions & 21 deletions docs/learn/lesson-2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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}
```

Expand All @@ -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 || "" }));
};
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
```

Expand All @@ -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
}
Expand Down
2 changes: 1 addition & 1 deletion docs/learn/lesson-3.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand Down
10 changes: 4 additions & 6 deletions docs/learn/lesson-4.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
Loading