refactor: change folder structure

02-Project-Based/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
+<Route path="/:vehicleId/:fromCityId/:toCityId" element={<SearchResultsPage />} />
+```
+
+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));
+```