- ('date-desc')
+ const [searchParams, setSearchParams] = useSearchParams()
+
+ const query = searchParams.get('q') ?? ''
+ const sortParam = searchParams.get('sort')
+ const sort = isSightingSortOption(sortParam) ? sortParam : DEFAULT_SORT
+
+ // Replace instead of push so each keystroke doesn't add a history entry.
+ function updateParam(key: string, value: string, defaultValue: string) {
+ setSearchParams(
+ (previous) => {
+ const next = new URLSearchParams(previous)
+ if (value === defaultValue) next.delete(key)
+ else next.set(key, value)
+ return next
+ },
+ { replace: true },
+ )
+ }
+
+ const setQuery = (nextQuery: string) => updateParam('q', nextQuery, '')
+ const setSort = (nextSort: SightingSortOption) =>
+ updateParam('sort', nextSort, DEFAULT_SORT)
+
const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS)
const results = useMemo(
diff --git a/frontend/src/hooks/use-sighting.ts b/frontend/src/hooks/use-sighting.ts
new file mode 100644
index 0000000..491a7ed
--- /dev/null
+++ b/frontend/src/hooks/use-sighting.ts
@@ -0,0 +1,10 @@
+import { mockSightings } from '../data/mock-sightings'
+import type { UfoSighting } from '../types/ufo-sighting'
+
+/**
+ * Looks up a single sighting by id. Wrapped in a hook so the detail page
+ * won't need to change when this becomes a GraphQL query.
+ */
+export function useSighting(id: string | undefined): UfoSighting | undefined {
+ return mockSightings.find((sighting) => sighting.id === id)
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index eff7ccc..b10eb49 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,15 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.tsx";
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { HashRouter } from 'react-router'
+import './index.css'
+import App from './App.tsx'
-createRoot(document.getElementById("root")!).render(
+// Hash URLs (/project2/#/sightings/1) need no server rewrite rules, so
+// refreshing or sharing a deep link works on the course VM as-is.
+createRoot(document.getElementById('root')!).render(
-
+
,
-);
+)
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
new file mode 100644
index 0000000..450ca9a
--- /dev/null
+++ b/frontend/src/pages/SearchPage.tsx
@@ -0,0 +1,21 @@
+import SearchBar from '../components/SearchBar'
+import SightingList from '../components/SightingList'
+import { useSightingSearch } from '../hooks/use-sighting-search'
+
+function SearchPage() {
+ const { query, setQuery, sort, setSort, results } = useSightingSearch()
+
+ return (
+ <>
+
+ {backLink}
+
+
+
+
+ )
+}
+
+export default SightingDetailPage
diff --git a/frontend/src/types/ufo-sighting.ts b/frontend/src/types/ufo-sighting.ts
index cd3e2b1..3689dc3 100644
--- a/frontend/src/types/ufo-sighting.ts
+++ b/frontend/src/types/ufo-sighting.ts
@@ -22,5 +22,18 @@ export interface UfoSighting {
longitude: number
}
-export type SightingSortOption =
- 'date-desc' | 'date-asc' | 'city-asc' | 'shape-asc'
+// Kept as a runtime list so values read from the URL can be validated.
+export const sightingSortOptions = [
+ 'date-desc',
+ 'date-asc',
+ 'city-asc',
+ 'shape-asc',
+] as const
+
+export type SightingSortOption = (typeof sightingSortOptions)[number]
+
+export function isSightingSortOption(
+ value: string | null,
+): value is SightingSortOption {
+ return sightingSortOptions.some((option) => option === value)
+}
diff --git a/frontend/src/utils/format-sighting.ts b/frontend/src/utils/format-sighting.ts
new file mode 100644
index 0000000..db18eec
--- /dev/null
+++ b/frontend/src/utils/format-sighting.ts
@@ -0,0 +1,26 @@
+import type { UfoSighting } from '../types/ufo-sighting'
+
+export function formatDate(date: string) {
+ return new Intl.DateTimeFormat('en', {
+ dateStyle: 'medium',
+ }).format(new Date(date))
+}
+
+export function formatDuration(seconds: number) {
+ if (seconds < 60) return `${seconds} sec`
+
+ const minutes = Math.floor(seconds / 60)
+ const remainingSeconds = seconds % 60
+ if (remainingSeconds === 0) return `${minutes} min`
+
+ return `${minutes} min ${remainingSeconds} sec`
+}
+
+export function formatLocation(sighting: UfoSighting) {
+ const region = [sighting.state, sighting.country]
+ .filter(Boolean)
+ .join(', ')
+ .toUpperCase()
+
+ return region ? `${sighting.city}, ${region}` : sighting.city
+}
diff --git a/package-lock.json b/package-lock.json
index 6788c23..4b44ffc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
"leaflet": "^1.9.4",
"react": "^19.2.8",
"react-dom": "^19.2.8",
- "react-leaflet": "^5.0.0"
+ "react-leaflet": "^5.0.0",
+ "react-router": "^8.4.0"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
@@ -836,6 +837,12 @@
"react-dom": "^19.0.0"
}
},
+ "node_modules/@remix-run/route-pattern": {
+ "version": "0.22.1",
+ "resolved": "https://registry.npmjs.org/@remix-run/route-pattern/-/route-pattern-0.22.1.tgz",
+ "integrity": "sha512-czdGJWh09Lapvcqt7Vb09KlrU2PhRJ8xQaI+AItTuD9aDJ5MAgxnS38lnys6Ll+6RJEqPiaUqTwIQhVLwFvv+w==",
+ "license": "MIT"
+ },
"node_modules/@rolldown/binding-android-arm-eabi": {
"version": "1.2.11",
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.11.tgz",
@@ -1837,6 +1844,12 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/cookie-es": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz",
+ "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==",
+ "license": "MIT"
+ },
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3281,6 +3294,28 @@
"react-dom": "^19.0.0"
}
},
+ "node_modules/react-router": {
+ "version": "8.4.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.4.0.tgz",
+ "integrity": "sha512-JtydAkBvU9UTEe5qNC+POhu+ZBNM7rlKY2IegwXc7Idj7xfRG16x5RZrw3mju+XlqBxfvb2ky9P3jUp9WyWC1g==",
+ "license": "MIT",
+ "dependencies": {
+ "@remix-run/route-pattern": "^0.22.1",
+ "cookie-es": "^3.1.1"
+ },
+ "engines": {
+ "node": ">=22.22.0"
+ },
+ "peerDependencies": {
+ "react": ">=19.2.7",
+ "react-dom": ">=19.2.7"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/redent": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
{formatLocation(sighting)}
++ {/* Carries the current search so the detail page can + link back to the same results. */} + + {formatLocation(sighting)} + +
@@ -120,4 +70,4 @@ function SightingList({ sightings }: SightingListProps) { ) } -export default SightingList \ No newline at end of file +export default SightingList diff --git a/frontend/src/components/SightingMap.css b/frontend/src/components/SightingMap.css new file mode 100644 index 0000000..8a3eb6f --- /dev/null +++ b/frontend/src/components/SightingMap.css @@ -0,0 +1,9 @@ +.sighting-map { + overflow: hidden; + position: relative; +} + +.sighting-map .leaflet-container { + height: 100%; + width: 100%; +} diff --git a/frontend/src/components/SightingMap.tsx b/frontend/src/components/SightingMap.tsx new file mode 100644 index 0000000..9af6281 --- /dev/null +++ b/frontend/src/components/SightingMap.tsx @@ -0,0 +1,72 @@ +import L from 'leaflet' +import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet' +import type { UfoSighting } from '../types/ufo-sighting' +import { formatLocation } from '../utils/format-sighting' +import 'leaflet/dist/leaflet.css' +import './SightingMap.css' + +import markerIcon from 'leaflet/dist/images/marker-icon.png' +import markerIconRetina from 'leaflet/dist/images/marker-icon-2x.png' +import markerShadow from 'leaflet/dist/images/marker-shadow.png' + +// Leaflet's default icon resolves image paths at runtime, which breaks +// under Vite's bundling, so the icon is built from imported assets. +const marker = L.icon({ + iconUrl: markerIcon, + iconRetinaUrl: markerIconRetina, + shadowUrl: markerShadow, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41], +}) + +interface SightingMapProps { + sighting: UfoSighting + /** Static thumbnails in lists; pannable and zoomable on the detail page. */ + interactive?: boolean + zoom?: number + className?: string +} + +function SightingMap({ + sighting, + interactive = false, + zoom = 10, + className, +}: SightingMapProps) { + const position: [number, number] = [sighting.latitude, sighting.longitude] + + return ( +
+
+
+ {formatLocation(sighting)}
+
+
+
+ )
+}
+
+export default SightingMap
diff --git a/frontend/src/hooks/use-sighting-search.ts b/frontend/src/hooks/use-sighting-search.ts
index 3762a36..5b62139 100644
--- a/frontend/src/hooks/use-sighting-search.ts
+++ b/frontend/src/hooks/use-sighting-search.ts
@@ -1,19 +1,45 @@
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
+import { useSearchParams } from 'react-router'
import { mockSightings } from '../data/mock-sightings'
-import type { SightingSortOption } from '../types/ufo-sighting'
+import {
+ isSightingSortOption,
+ type SightingSortOption,
+} from '../types/ufo-sighting'
import { searchSightings } from '../utils/filter-sightings'
import { useDebouncedValue } from './use-debounced-value'
const SEARCH_DEBOUNCE_MS = 300
+const DEFAULT_SORT: SightingSortOption = 'date-desc'
/**
* Owns the search query and sort order and derives the matching sightings.
- * Kept out of the page components so the search bar and the result view
- * can share it, and so the data source can later be swapped for GraphQL.
+ * Both live in the URL (?q=...&sort=...) so they survive navigating to a
+ * detail page and back, a page refresh, and can be shared as a link.
*/
export function useSightingSearch() {
- const [query, setQuery] = useState('')
- const [sort, setSort] = useState
+ {backLink}
+
+ )
+ }
+
+ return (
+ {title}
+There is no sighting with id โ{id}โ.
+{title}
+ +-
+
- Shape +
- {sighting.shape} +
- Duration +
- {formatDuration(sighting.durationSeconds)} +
+
+
+
+ {sighting.comments}
+