diff --git a/ProjectOrientedSessions/Session06/Session06 Additional Info.md b/ProjectOrientedSessions/Session06/Session06 Additional Info.md new file mode 100644 index 0000000..a4953b2 --- /dev/null +++ b/ProjectOrientedSessions/Session06/Session06 Additional Info.md @@ -0,0 +1,92 @@ +## `SearchResultsPage` + +This page is responsible for: +1. **Reading route parameters and query strings from the URL** +2. **Sending those values as a form to the backend** +3. **Showing the result (or loading/error message)** + + +--- +### ✅ 1. **Route Parameters** +When you define this route in `App.jsx`: + +```jsx +} /> +``` + +It means the URL will look like: +``` +/1/21/45 +``` +Those values are extracted using: +```js +const { vehicleId, fromCityId, toCityId } = useParams(); +``` + +🔹 `useParams()` comes from React Router and gives you access to the dynamic parts of the URL. + +--- + +### ✅ 2. **Query String Parameters** +Suppose your full URL is: + +``` +/1/21/45?departing=2025-06-01&arriving=2025-06-10 +``` + +These extra values after the `?` are **query string parameters**. They're accessed using: + +```js +const query = useQuery(); // Custom helper +const departing = query.get("departing"); +const arriving = query.get("arriving"); +``` + +The helper `useQuery()` is: + +```js +function useQuery() { + return new URLSearchParams(useLocation().search); +} +``` + +This uses React Router's `useLocation()` to access the full URL, and then parses the query string. + +--- + +### ✅ 3. **Parsing and Converting Values** + +React Router gives you everything as strings. So: + +```js +const vehicleTypeId = vehicleId ? parseInt(vehicleId, 10) : 1; +const fromId = fromCityId ? parseInt(fromCityId, 10) : undefined; +const toId = toCityId ? parseInt(toCityId, 10) : undefined; +``` + +This ensures you have **numbers**, not strings, when building your form object. + +--- + +### ✅ 4. **Building the Search Form and Fetching Data** + +Now all data is combined into one `form` object: + +```js +const form = { + vehicleTypeId, + fromCityId: fromId, + toCityId: toId, + startDate: departing || null, + endDate: arriving || null, +}; +``` + +Then it sends that to the backend: + +```js +agent.TransportationSearch.search(form) + .then(setResults) + .catch(err => console.error(err)) + .finally(() => setLoading(false)); +``` diff --git a/ProjectOrientedSessions/Session06/Session06 Frontend.md b/ProjectOrientedSessions/Session06/Session06 Frontend.md index e99e80f..a89bd2a 100644 --- a/ProjectOrientedSessions/Session06/Session06 Frontend.md +++ b/ProjectOrientedSessions/Session06/Session06 Frontend.md @@ -1,9 +1,11 @@ -# Branching +# 🛠️ Task Checklist + +## 🚧Branching - [ ]  Create the feature/navbar branch based on develop -# Adding a Navbar -## 🔹 What Is a Navbar? +## Adding a Navbar +### 🔹 What Is a Navbar? - A **navigation bar (navbar)** is a UI element typically placed at the **top** or **side** of a web app. - [ ] Use a `