` and animate the wrapper instead.
+
+**Incorrect (animating SVG directly - no hardware acceleration):**
+
+```tsx
+function LoadingSpinner() {
+ return (
+
+
+ )
+}
+```
+
+**Correct (animating wrapper div - hardware accelerated):**
+
+```tsx
+function LoadingSpinner() {
+ return (
+
+
+
+
+ )
+}
+```
+
+This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md b/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
new file mode 100644
index 0000000..7e866f5
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
@@ -0,0 +1,40 @@
+---
+title: Use Explicit Conditional Rendering
+impact: LOW
+impactDescription: prevents rendering 0 or NaN
+tags: rendering, conditional, jsx, falsy-values
+---
+
+## Use Explicit Conditional Rendering
+
+Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render.
+
+**Incorrect (renders "0" when count is 0):**
+
+```tsx
+function Badge({ count }: { count: number }) {
+ return (
+
+ {count && {count} }
+
+ )
+}
+
+// When count = 0, renders:
0
+// When count = 5, renders:
5
+```
+
+**Correct (renders nothing when count is 0):**
+
+```tsx
+function Badge({ count }: { count: number }) {
+ return (
+
+ {count > 0 ? {count} : null}
+
+ )
+}
+
+// When count = 0, renders:
+// When count = 5, renders:
5
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md b/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
new file mode 100644
index 0000000..aa66563
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
@@ -0,0 +1,38 @@
+---
+title: CSS content-visibility for Long Lists
+impact: HIGH
+impactDescription: faster initial render
+tags: rendering, css, content-visibility, long-lists
+---
+
+## CSS content-visibility for Long Lists
+
+Apply `content-visibility: auto` to defer off-screen rendering.
+
+**CSS:**
+
+```css
+.message-item {
+ content-visibility: auto;
+ contain-intrinsic-size: 0 80px;
+}
+```
+
+**Example:**
+
+```tsx
+function MessageList({ messages }: { messages: Message[] }) {
+ return (
+
+ {messages.map(msg => (
+
+ ))}
+
+ )
+}
+```
+
+For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md b/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
new file mode 100644
index 0000000..32d2f3f
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
@@ -0,0 +1,46 @@
+---
+title: Hoist Static JSX Elements
+impact: LOW
+impactDescription: avoids re-creation
+tags: rendering, jsx, static, optimization
+---
+
+## Hoist Static JSX Elements
+
+Extract static JSX outside components to avoid re-creation.
+
+**Incorrect (recreates element every render):**
+
+```tsx
+function LoadingSkeleton() {
+ return
+}
+
+function Container() {
+ return (
+
+ {loading &&
+ )
+}
+```
+
+**Correct (reuses same element):**
+
+```tsx
+const loadingSkeleton = (
+
+)
+
+function Container() {
+ return (
+
+ {loading && loadingSkeleton}
+
+ )
+}
+```
+
+This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md b/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
new file mode 100644
index 0000000..5cf0e79
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
@@ -0,0 +1,82 @@
+---
+title: Prevent Hydration Mismatch Without Flickering
+impact: MEDIUM
+impactDescription: avoids visual flicker and hydration errors
+tags: rendering, ssr, hydration, localStorage, flicker
+---
+
+## Prevent Hydration Mismatch Without Flickering
+
+When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before React hydrates.
+
+**Incorrect (breaks SSR):**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+ // localStorage is not available on server - throws error
+ const theme = localStorage.getItem('theme') || 'light'
+
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Server-side rendering will fail because `localStorage` is undefined.
+
+**Incorrect (visual flickering):**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+ const [theme, setTheme] = useState('light')
+
+ useEffect(() => {
+ // Runs after hydration - causes visible flash
+ const stored = localStorage.getItem('theme')
+ if (stored) {
+ setTheme(stored)
+ }
+ }, [])
+
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Component first renders with default value (`light`), then updates after hydration, causing a visible flash of incorrect content.
+
+**Correct (no flicker, no hydration mismatch):**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+ return (
+ <>
+
+ {children}
+
+
+
+ )
+}
+```
+
+The inline script executes synchronously before showing the element, ensuring the DOM already has the correct value. No flickering, no hydration mismatch.
+
+This pattern is especially useful for theme toggles, user preferences, authentication states, and any client-only data that should render immediately without flashing default values.
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md b/.github/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md
new file mode 100644
index 0000000..24ba251
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md
@@ -0,0 +1,30 @@
+---
+title: Suppress Expected Hydration Mismatches
+impact: LOW-MEDIUM
+impactDescription: avoids noisy hydration warnings for known differences
+tags: rendering, hydration, ssr, nextjs
+---
+
+## Suppress Expected Hydration Mismatches
+
+In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these *expected* mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
+
+**Incorrect (known mismatch warnings):**
+
+```tsx
+function Timestamp() {
+ return
{new Date().toLocaleString()}
+}
+```
+
+**Correct (suppress expected mismatch only):**
+
+```tsx
+function Timestamp() {
+ return (
+
+ {new Date().toLocaleString()}
+
+ )
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-svg-precision.md b/.github/skills/vercel-react-best-practices/rules/rendering-svg-precision.md
new file mode 100644
index 0000000..6d77128
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-svg-precision.md
@@ -0,0 +1,28 @@
+---
+title: Optimize SVG Precision
+impact: LOW
+impactDescription: reduces file size
+tags: rendering, svg, optimization, svgo
+---
+
+## Optimize SVG Precision
+
+Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.
+
+**Incorrect (excessive precision):**
+
+```svg
+
+```
+
+**Correct (1 decimal place):**
+
+```svg
+
+```
+
+**Automate with SVGO:**
+
+```bash
+npx svgo --precision=1 --multipass icon.svg
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md b/.github/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md
new file mode 100644
index 0000000..0c1b0b9
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md
@@ -0,0 +1,75 @@
+---
+title: Use useTransition Over Manual Loading States
+impact: LOW
+impactDescription: reduces re-renders and improves code clarity
+tags: rendering, transitions, useTransition, loading, state
+---
+
+## Use useTransition Over Manual Loading States
+
+Use `useTransition` instead of manual `useState` for loading states. This provides built-in `isPending` state and automatically manages transitions.
+
+**Incorrect (manual loading state):**
+
+```tsx
+function SearchResults() {
+ const [query, setQuery] = useState('')
+ const [results, setResults] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+
+ const handleSearch = async (value: string) => {
+ setIsLoading(true)
+ setQuery(value)
+ const data = await fetchResults(value)
+ setResults(data)
+ setIsLoading(false)
+ }
+
+ return (
+ <>
+
handleSearch(e.target.value)} />
+ {isLoading &&
}
+
+
+ )
+}
+```
+
+**Correct (useTransition with built-in pending state):**
+
+```tsx
+import { useTransition, useState } from 'react'
+
+function SearchResults() {
+ const [query, setQuery] = useState('')
+ const [results, setResults] = useState([])
+ const [isPending, startTransition] = useTransition()
+
+ const handleSearch = (value: string) => {
+ setQuery(value) // Update input immediately
+
+ startTransition(async () => {
+ // Fetch and update results
+ const data = await fetchResults(value)
+ setResults(data)
+ })
+ }
+
+ return (
+ <>
+
handleSearch(e.target.value)} />
+ {isPending &&
}
+
+
+ )
+}
+```
+
+**Benefits:**
+
+- **Automatic pending state**: No need to manually manage `setIsLoading(true/false)`
+- **Error resilience**: Pending state correctly resets even if the transition throws
+- **Better responsiveness**: Keeps the UI responsive during updates
+- **Interrupt handling**: New transitions automatically cancel pending ones
+
+Reference: [useTransition](https://react.dev/reference/react/useTransition)
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md b/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
new file mode 100644
index 0000000..e867c95
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
@@ -0,0 +1,39 @@
+---
+title: Defer State Reads to Usage Point
+impact: MEDIUM
+impactDescription: avoids unnecessary subscriptions
+tags: rerender, searchParams, localStorage, optimization
+---
+
+## Defer State Reads to Usage Point
+
+Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
+
+**Incorrect (subscribes to all searchParams changes):**
+
+```tsx
+function ShareButton({ chatId }: { chatId: string }) {
+ const searchParams = useSearchParams()
+
+ const handleShare = () => {
+ const ref = searchParams.get('ref')
+ shareChat(chatId, { ref })
+ }
+
+ return
Share
+}
+```
+
+**Correct (reads on demand, no subscription):**
+
+```tsx
+function ShareButton({ chatId }: { chatId: string }) {
+ const handleShare = () => {
+ const params = new URLSearchParams(window.location.search)
+ const ref = params.get('ref')
+ shareChat(chatId, { ref })
+ }
+
+ return
Share
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md b/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md
new file mode 100644
index 0000000..47a4d92
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md
@@ -0,0 +1,45 @@
+---
+title: Narrow Effect Dependencies
+impact: LOW
+impactDescription: minimizes effect re-runs
+tags: rerender, useEffect, dependencies, optimization
+---
+
+## Narrow Effect Dependencies
+
+Specify primitive dependencies instead of objects to minimize effect re-runs.
+
+**Incorrect (re-runs on any user field change):**
+
+```tsx
+useEffect(() => {
+ console.log(user.id)
+}, [user])
+```
+
+**Correct (re-runs only when id changes):**
+
+```tsx
+useEffect(() => {
+ console.log(user.id)
+}, [user.id])
+```
+
+**For derived state, compute outside effect:**
+
+```tsx
+// Incorrect: runs on width=767, 766, 765...
+useEffect(() => {
+ if (width < 768) {
+ enableMobileMode()
+ }
+}, [width])
+
+// Correct: runs only on boolean transition
+const isMobile = width < 768
+useEffect(() => {
+ if (isMobile) {
+ enableMobileMode()
+ }
+}, [isMobile])
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md b/.github/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md
new file mode 100644
index 0000000..3d9fe40
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md
@@ -0,0 +1,40 @@
+---
+title: Calculate Derived State During Rendering
+impact: MEDIUM
+impactDescription: avoids redundant renders and state drift
+tags: rerender, derived-state, useEffect, state
+---
+
+## Calculate Derived State During Rendering
+
+If a value can be computed from current props/state, do not store it in state or update it in an effect. Derive it during render to avoid extra renders and state drift. Do not set state in effects solely in response to prop changes; prefer derived values or keyed resets instead.
+
+**Incorrect (redundant state and effect):**
+
+```tsx
+function Form() {
+ const [firstName, setFirstName] = useState('First')
+ const [lastName, setLastName] = useState('Last')
+ const [fullName, setFullName] = useState('')
+
+ useEffect(() => {
+ setFullName(firstName + ' ' + lastName)
+ }, [firstName, lastName])
+
+ return
{fullName}
+}
+```
+
+**Correct (derive during render):**
+
+```tsx
+function Form() {
+ const [firstName, setFirstName] = useState('First')
+ const [lastName, setLastName] = useState('Last')
+ const fullName = firstName + ' ' + lastName
+
+ return
{fullName}
+}
+```
+
+References: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md b/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md
new file mode 100644
index 0000000..e5c899f
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md
@@ -0,0 +1,29 @@
+---
+title: Subscribe to Derived State
+impact: MEDIUM
+impactDescription: reduces re-render frequency
+tags: rerender, derived-state, media-query, optimization
+---
+
+## Subscribe to Derived State
+
+Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
+
+**Incorrect (re-renders on every pixel change):**
+
+```tsx
+function Sidebar() {
+ const width = useWindowWidth() // updates continuously
+ const isMobile = width < 768
+ return
+}
+```
+
+**Correct (re-renders only when boolean changes):**
+
+```tsx
+function Sidebar() {
+ const isMobile = useMediaQuery('(max-width: 767px)')
+ return
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md b/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
new file mode 100644
index 0000000..b004ef4
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
@@ -0,0 +1,74 @@
+---
+title: Use Functional setState Updates
+impact: MEDIUM
+impactDescription: prevents stale closures and unnecessary callback recreations
+tags: react, hooks, useState, useCallback, callbacks, closures
+---
+
+## Use Functional setState Updates
+
+When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable. This prevents stale closures, eliminates unnecessary dependencies, and creates stable callback references.
+
+**Incorrect (requires state as dependency):**
+
+```tsx
+function TodoList() {
+ const [items, setItems] = useState(initialItems)
+
+ // Callback must depend on items, recreated on every items change
+ const addItems = useCallback((newItems: Item[]) => {
+ setItems([...items, ...newItems])
+ }, [items]) // ❌ items dependency causes recreations
+
+ // Risk of stale closure if dependency is forgotten
+ const removeItem = useCallback((id: string) => {
+ setItems(items.filter(item => item.id !== id))
+ }, []) // ❌ Missing items dependency - will use stale items!
+
+ return
+}
+```
+
+The first callback is recreated every time `items` changes, which can cause child components to re-render unnecessarily. The second callback has a stale closure bug—it will always reference the initial `items` value.
+
+**Correct (stable callbacks, no stale closures):**
+
+```tsx
+function TodoList() {
+ const [items, setItems] = useState(initialItems)
+
+ // Stable callback, never recreated
+ const addItems = useCallback((newItems: Item[]) => {
+ setItems(curr => [...curr, ...newItems])
+ }, []) // ✅ No dependencies needed
+
+ // Always uses latest state, no stale closure risk
+ const removeItem = useCallback((id: string) => {
+ setItems(curr => curr.filter(item => item.id !== id))
+ }, []) // ✅ Safe and stable
+
+ return
+}
+```
+
+**Benefits:**
+
+1. **Stable callback references** - Callbacks don't need to be recreated when state changes
+2. **No stale closures** - Always operates on the latest state value
+3. **Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks
+4. **Prevents bugs** - Eliminates the most common source of React closure bugs
+
+**When to use functional updates:**
+
+- Any setState that depends on the current state value
+- Inside useCallback/useMemo when state is needed
+- Event handlers that reference state
+- Async operations that update state
+
+**When direct updates are fine:**
+
+- Setting state to a static value: `setCount(0)`
+- Setting state from props/arguments only: `setName(newName)`
+- State doesn't depend on previous value
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bugs.
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md b/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
new file mode 100644
index 0000000..4ecb350
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
@@ -0,0 +1,58 @@
+---
+title: Use Lazy State Initialization
+impact: MEDIUM
+impactDescription: wasted computation on every render
+tags: react, hooks, useState, performance, initialization
+---
+
+## Use Lazy State Initialization
+
+Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
+
+**Incorrect (runs on every render):**
+
+```tsx
+function FilteredList({ items }: { items: Item[] }) {
+ // buildSearchIndex() runs on EVERY render, even after initialization
+ const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
+ const [query, setQuery] = useState('')
+
+ // When query changes, buildSearchIndex runs again unnecessarily
+ return
+}
+
+function UserProfile() {
+ // JSON.parse runs on every render
+ const [settings, setSettings] = useState(
+ JSON.parse(localStorage.getItem('settings') || '{}')
+ )
+
+ return
+}
+```
+
+**Correct (runs only once):**
+
+```tsx
+function FilteredList({ items }: { items: Item[] }) {
+ // buildSearchIndex() runs ONLY on initial render
+ const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
+ const [query, setQuery] = useState('')
+
+ return
+}
+
+function UserProfile() {
+ // JSON.parse runs only on initial render
+ const [settings, setSettings] = useState(() => {
+ const stored = localStorage.getItem('settings')
+ return stored ? JSON.parse(stored) : {}
+ })
+
+ return
+}
+```
+
+Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
+
+For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md b/.github/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md
new file mode 100644
index 0000000..6357049
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md
@@ -0,0 +1,38 @@
+---
+
+title: Extract Default Non-primitive Parameter Value from Memoized Component to Constant
+impact: MEDIUM
+impactDescription: restores memoization by using a constant for default value
+tags: rerender, memo, optimization
+
+---
+
+## Extract Default Non-primitive Parameter Value from Memoized Component to Constant
+
+When memoized component has a default value for some non-primitive optional parameter, such as an array, function, or object, calling the component without that parameter results in broken memoization. This is because new value instances are created on every rerender, and they do not pass strict equality comparison in `memo()`.
+
+To address this issue, extract the default value into a constant.
+
+**Incorrect (`onClick` has different values on every rerender):**
+
+```tsx
+const UserAvatar = memo(function UserAvatar({ onClick = () => {} }: { onClick?: () => void }) {
+ // ...
+})
+
+// Used without optional onClick
+
+```
+
+**Correct (stable default value):**
+
+```tsx
+const NOOP = () => {};
+
+const UserAvatar = memo(function UserAvatar({ onClick = NOOP }: { onClick?: () => void }) {
+ // ...
+})
+
+// Used without optional onClick
+
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-memo.md b/.github/skills/vercel-react-best-practices/rules/rerender-memo.md
new file mode 100644
index 0000000..f8982ab
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-memo.md
@@ -0,0 +1,44 @@
+---
+title: Extract to Memoized Components
+impact: MEDIUM
+impactDescription: enables early returns
+tags: rerender, memo, useMemo, optimization
+---
+
+## Extract to Memoized Components
+
+Extract expensive work into memoized components to enable early returns before computation.
+
+**Incorrect (computes avatar even when loading):**
+
+```tsx
+function Profile({ user, loading }: Props) {
+ const avatar = useMemo(() => {
+ const id = computeAvatarId(user)
+ return
+ }, [user])
+
+ if (loading) return
+ return
{avatar}
+}
+```
+
+**Correct (skips computation when loading):**
+
+```tsx
+const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
+ const id = useMemo(() => computeAvatarId(user), [user])
+ return
+})
+
+function Profile({ user, loading }: Props) {
+ if (loading) return
+ return (
+
+
+ )
+}
+```
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md b/.github/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
new file mode 100644
index 0000000..dd58a1a
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
@@ -0,0 +1,45 @@
+---
+title: Put Interaction Logic in Event Handlers
+impact: MEDIUM
+impactDescription: avoids effect re-runs and duplicate side effects
+tags: rerender, useEffect, events, side-effects, dependencies
+---
+
+## Put Interaction Logic in Event Handlers
+
+If a side effect is triggered by a specific user action (submit, click, drag), run it in that event handler. Do not model the action as state + effect; it makes effects re-run on unrelated changes and can duplicate the action.
+
+**Incorrect (event modeled as state + effect):**
+
+```tsx
+function Form() {
+ const [submitted, setSubmitted] = useState(false)
+ const theme = useContext(ThemeContext)
+
+ useEffect(() => {
+ if (submitted) {
+ post('/api/register')
+ showToast('Registered', theme)
+ }
+ }, [submitted, theme])
+
+ return
setSubmitted(true)}>Submit
+}
+```
+
+**Correct (do it in the handler):**
+
+```tsx
+function Form() {
+ const theme = useContext(ThemeContext)
+
+ function handleSubmit() {
+ post('/api/register')
+ showToast('Registered', theme)
+ }
+
+ return
Submit
+}
+```
+
+Reference: [Should this code move to an event handler?](https://react.dev/learn/removing-effect-dependencies#should-this-code-move-to-an-event-handler)
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md b/.github/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md
new file mode 100644
index 0000000..59dfab0
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md
@@ -0,0 +1,35 @@
+---
+title: Do not wrap a simple expression with a primitive result type in useMemo
+impact: LOW-MEDIUM
+impactDescription: wasted computation on every render
+tags: rerender, useMemo, optimization
+---
+
+## Do not wrap a simple expression with a primitive result type in useMemo
+
+When an expression is simple (few logical or arithmetical operators) and has a primitive result type (boolean, number, string), do not wrap it in `useMemo`.
+Calling `useMemo` and comparing hook dependencies may consume more resources than the expression itself.
+
+**Incorrect:**
+
+```tsx
+function Header({ user, notifications }: Props) {
+ const isLoading = useMemo(() => {
+ return user.isLoading || notifications.isLoading
+ }, [user.isLoading, notifications.isLoading])
+
+ if (isLoading) return
+ // return some markup
+}
+```
+
+**Correct:**
+
+```tsx
+function Header({ user, notifications }: Props) {
+ const isLoading = user.isLoading || notifications.isLoading
+
+ if (isLoading) return
+ // return some markup
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md b/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md
new file mode 100644
index 0000000..d99f43f
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md
@@ -0,0 +1,40 @@
+---
+title: Use Transitions for Non-Urgent Updates
+impact: MEDIUM
+impactDescription: maintains UI responsiveness
+tags: rerender, transitions, startTransition, performance
+---
+
+## Use Transitions for Non-Urgent Updates
+
+Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
+
+**Incorrect (blocks UI on every scroll):**
+
+```tsx
+function ScrollTracker() {
+ const [scrollY, setScrollY] = useState(0)
+ useEffect(() => {
+ const handler = () => setScrollY(window.scrollY)
+ window.addEventListener('scroll', handler, { passive: true })
+ return () => window.removeEventListener('scroll', handler)
+ }, [])
+}
+```
+
+**Correct (non-blocking updates):**
+
+```tsx
+import { startTransition } from 'react'
+
+function ScrollTracker() {
+ const [scrollY, setScrollY] = useState(0)
+ useEffect(() => {
+ const handler = () => {
+ startTransition(() => setScrollY(window.scrollY))
+ }
+ window.addEventListener('scroll', handler, { passive: true })
+ return () => window.removeEventListener('scroll', handler)
+ }, [])
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md b/.github/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md
new file mode 100644
index 0000000..cf04b81
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md
@@ -0,0 +1,73 @@
+---
+title: Use useRef for Transient Values
+impact: MEDIUM
+impactDescription: avoids unnecessary re-renders on frequent updates
+tags: rerender, useref, state, performance
+---
+
+## Use useRef for Transient Values
+
+When a value changes frequently and you don't want a re-render on every update (e.g., mouse trackers, intervals, transient flags), store it in `useRef` instead of `useState`. Keep component state for UI; use refs for temporary DOM-adjacent values. Updating a ref does not trigger a re-render.
+
+**Incorrect (renders every update):**
+
+```tsx
+function Tracker() {
+ const [lastX, setLastX] = useState(0)
+
+ useEffect(() => {
+ const onMove = (e: MouseEvent) => setLastX(e.clientX)
+ window.addEventListener('mousemove', onMove)
+ return () => window.removeEventListener('mousemove', onMove)
+ }, [])
+
+ return (
+
+ )
+}
+```
+
+**Correct (no re-render for tracking):**
+
+```tsx
+function Tracker() {
+ const lastXRef = useRef(0)
+ const dotRef = useRef
(null)
+
+ useEffect(() => {
+ const onMove = (e: MouseEvent) => {
+ lastXRef.current = e.clientX
+ const node = dotRef.current
+ if (node) {
+ node.style.transform = `translateX(${e.clientX}px)`
+ }
+ }
+ window.addEventListener('mousemove', onMove)
+ return () => window.removeEventListener('mousemove', onMove)
+ }, [])
+
+ return (
+
+ )
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md b/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
new file mode 100644
index 0000000..e8f5b26
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
@@ -0,0 +1,73 @@
+---
+title: Use after() for Non-Blocking Operations
+impact: MEDIUM
+impactDescription: faster response times
+tags: server, async, logging, analytics, side-effects
+---
+
+## Use after() for Non-Blocking Operations
+
+Use Next.js's `after()` to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.
+
+**Incorrect (blocks response):**
+
+```tsx
+import { logUserAction } from '@/app/utils'
+
+export async function POST(request: Request) {
+ // Perform mutation
+ await updateDatabase(request)
+
+ // Logging blocks the response
+ const userAgent = request.headers.get('user-agent') || 'unknown'
+ await logUserAction({ userAgent })
+
+ return new Response(JSON.stringify({ status: 'success' }), {
+ status: 200,
+ headers: { 'Content-Type': 'application/json' }
+ })
+}
+```
+
+**Correct (non-blocking):**
+
+```tsx
+import { after } from 'next/server'
+import { headers, cookies } from 'next/headers'
+import { logUserAction } from '@/app/utils'
+
+export async function POST(request: Request) {
+ // Perform mutation
+ await updateDatabase(request)
+
+ // Log after response is sent
+ after(async () => {
+ const userAgent = (await headers()).get('user-agent') || 'unknown'
+ const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
+
+ logUserAction({ sessionCookie, userAgent })
+ })
+
+ return new Response(JSON.stringify({ status: 'success' }), {
+ status: 200,
+ headers: { 'Content-Type': 'application/json' }
+ })
+}
+```
+
+The response is sent immediately while logging happens in the background.
+
+**Common use cases:**
+
+- Analytics tracking
+- Audit logging
+- Sending notifications
+- Cache invalidation
+- Cleanup tasks
+
+**Important notes:**
+
+- `after()` runs even if the response fails or redirects
+- Works in Server Actions, Route Handlers, and Server Components
+
+Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)
diff --git a/.github/skills/vercel-react-best-practices/rules/server-auth-actions.md b/.github/skills/vercel-react-best-practices/rules/server-auth-actions.md
new file mode 100644
index 0000000..ee82c04
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/server-auth-actions.md
@@ -0,0 +1,96 @@
+---
+title: Authenticate Server Actions Like API Routes
+impact: CRITICAL
+impactDescription: prevents unauthorized access to server mutations
+tags: server, server-actions, authentication, security, authorization
+---
+
+## Authenticate Server Actions Like API Routes
+
+**Impact: CRITICAL (prevents unauthorized access to server mutations)**
+
+Server Actions (functions with `"use server"`) are exposed as public endpoints, just like API routes. Always verify authentication and authorization **inside** each Server Action—do not rely solely on middleware, layout guards, or page-level checks, as Server Actions can be invoked directly.
+
+Next.js documentation explicitly states: "Treat Server Actions with the same security considerations as public-facing API endpoints, and verify if the user is allowed to perform a mutation."
+
+**Incorrect (no authentication check):**
+
+```typescript
+'use server'
+
+export async function deleteUser(userId: string) {
+ // Anyone can call this! No auth check
+ await db.user.delete({ where: { id: userId } })
+ return { success: true }
+}
+```
+
+**Correct (authentication inside the action):**
+
+```typescript
+'use server'
+
+import { verifySession } from '@/lib/auth'
+import { unauthorized } from '@/lib/errors'
+
+export async function deleteUser(userId: string) {
+ // Always check auth inside the action
+ const session = await verifySession()
+
+ if (!session) {
+ throw unauthorized('Must be logged in')
+ }
+
+ // Check authorization too
+ if (session.user.role !== 'admin' && session.user.id !== userId) {
+ throw unauthorized('Cannot delete other users')
+ }
+
+ await db.user.delete({ where: { id: userId } })
+ return { success: true }
+}
+```
+
+**With input validation:**
+
+```typescript
+'use server'
+
+import { verifySession } from '@/lib/auth'
+import { z } from 'zod'
+
+const updateProfileSchema = z.object({
+ userId: z.string().uuid(),
+ name: z.string().min(1).max(100),
+ email: z.string().email()
+})
+
+export async function updateProfile(data: unknown) {
+ // Validate input first
+ const validated = updateProfileSchema.parse(data)
+
+ // Then authenticate
+ const session = await verifySession()
+ if (!session) {
+ throw new Error('Unauthorized')
+ }
+
+ // Then authorize
+ if (session.user.id !== validated.userId) {
+ throw new Error('Can only update own profile')
+ }
+
+ // Finally perform the mutation
+ await db.user.update({
+ where: { id: validated.userId },
+ data: {
+ name: validated.name,
+ email: validated.email
+ }
+ })
+
+ return { success: true }
+}
+```
+
+Reference: [https://nextjs.org/docs/app/guides/authentication](https://nextjs.org/docs/app/guides/authentication)
diff --git a/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md b/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md
new file mode 100644
index 0000000..ef6938a
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md
@@ -0,0 +1,41 @@
+---
+title: Cross-Request LRU Caching
+impact: HIGH
+impactDescription: caches across requests
+tags: server, cache, lru, cross-request
+---
+
+## Cross-Request LRU Caching
+
+`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
+
+**Implementation:**
+
+```typescript
+import { LRUCache } from 'lru-cache'
+
+const cache = new LRUCache({
+ max: 1000,
+ ttl: 5 * 60 * 1000 // 5 minutes
+})
+
+export async function getUser(id: string) {
+ const cached = cache.get(id)
+ if (cached) return cached
+
+ const user = await db.user.findUnique({ where: { id } })
+ cache.set(id, user)
+ return user
+}
+
+// Request 1: DB query, result cached
+// Request 2: cache hit, no DB query
+```
+
+Use when sequential user actions hit multiple endpoints needing the same data within seconds.
+
+**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests without needing external storage like Redis.
+
+**In traditional serverless:** Each invocation runs in isolation, so consider Redis for cross-process caching.
+
+Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)
diff --git a/.github/skills/vercel-react-best-practices/rules/server-cache-react.md b/.github/skills/vercel-react-best-practices/rules/server-cache-react.md
new file mode 100644
index 0000000..87c9ca3
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/server-cache-react.md
@@ -0,0 +1,76 @@
+---
+title: Per-Request Deduplication with React.cache()
+impact: MEDIUM
+impactDescription: deduplicates within request
+tags: server, cache, react-cache, deduplication
+---
+
+## Per-Request Deduplication with React.cache()
+
+Use `React.cache()` for server-side request deduplication. Authentication and database queries benefit most.
+
+**Usage:**
+
+```typescript
+import { cache } from 'react'
+
+export const getCurrentUser = cache(async () => {
+ const session = await auth()
+ if (!session?.user?.id) return null
+ return await db.user.findUnique({
+ where: { id: session.user.id }
+ })
+})
+```
+
+Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
+
+**Avoid inline objects as arguments:**
+
+`React.cache()` uses shallow equality (`Object.is`) to determine cache hits. Inline objects create new references each call, preventing cache hits.
+
+**Incorrect (always cache miss):**
+
+```typescript
+const getUser = cache(async (params: { uid: number }) => {
+ return await db.user.findUnique({ where: { id: params.uid } })
+})
+
+// Each call creates new object, never hits cache
+getUser({ uid: 1 })
+getUser({ uid: 1 }) // Cache miss, runs query again
+```
+
+**Correct (cache hit):**
+
+```typescript
+const getUser = cache(async (uid: number) => {
+ return await db.user.findUnique({ where: { id: uid } })
+})
+
+// Primitive args use value equality
+getUser(1)
+getUser(1) // Cache hit, returns cached result
+```
+
+If you must pass objects, pass the same reference:
+
+```typescript
+const params = { uid: 1 }
+getUser(params) // Query runs
+getUser(params) // Cache hit (same reference)
+```
+
+**Next.js-Specific Note:**
+
+In Next.js, the `fetch` API is automatically extended with request memoization. Requests with the same URL and options are automatically deduplicated within a single request, so you don't need `React.cache()` for `fetch` calls. However, `React.cache()` is still essential for other async tasks:
+
+- Database queries (Prisma, Drizzle, etc.)
+- Heavy computations
+- Authentication checks
+- File system operations
+- Any non-fetch async work
+
+Use `React.cache()` to deduplicate these operations across your component tree.
+
+Reference: [React.cache documentation](https://react.dev/reference/react/cache)
diff --git a/.github/skills/vercel-react-best-practices/rules/server-dedup-props.md b/.github/skills/vercel-react-best-practices/rules/server-dedup-props.md
new file mode 100644
index 0000000..fb24a25
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/server-dedup-props.md
@@ -0,0 +1,65 @@
+---
+title: Avoid Duplicate Serialization in RSC Props
+impact: LOW
+impactDescription: reduces network payload by avoiding duplicate serialization
+tags: server, rsc, serialization, props, client-components
+---
+
+## Avoid Duplicate Serialization in RSC Props
+
+**Impact: LOW (reduces network payload by avoiding duplicate serialization)**
+
+RSC→client serialization deduplicates by object reference, not value. Same reference = serialized once; new reference = serialized again. Do transformations (`.toSorted()`, `.filter()`, `.map()`) in client, not server.
+
+**Incorrect (duplicates array):**
+
+```tsx
+// RSC: sends 6 strings (2 arrays × 3 items)
+ u.active)} />
+{items.map(renderItem)}
+}
+```
+
+**Correct (both fetch simultaneously):**
+
+```tsx
+async function Header() {
+ const data = await fetchHeader()
+ return {data}
+}
+
+async function Sidebar() {
+ const items = await fetchSidebarItems()
+ return {items.map(renderItem)}
+}
+
+export default function Page() {
+ return (
+
+
+
+ )
+}
+```
+
+**Alternative with children prop:**
+
+```tsx
+async function Header() {
+ const data = await fetchHeader()
+ return {data}
+}
+
+async function Sidebar() {
+ const items = await fetchSidebarItems()
+ return {items.map(renderItem)}
+}
+
+function Layout({ children }: { children: ReactNode }) {
+ return (
+
+
+ {children}
+
+ )
+}
+
+export default function Page() {
+ return (
+
+
+ )
+}
+```
diff --git a/.github/skills/vercel-react-best-practices/rules/server-serialization.md b/.github/skills/vercel-react-best-practices/rules/server-serialization.md
new file mode 100644
index 0000000..39c5c41
--- /dev/null
+++ b/.github/skills/vercel-react-best-practices/rules/server-serialization.md
@@ -0,0 +1,38 @@
+---
+title: Minimize Serialization at RSC Boundaries
+impact: HIGH
+impactDescription: reduces data transfer size
+tags: server, rsc, serialization, props
+---
+
+## Minimize Serialization at RSC Boundaries
+
+The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+
+**Incorrect (serializes all 50 fields):**
+
+```tsx
+async function Page() {
+ const user = await fetchUser() // 50 fields
+ return {user.name}
// uses 1 field
+}
+```
+
+**Correct (serializes only 1 field):**
+
+```tsx
+async function Page() {
+ const user = await fetchUser()
+ return {name}
+}
+```
diff --git a/.gitignore b/.gitignore
index 172d43e..feeb469 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,9 @@ yarn-error.log*
cypress/screenshots
cypress/videos
-.env.*
\ No newline at end of file
+.env
+.env.*
+
+.next
+next-env.d.ts
+.vercel
diff --git a/README.md b/README.md
index f7c1e01..db8dc41 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,36 @@
# Mobility Feeds API UI
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-Using node v18.16.0 (npm v9.5.1)
+This project is built with [Next.js](https://nextjs.org/) using the App Router.
+Using node v24.12.0 (npm v11.6.2) (yarn v1.22.22)
## Installing packages
It is preferred to install the packages using `yarn` over `npm install`
## Configuration variables
-React scripts can inject all necessary environment variables into the application in development mode and the JS bundle files.
+Next.js can inject all necessary environment variables into the application in development mode and the JS bundle files.
Steps to set environment variables:
-- Create a file based on `src/.env.rename_me` with the name `src/.env.{environment}`. Example, `src/.env.dev`.
+- Create a file based on `.env.rename_me` with the name `.env.development` (for dev) or `.env` (for prod)
- Replace all key values with the desired content.
- Done! You can now start or build the application with the commands described below.
### Adding a new environment variable
-To add a new environment variable, add the variable name to the `src/.env.{environment}` and modify the GitHub actions injecting the value per environment. When adding a new variable, make sure that the variable name is prefixed with `REACT_APP`; otherwise, the react app will not read the variable.
+To add a new environment variable, add the variable name to the `.env.{environment}` and modify the GitHub actions injecting the value per environment. When adding a new variable, make sure that the variable name is prefixed with `NEXT_PUBLIC_` for client-side usage; otherwise, the Next.js app will not read the variable on the client side.
## Available Scripts
In the project directory, you can run:
- Runs the app in the development mode:
+It will automatically use environment variables located in `.env.development`
```
-yarn start:dev
+yarn run start:dev
+```
+
+- Running a production build
+It will build then run the application in production and serve it locally using environment variables located in `.env`
+Since it uses the files from the build, it will not hot reload
+```
+yarn run start:prod
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -35,19 +43,19 @@ You will also see any lint errors in the console.
yarn test
```
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-- Builds the app locally to the `build` folder:
+- Builds the app for production:
```
-yarn build:dev
+yarn build:prod
```
-It bundles React in production mode for a target Firebase environment.
+It bundles the application in production mode using Next.js optimization.
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+The build is optimized and ready for deployment.
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+- Start the production build locally:
+```
+yarn start:prod
+```
- Linter check
```
@@ -82,24 +90,40 @@ npx firebase hosting:channel:deploy {channel_name}
Component and E2E tests are executed with [Cypress](https://docs.cypress.io/). Cypress tests are located in the cypress folder.
Cypress useful commands:
-- Run the firebase emulator in a separate terminal
+- E2E tests require a mock server to run to mock api endpoints
```
-yarn run firebase:auth:emulator:dev
+yarn run e2e:setup
```
-- Run local headless tests
+Will start the dev environment with mock server. It's equal to running
```
-yarn start:dev
+yarn run firebase:auth:emulator:dev + yarn run start:dev:mock"
```
In a different terminal,
```
-yarn cypress-run
+yarn e2e:run
```
- Opens Cypress in the interactive GUI
```
-yarn cypress-open
+yarn e2e:open
```
+
+## API Types Generation
+
+The project includes scripts for generating TypeScript types from OpenAPI specifications:
+
+- Generate API types from main database catalog:
+```
+yarn generate:api-types
+```
+
+- Generate GBFS validator types:
+```
+yarn generate:gbfs-validator-types
+```
+
## References
- - You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+ - You can learn more in the [Next.js documentation](https://nextjs.org/docs).
- To learn React, check out the [React documentation](https://reactjs.org/).
- [Firebase Documentation](https://firebase.google.com/docs).
+ - [next-intl Documentation](https://next-intl-docs.vercel.app/) for internationalization.
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 8f9cbce..0000000
--- a/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- presets: [['@babel/preset-env', {targets: {node: 'current'}}, '@babel/preset-typescript']],
- };
\ No newline at end of file
diff --git a/cypress.config.ts b/cypress.config.ts
index f313a6d..38bba9e 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,10 +1,10 @@
import { defineConfig } from 'cypress';
import * as dotenv from 'dotenv';
-const localEnv = dotenv.config({ path: './src/.env.dev' }).parsed;
-const ciEnv = dotenv.config({ path: './src/.env.test' }).parsed;
+const localEnv = dotenv.config({ path: './.env.development' }).parsed || {};
+const ciEnv = dotenv.config({ path: './.env.test' }).parsed || {};
const isEnvEmpty = (obj) => {
- return Object.keys(obj).length === 0;
+ return !obj || Object.keys(obj).length === 0;
};
const chosenEnv = isEnvEmpty(localEnv) ? ciEnv : localEnv;
@@ -12,7 +12,8 @@ const chosenEnv = isEnvEmpty(localEnv) ? ciEnv : localEnv;
export default defineConfig({
env: chosenEnv,
e2e: {
- baseUrl: 'http://localhost:3000',
+ // Use CYPRESS_BASE_URL env var if set (for e2e:run/e2e:open), otherwise default to 3000
+ baseUrl: process.env.CYPRESS_BASE_URL || 'http://localhost:3000',
},
video: true,
});
diff --git a/cypress/e2e/addFeedForm.cy.ts b/cypress/e2e/addFeedForm.cy.ts
index feaed25..c3163c2 100644
--- a/cypress/e2e/addFeedForm.cy.ts
+++ b/cypress/e2e/addFeedForm.cy.ts
@@ -8,21 +8,28 @@ describe('Add Feed Form', () => {
});
cy.visit('/');
cy.get('[data-testid="home-title"]').should('exist');
- cy.createNewUserAndSignIn('cypressTestUser@mobilitydata.org', 'BigCoolPassword123!');
+ cy.createNewUserAndSignIn(
+ 'cypressTestUser@mobilitydata.org',
+ 'BigCoolPassword123!',
+ );
cy.get('[data-cy="accountHeader"]').should('exist'); // assures that the user is signed in
cy.visit('/contribute');
// Assures that the firebase remote config has loaded for the first test
// Optimizations can be made to make the first test run faster
// Long timeout is to assure no flakiness
- cy.get('[data-cy=isOfficialProducerYes]', { timeout: 25000 }).should('exist');
+ cy.get('[data-cy=isOfficialProducerYes]', { timeout: 25000 }).should(
+ 'exist',
+ );
});
describe('Success Flows', () => {
it('should submit a new gtfs scheduled feed as official producer', () => {
cy.get('[data-cy=isOfficialProducerYes]').click({ force: true });
cy.muiDropdownSelect('[data-cy=isOfficialFeed]', 'yes');
- cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+ cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+ force: true,
+ });
cy.get('[data-cy=submitFirstStep]').click();
cy.url().should('include', '/contribute?step=2');
// step 2
@@ -30,14 +37,14 @@ describe('Add Feed Form', () => {
cy.get('[data-cy=secondStepSubmit]').click();
cy.url().should('include', '/contribute?step=3');
// step 3: fill required emptyLicenseUsage if present
- cy.get('body').then($body => {
+ cy.get('body').then(($body) => {
if ($body.find('[data-cy="emptyLicenseUsage"]').length) {
cy.get('[data-cy="emptyLicenseUsage"]').click();
cy.get('li').should('have.length.at.least', 1);
- cy.get('li').then($lis => {
+ cy.get('li').then(($lis) => {
const texts = $lis.map((i, el) => el.textContent).get();
cy.log('Dropdown options:', texts.join(', '));
- expect(texts).to.include('Not sure');
+ cy.wrap(texts).should('include', 'Not sure');
});
cy.contains('li', 'Not sure').click();
}
@@ -45,7 +52,9 @@ describe('Add Feed Form', () => {
cy.get('[data-cy=thirdStepSubmit]').click();
cy.url().should('include', '/contribute?step=4');
// step 4
- cy.get('[data-cy=dataProducerEmail] input').type('audio@stm.com', { force: true });
+ cy.get('[data-cy=dataProducerEmail] input').type('audio@stm.com', {
+ force: true,
+ });
cy.muiDropdownSelect('[data-cy=interestedInAudit]', 'no');
cy.muiDropdownSelect('[data-cy=logoPermission]', 'yes');
cy.get('[data-cy=fourthStepSubmit]').click();
@@ -86,7 +95,9 @@ describe('Add Feed Form', () => {
// Step 1 values
cy.get('[data-cy=isOfficialProducerYes]').click();
cy.muiDropdownSelect('[data-cy=isOfficialFeed]', 'yes');
- cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+ cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+ force: true,
+ });
cy.get('[data-cy=oldFeedLink] input').type('https://example.com/feedOld');
cy.get('[data-cy=submitFirstStep]').click();
// Step 2
@@ -135,11 +146,17 @@ describe('Add Feed Form', () => {
cy.get('[data-cy=unofficialDesc]').should('exist');
cy.get('[data-cy=updateFreq]').should('exist');
// Fill in the new fields (ensure only one element is targeted)
- cy.get('[data-cy=unofficialDesc] textarea').first().type('For research purposes', { force: true });
- cy.get('[data-cy=updateFreq] input').first().type('every month', { force: true });
+ cy.get('[data-cy=unofficialDesc] textarea')
+ .first()
+ .type('For research purposes', { force: true });
+ cy.get('[data-cy=updateFreq] input')
+ .first()
+ .type('every month', { force: true });
// Continue with the rest of the form
cy.muiDropdownSelect('[data-cy=dataType]', 'gtfs');
- cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+ cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+ force: true,
+ });
cy.get('[data-cy=submitFirstStep]').click();
cy.url().should('include', '/contribute?step=2');
});
@@ -147,7 +164,9 @@ describe('Add Feed Form', () => {
it('should show and require emptyLicenseUsage with Unsure option if official producer and no license', () => {
cy.get('[data-cy=isOfficialProducerYes]').click();
cy.muiDropdownSelect('[data-cy=isOfficialFeed]', 'yes');
- cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+ cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+ force: true,
+ });
cy.get('[data-cy=submitFirstStep]').click();
cy.url().should('include', '/contribute?step=2');
// step 2: leave license blank
@@ -163,11 +182,11 @@ describe('Add Feed Form', () => {
// Open dropdown and check options with debug output
cy.get('[data-cy="emptyLicenseUsage"]').click();
cy.get('li').should('have.length.at.least', 1);
- cy.get('li').then($lis => {
+ cy.get('li').then(($lis) => {
const texts = $lis.map((i, el) => el.textContent).get();
// Debug output
cy.log('Dropdown options:', texts.join(', '));
- expect(texts).to.include('Not sure');
+ cy.wrap(texts).should('include', 'Not sure');
});
cy.contains('li', 'Not sure').click();
cy.get('[data-cy="thirdStepSubmit"]').click();
diff --git a/cypress/e2e/feeds.cy.ts b/cypress/e2e/feeds.cy.ts
index e829681..dc50668 100644
--- a/cypress/e2e/feeds.cy.ts
+++ b/cypress/e2e/feeds.cy.ts
@@ -1,64 +1,79 @@
-import feedJson from '../fixtures/feed_test-516.json';
-import gtfsFeedJson from '../fixtures/gtfs_feed_test-516.json';
-import datasetsFeedJson from '../fixtures/feed_datasets_test-516.json';
+/**
+ * Feed page e2e tests
+ *
+ * API mocking is handled by MSW (Mock Service Worker) configured in:
+ * - src/mocks/handlers.ts - API mock handlers
+ * - src/mocks/server.ts - MSW server setup
+ * - src/instrumentation.ts - Next.js instrumentation hook
+ *
+ * To enable mocking, start the Next.js server with:
+ * NEXT_PUBLIC_API_MOCKING=enabled yarn start:dev
+ *
+ * Or use the .env.test file which has mocking enabled.
+ */
-const apiBaseUrl = '**';
+// Test feed configuration - uses fixture data from cypress/fixtures/
+const TEST_FEED_ID = 'test-516';
+const TEST_FEED_DATA_TYPE = 'gtfs';
describe('Feed page', () => {
beforeEach(() => {
- cy.intercept('GET', `${apiBaseUrl}/v1/feeds/test-516`, feedJson);
- cy.intercept('GET', `${apiBaseUrl}/v1/gtfs_feeds/test-516`, gtfsFeedJson);
- cy.intercept(
- 'GET',
- `${apiBaseUrl}/v1/gtfs_feeds/test-516/datasets?offset=0&limit=10`,
- datasetsFeedJson,
- );
- cy.visit('feeds/test-516');
+ // Visit the feed detail page with the correct RSC route structure
+ // Route: /feeds/[feedDataType]/[feedId]
+ cy.visit(`feeds/${TEST_FEED_DATA_TYPE}/${TEST_FEED_ID}`, {
+ timeout: 30000,
+ });
});
it('should render feed title and provider', () => {
- cy.get('[data-testid="feed-provider"]').should(
+ cy.get('[data-testid="feed-provider"]', { timeout: 10000 }).should(
'contain',
'Metropolitan Transit Authority (MTA)',
);
- cy.get('[data-testid="feed-name"]').should('contain', 'NYC Subway');
});
it('should render the last updated date', () => {
- cy.get('[data-testid="last-updated"]').should(
- 'contain',
- 'Quality report updated',
- );
+ cy.get('[data-testid="last-updated"]', { timeout: 10000 }).should('exist');
});
it('should render download button', () => {
- cy.get('[id="download-latest-button"]').should('exist');
+ cy.get('[id="download-latest-button"]', { timeout: 10000 }).should('exist');
});
it('should render data quality summary', () => {
- cy.get('[data-testid="data-quality-summary"]').within(() => {
- cy.get('[data-testid="error-count"]').should('contain', 'errors');
- cy.get('[data-testid="warning-count"]').should('contain', 'warnings');
- cy.get('[data-testid="info-count"]').should('contain', 'info notices');
- });
+ cy.get('[data-testid="data-quality-summary"]', { timeout: 10000 }).within(
+ () => {
+ cy.get('[data-testid="error-count"]').should('exist');
+ cy.get('[data-testid="warning-count"]').should('exist');
+ cy.get('[data-testid="info-count"]').should('exist');
+ },
+ );
});
it('should render feed summary', () => {
- cy.get('[data-testid="location"]').should('exist');
+ cy.get('[data-testid="location"]', { timeout: 10000 }).should('exist');
cy.get('[data-testid="producer-url"]').should('exist');
cy.get('[data-testid="data-type"]').should('exist');
});
it('should render dataset history', () => {
- cy.get('[data-testid="dataset-item"]').should('have.length', 2);
+ // Fixture has 2 datasets
+ cy.get('[data-testid="dataset-item"]', { timeout: 10000 }).should(
+ 'have.length',
+ 2,
+ );
});
- it('should render feature chips', () => {
- cy.get('[data-testid="feature-chips"]').should('have.length', 5);
+ it('should render feature chips when available', () => {
+ // Feature chips from fixture validation report
+ cy.get('[data-testid="feature-chips"]', { timeout: 10000 }).should(
+ 'have.length.at.least',
+ 1,
+ );
});
it('should have working links to validation reports', () => {
- cy.get('[data-testid="validation-report-html"]')
+ cy.get('[data-testid="validation-report-html"]', { timeout: 10000 })
.should('exist')
.and('have.attr', 'href')
.and('include', '.html');
diff --git a/cypress/fixtures/gtfs_feed_test-516.json b/cypress/fixtures/gtfs_feed_test-516.json
index 619605d..45ef77c 100644
--- a/cypress/fixtures/gtfs_feed_test-516.json
+++ b/cypress/fixtures/gtfs_feed_test-516.json
@@ -40,12 +40,23 @@
"downloaded_at": "2024-07-10T14:00:15.488196Z",
"hash": "5d778850ac280d4ef8e5f49cc490f7592750b6673496096a132b8bed2381460e",
"validation_report": {
+ "validated_at": "2024-07-10T14:00:25Z",
+ "features": [
+ "Transfers",
+ "Shapes",
+ "Route Colors",
+ "Headsigns",
+ "Location Types"
+ ],
+ "validator_version": "5.0.2-SNAPSHOT",
"total_error": 0,
"total_warning": 124,
"total_info": 0,
"unique_error_count": 0,
"unique_warning_count": 6,
- "unique_info_count": 0
+ "unique_info_count": 0,
+ "url_json": "https://qa-files.mobilitydatabase.org/mdb-516/mdb-516-202407101414/report_5.0.2-SNAPSHOT.json",
+ "url_html": "https://qa-files.mobilitydatabase.org/mdb-516/mdb-516-202407101414/report_5.0.2-SNAPSHOT.html"
}
}
}
\ No newline at end of file
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index a7125a9..dc39b08 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -42,12 +42,12 @@ import 'firebase/compat/remote-config';
import 'firebase/compat/auth';
const firebaseConfig = {
- apiKey: Cypress.env('REACT_APP_FIREBASE_API_KEY'),
- authDomain: Cypress.env('REACT_APP_FIREBASE_AUTH_DOMAIN'),
- projectId: Cypress.env('REACT_APP_FIREBASE_PROJECT_ID'),
- storageBucket: Cypress.env('REACT_APP_FIREBASE_STORAGE_BUCKET'),
- messagingSenderId: Cypress.env('REACT_APP_FIREBASE_MESSAGING_SENDER_ID'),
- appId: Cypress.env('REACT_APP_FIREBASE_APP_ID'),
+ apiKey: Cypress.env('NEXT_PUBLIC_FIREBASE_API_KEY'),
+ authDomain: Cypress.env('NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN'),
+ projectId: Cypress.env('NEXT_PUBLIC_FIREBASE_PROJECT_ID'),
+ storageBucket: Cypress.env('NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET'),
+ messagingSenderId: Cypress.env('NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID'),
+ appId: Cypress.env('NEXT_PUBLIC_FIREBASE_APP_ID'),
};
const app = firebase.initializeApp(firebaseConfig);
diff --git a/external_types/BearerTokenSchema.yaml b/external_types/BearerTokenSchema.yaml
new file mode 100644
index 0000000..bfa422b
--- /dev/null
+++ b/external_types/BearerTokenSchema.yaml
@@ -0,0 +1,6 @@
+components:
+ securitySchemes:
+ Authentication:
+ type: http
+ scheme: bearer
+ bearerFormat: JWT
\ No newline at end of file
diff --git a/external_types/DatabaseCatalogAPI.yaml b/external_types/DatabaseCatalogAPI.yaml
new file mode 100644
index 0000000..162fc34
--- /dev/null
+++ b/external_types/DatabaseCatalogAPI.yaml
@@ -0,0 +1,1801 @@
+openapi: 3.0.0
+info:
+ version: 1.0.0
+ title: Mobility Database Catalog
+ description: |
+ API for the Mobility Database Catalog. See [https://mobilitydatabase.org/](https://mobilitydatabase.org/).
+
+ The Mobility Database API uses OAuth2 authentication.
+ To initiate a successful API request, an access token must be included as a bearer token in the HTTP header. Access tokens are valid for one hour. To obtain an access token, you'll first need a refresh token, which is long-lived and does not expire.
+ termsOfService: https://mobilitydatabase.org/terms-and-conditions
+ contact:
+ name: MobilityData
+ url: https://mobilitydata.org/
+ email: api@mobilitydata.org
+ license:
+ name: MobilityData License
+ url: https://www.apache.org/licenses/LICENSE-2.0
+
+servers:
+ - url: https://api.mobilitydatabase.org/
+ description: Prod release environment
+ - url: https://api-qa.mobilitydatabase.org/
+ description: Pre-prod environment
+ - url: https://api-dev.mobilitydatabase.org/
+ description: Development environment
+ - url: http://localhost:8080/
+ description: Local development environment
+
+tags:
+ - name: "feeds"
+ description: "Feeds of the Mobility Database"
+ - name: "datasets"
+ description: "Datasets of the Mobility Database"
+ - name: "metadata"
+ description: "Metadata about the API"
+ - name: "beta"
+ description: "Beta endpoints of the API."
+ - name: "licenses"
+ description: "Licenses of the Mobility Database"
+
+paths:
+ /v1/feeds:
+ get:
+ description: Get some (or all) feeds from the Mobility Database. The items are sorted by provider in alphabetical ascending order.
+ tags:
+ - "feeds"
+ operationId: getFeeds
+ parameters:
+ - $ref: "#/components/parameters/limit_query_param_feeds_endpoint"
+ - $ref: "#/components/parameters/offset"
+ - $ref: "#/components/parameters/status"
+ - $ref: "#/components/parameters/provider"
+ - $ref: "#/components/parameters/producer_url"
+ - $ref: "#/components/parameters/is_official_query_param"
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: >
+ Successful pull of the feeds common info.
+ This info has a reduced set of fields that are common to all types of feeds.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Feeds"
+
+ /v1/feeds/{id}:
+ parameters:
+ - $ref: "#/components/parameters/feed_id_path_param"
+ get:
+ description: Get the specified feed from the Mobility Database.
+ tags:
+ - "feeds"
+ operationId: getFeed
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: >
+ Successful pull of the feeds common info for the provided ID.
+ This info has a reduced set of fields that are common to all types of feeds.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Feed"
+
+ /v1/gtfs_feeds:
+ get:
+ description: Get some (or all) GTFS feeds from the Mobility Database.
+ tags:
+ - "feeds"
+ operationId: getGtfsFeeds
+ parameters:
+ - $ref: "#/components/parameters/limit_query_param_gtfs_feeds_endpoint"
+ - $ref: "#/components/parameters/offset"
+ - $ref: "#/components/parameters/provider"
+ - $ref: "#/components/parameters/producer_url"
+ - $ref: "#/components/parameters/country_code"
+ - $ref: "#/components/parameters/subdivision_name"
+ - $ref: "#/components/parameters/municipality"
+ - $ref: "#/components/parameters/dataset_latitudes"
+ - $ref: "#/components/parameters/dataset_longitudes"
+ - $ref: "#/components/parameters/bounding_filter_method"
+ - $ref: "#/components/parameters/is_official_query_param"
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the GTFS feeds info.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsFeeds"
+
+ /v1/gtfs_rt_feeds:
+ get:
+ description: Get some (or all) GTFS Realtime feeds from the Mobility Database.
+ tags:
+ - "feeds"
+ operationId: getGtfsRtFeeds
+ parameters:
+ - $ref: "#/components/parameters/limit_query_param_gtfs_rt_feeds_endpoint"
+ - $ref: "#/components/parameters/offset"
+ - $ref: "#/components/parameters/provider"
+ - $ref: "#/components/parameters/producer_url"
+ - $ref: "#/components/parameters/entity_types"
+ - $ref: "#/components/parameters/country_code"
+ - $ref: "#/components/parameters/subdivision_name"
+ - $ref: "#/components/parameters/municipality"
+ - $ref: "#/components/parameters/is_official_query_param"
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the GTFS Realtime feeds info.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsRTFeeds"
+
+ /v1/gbfs_feeds:
+ get:
+ description: Get GBFS feeds from the Mobility Database.
+ tags:
+ - "feeds"
+ - "beta"
+ operationId: getGbfsFeeds
+ parameters:
+ - $ref: "#/components/parameters/limit_query_param_gbfs_feeds_endpoint"
+ - $ref: "#/components/parameters/offset"
+ - $ref: "#/components/parameters/provider"
+ - $ref: "#/components/parameters/producer_url"
+ - $ref: "#/components/parameters/country_code"
+ - $ref: "#/components/parameters/subdivision_name"
+ - $ref: "#/components/parameters/municipality"
+ - $ref: "#/components/parameters/system_id_param"
+ - $ref: "#/components/parameters/version_param"
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the GBFS feeds info.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GbfsFeeds"
+
+ /v1/gtfs_feeds/{id}:
+ parameters:
+ - $ref: "#/components/parameters/feed_id_path_param"
+ get:
+ description: Get the specified GTFS feed from the Mobility Database. Once a week, we check if the latest dataset has been updated and, if so, we update it in our system accordingly.
+ tags:
+ - "feeds"
+ - "beta"
+ operationId: getGtfsFeed
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the requested feed.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsFeed"
+
+ /v1/gtfs_rt_feeds/{id}:
+ parameters:
+ - $ref: "#/components/parameters/feed_id_path_param"
+ get:
+ description: Get the specified GTFS Realtime feed from the Mobility Database.
+ tags:
+ - "feeds"
+ operationId: getGtfsRtFeed
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the requested feed.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsRTFeed"
+
+ /v1/gbfs_feeds/{id}:
+ parameters:
+ - $ref: "#/components/parameters/feed_id_path_param"
+ get:
+ description: Get the specified GBFS feed from the Mobility Database.
+ tags:
+ - "feeds"
+ operationId: getGbfsFeed
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the requested feed.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GbfsFeed"
+
+ /v1/gtfs_feeds/{id}/datasets:
+ parameters:
+ - $ref: "#/components/parameters/feed_id_of_datasets_path_param"
+ get:
+ description: Get a list of datasets associated with a GTFS feed. Once a day, we check whether the latest dataset has changed; if it has, we update it in our system. The list is sorted from newest to oldest.
+ tags:
+ - "feeds"
+ operationId: getGtfsFeedDatasets
+ parameters:
+ - $ref: "#/components/parameters/latest_query_param"
+ - $ref: "#/components/parameters/limit_query_param_datasets_endpoint"
+ - $ref: "#/components/parameters/offset"
+ - $ref: "#/components/parameters/downloaded_after"
+ - $ref: "#/components/parameters/downloaded_before"
+
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the requested datasets.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsDatasets"
+
+ /v1/gtfs_feeds/{id}/gtfs_rt_feeds:
+ parameters:
+ - $ref: "#/components/parameters/feed_id_path_param"
+ get:
+ description: Get a list of GTFS Realtime related to a GTFS feed.
+ tags:
+ - "feeds"
+ operationId: getGtfsFeedGtfsRtFeeds
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the GTFS Realtime feeds info related to a GTFS feed.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsRTFeeds"
+
+ /v1/datasets/gtfs/{id}:
+ get:
+ description: Get the specified dataset from the Mobility Database.
+ tags:
+ - "datasets"
+ operationId: getDatasetGtfs
+ parameters:
+ - $ref: "#/components/parameters/dataset_id_path_param"
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the requested dataset.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/GtfsDataset"
+
+ /v1/metadata:
+ get:
+ description: Get metadata about this API.
+ tags:
+ - "metadata"
+ operationId: getMetadata
+ security:
+ - Authentication: []
+ responses:
+ 200:
+ description: Successful pull of the metadata.
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Metadata"
+
+ /v1/search:
+ get:
+ description: |
+ Search feeds on feed name, location and provider's information.
+
+ JBDA : Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda--. TDG : Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-. NTD : Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-. TransitFeeds : Automatically imported from old TransitFeeds website. Pattern is tfs-. Transit.land : Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-.
+ provider:
+ description: A commonly used name for the transit provider included in the feed.
+ type: string
+ example: Los Angeles Department of Transportation (LADOT, DASH, Commuter Express)
+ feed_contact_email:
+ description: Use to contact the feed producer.
+ type: string
+ example: someEmail@ladotbus.com
+ source_info:
+ $ref: "#/components/schemas/SourceInfo"
+ redirects:
+ type: array
+ items:
+ $ref: "#/components/schemas/Redirect"
+
+ Feed:
+ allOf:
+ - $ref: "#/components/schemas/BasicFeed"
+ - type: object
+ discriminator:
+ propertyName: data_type
+ mapping:
+ gtfs: "#/components/schemas/GtfsFeed"
+ gtfs_rt: "#/components/schemas/GtfsRTFeed"
+ properties:
+ status:
+ description: >
+ Describes status of the Feed. Should be one of
+ * `active` Feed should be used in public trip planners.
+ * `deprecated` Feed is explicitly deprecated and should not be used in public trip planners.
+ * `inactive` Feed hasn't been recently updated and should be used at risk of providing outdated information.
+ * `development` Feed is being used for development purposes and should not be used in public trip planners.
+ * `future` Feed is not yet active but will be in the future.
+ type: string
+ enum:
+ - active
+ - deprecated
+ - inactive
+ - development
+ - future
+ example: deprecated
+ official:
+ description: >
+ A boolean value indicating if the feed is official or not.
+ Official feeds are provided by the transit agency or a trusted source.
+ type: boolean
+ example: true
+ official_updated_at:
+ description: >
+ The date and time the official status was last updated, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ feed_name:
+ description: >
+ An optional description of the data feed, e.g to specify if the data feed is an aggregate of
+ multiple providers, or which network is represented by the feed.
+ type: string
+ example: Bus
+ note:
+ description: A note to clarify complex use cases for consumers.
+ type: string
+ related_links:
+ description: >
+ A list of related links for the feed.
+ type: array
+ items:
+ $ref: "#/components/schemas/FeedRelatedLink"
+ FeedRelatedLink:
+ type: object
+ properties:
+ code:
+ description: >
+ A short code to identify the type of link.
+ type: string
+ example: next_1
+ description:
+ description: >
+ A description of the link.
+ type: string
+ example: The URL for a future feed version with an upcoming service period.
+ url:
+ description: >
+ The URL of the related link.
+ type: string
+ format: url
+ created_at:
+ description: >
+ The date and time the related link was created, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ GtfsFeed:
+ allOf:
+ - $ref: "#/components/schemas/Feed"
+ - type: object
+ properties:
+ # We reproduce this property here so we can have a specific example.
+ data_type:
+ type: string
+ enum:
+ - gtfs
+ - gtfs_rt
+ - gbfs
+ example: gtfs
+ locations:
+ $ref: "#/components/schemas/Locations"
+ latest_dataset:
+ $ref: "#/components/schemas/LatestDataset"
+ bounding_box:
+ $ref: "#/components/schemas/BoundingBox"
+ visualization_dataset_id:
+ description: >
+ The dataset ID of the dataset used to compute the visualization files.
+ type: string
+ example: mdb-1210-202402121801
+
+ GbfsFeed:
+ allOf:
+ - $ref: "#/components/schemas/BasicFeed"
+ - type: object
+ properties:
+ # We reproduce this property here so we can have a specific example.
+ data_type:
+ type: string
+ enum:
+ - gtfs
+ - gtfs_rt
+ - gbfs
+ example: gbfs
+ locations:
+ $ref: "#/components/schemas/Locations"
+ system_id:
+ description: >
+ The system ID of the feed. This is a unique identifier for the system that the feed belongs to.
+ type: string
+ example: system-1234
+ provider_url:
+ description: >
+ The URL of the provider's website. This is the website of the organization that operates the system that the feed belongs to.
+ type: string
+ format: url
+ example: https://www.citybikenyc.com/
+ versions:
+ description: >
+ A list of GBFS versions that the feed supports. Each version is represented by its version number and a list of endpoints.
+ type: array
+ items:
+ $ref: "#/components/schemas/GbfsVersion"
+ bounding_box:
+ $ref: "#/components/schemas/BoundingBox"
+ bounding_box_generated_at:
+ description: The date and time the bounding box was generated, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+
+ GbfsVersion:
+ type: object
+ properties:
+ version:
+ description: >
+ The version of the GBFS specification that the feed is using.
+ This is a string that follows the semantic versioning format.
+ type: string
+ example: 2.3
+ created_at:
+ description: >
+ The date when the GBFS version was saved to the database.
+ type: string
+ format: date-time
+ example: 2023-07-10T22:06:00Z
+ last_updated_at:
+ description: >
+ The date when the GBFS version was last updated in the database.
+ type: string
+ format: date-time
+ example: 2023-07-10T22:06:00Z
+ source:
+ description: >
+ Indicates the origin of the version information. Possible values are:
+ * `autodiscovery`: Retrieved directly from the main GBFS autodiscovery URL.
+ * `gbfs_versions`: Retrieved from the `gbfs_versions` endpoint.
+ type: string
+ enum:
+ - autodiscovery
+ - gbfs_versions
+
+ endpoints:
+ description: >
+ A list of endpoints that are available in the version.
+ type: array
+ items:
+ $ref: "#/components/schemas/GbfsEndpoint"
+ latest_validation_report:
+ $ref: "#/components/schemas/GbfsValidationReport"
+
+ GbfsValidationReport:
+ type: object
+ description: >
+ A validation report of the GBFS feed.
+ properties:
+ validated_at:
+ description: >
+ The date and time the GBFS feed was validated, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ total_error:
+ type: integer
+ example: 10
+ minimum: 0
+ report_summary_url:
+ description: >
+ The URL of the JSON report of the validation summary.
+ type: string
+ format: url
+ example: https://storage.googleapis.com/mobilitydata-datasets-prod/validation-reports/gbfs-1234-202402121801.json
+ validator_version:
+ description: >
+ The version of the validator used to validate the GBFS feed.
+ type: string
+ example: 1.0.13
+
+ GbfsEndpoint:
+ type: object
+ properties:
+ name:
+ description: >
+ The name of the endpoint. This is a human-readable name for the endpoint.
+ type: string
+ example: system_information
+ url:
+ description: >
+ The URL of the endpoint. This is the URL where the endpoint can be accessed.
+ type: string
+ format: url
+ example: https://gbfs.citibikenyc.com/gbfs/system_information.json
+ language:
+ description: >
+ The language of the endpoint. This is the language that the endpoint is available in for versions 2.3
+ and prior.
+ type: string
+ example: en
+ is_feature:
+ description: >
+ A boolean value indicating if the endpoint is a feature. A feature is defined as an optionnal endpoint.
+ type: boolean
+ example: false
+
+ GbfsFeeds:
+ type: array
+ items:
+ $ref: "#/components/schemas/GbfsFeed"
+
+ GtfsRTFeed:
+ allOf:
+ - $ref: "#/components/schemas/Feed"
+ - type: object
+ properties:
+ # We reproduce this property here so we can have a specific example.
+ data_type:
+ type: string
+ enum:
+ - gtfs
+ - gtfs_rt
+ - gbfs
+ example: gtfs_rt
+ entity_types:
+ type: array
+ items:
+ type: string
+ enum:
+ - vp
+ - tu
+ - sa
+ example: vp
+ description: >
+ The type of realtime entry:
+ * vp - vehicle positions
+ * tu - trip updates
+ * sa - service alerts
+ # Have to put the enum inline because of a bug in openapi-generator
+ # $ref: "#/components/schemas/EntityTypes"
+ feed_references:
+ description: A list of the GTFS feeds that the real time source is associated with, represented by their MDB source IDs.
+ type: array
+ items:
+ type: string
+ example: "mdb-20"
+ locations:
+ $ref: "#/components/schemas/Locations"
+
+ SearchFeedItemResult:
+ # The following schema is used to represent the search results for feeds.
+ # The schema is a union of all the possible types(Feed, GtfsFeed, GtfsRTFeed and GbfsFeed) of feeds that can be returned.
+ # This union is not based on its original types due to the limitations of openapi-generator.
+ # For the same reason it's not defined as anyOf, but as a single object with all the possible properties.
+ type: object
+ required:
+ - id
+ - data_type
+ - status
+ properties:
+ id:
+ description: Unique identifier used as a key for the feeds table.
+ type: string
+ example: mdb-1210
+ data_type:
+ type: string
+ enum:
+ - gtfs
+ - gtfs_rt
+ - gbfs
+ example: gtfs
+ # Have to put the enum inline because of a bug in openapi-generator
+ # $ref: "#/components/schemas/DataType"
+ status:
+ description: >
+ Describes status of the Feed. Should be one of
+ * `active` Feed should be used in public trip planners.
+ * `deprecated` Feed is explicitly deprecated and should not be used in public trip planners.
+ * `inactive` Feed hasn't been recently updated and should be used at risk of providing outdated information.
+ * `development` Feed is being used for development purposes and should not be used in public trip planners.
+ * `future` Feed is not yet active but will be in the future.
+ type: string
+ enum:
+ - active
+ - deprecated
+ - inactive
+ - development
+ - future
+ example: deprecated
+ # Have to put the enum inline because of a bug in openapi-generator
+ # $ref: "#/components/schemas/FeedStatus"
+ created_at:
+ description: The date and time the feed was added to the database, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ official:
+ description: >
+ A boolean value indicating if the feed is official or not.
+ Official feeds are provided by the transit agency or a trusted source.
+ type: boolean
+ example: true
+ external_ids:
+ $ref: "#/components/schemas/ExternalIds"
+ description: |
+ The ID that can be use to find the feed data in an external or legacy database.
+
+ JBDA : Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda--. TDG : Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-. NTD : Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-. TransitFeeds : Automatically imported from old TransitFeeds website. Pattern is tfs-. Transit.land : Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-.
+ provider:
+ description: A commonly used name for the transit provider included in the feed.
+ type: string
+ example: Los Angeles Department of Transportation (LADOT, DASH, Commuter Express)
+ feed_name:
+ description: >
+ An optional description of the data feed, e.g to specify if the data feed is an aggregate of
+ multiple providers, or which network is represented by the feed.
+ type: string
+ example: Bus
+ note:
+ description: A note to clarify complex use cases for consumers.
+ type: string
+ feed_contact_email:
+ description: Use to contact the feed producer.
+ type: string
+ example: someEmail@ladotbus.com
+ source_info:
+ $ref: "#/components/schemas/SourceInfo"
+ redirects:
+ type: array
+ items:
+ $ref: "#/components/schemas/Redirect"
+ locations:
+ $ref: "#/components/schemas/Locations"
+ latest_dataset:
+ $ref: "#/components/schemas/LatestDataset"
+ entity_types:
+ type: array
+ items:
+ type: string
+ enum:
+ - vp
+ - tu
+ - sa
+ example: vp
+ description: >
+ The type of realtime entry:
+ * vp - vehicle positions
+ * tu - trip updates
+ * sa - service alerts
+ # Have to put the enum inline because of a bug in openapi-generator
+ # $ref: "#/components/schemas/EntityTypes"
+ versions:
+ type: array
+ items:
+ type: string
+ example: 2.3
+ description: The supported versions of the GBFS feed.
+ feed_references:
+ description: A list of the GTFS feeds that the real time source is associated with, represented by their MDB source IDs.
+ type: array
+ items:
+ type: string
+ example: "mdb-20"
+
+ Feeds:
+ type: array
+ items:
+ $ref: "#/components/schemas/Feed"
+
+ GtfsFeeds:
+ type: array
+ items:
+ $ref: "#/components/schemas/GtfsFeed"
+
+ GtfsRTFeeds:
+ type: array
+ items:
+ $ref: "#/components/schemas/GtfsRTFeed"
+
+ LatestDataset:
+ type: object
+ properties:
+ id:
+ description: Identifier of the latest dataset for this feed.
+ type: string
+ example: mdb-1210-202402121801
+ hosted_url:
+ description: >
+ As a convenience, the URL of the latest uploaded dataset hosted by MobilityData.
+ It should be the same URL as the one found in the latest dataset id dataset.
+ An alternative way to find this is to use the latest dataset id to obtain the dataset and then use its hosted_url.
+ type: string
+ format: url
+ example: https://storage.googleapis.com/mobilitydata-datasets-prod/mdb-1210/mdb-1210-202402121801/mdb-1210-202402121801.zip
+ bounding_box:
+ $ref: "#/components/schemas/BoundingBox"
+ downloaded_at:
+ description: The date and time the dataset was downloaded from the producer, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ hash:
+ description: A hash of the dataset.
+ type: string
+ example: ad3805c4941cd37881ff40c342e831b5f5224f3d8a9a2ec3ac197d3652c78e42
+ service_date_range_start:
+ description: The start date of the service date range for the dataset in UTC. Timing starts at 00:00:00 of the day.
+ type: string
+ example: 2023-07-10T06:00:00Z
+ format: date-time
+ service_date_range_end:
+ description: The start date of the service date range for the dataset in UTC. Timing ends at 23:59:59 of the day.
+ type: string
+ example: 2023-07-10T05:59:59+00Z
+ format: date-time
+ agency_timezone:
+ description: The timezone of the agency.
+ type: string
+ example: America/Los_Angeles
+ zipped_folder_size_mb:
+ description: The size of the zipped folder in MB.
+ type: number
+ example: 100.2
+ unzipped_folder_size_mb:
+ description: The size of the unzipped folder in MB.
+ type: number
+ example: 200.5
+ validation_report:
+ type: object
+ properties:
+ features:
+ description: List of GTFS features associated to the dataset. More information, https://gtfs.org/getting-started/features/overview
+ type: array
+ items:
+ type: string
+ example: ["Shapes", "Headsigns", "Wheelchair Accessibility"]
+ total_error:
+ type: integer
+ example: 10
+ minimum: 0
+ total_warning:
+ type: integer
+ example: 20
+ minimum: 0
+ total_info:
+ type: integer
+ example: 30
+ minimum: 0
+ unique_error_count:
+ type: integer
+ example: 1
+ minimum: 0
+ unique_warning_count:
+ type: integer
+ example: 2
+ minimum: 0
+ unique_info_count:
+ type: integer
+ example: 3
+ minimum: 0
+
+ # Have to put the enum inline because of a bug in openapi-generator
+ # EntityTypes:
+ # type: array
+ # items:
+ # $ref: "#/components/schemas/EntityType"
+
+ # EntityType:
+ # type: string
+ # enum:
+ # - vp
+ # - tu
+ # - sa
+ # example: vp
+ # description: >
+ # The type of realtime entry:
+ # * vp - vehicle positions
+ # * tu - trip updates
+ # * sa - service alerts
+
+ ExternalIds:
+ type: array
+ description: |
+ The ID that can be use to find the feed data in an external or legacy database.
+
+ JBDA : Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda--. TDG : Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-. NTD : Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-. TransitFeeds : Automatically imported from old TransitFeeds website. Pattern is tfs-. Transit.land : Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-.
+ items:
+ $ref: "#/components/schemas/ExternalId"
+
+ ExternalId:
+ type: object
+ properties:
+ external_id:
+ description: |
+ The ID that can be used to find the feed data in an external or legacy database.
+
+ JBDA : Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda--. TDG : Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-. NTD : Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-. TransitFeeds : Automatically imported from old TransitFeeds website. Pattern is tfs-. Transit.land : Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-.
+ type: string
+ example: 1210
+ source:
+ description: The source of the external ID, e.g. the name of the database where the external ID can be used.
+ type: string
+ example: mdb
+
+ SourceInfo:
+ type: object
+ properties:
+ producer_url:
+ description: >
+ URL where the producer is providing the dataset.
+ Refer to the authentication information to know how to access this URL.
+ type: string
+ format: url
+ example: https://ladotbus.com/gtfs
+ authentication_type:
+ description: >
+ Defines the type of authentication required to access the `producer_url`. Valid values for this field are:
+ * 0 or (empty) - No authentication required.
+ * 1 - The authentication requires an API key, which should be passed as value of the parameter api_key_parameter_name in the URL. Please visit URL in authentication_info_url for more information.
+ * 2 - The authentication requires an HTTP header, which should be passed as the value of the header api_key_parameter_name in the HTTP request.
+ When not provided, the authentication type is assumed to be 0.
+ type: integer
+ enum:
+ - 0
+ - 1
+ - 2
+ example: 2
+ authentication_info_url:
+ description: >
+ Contains a URL to a human-readable page describing how the authentication should be performed and how credentials can be created.
+ This field is required for `authentication_type=1` and `authentication_type=2`.
+ type: string
+ format: url
+ example: https://apidevelopers.ladottransit.com
+ api_key_parameter_name:
+ type: string
+ description: >
+ Defines the name of the parameter to pass in the URL to provide the API key.
+ This field is required for `authentication_type=1` and `authentication_type=2`.
+ example: Ocp-Apim-Subscription-Key
+ license_url:
+ description: A URL where to find the license for the feed.
+ type: string
+ format: url
+ example: https://www.ladottransit.com/dla.html
+ license_id:
+ description: Id of the feed license that can be used to query the license endpoint.
+ type: string
+ example: 0BSD
+ license_is_spdx:
+ description: true if the license is SPDX. false if not.
+ type: boolean
+ example: true
+ license_notes:
+ description: Notes concerning the relation between the feed and the license.
+ type: string
+ example: Detected locale/jurisdiction port 'nl'. SPDX does not list ported CC licenses; using canonical ID.
+
+ Locations:
+ type: array
+ items:
+ $ref: "#/components/schemas/Location"
+
+ Location:
+ type: object
+ properties:
+ country_code:
+ description: >
+ ISO 3166-1 alpha-2 code designating the country where the system is located.
+ For a list of valid codes [see here](https://unece.org/trade/uncefact/unlocode-country-subdivisions-iso-3166-2).
+ type: string
+ example: US
+ country:
+ description: The english name of the country where the system is located.
+ type: string
+ example: United States
+ subdivision_name:
+ description: >
+ ISO 3166-2 english subdivision name designating the subdivision (e.g province, state, region) where the system is located.
+ For a list of valid names [see here](https://unece.org/trade/uncefact/unlocode-country-subdivisions-iso-3166-2).
+ type: string
+ example: California
+ municipality:
+ description: Primary municipality in english in which the transit system is located.
+ type: string
+ example: Los Angeles
+
+ # Have to put the enum inline because of a bug in openapi-generator
+ # FeedStatus:
+ # description: >
+ # Describes status of the Feed. Should be one of
+ # * `active` Feed should be used in public trip planners.
+ # * `deprecated` Feed is explicitly deprecated and should not be used in public trip planners.
+ # * `inactive` Feed hasn't been recently updated and should be used at risk of providing outdated information.
+ # * `development` Feed is being used for development purposes and should not be used in public trip planners.
+ # * `future` Feed is not yet active but will be in the future
+ # type: string
+ # enum:
+ # - active
+ # - deprecated
+ # - inactive
+ # - development
+ # - future
+ # example: active
+
+ BasicDataset:
+ type: object
+ properties:
+ id:
+ description: Unique identifier used as a key for the datasets table.
+ type: string
+ example: mdb-10-202402080058
+ feed_id:
+ description: ID of the feed related to this dataset.
+ type: string
+ example: mdb-10
+
+ GtfsDataset:
+ allOf:
+ - $ref: "#/components/schemas/BasicDataset"
+ - type: object
+ properties:
+ hosted_url:
+ description: The URL of the dataset data as hosted by MobilityData. No authentication required.
+ type: string
+ example: https://storage.googleapis.com/storage/v1/b/mdb-latest/o/us-maine-casco-bay-lines-gtfs-1.zip?alt=media
+ note:
+ description: A note to clarify complex use cases for consumers.
+ type: string
+ downloaded_at:
+ description: The date and time the dataset was downloaded from the producer, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ hash:
+ description: A hash of the dataset.
+ type: string
+ example: 6497e85e34390b8b377130881f2f10ec29c18a80dd6005d504a2038cdd00aa71
+ bounding_box:
+ $ref: "#/components/schemas/BoundingBox"
+ validation_report:
+ $ref: "#/components/schemas/ValidationReport"
+ service_date_range_start:
+ description: The start date of the service date range for the dataset in UTC. Timing starts at 00:00:00 of the day.
+ type: string
+ example: 2023-07-10T06:00:00Z
+ format: date-time
+ service_date_range_end:
+ description: The start date of the service date range for the dataset in UTC. Timing ends at 23:59:59 of the day.
+ type: string
+ example: 2023-07-10T05:59:59+00Z
+ format: date-time
+ agency_timezone:
+ description: The timezone of the agency.
+ type: string
+ example: America/Los_Angeles
+ zipped_folder_size_mb:
+ description: The size of the zipped folder in MB.
+ type: number
+ example: 100.2
+ unzipped_folder_size_mb:
+ description: The size of the unzipped folder in MB.
+ type: number
+ example: 200.5
+
+ BoundingBox:
+ description: Bounding box of the dataset when it was first added to the catalog.
+ type: object
+ properties:
+ minimum_latitude:
+ description: The minimum latitude for the dataset bounding box.
+ type: number
+ example: 33.721601
+ maximum_latitude:
+ description: The maximum latitude for the dataset bounding box.
+ type: number
+ example: 34.323077
+ minimum_longitude:
+ description: The minimum longitude for the dataset bounding box.
+ type: number
+ example: -118.882829
+ maximum_longitude:
+ description: The maximum longitude for the dataset bounding box.
+ type: number
+ example: -118.131748
+
+ GtfsDatasets:
+ type: array
+ items:
+ $ref: "#/components/schemas/GtfsDataset"
+
+ Metadata:
+ type: object
+ properties:
+ version:
+ type: string
+ example: 1.0.0
+ commit_hash:
+ type: string
+ example: 8635fdac4fbff025b4eaca6972fcc9504bc1552d
+
+ ValidationReport:
+ description: Validation report
+ type: object
+ properties:
+ validated_at:
+ description: The date and time the report was generated, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ features:
+ description: List of GTFS features associated to the dataset. More information, https://gtfs.org/getting-started/features/overview
+ type: array
+ items:
+ type: string
+ example: ["Shapes", "Headsigns", "Wheelchair Accessibility"]
+ validator_version:
+ type: string
+ example: 4.2.0
+ total_error:
+ type: integer
+ example: 10
+ minimum: 0
+ total_warning:
+ type: integer
+ example: 20
+ minimum: 0
+ total_info:
+ type: integer
+ example: 30
+ minimum: 0
+ unique_error_count:
+ type: integer
+ example: 1
+ minimum: 0
+ unique_warning_count:
+ type: integer
+ example: 2
+ minimum: 0
+ unique_info_count:
+ type: integer
+ example: 3
+ minimum: 0
+ url_json:
+ type: string
+ format: url
+ description: JSON validation report URL
+ example: https://storage.googleapis.com/mobilitydata-datasets-dev/mdb-10/mdb-10-202312181718/mdb-10-202312181718-report-4_2_0.json
+ url_html:
+ type: string
+ format: url
+ description: HTML validation report URL
+ example: https://storage.googleapis.com/mobilitydata-datasets-dev/mdb-10/mdb-10-202312181718/mdb-10-202312181718-report-4_2_0.html
+
+ LicenseRule:
+ type: object
+ properties:
+ name:
+ description: Name of the rule.
+ type: string
+ example: commercial-use
+ label:
+ description: Label of the rule.
+ type: string
+ example: Commercial use
+ description:
+ description: Description of the rule.
+ type: string
+ example: This license allows the software or data to be used for commercial purposes.
+ type:
+ description: Type of rule.
+ type: string
+ enum:
+ - permission
+ - condition
+ - limitation
+
+ LicenseBase:
+ type: object
+ properties:
+ id:
+ description: Unique identifier for the license.
+ type: string
+ example: 0BSD
+ type:
+ type: string
+ description: The type of license.
+ example: standard
+ is_spdx:
+ type: boolean
+ description: true if license id spdx.
+ name:
+ type: string
+ description: The user facing name of the license.
+ example: BSD Zero Clause License
+ url:
+ description: A URL where to find the license for the feed.
+ type: string
+ format: url
+ example: https://www.ladottransit.com/dla.html
+ description:
+ type: string
+ description: The description of the license.
+ example: This is the 0BSD license.
+ created_at:
+ description: The date and time the license was added to the database, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+ updated_at:
+ description: The last date and time the license was updated in the database, in ISO 8601 date-time format.
+ type: string
+ example: 2023-07-10T22:06:00Z
+ format: date-time
+
+ LicenseWithRules:
+ allOf:
+ - $ref: "#/components/schemas/LicenseBase"
+ - type: object
+ properties:
+ license_rules:
+ type: array
+ items:
+ $ref: "#/components/schemas/LicenseRule"
+
+
+ Licenses:
+ type: array
+ items:
+ $ref: "#/components/schemas/LicenseBase"
+
+ MatchingLicense:
+ type: object
+ description: Matching a license
+ properties:
+ license_id:
+ description: Unique identifier for the license (typically SPDX ID)
+ type: string
+ example: CC-BY-4.0
+ license_url:
+ description: Original license URL provided for resolution
+ type: string
+ example: https://creativecommons.org/licenses/by/4.0/
+ normalized_url:
+ description: URL after normalization (lowercased, trimmed, protocol removed)
+ type: string
+ example: creativecommons.org/licenses/by/4.0
+ match_type:
+ description: >
+ Type of match performed. One of:
+ - 'exact': Direct match found in database
+ - 'heuristic': Matched via pattern-based rules (CC resolver, common patterns)
+ - 'fuzzy': Similarity-based match against same-host licenses
+ type: string
+ example: heuristic
+ confidence:
+ description: >
+ Match confidence score (0.0-1.0), examples:
+ - 1.0: Exact match
+ - 0.99: Creative Commons resolved
+ - 0.95: Pattern heuristic match
+ - 0.0-1.0: Fuzzy match score based on string similarity
+ type: number
+ example: 0.99
+ spdx_id:
+ description: SPDX License Identifier if matched (e.g., 'CC-BY-4.0', 'MIT')
+ type: string
+ example: CC-BY-4.0
+ matched_name:
+ description: Human-readable name of the matched license
+ type: string
+ example: Creative Commons Attribution 4.0 International
+ matched_catalog_url:
+ description: Canonical URL from the license catalog/database
+ type: string
+ example: https://creativecommons.org/licenses/by/4.0/legalcode
+ matched_source:
+ description: >
+ Source of the match. Examples:
+ - 'db.license': Exact match from database
+ - 'cc-resolver': Creative Commons license resolver
+ - 'pattern-heuristics': Generic pattern matching
+ type: string
+ example: cc-resolver
+ notes:
+ description: Additional context about the match (e.g., version normalization, locale detection)
+ type: string
+ example: Detected locale/jurisdiction port 'nl'. SPDX does not list ported CC licenses; using canonical ID.
+ regional_id:
+ description: >
+ Regional/jurisdictional variant identifier for ported licenses
+ (e.g., 'CC-BY-2.1-jp' for Japan-ported Creative Commons)
+ type: string
+ example: CC-BY-4.0-nl
+ example:
+ license_id: CC-BY-4.0
+ license_url: https://creativecommons.org/licenses/by/4.0/deed.nl
+ normalized_url: creativecommons.org/licenses/by/4.0
+ match_type: heuristic
+ confidence: 0.99
+ spdx_id: CC-BY-4.0
+ matched_name: Creative Commons Attribution 4.0 International
+ matched_catalog_url: https://creativecommons.org/licenses/by/4.0/legalcode
+ matched_source: cc-resolver
+ notes: Detected locale/jurisdiction port 'nl'. SPDX does not list ported CC licenses; using canonical ID.
+ regional_id: CC-BY-4.0-nl
+
+ MatchingLicenses:
+ description: List of MatchingLicense
+ type: array
+ items:
+ $ref: "#/components/schemas/MatchingLicense"
+
+ parameters:
+ status:
+ name: status
+ in: query
+ description: Filter feeds by their status. [Status definitions defined here](https://github.com/MobilityData/mobility-database-catalogs?tab=readme-ov-file#gtfs-schedule-schema)
+ required: false
+ schema:
+ type: string
+ enum:
+ - active
+ - deprecated
+ - inactive
+ - development
+ - future
+ statuses:
+ # This parameter name is kept as status to maintain backward compatibility.
+ name: status
+ in: query
+ description: Filter feeds by their status. [Status definitions defined here](https://github.com/MobilityData/mobility-database-catalogs?tab=readme-ov-file#gtfs-schedule-schema)
+ required: false
+ style: form
+ explode: false
+ schema:
+ type: array
+ items:
+ type: string
+ enum:
+ - active
+ - deprecated
+ - inactive
+ - development
+ - future
+ feature:
+ name: feature
+ in: query
+ description: Filter feeds by their GTFS features. [GTFS features definitions defined here](https://gtfs.org/getting-started/features/overview)
+ required: false
+ style: form
+ explode: false
+ schema:
+ type: array
+ items:
+ type: string
+ provider:
+ name: provider
+ in: query
+ description: List only feeds with the specified value. Can be a partial match. Case insensitive.
+ required: false
+ schema:
+ type: string
+ example: Los Angeles Department of Transportation (LADOT, DASH, Commuter Express)
+ producer_url:
+ name: producer_url
+ in: query
+ required: false
+ description: >
+ List only feeds with the specified value. Can be a partial match. Case insensitive.
+ schema:
+ type: string
+ format: url
+ example: https://ladotbus.com
+ entity_types:
+ name: entity_types
+ in: query
+ description: Filter feeds by their entity type. Expects a comma separated list of all types to fetch.
+ required: false
+ schema:
+ type: string
+ example: vp,sa,tu
+ country_code:
+ name: country_code
+ in: query
+ description: Filter feeds by their exact country code.
+ schema:
+ type: string
+ example: US
+ subdivision_name:
+ name: subdivision_name
+ in: query
+ description: List only feeds with the specified value. Can be a partial match. Case insensitive.
+ schema:
+ type: string
+ example: California
+ municipality:
+ name: municipality
+ in: query
+ description: List only feeds with the specified value. Can be a partial match. Case insensitive.
+ schema:
+ type: string
+ example: Los Angeles
+ downloaded_after:
+ name: downloaded_after
+ in: query
+ description: Filter feed datasets with downloaded date greater or equal to given date. Date should be in ISO 8601 date-time format.
+ schema:
+ type: string
+ format: date-time
+ example: 2023-07-00T22:06:00Z
+ downloaded_before:
+ name: downloaded_before
+ in: query
+ description: Filter feed datasets with downloaded date less or equal to given date. Date should be in ISO 8601 date-time format.
+ schema:
+ type: string
+ format: date-time
+ example: 2023-07-20T22:06:00Z
+
+ dataset_latitudes:
+ name: dataset_latitudes
+ in: query
+ description: >
+ Specify the minimum and maximum latitudes of the bounding box to use for filtering.
+ /src/setupTests.ts'],
+ globalSetup: '/jest-global-setup.ts',
+ testEnvironment: 'jest-environment-jsdom',
+ moduleNameMapper: {
+ // Handle module aliases (this will be automatically configured for you based on your tsconfig.json paths)
+ '^@/(.*)$': '/src/$1',
+ },
+ testMatch: [
+ '/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+ '/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+ ],
+ collectCoverageFrom: [
+ 'src/**/*.{js,jsx,ts,tsx}',
+ '!src/**/*.d.ts',
+ '!src/**/index.{js,jsx,ts,tsx}',
+ '!src/**/*.stories.{js,jsx,ts,tsx}',
+ ],
+ moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+ transformIgnorePatterns: [
+ // Transform all node_modules except these specific ones that need transformation
+ 'node_modules/(?!(.*\\.mjs$|@mui|@babel|uuid|nanoid|countries-list|@turf|openapi-fetch|next-intl))',
+ ],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)
\ No newline at end of file
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..0d31f83
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,475 @@
+{
+ "common": {
+ "copyToClipboard": "Copy to clipboard",
+ "copied": "Copied!",
+ "name": "Name",
+ "email": "Email",
+ "organization": "Organization",
+ "signOut": "Sign out",
+ "unknown": "Unknown",
+ "search": "Search",
+ "feeds": "Feeds",
+ "gtfsSchedule": "GTFS Schedule",
+ "gtfsRealtime": "GTFS Realtime",
+ "gtfs": "GTFS Schedule",
+ "gtfs_rt": "GTFS Realtime",
+ "gbfs": "GBFS",
+ "gtfsRealtimeEntities": {
+ "tripUpdates": "Trip Updates",
+ "vehiclePositions": "Vehicle Positions",
+ "serviceAlerts": "Service Alerts"
+ },
+ "loading": "Loading...",
+ "download": "Download",
+ "updated": "Updated",
+ "errors": {
+ "generic": "We are unable to complete your request at the moment."
+ },
+ "others": "others",
+ "apiKey": "API Key",
+ "httpHeader": "HTTP Header",
+ "back": "Back",
+ "and": "and",
+ "next": "Next",
+ "form": {
+ "yes": "Yes",
+ "no": "No",
+ "required": "This field is required",
+ "submit": "Submit",
+ "select": "Select",
+ "notSure": "Not sure"
+ },
+ "country": "Country",
+ "chooseCountry": "Choose a country",
+ "region": "Region",
+ "municipality": "Municipality",
+ "feedback": {
+ "errors": "errors",
+ "noErrors": "No errors",
+ "noWarnings": "No warnings",
+ "warnings": "warnings",
+ "infoNotices": "info notices"
+ },
+ "gtfsSpec": {
+ "routeType": {
+ "0": {
+ "name": "Tram/Streetcar/Light rail",
+ "description": "Any light rail or street level system within a metropolitan area."
+ },
+ "1": {
+ "name": "Subway/Metro",
+ "description": "Any underground rail system within a metropolitan area."
+ },
+ "2": {
+ "name": "Rail",
+ "description": "Used for intercity or long-distance travel."
+ },
+ "3": {
+ "name": "Bus",
+ "description": "Used for short- and long-distance bus routes."
+ },
+ "4": {
+ "name": "Ferry",
+ "description": "Used for short- and long-distance boat service."
+ },
+ "5": {
+ "name": "Cable tram",
+ "description": "Used for street-level rail cars where the cable runs beneath the vehicle (e.g., cable car in San Francisco)."
+ },
+ "6": {
+ "name": "Aerial lift/Suspended cable car (e.g., gondola lift, aerial tramway)",
+ "description": "Cable transport where cabins, cars, gondolas or open chairs are suspended by means of one or more cables."
+ },
+ "7": {
+ "name": "Funicular",
+ "description": "Any rail system designed for steep inclines."
+ },
+ "11": {
+ "name": "Trolleybus",
+ "description": "Electric buses that draw power from overhead wires using poles."
+ },
+ "12": {
+ "name": "Monorail",
+ "description": "Railway in which the track consists of a single rail or a beam."
+ }
+ }
+ },
+ "validators": "Validators",
+ "gbfsValidator": "GBFS Validator",
+ "gtfsValidator": "GTFS Validator",
+ "gtfsRtValidator": "GTFS RT Validator",
+ "start": "Start",
+ "end": "End",
+ "showLess": "Show less",
+ "showMore": "Show {count} more",
+ "moreInfo": "More Info",
+ "license": "License"
+ },
+ "feeds": {
+ "feeds": "Feeds",
+ "dataType": "Data Format",
+ "transitProvider": "Transit Provider",
+ "transitProviderName": "Transit Provider Name",
+ "location": "Location",
+ "locations": "Locations",
+ "feedDescription": "Description",
+ "searchFor": "Search For",
+ "resultsFor": "{startResult}-{endResult} of {totalResults} results",
+ "deprecated": "Deprecated",
+ "searchPlaceholder": "Transit provider, feed name, or location",
+ "noResults": "We're sorry, we found no search results for '{activeSearch}'.",
+ "searchSuggestions": "Search suggestions: ",
+ "searchTips": {
+ "twoDigit": "Use the full English name of a location e.g \"France\" or \"New York City\"",
+ "fullName": "Include the full name for transit provider, e.g 'Toronto Transit Commission' instead of 'TTC'",
+ "checkSpelling": "Double check the spelling"
+ },
+ "routeIds": "Route IDs",
+ "stopCode": "Stop Code",
+ "viewStopInfo": "View Stop Info",
+ "gtfsVisualizationViewLabel": "GTFS Visualization View",
+ "errorAndContact": "Please check your internet connection and try again. If the problem persists contact us for further assistance.",
+ "errorLoadingFeed": "There was an error loading the feed.",
+ "errorLoadingQualityReport": "Unable to generate data quality report.",
+ "form": {
+ "addOrUpdateFeed": "Add or Update a Feed",
+ "signUp": "Sign up for a Mobility Database account or login to add or update a GTFS feed.",
+ "signUpAction": "Sign up for an account",
+ "loginSuccess": "You were successfully logged in, you can now add or update a feed.",
+ "dataTypeRequired": "Data format required",
+ "isOfficialFeedRequired": "Official feed required",
+ "feedLinkRequired": "Feed link required",
+ "oldFeedLinkRequired": "Old feed link required",
+ "dataProducerEmailRequired": "Data producer email required",
+ "contactEmailRequired": "Contact email required",
+ "atLeastOneRealtimeFeed": "At least one of the three feeds is required",
+ "authType": {
+ "apiKey": "API key - 1",
+ "httpHeader": "HTTP header - 2",
+ "signUpLink": "Authentication sign up link",
+ "parameterName": "Authentication parameter name",
+ "parameterNameDetail": "The parameter the user must pass in the URl or HTTP header to download the feed. E.g \"api_key\" in https://example.com/feed?api_key=123"
+ },
+ "errorSubmitting": "An error occurred while submitting the form.",
+ "submittingFeed": "Submitting the feed...",
+ "errorUrl": "The URL must start with a valid protocol: http:// or https://",
+ "unofficialDesc": "Why was this feed created?",
+ "unofficialDescPlaceholder": "Does this feed exist for research purposes, a specific app, etc?",
+ "updateFreq": "How often is this feed updated?",
+ "updateFreqPlaceholder": "Never, every month, automatically via a script, etc"
+ },
+ "seeFullList": "See full list",
+ "hideFullList": "Hide full list",
+ "producer": "Producer",
+ "agency": "Agency",
+ "producerDownloadUrl": "Producer download URL",
+ "copyDownloadUrl": "Copy download URL",
+ "producerUrlCopied": "Producer url copied to clipboard",
+ "linkToLicense": "Link to feed license",
+ "authenticationType": "Authentication type",
+ "selectAuthenticationType": "Please select an authentication type",
+ "authenticationRequired": "This feed requires authentication",
+ "registerToDownloadFeed": "Register to download feed",
+ "feedContactEmail": "Feed contact email",
+ "copyFeedContactEmail": "Copy feed contact email",
+ "features": "Features",
+ "unableToDownloadFeed": "Unable to download this feed. If there is a more recent URL for this feed, stops.txt that are located within each geographic area. Darker colors indicate areas where a higher percentage of stops are covered.",
+ "heatmapLower": "Less Stops",
+ "heatmapHigher": "More Stops",
+ "feedStatus": {
+ "active": {
+ "label": "Active",
+ "toolTip": "Active Feed",
+ "toolTipLong": "This feed is currently active and being used."
+ },
+ "inactive": {
+ "label": "Inactive",
+ "toolTip": "Inactive Feed",
+ "toolTipLong": "This feed is currently inactive and not being used."
+ },
+ "deprecated": {
+ "label": "Deprecated",
+ "toolTip": "Deprecated Feed",
+ "toolTipLong": "This feed is deprecated and should not be used."
+ },
+ "future": {
+ "label": "Future",
+ "toolTip": "Future Feed",
+ "toolTipLong": "This feed is not yet active but will be used in the future."
+ }
+ },
+ "datasetHistory": "Dataset History",
+ "datasetHistoryDescription": "The Mobility Database fetches and stores new datasets once a day at midnight UTC.",
+ "allDatasetsLoaded": "All datasets loaded",
+ "datasets": "Datasets",
+ "validationReportNotAvailable": "Validation report not available",
+ "runValidationReportYourself": "Run Validator Yourself",
+ "datasetHistoryTooltip": {
+ "serviceDateRange": "Service date range of when this dataset is active",
+ "downloadReport": "Download the dataset for this feed",
+ "viewReport": "View Validation Report",
+ "viewJsonReport": "View Validation Report in JSON format"
+ },
+ "viewRealtimeVisualization": "View real-time visualization",
+ "versions": "Versions",
+ "dataAttribution": "Transit data provided by",
+ "emptyLicenseUsage": "Can this feed be used commercially by trip planners and other third parties?",
+ "commonForm": {
+ "yes": "Yes",
+ "no": "No",
+ "notSure": "Unsure"
+ },
+ "openDetailedMap": "Open Detailed Map",
+ "retry": "Retry",
+ "visualizationMapErrors": {
+ "errorDescription": "An error occurred while loading the map.",
+ "noFeedMetadata": "Could not load feed metadata.",
+ "noRoutesData": "Could not load routes data for the map.",
+ "invalidDataType": "This feed is not a GTFS Schedule feed.",
+ "noBoundingBox": "No bounding box available."
+ },
+ "andMoreElements": "And {count} more...",
+ "selectedRouteStops": {
+ "title_one": "Stops from selected route",
+ "title_other": "Stops from selected routes",
+ "routeIds_one": "Route ID",
+ "routeIds_other": "Route IDs",
+ "stopId": "Stop ID:"
+ },
+ "scanning": {
+ "titleLarge": "Scanning large feed…",
+ "title": "Scanning the map…",
+ "bodyLarge": "We're indexing stops across the full extent. This might take a moment.",
+ "body": "We're indexing stops across the view to speed up filtering.",
+ "gridTile": "Grid: {grid} • Tile {tile} / {total}",
+ "percentComplete": "{percent}% complete",
+ "cancel": "Cancel"
+ },
+ "fullMapView": {
+ "disabledTitle": "Full map view disabled",
+ "disabledDescription": "The full map view feature is disabled at the moment. Please try again later.",
+ "dataBlurb": "The visualization reflects data directly from the GTFS feed. Route paths, stops, colors, and labels are all derived from the feed files (routes.txt, trips.txt, stop_times.txt, stops.txt, and shapes.txt where it's defined). If a route doesn't specify a color, it appears in black. When multiple shapes exist for different trips on the same route, they're combined into one for display.",
+ "clearAll": "Clear All",
+ "hideStops": "Hide Stops",
+ "closePanel": "Close",
+ "headers": {
+ "routeTypes": "Route Types",
+ "visibility": "Visibility",
+ "routes": "Routes"
+ },
+ "backToMap": "Back To Map",
+ "aria": {
+ "close": "close",
+ "refocus": "refocus",
+ "mapStyle": "map style",
+ "filter": "filter"
+ },
+ "style": {
+ "title": "Map style",
+ "stopSize": "Stop size",
+ "size": {
+ "small": "Small",
+ "medium": "Medium",
+ "large": "Large",
+ "custom": "Custom"
+ },
+ "customStopRadiusAria": "Custom stop radius",
+ "radius": "Radius: {px}px"
+ }
+ },
+ "relatedLinks": "Related Links",
+ "externalIds": {
+ "title": "External Identifiers",
+ "tooltips": {
+ "jbda": "Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda-[organisation_id]-[feed_id]",
+ "tdg": "Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-[resourceId]",
+ "ntd": "Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-[ntd_id]",
+ "tfs": "Automatically imported from old TransitFeeds website. Pattern is tfs-[feed_id]",
+ "tld": "Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-[feed_id]"
+ }
+ },
+ "license": {
+ "dialogTitle": "License Details",
+ "loadingError": "Error loading license details",
+ "spdxTooltip": "The Software Package Data Exchange (SPDX) is an open standard for communicating software bill of material information, including licenses.",
+ "licenseTooltip": "License was added by the Mobility Database team based on either 1) a submission authorized by the transit provider 2) review of the transit providers website.",
+ "permission": "Permission",
+ "permissionSubtitle": "What you can do with this license",
+ "condition": "Condition",
+ "conditionSubtitle": "What you must do to comply",
+ "limitation": "Limitation",
+ "limitationSubtitle": "What this license does not provide",
+ "noPermission": "No permissions",
+ "noCondition": "No conditions",
+ "noLimitation": "No limitations",
+ "noRules": "No usage rules specified.",
+ "contributeMessage": "To contribute to the clarity of the rules for this license entry, please submit a pull request to:"
+ },
+ "noAgencyProvided": "No agency provided",
+ "feedSummary": {
+ "viewAllAgencies": "View All {count} Agencies",
+ "andMore": "and more",
+ "plusMore": "+ {count} more",
+ "showLocationDetails": "Show Details ({count} Locations)",
+ "routes": "Routes",
+ "routesCount": "{count} routes",
+ "viewOnMap": "View On Map",
+ "autoDiscoveryUrl": "Auto-Discovery URL",
+ "producerUrl": "Producer URL",
+ "providerUrl": "Provider URL",
+ "systemId": "System ID",
+ "feedAuthentication": "Feed Authentication"
+ }
+ },
+ "account": {
+ "title": "Your API Account",
+ "userDetails": "User Details",
+ "description": "The Mobility Database API uses OAuth2 authentication. To initiate a successful API request, an access token must be included as a bearer token in the HTTP header. Access tokens are valid for one hour. To obtain an access token, you'll first need a refresh token, which is long-lived and does not expire.",
+ "support": "If you need a reissued refresh token or want your account removed, send us an email at",
+ "registerApiAnnouncements": "Registered to API Announcements",
+ "refreshToken": {
+ "title": "Refresh Token",
+ "description": "Use your refresh token to connect to the API in your app.",
+ "placeholder": "Your refresh token is hidden",
+ "yourToken": "Your Refresh Token",
+ "toggleVisibility": "Toggle Refresh Token Visibility",
+ "copy": "Copy Refresh Token",
+ "copyToClipboard": "Copy refresh token to clipboard"
+ },
+ "accessToken": {
+ "title": "How to Generate the Access Token in Your App",
+ "description": {
+ "pt1": "Follow",
+ "cta": "our OpenAPI documentation",
+ "pt2": "to authenticate your account with the refresh token."
+ },
+ "generate": "Generate Access Token",
+ "copyToken": "Copy Access Token",
+ "copyTokenToClipboard": "Copy access token to clipboard",
+ "copy": "Copy the CLI command to generate an access token.",
+ "yourToken": "Your Access Token",
+ "refreshing": "Refreshing Access token...",
+ "refresh": "Refresh Access Token",
+ "refreshSuccess": "Your access token has been refreshed successfully!",
+ "testing": {
+ "title": "Access Token for Testing",
+ "description": {
+ "pt1": "Want some quick testing? Copy the access token bellow to test endpoints in our",
+ "cta": "OpenAPI documentation",
+ "pt2": ". Access tokens are valid for one hour."
+ },
+ "api": "API Test",
+ "copyCli": "Copy the CLI command to test your access to the API."
+ },
+ "toggleVisibility": "Toggle Access Token Visibility",
+ "expired": "Token expired",
+ "willExpireIn": "Your token will expire in {timeLeftForTokenExpiration}",
+ "hidden": "Your access token is hidden",
+ "unavailable": "Your token is unavailable"
+ }
+ },
+ "contactUs": {
+ "title": "Contact Us",
+ "email": {
+ "title": "Email Us",
+ "description": "For general inquiries regarding the Mobility Database API, please email us at"
+ },
+ "slack": {
+ "title": "Join our Slack",
+ "description": "Join the MobilityData Slack channel to ask questions, share feedback, and connect with others",
+ "action": "Join Slack"
+ },
+ "contribute": {
+ "title": "Contribute",
+ "description": "Help us improve the Mobility Database by contributing to our open-source projects on GitHub",
+ "action": "View on GitHub"
+ },
+ "addFeeds": {
+ "title": "Add Feeds",
+ "description": "Looking to add many feeds? You can contribute by heading over to our GitHub catalog repository",
+ "action": "View Catalogs Repository"
+ }
+ },
+ "gbfs": {
+ "versions": "GBFS Versions",
+ "feedUrl": "Feed URL",
+ "feedUrlCopied": "Feed URL Copied",
+ "runValidationReport": "Run Validation Report",
+ "openFeedUrl": "Open Feed URL",
+ "openAutoDiscoveryUrl": "Open Auto-Discovery URL",
+ "autoDiscoveryUrl": "Auto-Discovery URL",
+ "autoDiscoveryVersion": "Auto-Discovery",
+ "gbfsVersionsJson": "From gbfs_versions.json",
+ "feedVersionTooltip": "This URL is from gbfs_versions.json",
+ "features": {
+ "gbfs": "GBFS",
+ "system_regions": "System Regions",
+ "system_information": "System Information",
+ "geofencing_zones": "Geofencing Zones",
+ "system_pricing_plans": "System Pricing Plans",
+ "vehicle_types": "Vehicle Types",
+ "vehicle_status": "Vehicle Status",
+ "station_status": "Station Status",
+ "system_calendar": "System Calendar",
+ "system_hours": "System Hours",
+ "gbfs_versions": "GBFS Versions",
+ "station_information": "Station Information",
+ "system_alerts": "System Alerts",
+ "free_bike_status": "Free Bike Status",
+ "nearby_stations": "Nearby Stations"
+ },
+ "unableToDetectVersions": "Unable to detect versions within this feed."
+ }
+}
diff --git a/messages/fr.json b/messages/fr.json
new file mode 100644
index 0000000..4c75ff0
--- /dev/null
+++ b/messages/fr.json
@@ -0,0 +1,475 @@
+{
+ "common": {
+ "copyToClipboard": "Copier dans le presse-papiers",
+ "copied": "Copié!",
+ "name": "Nom",
+ "email": "E-mail",
+ "organization": "Organisation",
+ "signOut": "Déconnexion",
+ "unknown": "Inconnu",
+ "search": "Search",
+ "feeds": "Feeds",
+ "gtfsSchedule": "GTFS Schedule",
+ "gtfsRealtime": "GTFS Realtime",
+ "gtfs": "GTFS Schedule",
+ "gtfs_rt": "GTFS Realtime",
+ "gbfs": "GBFS",
+ "gtfsRealtimeEntities": {
+ "tripUpdates": "Trip Updates",
+ "vehiclePositions": "Vehicle Positions",
+ "serviceAlerts": "Service Alerts"
+ },
+ "loading": "Loading...",
+ "download": "Download",
+ "updated": "Updated",
+ "errors": {
+ "generic": "We are unable to complete your request at the moment."
+ },
+ "others": "others",
+ "apiKey": "API Key",
+ "httpHeader": "HTTP Header",
+ "back": "Back",
+ "and": "and",
+ "next": "Next",
+ "form": {
+ "yes": "Yes",
+ "no": "No",
+ "required": "This field is required",
+ "submit": "Submit",
+ "select": "Select",
+ "notSure": "Not sure"
+ },
+ "country": "Country",
+ "chooseCountry": "Choose a country",
+ "region": "Region",
+ "municipality": "Municipality",
+ "feedback": {
+ "errors": "errors",
+ "noErrors": "No errors",
+ "noWarnings": "No warnings",
+ "warnings": "warnings",
+ "infoNotices": "info notices"
+ },
+ "gtfsSpec": {
+ "routeType": {
+ "0": {
+ "name": "Tram/Streetcar/Light rail",
+ "description": "Any light rail or street level system within a metropolitan area."
+ },
+ "1": {
+ "name": "Subway/Metro",
+ "description": "Any underground rail system within a metropolitan area."
+ },
+ "2": {
+ "name": "Rail",
+ "description": "Used for intercity or long-distance travel."
+ },
+ "3": {
+ "name": "Bus",
+ "description": "Used for short- and long-distance bus routes."
+ },
+ "4": {
+ "name": "Ferry",
+ "description": "Used for short- and long-distance boat service."
+ },
+ "5": {
+ "name": "Cable tram",
+ "description": "Used for street-level rail cars where the cable runs beneath the vehicle (e.g., cable car in San Francisco)."
+ },
+ "6": {
+ "name": "Aerial lift/Suspended cable car (e.g., gondola lift, aerial tramway)",
+ "description": "Cable transport where cabins, cars, gondolas or open chairs are suspended by means of one or more cables."
+ },
+ "7": {
+ "name": "Funicular",
+ "description": "Any rail system designed for steep inclines."
+ },
+ "11": {
+ "name": "Trolleybus",
+ "description": "Electric buses that draw power from overhead wires using poles."
+ },
+ "12": {
+ "name": "Monorail",
+ "description": "Railway in which the track consists of a single rail or a beam."
+ }
+ }
+ },
+ "validators": "Validators",
+ "gbfsValidator": "GBFS Validator",
+ "gtfsValidator": "GTFS Validator",
+ "gtfsRtValidator": "GTFS RT Validator",
+ "start": "Start",
+ "end": "End",
+ "showLess": "Show less",
+ "showMore": "Show {count} more",
+ "moreInfo": "More Info",
+ "license": "License"
+ },
+ "feeds": {
+ "feeds": "Feeds",
+ "dataType": "Data Format",
+ "transitProvider": "Transit Provider",
+ "transitProviderName": "Transit Provider Name",
+ "location": "Location",
+ "locations": "Locations",
+ "feedDescription": "Description",
+ "searchFor": "Search For",
+ "resultsFor": "{startResult}-{endResult} of {totalResults} results",
+ "deprecated": "Deprecated",
+ "searchPlaceholder": "Transit provider, feed name, or location",
+ "noResults": "We're sorry, we found no search results for '{activeSearch}'.",
+ "searchSuggestions": "Search suggestions: ",
+ "searchTips": {
+ "twoDigit": "Use the full English name of a location e.g \"France\" or \"New York City\"",
+ "fullName": "Include the full name for transit provider, e.g 'Toronto Transit Commission' instead of 'TTC'",
+ "checkSpelling": "Double check the spelling"
+ },
+ "routeIds": "Route IDs",
+ "stopCode": "Stop Code",
+ "viewStopInfo": "View Stop Info",
+ "gtfsVisualizationViewLabel": "GTFS Visualization View",
+ "errorAndContact": "Please check your internet connection and try again. If the problem persists stops.txt that are located within each geographic area. Darker colors indicate areas where a higher percentage of stops are covered.",
+ "heatmapLower": "Less Stops",
+ "heatmapHigher": "More Stops",
+ "feedStatus": {
+ "active": {
+ "label": "Active",
+ "toolTip": "Active Feed",
+ "toolTipLong": "This feed is currently active and being used."
+ },
+ "inactive": {
+ "label": "Inactive",
+ "toolTip": "Inactive Feed",
+ "toolTipLong": "This feed is currently inactive and not being used."
+ },
+ "deprecated": {
+ "label": "Deprecated",
+ "toolTip": "Deprecated Feed",
+ "toolTipLong": "This feed is deprecated and should not be used."
+ },
+ "future": {
+ "label": "Future",
+ "toolTip": "Future Feed",
+ "toolTipLong": "This feed is not yet active but will be used in the future."
+ }
+ },
+ "datasetHistory": "Dataset History",
+ "datasetHistoryDescription": "The Mobility Database fetches and stores new datasets once a day at midnight UTC.",
+ "allDatasetsLoaded": "All datasets loaded",
+ "datasets": "Datasets",
+ "validationReportNotAvailable": "Validation report not available",
+ "runValidationReportYourself": "Run Validator Yourself",
+ "datasetHistoryTooltip": {
+ "serviceDateRange": "Service date range of when this dataset is active",
+ "downloadReport": "Download the dataset for this feed",
+ "viewReport": "View Validation Report",
+ "viewJsonReport": "View Validation Report in JSON format"
+ },
+ "viewRealtimeVisualization": "View real-time visualization",
+ "versions": "Versions",
+ "dataAttribution": "Transit data provided by",
+ "emptyLicenseUsage": "Can this feed be used commercially by trip planners and other third parties?",
+ "commonForm": {
+ "yes": "Yes",
+ "no": "No",
+ "notSure": "Unsure"
+ },
+ "openDetailedMap": "Open Detailed Map",
+ "retry": "Retry",
+ "visualizationMapErrors": {
+ "errorDescription": "An error occurred while loading the map.",
+ "noFeedMetadata": "Could not load feed metadata.",
+ "noRoutesData": "Could not load routes data for the map.",
+ "invalidDataType": "This feed is not a GTFS Schedule feed.",
+ "noBoundingBox": "No bounding box available."
+ },
+ "andMoreElements": "And {count} more...",
+ "selectedRouteStops": {
+ "title_one": "Stops from selected route",
+ "title_other": "Stops from selected routes",
+ "routeIds_one": "Route ID",
+ "routeIds_other": "Route IDs",
+ "stopId": "Stop ID:"
+ },
+ "scanning": {
+ "titleLarge": "Scanning large feed…",
+ "title": "Scanning the map…",
+ "bodyLarge": "We're indexing stops across the full extent. This might take a moment.",
+ "body": "We're indexing stops across the view to speed up filtering.",
+ "gridTile": "Grid: {grid} • Tile {tile} / {total}",
+ "percentComplete": "{percent}% complete",
+ "cancel": "Cancel"
+ },
+ "fullMapView": {
+ "disabledTitle": "Full map view disabled",
+ "disabledDescription": "The full map view feature is disabled at the moment. Please try again later.",
+ "dataBlurb": "The visualization reflects data directly from the GTFS feed. Route paths, stops, colors, and labels are all derived from the feed files (routes.txt, trips.txt, stop_times.txt, stops.txt, and shapes.txt where it's defined). If a route doesn't specify a color, it appears in black. When multiple shapes exist for different trips on the same route, they're combined into one for display.",
+ "clearAll": "Clear All",
+ "hideStops": "Hide Stops",
+ "closePanel": "Close",
+ "headers": {
+ "routeTypes": "Route Types",
+ "visibility": "Visibility",
+ "routes": "Routes"
+ },
+ "backToMap": "Back To Map",
+ "aria": {
+ "close": "close",
+ "refocus": "refocus",
+ "mapStyle": "map style",
+ "filter": "filter"
+ },
+ "style": {
+ "title": "Map style",
+ "stopSize": "Stop size",
+ "size": {
+ "small": "Small",
+ "medium": "Medium",
+ "large": "Large",
+ "custom": "Custom"
+ },
+ "customStopRadiusAria": "Custom stop radius",
+ "radius": "Radius: {px}px"
+ }
+ },
+ "relatedLinks": "Related Links",
+ "externalIds": {
+ "title": "External Identifiers",
+ "tooltips": {
+ "jbda": "Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda--",
+ "tdg": "Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-",
+ "ntd": "Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-",
+ "tfs": "Automatically imported from old TransitFeeds website. Pattern is tfs-",
+ "tld": "Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-"
+ }
+ },
+ "license": {
+ "dialogTitle": "License Details",
+ "loadingError": "Error loading license details",
+ "spdxTooltip": "The Software Package Data Exchange (SPDX) is an open standard for communicating software bill of material information, including licenses.",
+ "licenseTooltip": "License was added by the Mobility Database team based on either 1) a submission authorized by the transit provider 2) review of the transit providers website.",
+ "permission": "Permission",
+ "permissionSubtitle": "What you can do with this license",
+ "condition": "Condition",
+ "conditionSubtitle": "What you must do to comply",
+ "limitation": "Limitation",
+ "limitationSubtitle": "What this license does not provide",
+ "noPermission": "No permissions",
+ "noCondition": "No conditions",
+ "noLimitation": "No limitations",
+ "noRules": "No usage rules specified.",
+ "contributeMessage": "To contribute to the clarity of the rules for this license entry, please submit a pull request to:"
+ },
+ "noAgencyProvided": "No agency provided",
+ "feedSummary": {
+ "viewAllAgencies": "View All {count} Agencies",
+ "andMore": "and more",
+ "plusMore": "+ {count} more",
+ "showLocationDetails": "Show Details ({count} Locations)",
+ "routes": "Routes",
+ "routesCount": "{count} routes",
+ "viewOnMap": "View On Map",
+ "autoDiscoveryUrl": "Auto-Discovery URL",
+ "producerUrl": "Producer URL",
+ "providerUrl": "Provider URL",
+ "systemId": "System ID",
+ "feedAuthentication": "Feed Authentication"
+ }
+ },
+ "account": {
+ "title": "Votre compte API",
+ "userDetails": "Détails de l'utilisateur",
+ "description": "L'API de la base de données de mobilité utilise l'authentification OAuth2. Pour initier une demande API réussie, un jeton d'accès doit être inclus en tant que jeton porteur dans l'en-tête HTTP. Les jetons d'accès sont valides pendant une heure. Pour obtenir un jeton d'accès, vous aurez d'abord besoin d'un jeton de rafraîchissement, qui est de longue durée et n'expire pas.",
+ "support": "Si vous avez besoin d'un jeton de rafraîchissement réémis ou si vous souhaitez que votre compte soit supprimé, envoyez-nous un courriel à",
+ "registerApiAnnouncements": "Inscrit aux annonces de l'API",
+ "refreshToken": {
+ "title": "Jeton de rafraîchissement",
+ "description": "Utilisez votre jeton de rafraîchissement pour vous connecter à l'API dans votre application.",
+ "placeholder": "Votre jeton de rafraîchissement est caché",
+ "yourToken": "Votre jeton de rafraîchissement",
+ "toggleVisibility": "Afficher/masquer le jeton de rafraîchissement",
+ "copy": "Copier le jeton de rafraîchissement",
+ "copyToClipboard": "Copier le jeton de rafraîchissement dans le presse-papiers"
+ },
+ "accessToken": {
+ "title": "Comment générer le jeton d'accès dans votre application",
+ "description": {
+ "pt1": "Suivez",
+ "cta": "notre documentation OpenAPI",
+ "pt2": "pour authentifier votre compte avec le jeton de rafraîchissement."
+ },
+ "generate": "Générer un jeton d'accès",
+ "copyToken": "Copier le jeton d'accès",
+ "copyTokenToClipboard": "Copier le jeton d'accès dans le presse-papiers",
+ "copy": "Copiez la commande CLI pour générer un jeton d'accès.",
+ "yourToken": "Votre jeton d'accès",
+ "refreshing": "Rafraîchissement du jeton d'accès...",
+ "refresh": "Rafraîchir le jeton d'accès",
+ "refreshSuccess": "Votre jeton d'accès a été rafraîchi avec succès!",
+ "testing": {
+ "title": "Jeton d'accès pour les tests",
+ "description": {
+ "pt1": "Vous voulez faire des tests rapides ? Copiez le jeton d'accès ci-dessous pour tester les points de terminaison dans notre",
+ "cta": "documentation OpenAPI",
+ "pt2": ". Les jetons d'accès sont valides pendant une heure."
+ },
+ "api": "Test de l'API",
+ "copyCli": "Copiez la commande CLI pour tester votre accès à l'API."
+ },
+ "toggleVisibility": "Afficher/masquer le jeton d'accès",
+ "expired": "Jeton expiré",
+ "willExpireIn": "Votre jeton expirera dans {timeLeftForTokenExpiration}",
+ "hidden": "Votre jeton d'accès est caché",
+ "unavailable": "Votre jeton est indisponible"
+ }
+ },
+ "contactUs": {
+ "title": "Contact Us",
+ "email": {
+ "title": "Email Us",
+ "description": "For general inquiries regarding the Mobility Database API, please email us at"
+ },
+ "slack": {
+ "title": "Join our Slack",
+ "description": "Join the MobilityData Slack channel to ask questions, share feedback, and connect with others",
+ "action": "Join Slack"
+ },
+ "contribute": {
+ "title": "Contribute",
+ "description": "Help us improve the Mobility Database by contributing to our open-source projects on GitHub",
+ "action": "View on GitHub"
+ },
+ "addFeeds": {
+ "title": "Add Feeds",
+ "description": "Looking to add many feeds? You can contribute by heading over to our GitHub catalog repository",
+ "action": "View Catalogs Repository"
+ }
+ },
+ "gbfs": {
+ "versions": "GBFS Versions",
+ "feedUrl": "Feed URL",
+ "feedUrlCopied": "Feed URL Copied",
+ "runValidationReport": "Run Validation Report",
+ "openFeedUrl": "Open Feed URL",
+ "openAutoDiscoveryUrl": "Open Auto-Discovery URL",
+ "autoDiscoveryUrl": "Auto-Discovery URL",
+ "autoDiscoveryVersion": "Auto-Discovery",
+ "gbfsVersionsJson": "From gbfs_versions.json",
+ "feedVersionTooltip": "This URL is from gbfs_versions.json",
+ "features": {
+ "gbfs": "GBFS",
+ "system_regions": "System Regions",
+ "system_information": "System Information",
+ "geofencing_zones": "Geofencing Zones",
+ "system_pricing_plans": "System Pricing Plans",
+ "vehicle_types": "Vehicle Types",
+ "vehicle_status": "Vehicle Status",
+ "station_status": "Station Status",
+ "system_calendar": "System Calendar",
+ "system_hours": "System Hours",
+ "gbfs_versions": "GBFS Versions",
+ "station_information": "Station Information",
+ "system_alerts": "System Alerts",
+ "free_bike_status": "Free Bike Status",
+ "nearby_stations": "Nearby Stations"
+ },
+ "unableToDetectVersions": "Unable to detect versions within this feed."
+ }
+}
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..cc7e8c3
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,11 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ output: 'standalone',
+ //assetPrefix: process.env.ASSET_PREFIX, // https://static.example.com This would be the URL to the CDN where static assets are hosted
+};
+
+export default withNextIntl(nextConfig);
diff --git a/package.json b/package.json
index c13243a..9f0acce 100644
--- a/package.json
+++ b/package.json
@@ -1,82 +1,77 @@
{
"name": "mobility-database",
- "version": "0.1.1",
+ "version": "1.0.0",
"private": true,
"dependencies": {
- "@emotion/react": "^11.13.0",
- "@emotion/styled": "^11.13.0",
- "@mui/icons-material": "^5.16.4",
- "@mui/material": "^5.16.4",
- "@mui/x-date-pickers": "^7.11.0",
- "@mui/x-tree-view": "^6.17.0",
+ "@emotion/cache": "11.14.0",
+ "@emotion/react": "11.13.0",
+ "@emotion/styled": "11.13.0",
+ "@mui/icons-material": "7.3.6",
+ "@mui/material": "7.3.6",
+ "@mui/material-nextjs": "7.3.6",
+ "@mui/x-date-pickers": "8.23.0",
+ "@mui/x-tree-view": "8.23.0",
"@reduxjs/toolkit": "^1.9.6",
"@sentry/react": "^10.26.0",
"@turf/center": "^6.5.0",
- "@types/i18next": "^13.0.0",
"@types/leaflet": "^1.9.12",
"@types/lodash": "^4.17.20",
"@types/react-map-gl": "^6.1.7",
+ "@vercel/analytics": "^1.6.1",
+ "@vercel/speed-insights": "^1.3.1",
"axios": "^1.7.2",
"countries-list": "^3.1.1",
"date-fns": "^2.30.0",
"date-fns-tz": "^2.0.0",
"export-to-csv": "^1.3.0",
"firebase": "^10.4.0",
+ "firebase-admin": "^13.0.2",
"formik": "^2.4.5",
- "i18next": "^23.11.5",
- "i18next-browser-languagedetector": "^8.0.0",
- "i18next-http-backend": "^2.5.2",
"leaflet": "^1.9.4",
"loadashes6": "^1.0.0",
"maplibre-gl": "^5.7.0",
"material-react-table": "^2.13.0",
- "mui-datatables": "^4.3.0",
- "mui-nested-menu": "^3.4.0",
+ "mui-nested-menu": "3.4.0",
+ "next": "16.1.1",
+ "next-intl": "^4.7.0",
"openapi-fetch": "^0.9.3",
"pmtiles": "^4.3.0",
- "react": "^17.0.0 || ^18.0.0",
- "react-dom": "^17.0.0 || ^18.0.0",
+ "react": "^19.2.3",
+ "react-dom": "^19.2.3",
"react-draggable": "^4.5.0",
"react-ga4": "^2.1.0",
"react-google-recaptcha": "^3.1.0",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.52.1",
- "react-i18next": "^14.1.2",
"react-leaflet": "^4.2.1",
"react-map-gl": "^8.0.4",
"react-redux": "^8.1.3",
"react-router-dom": "^6.16.0",
- "react-scripts": "5.0.1",
"react-window": "^2.1.2",
"recharts": "^2.12.7",
"redux-persist": "^6.0.0",
"redux-saga": "^1.2.3",
+ "server-only": "^0.0.1",
"yup": "^1.3.2"
},
- "peerDependencies": {
- "react": "^17.0.0 || ^18.0.0",
- "react-dom": "^17.0.0 || ^18.0.0"
- },
"scripts": {
- "start:dev": "env-cmd -f src/.env.dev react-scripts start",
- "start:qa": "env-cmd -f src/.env.qa react-scripts start",
- "start:prod": "env-cmd -f src/.env.prod react-scripts start",
- "start:test": "env-cmd -f src/.env.test react-scripts start",
- "build:dev": "CI=false env-cmd -f src/.env.dev react-scripts build",
- "build:qa": "CI=false env-cmd -f src/.env.qa react-scripts build",
- "build:prod": "CI=false env-cmd -f src/.env.prod react-scripts build",
- "test": "react-scripts test --watchAll",
- "test:ci": "CI=true react-scripts test",
- "eject": "react-scripts eject",
- "lint": "eslint 'src/app/**/*.{js,ts,tsx}'",
- "lint:fix": "eslint 'src/app/**/*.{js,ts,tsx}' --fix",
- "cypress:run": "cypress run",
- "cypress:open": "cypress open",
+ "build:prod": "next build",
+ "start:dev": "next dev",
+ "start:dev:mock": "NEXT_PUBLIC_API_MOCKING=enabled next dev -p 3001",
+ "start:prod": "next build && next start",
+ "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
+ "lint:fix": "eslint src --ext .ts,.tsx,.js,.jsx --fix",
+ "test": "jest",
+ "test:watch": "jest --watch",
+ "test:ci": "CI=true jest",
+ "e2e:setup": "concurrently -k -n \"next,firebase\" -c \"cyan,magenta\" \"NEXT_PUBLIC_API_MOCKING=enabled next dev -p 3001\" \"firebase emulators:start --only auth --project mobility-feeds-dev\"",
+ "e2e:run": "CYPRESS_BASE_URL=http://localhost:3001 cypress run",
+ "e2e:open": "CYPRESS_BASE_URL=http://localhost:3001 cypress open",
"firebase:auth:emulator:dev": "firebase emulators:start --only auth --project mobility-feeds-dev",
- "generate:api-types:output": "npx openapi-typescript ../docs/DatabaseCatalogAPI.yaml -o $OUTPUT_PATH_TYPES && eslint $OUTPUT_PATH_TYPES --fix",
- "generate:api-types": "OUTPUT_PATH_TYPES=src/app/services/feeds/types.ts npm run generate:api-types:output",
- "generate:gbfs-validator-types:output": "npx openapi-typescript ../docs/GbfsValidator.yaml -o $OUTPUT_PATH_TYPES && eslint $OUTPUT_PATH_TYPES --fix",
- "generate:gbfs-validator-types": "OUTPUT_PATH_TYPES=src/app/services/feeds/gbfs-validator-types.ts npm run generate:gbfs-validator-types:output"
+ "generate:api-types:output": "npm exec -- openapi-typescript ./external_types/DatabaseCatalogAPI.yaml -o $npm_config_output_path && eslint $npm_config_output_path --fix",
+ "generate:api-types": "npm run generate:api-types:output -- --output-file=src/app/services/feeds/types.ts",
+ "generate:gbfs-validator-types:output": "npm exec -- openapi-typescript ./external_types/GbfsValidator.yaml -o $npm_config_output_path && eslint $npm_config_output_path --fix",
+ "generate:gbfs-validator-types": "npm run generate:gbfs-validator-types:output -- --output-file=src/app/services/feeds/gbfs-validator-types.ts"
},
"eslintConfig": {
"extends": [
@@ -97,21 +92,19 @@
]
},
"devDependencies": {
- "@babel/core": "^7.23.2",
- "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
- "@babel/preset-env": "^7.23.2",
- "@babel/preset-typescript": "^7.23.2",
"@react-firebase/auth": "^0.2.10",
- "@testing-library/jest-dom": "^5.17.0",
- "@testing-library/react": "^13.4.0",
+ "@swc/core": "^1.15.8",
+ "@swc/jest": "^0.2.39",
+ "@testing-library/dom": "^10.4.1",
+ "@testing-library/jest-dom": "^6.9.1",
+ "@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^13.5.0",
"@types/cypress": "^1.1.3",
- "@types/jest": "^29.5.12",
+ "@types/jest": "^30.0.0",
"@types/material-ui": "^0.21.12",
- "@types/mui-datatables": "^4.3.12",
- "@types/node": "^22.7.4",
- "@types/react": "^18.2.25",
- "@types/react-dom": "^18.2.7",
+ "@types/node": "^24.0.0",
+ "@types/react": "^19.2.3",
+ "@types/react-dom": "^19.2.3",
"@types/react-google-recaptcha": "^2.1.8",
"@types/react-redux": "^7.1.27",
"@types/react-router-dom": "^5.3.3",
@@ -119,11 +112,12 @@
"@types/redux-saga": "^0.10.5",
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0",
- "babel-jest": "^29.7.0",
+ "concurrently": "^9.2.1",
"cypress": "^13.2.0",
"dotenv": "^16.4.5",
"env-cmd": "^10.1.0",
"eslint": "^8.49.0",
+ "eslint-config-next": "^16.1.2",
"eslint-config-prettier": "^9.0.0",
"eslint-config-standard-with-typescript": "^39.0.0",
"eslint-plugin-import": "^2.28.1",
@@ -132,14 +126,16 @@
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-unused-imports": "^3.0.0",
- "firebase-tools": "^13.6.0",
- "openapi-typescript": "^6.7.5",
+ "firebase-tools": "^15.3.1",
+ "jest": "^30.2.0",
+ "jest-environment-jsdom": "^30.2.0",
+ "msw": "^2.12.7",
+ "next-devtools-mcp": "^0.3.9",
+ "openapi-typescript": "^7.10.1",
"prettier": "^3.0.3",
"ts-loader": "^9.4.4",
+ "ts-node": "^10.9.2",
"typescript": "^5.2.2",
"wait-on": "^7.0.1"
- },
- "jest": {
- "globalSetup": "./jest-global-setup.ts"
}
}
diff --git a/src/app/screens/GbfsValidator/gbfs.svg b/public/assets/gbfs.svg
similarity index 100%
rename from src/app/screens/GbfsValidator/gbfs.svg
rename to public/assets/gbfs.svg
diff --git a/src/app/screens/GbfsValidator/github.svg b/public/assets/github.svg
similarity index 100%
rename from src/app/screens/GbfsValidator/github.svg
rename to public/assets/github.svg
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 10fdf7e..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
-
-
- Mobility Database
-
-
- You need to enable JavaScript to run this app.
-
-
-
-
diff --git a/public/locales/en/account.json b/public/locales/en/account.json
deleted file mode 100644
index 09042a0..0000000
--- a/public/locales/en/account.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
- "title": "Your API Account",
- "userDetails": "User Details",
- "description": "The Mobility Database API uses OAuth2 authentication. To initiate a successful API request, an access token must be included as a bearer token in the HTTP header. Access tokens are valid for one hour. To obtain an access token, you'll first need a refresh token, which is long-lived and does not expire.",
- "support": "If you need a reissued refresh token or want your account removed, send us an email at",
- "registerApiAnnouncements": "Registered to API Announcements",
- "refreshToken": {
- "title": "Refresh Token",
- "description": "Use your refresh token to connect to the API in your app.",
- "placeholder": "Your refresh token is hidden",
- "yourToken": "Your Refresh Token",
- "toggleVisibility": "Toggle Refresh Token Visibility",
- "copy": "Copy Refresh Token",
- "copyToClipboard": "Copy refresh token to clipboard"
- },
- "accessToken": {
- "title": "How to Generate the Access Token in Your App",
- "description": {
- "pt1": "Follow",
- "cta": "our OpenAPI documentation",
- "pt2": "to authenticate your account with the refresh token."
- },
- "generate": "Generate Access Token",
- "copyToken": "Copy Access Token",
- "copyTokenToClipboard": "Copy access token to clipboard",
- "copy": "Copy the CLI command to generate an access token.",
- "yourToken": "Your Access Token",
- "refreshing": "Refreshing Access token...",
- "refresh": "Refresh Access Token",
- "refreshSuccess": "Your access token has been refreshed successfully!",
- "testing": {
- "title": "Access Token for Testing",
- "description": {
- "pt1": "Want some quick testing? Copy the access token bellow to test endpoints in our",
- "cta": "OpenAPI documentation",
- "pt2": ". Access tokens are valid for one hour."
- },
- "api": "API Test",
- "copyCli": "Copy the CLI command to test your access to the API."
- },
- "toggleVisibility": "Toggle Access Token Visibility",
- "expired": "Token expired",
- "willExpireIn": "Your token will expire in {{timeLeftForTokenExpiration}}",
- "hidden": "Your access token is hidden",
- "unavailable": "Your token is unavailable"
- }
-}
\ No newline at end of file
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
deleted file mode 100644
index 52934bf..0000000
--- a/public/locales/en/common.json
+++ /dev/null
@@ -1,106 +0,0 @@
-{
- "copyToClipboard": "Copy to clipboard",
- "copied": "Copied!",
- "name": "Name",
- "email": "Email",
- "organization": "Organization",
- "signOut": "Sign out",
- "unknown": "Unknown",
- "search": "Search",
- "feeds": "Feeds",
- "gtfsSchedule": "GTFS Schedule",
- "gtfsRealtime": "GTFS Realtime",
- "gtfs": "GTFS Schedule",
- "gtfs_rt": "GTFS Realtime",
- "gbfs": "GBFS",
- "gtfsRealtimeEntities": {
- "tripUpdates": "Trip Updates",
- "vehiclePositions": "Vehicle Positions",
- "serviceAlerts": "Service Alerts"
- },
- "loading": "Loading...",
- "download": "Download",
- "updated": "Updated",
- "errors": {
- "generic": "We are unable to complete your request at the moment."
- },
- "others": "others",
- "apiKey": "API Key",
- "httpHeader": "HTTP Header",
- "back": "Back",
- "and": "and",
- "next": "Next",
- "form": {
- "yes": "Yes",
- "no": "No",
- "required": "This field is required",
- "submit": "Submit",
- "select": "Select",
- "notSure": "Not sure"
- },
- "country": "Country",
- "chooseCountry": "Choose a country",
- "region": "Region",
- "municipality": "Municipality",
- "feedback": {
- "errors": "errors",
- "noErrors": "No errors",
- "noWarnings": "No warnings",
- "warnings": "warnings",
- "infoNotices": "info notices"
- },
- "gtfsSpec": {
- "routeType": {
- "0": {
- "name": "Tram/Streetcar/Light rail",
- "description": "Any light rail or street level system within a metropolitan area."
- },
- "1": {
- "name": "Subway/Metro",
- "description": "Any underground rail system within a metropolitan area."
- },
- "2": {
- "name": "Rail",
- "description": "Used for intercity or long-distance travel."
- },
- "3": {
- "name": "Bus",
- "description": "Used for short- and long-distance bus routes."
- },
- "4": {
- "name": "Ferry",
- "description": "Used for short- and long-distance boat service."
- },
- "5": {
- "name": "Cable tram",
- "description": "Used for street-level rail cars where the cable runs beneath the vehicle (e.g., cable car in San Francisco)."
- },
- "6": {
- "name": "Aerial lift/Suspended cable car (e.g., gondola lift, aerial tramway)",
- "description": "Cable transport where cabins, cars, gondolas or open chairs are suspended by means of one or more cables."
- },
- "7": {
- "name": "Funicular",
- "description": "Any rail system designed for steep inclines."
- },
- "11": {
- "name": "Trolleybus",
- "description": "Electric buses that draw power from overhead wires using poles."
- },
- "12": {
- "name": "Monorail",
- "description": "Railway in which the track consists of a single rail or a beam."
- }
- }
- },
- "validators": "Validators",
- "gbfsValidator": "GBFS Validator",
- "gtfsValidator": "GTFS Validator",
- "gtfsRtValidator": "GTFS RT Validator",
- "start": "Start",
- "end": "End",
- "showLess": "Show less",
- "showMore": "Show {{count}} more",
- "moreInfo": "More Info",
- "license": "License"
-}
diff --git a/public/locales/en/contactUs.json b/public/locales/en/contactUs.json
deleted file mode 100644
index 7aeb032..0000000
--- a/public/locales/en/contactUs.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "title": "Contact Us",
- "email": {
- "title": "Email Us",
- "description": "For general inquiries regarding the Mobility Database API, please email us at"
- },
- "slack": {
- "title": "Join our Slack",
- "description": "Join the MobilityData Slack channel to ask questions, share feedback, and connect with others",
- "action": "Join Slack"
- },
- "contribute": {
- "title": "Contribute",
- "description": "Help us improve the Mobility Database by contributing to our open-source projects on GitHub",
- "action": "View on GitHub"
- },
- "addFeeds": {
- "title": "Add Feeds",
- "description": "Looking to add many feeds? You can contribute by heading over to our GitHub catalog repository",
- "action": "View Catalogs Repository"
- }
-
-}
\ No newline at end of file
diff --git a/public/locales/en/feeds.json b/public/locales/en/feeds.json
deleted file mode 100644
index 82a8765..0000000
--- a/public/locales/en/feeds.json
+++ /dev/null
@@ -1,270 +0,0 @@
-{
- "feeds": "Feeds",
- "dataType": "Data Format",
- "transitProvider": "Transit Provider",
- "transitProviderName": "Transit Provider Name",
- "location": "Location",
- "locations": "Locations",
- "feedDescription": "Description",
- "searchFor": "Search For",
- "resultsFor": "{{startResult}}-{{endResult}} of {{totalResults}} results",
- "deprecated": "Deprecated",
- "searchPlaceholder": "Transit provider, feed name, or location",
- "noResults": "We're sorry, we found no search results for “{{activeSearch}}”.",
- "searchSuggestions": "Search suggestions: ",
- "searchTips": {
- "twoDigit": "Use the full English name of a location e.g \"France\" or \"New York City\"",
- "fullName": "Include the full name for transit provider, e.g “Toronto Transit Commission” instead of “TTC”",
- "checkSpelling": "Double check the spelling"
- },
- "routeIds": "Route IDs",
- "stopCode": "Stop Code",
- "viewStopInfo": "View Stop Info",
- "gtfsVisualizationViewLabel": "GTFS Visualization View",
- "errorAndContact": "Please check your internet connection and try again. If the problem persists <1>contact us for for further assistance.",
- "errorLoadingFeed": "There was an error loading the feed.",
- "errorLoadingQualityReport": "Unable to generate data quality report.",
- "form": {
- "addOrUpdateFeed": "Add or Update a Feed",
- "signUp": "Sign up for a Mobility Database account or login to add or update a GTFS feed.",
- "signUpAction": "Sign up for an account",
- "loginSuccess": "You were successfully logged in, you can now add or update a feed.",
- "dataTypeRequired": "Data format required",
- "isOfficialFeedRequired": "Official feed required",
- "feedLinkRequired": "Feed link required",
- "oldFeedLinkRequired": "Old feed link required",
- "dataProducerEmailRequired": "Data producer email required",
- "contactEmailRequired": "Contact email required",
- "atLeastOneRealtimeFeed": "At least one of the three feeds is required",
- "authType": {
- "apiKey": "API key - 1",
- "httpHeader": "HTTP header - 2",
- "signUpLink": "Authentication sign up link",
- "parameterName": "Authentication parameter name",
- "parameterNameDetail": "The parameter the user must pass in the URl or HTTP header to download the feed. E.g \"api_key\" in https://example.com/feed?api_key=123"
- },
- "errorSubmitting": "An error occurred while submitting the form.",
- "submittingFeed": "Submitting the feed...",
- "errorUrl": "The URL must start with a valid protocol: http:// or https://",
- "unofficialDesc": "Why was this feed created?",
- "unofficialDescPlaceholder": "Does this feed exist for research purposes, a specific app, etc?",
- "updateFreq": "How often is this feed updated?",
- "updateFreqPlaceholder": "Never, every month, automatically via a script, etc"
- },
- "seeFullList": "See full list",
- "hideFullList": "Hide full list",
- "producer": "Producer",
- "agency": "Agency",
- "producerDownloadUrl": "Producer download URL",
- "copyDownloadUrl": "Copy download URL",
- "producerUrlCopied": "Producer url copied to clipboard",
- "linkToLicense": "Link to feed license",
- "authenticationType": "Authentication type",
- "selectAuthenticationType": "Please select an authentication type",
- "authenticationRequired": "This feed requires authentication",
- "registerToDownloadFeed": "Register to download feed",
- "feedContactEmail": "Feed contact email",
- "copyFeedContactEmail": "Copy feed contact email",
- "features": "Features",
- "unableToDownloadFeed": "Unable to download this feed. If there is a more recent URL forthis feed, <1>please submit it here",
- "feedHasBeenReplaced": "This feed has been replaced with a different producer URL.{' '}<1> Go to the new feed here.",
- "downloadLatest": "Download Latest",
- "seeLicense": "See License",
- "coveredAreaTitle": "Covered Area",
- "boundingBoxView": "Bounding Box",
- "boundingBoxViewTooltip": "View the bounding box of the feed",
- "gtfsVisualizationView": "Routes and Stops",
- "gtfsVisualizationTooltip": "View the routes and stops of the feed",
- "detailedCoveredAreaView": "Detailed",
- "detailedCoveredAreaViewTooltip": "View the detailed covered area of the feed",
- "unableToGenerateBoundingBox": "Unable to generate bounding box from the feed",
- "unableToGetGbfsMap": "Error fetching GBFS Map",
- "areYouOfficialProducer": "Are you the official producer or transit agency responsible for this data ?",
- "isOfficialSource": "Is this an official data source?",
- "isOfficialSourceDetails": "Select \"Yes\" if the inputted feed is the official source of information by the transit provider and should be used to display to riders.",
- "feedLink": "Feed Link",
- "areYouUpdatingFeed": "Are you updating a feed?",
- "oldFeedLink": "Old Feed Link",
- "dataProducerEmail": "Data Producer Email",
- "dataProducerEmailDetails": "This is an official email that consumers of the feed can contact to ask questions.",
- "interestedInDataAudit": "Are you interested in a data quality audit?",
- "interestedInDataAuditDetails": "This is a 1 time meeting with MobilityData to review your GTFS validation report and discuss possible improvements.",
- "dataAuditContactEmail": "Data quality audit contact email",
- "hasLogoPermission": "Do we have your permission to use your logo?",
- "hasLogoPermissionDetails": "This would be would be used to display your logo on the Mobility Database website",
- "whatToolsCreateGtfs": "What tools do you use to create GTFS data?",
- "whatToolsCreateGtfsDetails": "Could include open source libraries, vendor services, or other applications.",
- "feedNameDetails": "Helpful when 1 transit agency has multiple feeds, e.g \"MTA Bus\" and \"MTA Subway\"",
- "gtfsScheduleFeed": "GTFS Schedule Feed",
- "gtfsRealtimeFeed": "GTFS Realtime Feed",
- "serviceAlertsFeed": "Service Alerts feed link",
- "oldServiceAlertsFeed": "Old Service Alerts feed link",
- "tripUpdatesFeed": "Trip Updates feed link",
- "oldTripUpdatesFeed": "Old Trip Updates feed link",
- "vehiclePositionsFeed": "Vehicle Positions feed link",
- "oldVehiclePositionsFeed": "Old Vehicle Positions feed link",
- "relatedGtfsScheduleFeed": "Link to related GTFS Schedule feed",
- "isAuthRequired": "Is authentication required for the feed?",
- "isAuthRequiredDetails": " Select \"Yes\" if a user has to login or provide credentials to download the feed",
- "detailPageDescription": "Explore the {{formattedName}} {{dataTypeVerbose}} feed details with access to a quality data insights",
- "officialFeed": "Official Feed",
- "officialFeedTooltip": "The transit provider has confirmed this feed should be shared with riders. This has been confirmed either by the transit provider providing the feed on their website or from personalized confirmation with the Mobility Database team.",
- "officialFeedTooltipShort": "Verified feed: Confirmed by the transit provider or the Mobility Database team for rider use.",
- "seeDetailPageProviders": "See detail page to view {{providersCount}} others",
- "openFullQualityReport": "Open Full Quality Report",
- "qualityReportUpdated": "Quality report updated",
- "officialFeedUpdated": "Official verification updated",
- "serviceDateRange": "Service Date Range",
- "serviceDateRangeTooltip": "Dates are relative to the specified timezone. If no timezone is specified, the dates are in UTC.",
- "heatmapIntensity": "Stop Density",
- "heatmapExplanationTitle": "What does this mean?",
- "heatmapExplanationContent": "This color scale shows the percentage of stops from stops.txt that are located within each geographic area. Darker colors indicate areas where a higher percentage of stops are covered.",
- "heatmapLower": "Less Stops",
- "heatmapHigher": "More Stops",
- "feedStatus": {
- "active": {
- "label": "Active",
- "toolTip": "Active Feed",
- "toolTipLong": "This feed is currently active and being used."
- },
- "inactive": {
- "label": "Inactive",
- "toolTip": "Inactive Feed",
- "toolTipLong": "This feed is currently inactive and not being used."
- },
- "deprecated": {
- "label": "Deprecated",
- "toolTip": "Deprecated Feed",
- "toolTipLong": "This feed is deprecated and should not be used."
- },
- "future": {
- "label": "Future",
- "toolTip": "Future Feed",
- "toolTipLong": "This feed is not yet active but will be used in the future."
- }
- },
- "datasetHistory": "Dataset History",
- "datasetHistoryDescription": "The Mobility Database fetches and stores new datasets once a day at midnight UTC.",
- "allDatasetsLoaded": "All datasets loaded",
- "datasets": "Datasets",
- "validationReportNotAvailable": "Validation report not available",
- "runValidationReportYourself": "Run Validator Yourself",
- "datasetHistoryTooltip": {
- "serviceDateRange": "Service date range of when this dataset is active",
- "downloadReport": "Download the dataset for this feed",
- "viewReport": "View Validation Report",
- "viewJsonReport": "View Validation Report in JSON format"
- },
- "viewRealtimeVisualization": "View real-time visualization",
- "versions": "Versions",
- "dataAttribution": "Transit data provided by",
- "emptyLicenseUsage": "Can this feed be used commercially by trip planners and other third parties?",
- "common": {
- "form": {
- "yes": "Yes",
- "no": "No",
- "notSure": "Unsure"
- }
- },
- "openDetailedMap": "Open Detailed Map",
- "retry": "Retry",
- "visualizationMapErrors": {
- "errorDescription": "An error occurred while loading the map.",
- "noFeedMetadata": "Could not load feed metadata.",
- "noRoutesData": "Could not load routes data for the map.",
- "invalidDataType": "This feed is not a GTFS Schedule feed.",
- "noBoundingBox": "No bounding box available."
- },
- "andMoreElements": "And {{count}} more...",
- "selectedRouteStops": {
- "title_one": "Stops from selected route",
- "title_other": "Stops from selected routes",
- "routeIds_one": "Route ID",
- "routeIds_other": "Route IDs",
- "stopId": "Stop ID:"
- },
- "scanning": {
- "titleLarge": "Scanning large feed…",
- "title": "Scanning the map…",
- "bodyLarge": "We’re indexing stops across the full extent. This might take a moment.",
- "body": "We’re indexing stops across the view to speed up filtering.",
- "gridTile": "Grid: {{grid}} • Tile {{tile}} / {{total}}",
- "percentComplete": "{{percent}}% complete",
- "cancel": "Cancel"
- },
- "fullMapView": {
- "disabledTitle": "Full map view disabled",
- "disabledDescription": "The full map view feature is disabled at the moment. Please try again later.",
- "dataBlurb": "The visualization reflects data directly from the GTFS feed. Route paths, stops, colors, and labels are all derived from the feed files (routes.txt, trips.txt, stop_times.txt, stops.txt, and shapes.txt where it's defined). If a route doesn’t specify a color, it appears in black. When multiple shapes exist for different trips on the same route, they’re combined into one for display.",
- "clearAll": "Clear All",
- "hideStops": "Hide Stops",
- "closePanel": "Close",
- "headers": {
- "routeTypes": "Route Types",
- "visibility": "Visibility",
- "routes": "Routes"
- },
- "backToMap": "Back To Map",
- "aria": {
- "close": "close",
- "refocus": "refocus",
- "mapStyle": "map style",
- "filter": "filter"
- },
- "style": {
- "title": "Map style",
- "stopSize": "Stop size",
- "size": {
- "small": "Small",
- "medium": "Medium",
- "large": "Large",
- "custom": "Custom"
- },
- "customStopRadiusAria": "Custom stop radius",
- "radius": "Radius: {{px}}px"
- }
- },
- "relatedLinks": "Related Links",
- "externalIds": {
- "title": "External Identifiers",
- "tooltips": {
- "jbda": "Automatically imported from http://docs.gtfs-data.jp/api.v2.html. Pattern is jbda--",
- "tdg": "Automatically imported from https://doc.transport.data.gouv.fr/outils/outils-disponibles-sur-le-pan/api. Pattern is tdg-",
- "ntd": "Automatically imported from https://www.transit.dot.gov/ntd/data-product/2023-annual-database-general-transit-feed-specification-gtfs-weblinks. Pattern is ntd-",
- "tfs": "Automatically imported from old TransitFeeds website. Pattern is tfs-",
- "tld": "Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-"
- }
- },
- "license": {
- "dialogTitle": "License Details",
- "loadingError": "Error loading license details",
- "spdxTooltip": "The Software Package Data Exchange (SPDX) is an open standard for communicating software bill of material information, including licenses.",
- "licenseTooltip": "License was added by the Mobility Database team based on either 1) a submission authorized by the transit provider 2) review of the transit providers website.",
- "permission": "Permission",
- "permissionSubtitle": "What you can do with this license",
- "condition": "Condition",
- "conditionSubtitle": "What you must do to comply",
- "limitation": "Limitation",
- "limitationSubtitle": "What this license does not provide",
- "noPermission": "No permissions",
- "noCondition": "No conditions",
- "noLimitation": "No limitations",
- "noRules": "No usage rules specified.",
- "contributeMessage": "To contribute to the clarity of the rules for this license entry, please submit a pull request to:"
- },
- "noAgencyProvided": "No agency provided",
- "feedSummary": {
- "viewAllAgencies": "View All {{count}} Agencies",
- "andMore": "and more",
- "plusMore": "+ {{count}} more",
- "showLocationDetails": "Show Details ({{count}} Locations)",
- "routes": "Routes",
- "routesCount": "{{count}} routes",
- "viewOnMap": "View On Map",
- "autoDiscoveryUrl": "Auto-Discovery URL",
- "producerUrl": "Producer URL",
- "providerUrl": "Provider URL",
- "systemId": "System ID",
- "feedAuthentication": "Feed Authentication"
- }
-}
diff --git a/public/locales/en/gbfs.json b/public/locales/en/gbfs.json
deleted file mode 100644
index a8f4295..0000000
--- a/public/locales/en/gbfs.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "versions": "GBFS Versions",
- "feedUrl": "Feed URL",
- "feedUrlCopied": "Feed URL Copied",
- "runValidationReport": "Run Validation Report",
- "openFeedUrl": "Open Feed URL",
- "openAutoDiscoveryUrl": "Open Auto-Discovery URL",
- "autoDiscoveryUrl": "Auto-Discovery URL",
- "autoDiscoveryVersion": "Auto-Discovery",
- "gbfsVersionsJson": "From gbfs_versions.json",
- "feedVersionTooltip": "This URL is from gbfs_versions.json",
- "features": {
- "gbfs": "GBFS",
- "system_regions": "System Regions",
- "system_information": "System Information",
- "geofencing_zones": "Geofencing Zones",
- "system_pricing_plans": "System Pricing Plans",
- "vehicle_types": "Vehicle Types",
- "vehicle_status": "Vehicle Status",
- "station_status": "Station Status",
- "system_calendar": "System Calendar",
- "system_hours": "System Hours",
- "gbfs_versions": "GBFS Versions",
- "station_information": "Station Information",
- "system_alerts": "System Alerts",
- "free_bike_status": "Free Bike Status",
- "nearby_stations": "Nearby Stations"
- },
- "unableToDetectVersions": "Unable to detect versions within this feed."
-}
\ No newline at end of file
diff --git a/public/locales/fr/account.json b/public/locales/fr/account.json
deleted file mode 100644
index 702641f..0000000
--- a/public/locales/fr/account.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
- "title": "Votre compte API",
- "userDetails": "Détails de l'utilisateur",
- "description": "L'API de la base de données de mobilité utilise l'authentification OAuth2. Pour initier une demande API réussie, un jeton d'accès doit être inclus en tant que jeton porteur dans l'en-tête HTTP. Les jetons d'accès sont valides pendant une heure. Pour obtenir un jeton d'accès, vous aurez d'abord besoin d'un jeton de rafraîchissement, qui est de longue durée et n'expire pas.",
- "support": "Si vous avez besoin d'un jeton de rafraîchissement réémis ou si vous souhaitez que votre compte soit supprimé, envoyez-nous un courriel à",
- "registerApiAnnouncements": "Inscrit aux annonces de l'API",
- "refreshToken": {
- "title": "Jeton de rafraîchissement",
- "description": "Utilisez votre jeton de rafraîchissement pour vous connecter à l'API dans votre application.",
- "placeholder": "Votre jeton de rafraîchissement est caché",
- "yourToken": "Votre jeton de rafraîchissement",
- "toggleVisibility": "Afficher/masquer le jeton de rafraîchissement",
- "copy": "Copier le jeton de rafraîchissement",
- "copyToClipboard": "Copier le jeton de rafraîchissement dans le presse-papiers"
- },
- "accessToken": {
- "title": "Comment générer le jeton d'accès dans votre application",
- "description": {
- "pt1": "Suivez",
- "cta": "notre documentation OpenAPI",
- "pt2": "pour authentifier votre compte avec le jeton de rafraîchissement."
- },
- "generate": "Générer un jeton d'accès",
- "copyToken": "Copier le jeton d'accès",
- "copyTokenToClipboard": "Copier le jeton d'accès dans le presse-papiers",
- "copy": "Copiez la commande CLI pour générer un jeton d'accès.",
- "yourToken": "Votre jeton d'accès",
- "refreshing": "Rafraîchissement du jeton d'accès...",
- "refresh": "Rafraîchir le jeton d'accès",
- "refreshSuccess": "Votre jeton d'accès a été rafraîchi avec succès!",
- "testing": {
- "title": "Jeton d'accès pour les tests",
- "description": {
- "pt1": "Vous voulez faire des tests rapides ? Copiez le jeton d'accès ci-dessous pour tester les points de terminaison dans notre",
- "cta": "documentation OpenAPI",
- "pt2": ". Les jetons d'accès sont valides pendant une heure."
- },
- "api": "Test de l'API",
- "copyCli": "Copiez la commande CLI pour tester votre accès à l'API."
- },
- "toggleVisibility": "Afficher/masquer le jeton d'accès",
- "expired": "Jeton expiré",
- "willExpireIn": "Votre jeton expirera dans {{timeLeftForTokenExpiration}}",
- "hidden": "Votre jeton d'accès est caché",
- "unavailable": "Votre jeton est indisponible"
- }
-}
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
deleted file mode 100644
index f46abbf..0000000
--- a/public/locales/fr/common.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "copyToClipboard": "Copier dans le presse-papiers",
- "copied": "Copié!",
- "name": "Nom",
- "email": "E-mail",
- "organization": "Organisation",
- "signOut": "Déconnexion",
- "unknown": "Inconnu"
-}
diff --git a/src/app/App.css b/src/app/App.css
index cd50098..2299ec6 100644
--- a/src/app/App.css
+++ b/src/app/App.css
@@ -37,9 +37,12 @@
}
}
+
#app-main-container {
position: relative;
- min-height: 100vh;
- padding-bottom: 230px; /* footer space */
+ /* 100vh - header margin - header - footer - footer padding */
+ /* Not perfect, to revisit: for client loading state */
+ min-height: calc(100vh - 32px - 64px - 232px - 20px);
+ padding-bottom: 20px;
box-sizing: border-box;
}
diff --git a/src/app/App.tsx b/src/app/App.tsx
index e957aaa..9b87a34 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,13 +1,12 @@
+'use client';
+
import './App.css';
import AppRouter from './router/Router';
import { BrowserRouter } from 'react-router-dom';
-import { RemoteConfigProvider } from './context/RemoteConfigProvider';
import { useDispatch } from 'react-redux';
import { anonymousLogin } from './store/profile-reducer';
-import i18n from '../i18n';
-import { Suspense, useEffect, useState } from 'react';
-import { I18nextProvider } from 'react-i18next';
import { app } from '../firebase';
+import { Suspense, useEffect, useState } from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import AppContainer from './AppContainer';
@@ -39,17 +38,14 @@ function App(): React.ReactElement {
}
/>
-
-
-
-
-
- {isAppReady ?
-
-
-
-
-
+
+
+ {/* BrowserRouter will be deprecated in favor of Next AppRouter */}
+
+ {isAppReady ?
+
+
+
);
}
diff --git a/src/app/AppContainer.tsx b/src/app/AppContainer.tsx
index de789d7..d322553 100644
--- a/src/app/AppContainer.tsx
+++ b/src/app/AppContainer.tsx
@@ -1,12 +1,12 @@
+'use client';
+
import * as React from 'react';
-import { useSelector } from 'react-redux';
import { Box, LinearProgress } from '@mui/material';
-import { selectLoadingApp } from './store/selectors';
import type ContextProviderProps from './interface/ContextProviderProps';
-import Footer from './components/Footer';
-import Header from './components/Header';
import { useLocation } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
+import { selectLoadingApp } from './store/selectors';
+import { useSelector } from 'react-redux';
const AppContainer: React.FC = ({ children }) => {
const isAppLoading = useSelector(selectLoadingApp);
@@ -23,16 +23,12 @@ const AppContainer: React.FC = ({ children }) => {
-
{isAppLoading ? (
) : (
- <>
- {children}
-
-
+ <>{children}
)}
diff --git a/src/app/Theme.ts b/src/app/Theme.ts
index e73207f..e111e18 100644
--- a/src/app/Theme.ts
+++ b/src/app/Theme.ts
@@ -1,3 +1,5 @@
+'use client';
+
import {
type PaletteColor,
type Theme,
@@ -54,8 +56,8 @@ export enum ThemeModeEnum {
}
export const fontFamily = {
- primary: '"Mulish"',
- secondary: '"IBM Plex Mono"',
+ primary: 'var(--font-mulish)',
+ secondary: 'var(--font-ibm-plex-mono)',
};
const palette = {
@@ -249,6 +251,13 @@ export const getTheme = (mode: ThemeModeEnum): Theme => {
},
},
],
+ styleOverrides: {
+ h1: {
+ fontWeight: 700,
+ color: chosenPalette.primary.main,
+ fontSize: '2.125rem', // h4 size
+ },
+ },
},
},
});
diff --git a/src/app/[[...slug]]/page.tsx b/src/app/[[...slug]]/page.tsx
new file mode 100644
index 0000000..bd9e010
--- /dev/null
+++ b/src/app/[[...slug]]/page.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+// This page is temporary to ease the migration to Next.js App Router
+// It will be deprecated once the migration is fully complete
+import { type ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+
+const App = dynamic(async () => await import('../App'), { ssr: false });
+
+export default function Page(): ReactNode {
+ return
- About
-
+ About
+ {/* ColoredContainer: This component uses style which is a client use only. Investigate pattern for SSR optimal Theme rendering */}
+
The Mobility Database is an open catalog including over 4000 GTFS,
GTFS Realtime, and GBFS feeds in over 75 countries. It integrates with
@@ -26,7 +31,7 @@ export default function About(): React.ReactElement {
component={'a'}
variant='contained'
sx={{ mt: 3 }}
- endIcon={
-
+
);
}
diff --git a/src/app/actions/auth-actions.ts b/src/app/actions/auth-actions.ts
new file mode 100644
index 0000000..7b56980
--- /dev/null
+++ b/src/app/actions/auth-actions.ts
@@ -0,0 +1,27 @@
+'use server';
+
+import { cookies } from 'next/headers';
+
+export async function setAuthTokenAction(token: string | null): Promise {
+ const cookieStore = await cookies();
+
+ if (token != null && token.length > 0) {
+ // We assume the toke is valid -> could add extra layer of security but will make an extra call to Firebase
+ // If bad token is provided, it will be rejected by external API
+ cookieStore.set('firebase_token', token, {
+ path: '/',
+ maxAge: 3600,
+ httpOnly: true,
+ secure: process.env.NODE_ENV === 'production',
+ sameSite: 'lax',
+ });
+ } else {
+ cookieStore.set('firebase_token', '', {
+ path: '/',
+ maxAge: 0,
+ httpOnly: true,
+ secure: process.env.NODE_ENV === 'production',
+ sameSite: 'lax',
+ });
+ }
+}
diff --git a/src/app/components/AuthTokenSync.tsx b/src/app/components/AuthTokenSync.tsx
new file mode 100644
index 0000000..1489a16
--- /dev/null
+++ b/src/app/components/AuthTokenSync.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, type ReactElement } from 'react';
+import { app } from '../../firebase';
+import { setAuthTokenAction } from '../actions/auth-actions';
+
+export default function AuthTokenSync(): ReactElement | null {
+ useEffect(() => {
+ // Sets the auth token in a httpOnly cookie for server side requests
+ // Uses Next.js const cookieStore = await cookies(); for cookie management
+ const unsubscribe = app.auth().onIdTokenChanged(async (user) => {
+ if (user != null) {
+ const token = await user.getIdToken();
+ await setAuthTokenAction(token);
+ } else {
+ await setAuthTokenAction(null);
+ }
+ });
+
+ return () => {
+ unsubscribe();
+ };
+ }, []);
+
+ return null;
+}
diff --git a/src/app/components/ContentBox.tsx b/src/app/components/ContentBox.tsx
index 9ca888e..8a7ff3d 100644
--- a/src/app/components/ContentBox.tsx
+++ b/src/app/components/ContentBox.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { Box, Typography, useTheme, type SxProps } from '@mui/material';
@@ -13,7 +14,7 @@ export interface ContentBoxProps {
export const ContentBox = (
props: React.PropsWithChildren,
-): JSX.Element => {
+): React.ReactElement => {
const theme = useTheme();
return (
await import('./MapGeoJSON').then((mod) => mod.MapGeoJSON),
+ { ssr: false },
+);
+const Map = dynamic(async () => await import('./Map').then((mod) => mod.Map), {
+ ssr: false,
+});
interface CoveredAreaMapProps {
- boundingBox?: LatLngExpression[];
+ boundingBox?: LatLngTuple[];
latestDataset?: LatestDatasetLite;
feed: AllFeedType;
}
@@ -69,7 +84,8 @@ const CoveredAreaMap: React.FC = ({
latestDataset,
feed,
}) => {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
const theme = useTheme();
const { config } = useRemoteConfig();
@@ -82,7 +98,11 @@ const CoveredAreaMap: React.FC = ({
feed?.data_type === 'gtfs' ? 'gtfsVisualizationView' : 'boundingBoxView',
);
- const latestGbfsVersion = useSelector(selectLatestGbfsVersion);
+ const latestGbfsVersion = useMemo((): GBFSVersionType | undefined => {
+ if (feed?.data_type !== 'gbfs') return undefined;
+ return getLatestGbfsVersion(feed as GBFSFeedType);
+ }, [feed]);
+
const routesJsonLoadingStatus = useSelector(
selectGtfsDatasetRoutesLoadingStatus,
);
@@ -188,7 +208,7 @@ const CoveredAreaMap: React.FC = ({
return undefined;
};
- const renderMap = (): JSX.Element => {
+ const renderMap = (): React.ReactElement => {
const displayBoundingBoxMap =
view === 'boundingBoxView' &&
(feed?.data_type === 'gtfs' ||
@@ -198,7 +218,7 @@ const CoveredAreaMap: React.FC = ({
view === 'gtfsVisualizationView' && feed?.data_type === 'gtfs';
if (displayBoundingBoxMap && boundingBox != undefined) {
- return = ({
size='small'
sx={{ position: 'absolute', top: 16, right: 16 }}
component={Link}
- to='./map'
+ href='./map'
>
= ({
);
}
if (config.enableDetailedCoveredArea && geoJsonData != null) {
- let gbfsGeoJsonBoundingBox: LatLngExpression[] = [];
+ let gbfsGeoJsonBoundingBox: LatLngTuple[] = [];
if (feed?.data_type === 'gbfs') {
gbfsGeoJsonBoundingBox = computeBoundingBox(geoJsonData) ?? [];
if (gbfsGeoJsonBoundingBox.length === 0) {
setGeoJsonError(true);
}
}
- const feedBoundingBox: LatLngExpression[] =
- feed?.data_type === 'gtfs' ? boundingBox ?? [] : gbfsGeoJsonBoundingBox;
+ const feedBoundingBox: LatLngTuple[] =
+ feed?.data_type === 'gtfs'
+ ? (boundingBox ?? [])
+ : gbfsGeoJsonBoundingBox;
return (
= ({
color='text.secondary'
sx={{ display: 'block', px: 1 }}
>
- {t('common:updated')}:{' '}
+ {tCommon('updated')}:{' '}
{displayFormattedDate(
(geoJsonData as GeoJSONDataGBFS).extracted_at,
)}
@@ -324,7 +347,7 @@ const CoveredAreaMap: React.FC = ({
variant='text'
disableElevation
component={Link}
- to='./map'
+ href='./map'
onClick={handleOpenDetailedMapClick}
endIcon={ = ({
)}
{(boundingBox != undefined || !geoJsonError) && (
-
+
{geoJsonLoading || routesJsonLoadingStatus === 'loading' ? (
,
-): JSX.Element => {
- const { t } = useTranslation('feeds');
+): React.ReactElement => {
+ const t = useTranslations('feeds');
const theme = useTheme();
const statusData = getFeedStatusData(props.status, theme, t);
return (
@@ -35,8 +37,8 @@ export const FeedStatusIndicator = (
export const FeedStatusChip = (
props: React.PropsWithChildren,
-): JSX.Element => {
- const { t } = useTranslation('feeds');
+): React.ReactElement => {
+ const t = useTranslations('feeds');
const theme = useTheme();
const statusData = getFeedStatusData(props.status, theme, t);
return (
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index 6217e90..7e2db5b 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@@ -1,3 +1,4 @@
+'use client';
import React from 'react';
import '../styles/Footer.css';
import TwitterIcon from '@mui/icons-material/Twitter';
@@ -7,11 +8,8 @@ import { MOBILITY_DATA_LINKS } from '../constants/Navigation';
import { fontFamily } from '../Theme';
const Footer: React.FC = () => {
+ // TODO: revisit theming for SSR components
const theme = useTheme();
- const navigateTo = (link: string): void => {
- window.open(link, '_blank');
- };
-
const SlackSvg = (
{
aria-label='twitter'
className='link-button'
color='primary'
- onClick={() => {
- navigateTo(MOBILITY_DATA_LINKS.twitter);
- }}
+ component='a'
+ href={MOBILITY_DATA_LINKS.twitter}
+ target='_blank'
+ rel='noreferrer'
>
([]);
const [mapElements, setMapElements] = useState([]);
diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
index f39d098..5005961 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import * as React from 'react';
import {
AppBar,
@@ -28,13 +30,10 @@ import {
gbfsMetricsNavItems,
} from '../constants/Navigation';
import type NavigationItem from '../interface/Navigation';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import { selectIsAuthenticated, selectUserEmail } from '../store/selectors';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import LogoutConfirmModal from './LogoutConfirmModal';
import { BikeScooterOutlined, OpenInNew } from '@mui/icons-material';
import { useRemoteConfig } from '../context/RemoteConfigProvider';
-import i18n from '../../i18n';
import { NestedMenuItem } from 'mui-nested-menu';
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
import DepartureBoardIcon from '@mui/icons-material/DepartureBoard';
@@ -43,14 +42,19 @@ import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
import { animatedButtonStyling } from './Header.style';
import DrawerContent from './HeaderMobileDrawer';
import ThemeToggle from './ThemeToggle';
-import { useTranslation } from 'react-i18next';
+import { useTranslations, useLocale } from 'next-intl';
+import { useSelector } from 'react-redux';
+import {
+ selectIsAuthenticated,
+ selectUserEmail,
+} from '../store/profile-selectors';
export default function DrawerAppBar(): React.ReactElement {
- const [searchParams, setSearchParams] = useSearchParams();
+ const searchParams = useSearchParams();
const hasTransitFeedsRedirectParam =
searchParams.get('utm_source') === 'transitfeeds';
const theme = useTheme();
- const location = useLocation();
+ const pathname = usePathname();
const [mobileOpen, setMobileOpen] = React.useState(false);
const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(
hasTransitFeedsRedirectParam,
@@ -60,25 +64,19 @@ export default function DrawerAppBar(): React.ReactElement {
const [navigationItems, setNavigationItems] = React.useState<
NavigationItem[]
>(buildNavigationItems(defaultRemoteConfigValues));
- const [currentLanguage, setCurrentLanguage] = React.useState<
- string | undefined
- >(i18n.language);
+ const locale = useLocale();
const { config } = useRemoteConfig();
- const { t } = useTranslation('common');
-
- i18n.on('languageChanged', (lang) => {
- setCurrentLanguage(i18n.language);
- });
+ const t = useTranslations('common');
React.useEffect(() => {
- setActiveTab(location.pathname);
- }, [location.pathname]);
+ setActiveTab(pathname ?? '');
+ }, [pathname]);
React.useEffect(() => {
setNavigationItems(buildNavigationItems(config));
}, [config]);
- const navigateTo = useNavigate();
+ const router = useRouter();
const isAuthenticated = useSelector(selectIsAuthenticated);
const userEmail = useSelector(selectUserEmail);
@@ -87,11 +85,11 @@ export default function DrawerAppBar(): React.ReactElement {
};
const handleNavigation = (navigationItem: NavigationItem | string): void => {
- if (typeof navigationItem === 'string') navigateTo(navigationItem);
+ if (typeof navigationItem === 'string') router.push(navigationItem);
else {
if (navigationItem.external === true)
window.open(navigationItem.target, '_blank', 'noopener noreferrer');
- else navigateTo(navigationItem.target);
+ else router.push(navigationItem.target);
}
setMobileOpen(false);
};
@@ -391,12 +389,31 @@ export default function DrawerAppBar(): React.ReactElement {
)}
{
- void i18n.changeLanguage(lang.target.value);
+ value={locale}
+ onChange={(e) => {
+ const newLocale = e.target.value;
+ const currentHost = window.location.host;
+ const currentProtocol = window.location.protocol;
+ const currentPath =
+ window.location.pathname + window.location.search;
+
+ let newHost = currentHost;
+ if (newLocale === 'fr') {
+ if (!currentHost.startsWith('fr.')) {
+ newHost = 'fr.' + currentHost;
+ }
+ } else {
+ if (currentHost.startsWith('fr.')) {
+ newHost = currentHost.replace('fr.', '');
+ }
+ }
+
+ if (newHost !== currentHost) {
+ window.location.href = `${currentProtocol}//${newHost}${currentPath}`;
+ }
}}
variant='standard'
inputProps={{ 'aria-label': 'language select' }}
@@ -413,8 +430,11 @@ export default function DrawerAppBar(): React.ReactElement {
onClose={() => {
setHasTransitFeedsRedirect(false);
if (hasTransitFeedsRedirectParam) {
- searchParams.delete('utm_source');
- setSearchParams(searchParams);
+ // Remove utm_source from URL
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.delete('utm_source');
+ const newPath = `${pathname}?${newSearchParams.toString()}`;
+ router.replace(newPath);
}
}}
sx={{ '.MuiAlert-message': { pb: { xs: 0, md: 1 } } }}
diff --git a/src/app/components/HeaderMobileDrawer.tsx b/src/app/components/HeaderMobileDrawer.tsx
index 4964a57..73a08ca 100644
--- a/src/app/components/HeaderMobileDrawer.tsx
+++ b/src/app/components/HeaderMobileDrawer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { OpenInNew } from '@mui/icons-material';
import {
Box,
@@ -12,7 +14,7 @@ import {
Link,
} from '@mui/material';
import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
import {
ACCOUNT_TARGET,
gbfsMetricsNavItems,
@@ -25,7 +27,7 @@ import { fontFamily } from '../Theme';
import { mobileNavElementStyle } from './Header.style';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useRemoteConfig } from '../context/RemoteConfigProvider';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
const websiteTile = 'Mobility Database';
@@ -39,11 +41,11 @@ export default function DrawerContent({
onLogoutClick,
navigationItems,
metricsOptionsEnabled,
-}: DrawerContentProps): JSX.Element {
+}: DrawerContentProps): React.ReactElement {
const isAuthenticated = useSelector(selectIsAuthenticated);
- const navigateTo = useNavigate();
+ const router = useRouter();
const { config } = useRemoteConfig();
- const { t } = useTranslation('common');
+ const t = useTranslations('common');
const theme = useTheme();
return (
@@ -51,7 +53,7 @@ export default function DrawerContent({
{
- navigateTo('/');
+ router.push('/');
}}
>
diff --git a/src/app/components/LogoutConfirmModal.tsx b/src/app/components/LogoutConfirmModal.tsx
index ffb15c3..e086e81 100644
--- a/src/app/components/LogoutConfirmModal.tsx
+++ b/src/app/components/LogoutConfirmModal.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import {
Box,
DialogTitle,
@@ -11,7 +13,7 @@ import React from 'react';
import { useAppDispatch } from '../hooks';
import { logout } from '../store/profile-reducer';
import { SIGN_OUT_TARGET } from '../constants/Navigation';
-import { useNavigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
interface ConfirmModalProps {
openDialog: boolean;
@@ -23,10 +25,16 @@ export default function ConfirmModal({
setOpenDialog,
}: ConfirmModalProps): React.ReactElement {
const dispatch = useAppDispatch();
- const navigateTo = useNavigate();
+ const router = useRouter();
const confirmLogout = (): void => {
dispatch(
- logout({ redirectScreen: SIGN_OUT_TARGET, navigateTo, propagate: true }),
+ logout({
+ redirectScreen: SIGN_OUT_TARGET,
+ navigateTo: (path) => {
+ router.push(String(path));
+ },
+ propagate: true,
+ }),
);
setOpenDialog(false);
};
diff --git a/src/app/components/Map.tsx b/src/app/components/Map.tsx
index 0069d55..0fc21c2 100644
--- a/src/app/components/Map.tsx
+++ b/src/app/components/Map.tsx
@@ -1,32 +1,106 @@
+'use client';
+
import * as React from 'react';
-import 'leaflet/dist/leaflet.css';
-import { MapContainer, TileLayer, Polygon } from 'react-leaflet';
-import { type LatLngBoundsExpression, type LatLngExpression } from 'leaflet';
+import MapGL, {
+ NavigationControl,
+ Source,
+ Layer,
+ MapProvider,
+} from 'react-map-gl/maplibre';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { type LatLngTuple } from 'leaflet';
import { useTheme } from '@mui/material/styles';
-import { ThemeModeEnum } from '../Theme';
+import { Box } from '@mui/material';
+import { getBoundsFromCoordinates } from './GtfsVisualizationMap.functions';
export interface MapProps {
- polygon: LatLngExpression[];
+ polygon: LatLngTuple[];
}
-export const Map = (props: React.PropsWithChildren): JSX.Element => {
+export const Map = (
+ props: React.PropsWithChildren,
+): React.ReactElement => {
const theme = useTheme();
- const mapTiles =
- theme.palette.mode === ThemeModeEnum.dark
- ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
- : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
+ const bounds = React.useMemo(() => {
+ return getBoundsFromCoordinates(props.polygon);
+ }, [props.polygon]);
+
+ // Convert LatLngExpression[] to GeoJSON ring for Source
+ const coordinates = props.polygon.map((p) => {
+ return [p[1], p[0]];
+ });
+
+ // Ensure it's a closed ring for a polygon
+ if (
+ coordinates.length > 0 &&
+ (coordinates[0][0] !== coordinates[coordinates.length - 1][0] ||
+ coordinates[0][1] !== coordinates[coordinates.length - 1][1])
+ ) {
+ coordinates.push(coordinates[0]);
+ }
+
+ const polygonGeoJSON: GeoJSON.Feature = {
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [coordinates],
+ },
+ properties: {},
+ };
+
return (
-
-
+
+
+ OpenStreetMap contributors',
+ },
+ },
+ layers: [
+ {
+ id: 'basemap',
+ type: 'raster',
+ source: 'raster-tiles',
+ minzoom: 0,
+ maxzoom: 22,
+ },
+ ],
+ }}
+ >
+
+
+
+
+
);
};
diff --git a/src/app/components/Map/MapDataPopup.tsx b/src/app/components/Map/MapDataPopup.tsx
index 9161b5b..2df7495 100644
--- a/src/app/components/Map/MapDataPopup.tsx
+++ b/src/app/components/Map/MapDataPopup.tsx
@@ -7,7 +7,7 @@ import {
} from '../../constants/RouteTypes';
import { Box, Link, Typography, useTheme } from '@mui/material';
import AccessibleIcon from '@mui/icons-material/Accessible';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
interface MapDataPopupProps {
mapClickRouteData: Record | null;
@@ -17,10 +17,11 @@ interface MapDataPopupProps {
export const MapDataPopup = (
props: React.PropsWithChildren,
-): JSX.Element => {
+): React.ReactElement => {
const { mapClickRouteData, mapClickStopData, onPopupClose } = props;
const theme = useTheme();
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
function getGradientBorder(colorString: string): string {
try {
@@ -69,7 +70,10 @@ export const MapDataPopup = (
mapClickRouteData.route_text_color,
)}
- {getRouteTypeTranslatedName(mapClickRouteData.route_type, t)}{' '}
+ {getRouteTypeTranslatedName(
+ mapClickRouteData.route_type,
+ tCommon,
+ )}{' '}
{mapClickRouteData.route_id}
diff --git a/src/app/components/Map/ScanningOverlay.tsx b/src/app/components/Map/ScanningOverlay.tsx
index ae2a266..2ff100d 100644
--- a/src/app/components/Map/ScanningOverlay.tsx
+++ b/src/app/components/Map/ScanningOverlay.tsx
@@ -6,7 +6,7 @@ import {
Typography,
useTheme,
} from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
interface ScanningOverlayProps {
totalTiles: number;
@@ -21,7 +21,7 @@ interface ScanningOverlayProps {
export const ScanningOverlay = (
props: React.PropsWithChildren,
-): JSX.Element => {
+): React.ReactElement => {
const {
totalTiles,
scannedTiles,
@@ -30,7 +30,7 @@ export const ScanningOverlay = (
cancelRequestRef,
} = props;
const theme = useTheme();
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
const progressPct =
totalTiles > 0
? Math.min(100, Math.round((scannedTiles / totalTiles) * 100))
@@ -125,7 +125,7 @@ export const ScanningOverlay = (
disabled={cancelRequestRef.current}
aria-label={t('scanning.cancel')}
>
- {t('scanning.cancel', 'Cancel scan')}
+ {t('scanning.cancel')}
diff --git a/src/app/components/Map/SelectedRoutesStopsPanel.tsx b/src/app/components/Map/SelectedRoutesStopsPanel.tsx
index 31a282a..ea83d6f 100644
--- a/src/app/components/Map/SelectedRoutesStopsPanel.tsx
+++ b/src/app/components/Map/SelectedRoutesStopsPanel.tsx
@@ -1,7 +1,7 @@
import { Box, Typography, useTheme } from '@mui/material';
import { useRef } from 'react';
import Draggable from 'react-draggable';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import { type MapStopElement } from '../MapElement';
interface SelectedRoutesStopsPanelProps {
@@ -13,7 +13,7 @@ interface SelectedRoutesStopsPanelProps {
export const SelectedRoutesStopsPanel = (
props: React.PropsWithChildren,
-): JSX.Element => {
+): React.ReactElement => {
const {
filteredRoutes,
selectedRouteStops,
@@ -22,7 +22,7 @@ export const SelectedRoutesStopsPanel = (
} = props;
const theme = useTheme();
const routeStopsPanelNodeRef = useRef(null);
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
return (
- {t('selectedRouteStops.title', {
+ {t('selectedRouteStops.title_one', {
count: filteredRoutes.length,
})}{' '}
({selectedRouteStops.length})
@@ -65,7 +65,7 @@ export const SelectedRoutesStopsPanel = (
variant='caption'
sx={{ color: theme.palette.text.secondary }}
>
- {t('selectedRouteStops.routeIds', {
+ {t('selectedRouteStops.routeIds_one', {
count: filteredRoutes.length,
})}
: {filteredRoutes.join(' | ')}
diff --git a/src/app/components/MapElement.tsx b/src/app/components/MapElement.tsx
index f4f8fab..235e758 100644
--- a/src/app/components/MapElement.tsx
+++ b/src/app/components/MapElement.tsx
@@ -5,7 +5,7 @@ import {
renderLocationTypeIcon,
renderRouteTypeIcon,
} from '../constants/RouteTypes';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
export interface BaseMapElement {
isStop: boolean;
@@ -35,14 +35,9 @@ export interface MapElementProps {
export const MapElement = (
props: React.PropsWithChildren,
-): JSX.Element => {
+): React.ReactElement => {
const theme = useTheme();
- const { t, i18n } = useTranslation('feeds', { useSuspense: false });
- if (!i18n.isInitialized || !i18n.hasResourceBundle(i18n.language, 'feeds')) {
- // render fallback (no t()) to avoid updates during render
- return <>;
- }
-
+ const t = useTranslations('feeds');
const limit = props.dataDisplayLimit ?? 10;
const formatSet = new Set();
const formattedElements: MapElementType[] = [];
@@ -58,7 +53,9 @@ export const MapElement = (
);
const elementLeftover = uniqueElementNames.size - formattedElements.length;
- const renderRouteMapElement = (element: MapRouteElement): JSX.Element => {
+ const renderRouteMapElement = (
+ element: MapRouteElement,
+ ): React.ReactElement => {
return (
{
+ ): React.ReactElement => {
return (
,
-): JSX.Element => {
+): React.ReactElement => {
const theme = useTheme();
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
const { geoJSONData, displayMapDetails = true } = props;
+ const [popupInfo, setPopupInfo] = React.useState<{
+ lngLat: { lng: number; lat: number };
+ properties: Record;
+ } | null>(null);
+
const bounds = React.useMemo(() => {
- return props.polygon.length > 0
- ? (props.polygon as LatLngBoundsExpression)
- : ([
- [0, 0],
- [0, 0],
- ] as LatLngBoundsExpression);
+ return getBoundsFromCoordinates(props.polygon);
}, [props.polygon]);
if (!displayMapDetails) {
@@ -59,142 +61,164 @@ export const MapGeoJSON = (
delete feature.properties.stops_in_area_coverage;
});
}
-
- const handleFeatureClick = (
- e: LeafletMouseEvent,
- previousColor: string,
- ): void => {
- const currentSelection = e.target as L.Path;
- currentSelection.setStyle({ color: theme.palette.primary.main });
- currentSelection.on('popupclose', () => {
- currentSelection.setStyle({ color: previousColor });
- });
- };
-
- const mapTiles =
- theme.palette.mode === ThemeModeEnum.dark
- ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
- : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-
+
return (
- {
+ const feature = e.features?.[0];
+ if (feature != null) {
+ setPopupInfo({
+ lngLat: e.lngLat,
+ properties: feature.properties,
+ });
+ }
+ }}
+ mapStyle={{
+ version: 8,
+ sources: {
+ 'raster-tiles': {
+ type: 'raster',
+ tiles: [theme.map.basemapTileUrl],
+ tileSize: 256,
+ attribution:
+ '© OpenStreetMap contributors',
+ },
+ },
+ layers: [
+ {
+ id: 'basemap',
+ type: 'raster',
+ source: 'raster-tiles',
+ minzoom: 0,
+ maxzoom: 22,
+ },
+ ],
+ }}
>
-
+ {
+ setPopupInfo(null);
}}
+ closeOnClick={false}
>
-
-
- {t('heatmapIntensity')}
-
-
-
- {t('heatmapExplanationTitle')}
-
-
- {' '}
-
-
- }
- >
-
-
-
+ )}
+
+ {props.geoJSONData !== null && displayMapDetails && (
+
+
+
+ {t('heatmapIntensity')}
+
+
+
+ {t('heatmapExplanationTitle')}
+
+
+ {t.rich('heatmapExplanationContent', {
+ code: (chunks) => {chunks},
+ })}
+
+
+ }
>
- {t('heatmapLower')}
- {t('heatmapHigher')}
-
+
- )}
-
- {geoJSONData !== null && (
- {
- const container = document.createElement('div');
- container.style.background = theme.palette.background.default;
- const root = createRoot(container);
- const featureProperties = feature?.properties ?? {};
- root.render(
- ({
- weight: 3,
- opacity: 1,
- color: feature?.properties?.color ?? '#3388ff',
- fillOpacity: 0.3,
- })}
/>
- )}
-
+
+ {t('heatmapLower')}
+ {t('heatmapHigher')}
+
+
+ )}
);
};
diff --git a/src/app/components/NestedCheckboxList.tsx b/src/app/components/NestedCheckboxList.tsx
index 2a9ef75..ee6e881 100644
--- a/src/app/components/NestedCheckboxList.tsx
+++ b/src/app/components/NestedCheckboxList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import {
Box,
Checkbox,
@@ -84,7 +86,7 @@ export default function NestedCheckboxList({
onExpandGroupChange,
disableAll = false,
debounceTime = 0,
-}: NestedCheckboxListProps): JSX.Element {
+}: NestedCheckboxListProps): React.ReactElement {
const [checkboxStructure, setCheckboxStructure] = React.useState<
CheckboxStructure[]
>([...checkboxData]);
@@ -133,15 +135,21 @@ export default function NestedCheckboxList({
edge={'end'}
aria-label='expand'
onClick={() => {
- checkboxData.seeChildren =
- checkboxData.seeChildren === undefined
- ? true
- : !checkboxData.seeChildren;
- checkboxStructure[index] = checkboxData;
- setCheckboxStructure([...checkboxStructure]);
- if (onExpandGroupChange !== undefined) {
- onExpandGroupChange([...checkboxStructure]);
- }
+ setCheckboxStructure((prev) => {
+ const newData = {
+ ...checkboxData,
+ seeChildren:
+ checkboxData.seeChildren === undefined
+ ? true
+ : !checkboxData.seeChildren,
+ };
+ const newStructure = [...prev];
+ newStructure[index] = newData;
+ if (onExpandGroupChange !== undefined) {
+ onExpandGroupChange(newStructure);
+ }
+ return newStructure;
+ });
}}
>
{!disableAll &&
@@ -164,12 +172,18 @@ export default function NestedCheckboxList({
sx={{ p: 0 }}
onClick={() => {
setCheckboxStructure((prev) => {
- checkboxData.checked = !checkboxData.checked;
- checkboxData.children?.forEach((child) => {
- child.checked = checkboxData.checked;
- });
- prev[index] = checkboxData;
- return [...prev];
+ const newCheckedValue = !checkboxData.checked;
+ const newData = {
+ ...checkboxData,
+ checked: newCheckedValue,
+ children: checkboxData.children?.map((child) => ({
+ ...child,
+ checked: newCheckedValue,
+ })),
+ };
+ const newStructure = [...prev];
+ newStructure[index] = newData;
+ return newStructure;
});
setHasChange(true);
}}
@@ -218,9 +232,13 @@ export default function NestedCheckboxList({
checkboxData={checkboxData.children}
onCheckboxChange={(children) => {
setCheckboxStructure((prev) => {
- checkboxData.children = children;
- prev[index] = checkboxData;
- return [...prev];
+ const newData = {
+ ...checkboxData,
+ children,
+ };
+ const newStructure = [...prev];
+ newStructure[index] = newData;
+ return newStructure;
});
setHasChange(true);
}}
diff --git a/src/app/components/OfficialChip.tsx b/src/app/components/OfficialChip.tsx
index e5ce7a0..c7067e0 100644
--- a/src/app/components/OfficialChip.tsx
+++ b/src/app/components/OfficialChip.tsx
@@ -1,5 +1,7 @@
+'use client';
+
import { Chip, Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import { verificationBadgeStyle } from '../styles/VerificationBadge.styles';
import VerifiedIcon from '@mui/icons-material/Verified';
@@ -10,7 +12,7 @@ interface OfficialChipProps {
export default function OfficialChip({
isLongDisplay = true,
}: OfficialChipProps): React.ReactElement {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
return (
<>
{isLongDisplay ? (
diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
index eedaf25..aaefd05 100644
--- a/src/app/components/ThemeToggle.tsx
+++ b/src/app/components/ThemeToggle.tsx
@@ -3,7 +3,7 @@ import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import { useTheme } from '../context/ThemeProvider';
-const ThemeToggle = (): JSX.Element => {
+const ThemeToggle = (): React.ReactElement => {
const { toggleTheme } = useTheme();
return (
diff --git a/src/app/components/WarningContentBox.tsx b/src/app/components/WarningContentBox.tsx
index b9da209..c674f98 100644
--- a/src/app/components/WarningContentBox.tsx
+++ b/src/app/components/WarningContentBox.tsx
@@ -5,7 +5,7 @@ import { WarningAmberOutlined } from '@mui/icons-material';
export const WarningContentBox = (
props: React.PropsWithChildren,
-): JSX.Element => {
+): React.ReactElement => {
return (
string,
): string => {
const routeType = getRouteByTypeOrDefault(routeTypeId);
return !(routeType.isDefault ?? false)
- ? t(`common:gtfsSpec.routeType.${routeTypeId}.name`)
+ ? t(`gtfsSpec.routeType.${routeTypeId}.name`)
: routeType.name;
};
export const renderRouteTypeIcon = (
routeType: string,
routeColorText: string,
-): JSX.Element | null => {
+): React.ReactElement | null => {
const routeTypeMetadata = getRouteByTypeOrDefault(routeType);
// The route type could be out of specs (e.g. google route types), so we may not have an icon.
if (routeTypeMetadata?.icon == null) {
@@ -116,7 +115,7 @@ export const renderRouteTypeIcon = (
export const renderLocationTypeIcon = (
locationType: string,
iconColor: string,
-): JSX.Element | null => {
+): React.ReactElement | null => {
const locationTypeMetadata = getStopByLocationTypeOrDefault(locationType);
// The location type could be out of specs, so we may not have an icon.
if (locationTypeMetadata?.icon == null) {
diff --git a/src/app/context/RemoteConfigProvider.tsx b/src/app/context/RemoteConfigProvider.tsx
index 9dceb5c..0b4fdb9 100644
--- a/src/app/context/RemoteConfigProvider.tsx
+++ b/src/app/context/RemoteConfigProvider.tsx
@@ -1,104 +1,40 @@
-import React, {
- createContext,
- type ReactNode,
- useContext,
- useEffect,
- useState,
-} from 'react';
-import { remoteConfig, app } from '../../firebase';
+'use client';
+
+import React, { createContext, type ReactNode, useContext } from 'react';
import {
- type BypassConfig,
defaultRemoteConfigValues,
type RemoteConfigValues,
} from '../interface/RemoteConfig';
const RemoteConfigContext = createContext<{
config: RemoteConfigValues;
- loading: boolean;
}>({
config: defaultRemoteConfigValues,
- loading: true,
});
interface RemoteConfigProviderProps {
children: ReactNode;
+ config: RemoteConfigValues;
}
-export function userHasBypass(
- byPassConfig: BypassConfig,
- userEmail: string | null | undefined,
-): boolean {
- let hasBypass = false;
- if (userEmail === null || userEmail === undefined) {
- return false;
- }
- hasBypass = byPassConfig.regex.some((regex) => {
- try {
- if (userEmail.match(new RegExp(regex, 'i')) !== null) {
- return true;
- }
- } catch (e) {}
- return false;
- });
- return hasBypass;
-}
-
+/**
+ * Client-side Remote Config provider that hydrates server-fetched config into React Context.
+ * This provider does NOT fetch config - it receives pre-fetched values from the server.
+ */
export const RemoteConfigProvider = ({
children,
+ config,
}: RemoteConfigProviderProps): React.ReactElement => {
- const [config, setConfig] = useState(
- defaultRemoteConfigValues,
- );
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- const fetchAndActivateConfig = async (): Promise => {
- try {
- await remoteConfig.fetchAndActivate();
- const fetchedConfigValues = defaultRemoteConfigValues;
-
- const bypassConfig: BypassConfig = JSON.parse(
- remoteConfig.getValue('featureFlagBypass').asString(),
- );
- const hasBypass = userHasBypass(
- bypassConfig,
- app.auth().currentUser?.email,
- );
- Object.keys(defaultRemoteConfigValues).forEach((key) => {
- const rawValue = remoteConfig.getValue(key);
- const rawValueLower = rawValue.asString().toLowerCase();
- if (rawValueLower === 'true' || rawValueLower === 'false') {
- // Boolean
- fetchedConfigValues[key] = hasBypass || rawValue.asBoolean();
- } else if (!isNaN(Number(rawValue)) && rawValueLower.trim() !== '') {
- // Number
- fetchedConfigValues[key] = rawValue.asNumber();
- } else {
- // Default to string
- fetchedConfigValues[key] = rawValue.asString();
- }
- });
- setConfig((prevConfig) => ({
- ...prevConfig,
- ...fetchedConfigValues,
- }));
- } catch (error) {
- // pass -- default values will be used
- } finally {
- setLoading(false);
- }
- };
-
- void fetchAndActivateConfig();
- }, [app.auth().currentUser?.email]);
-
return (
-
+
{children}
);
};
+/**
+ * Hook to access Remote Config values from any client component.
+ */
export const useRemoteConfig = (): {
config: RemoteConfigValues;
} => useContext(RemoteConfigContext);
diff --git a/src/app/context/ThemeProvider.tsx b/src/app/context/ThemeProvider.tsx
index 9c4dd0c..016a2e1 100644
--- a/src/app/context/ThemeProvider.tsx
+++ b/src/app/context/ThemeProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { createContext, useState, useMemo, useContext } from 'react';
import {
ThemeProvider as MuiThemeProvider,
@@ -10,7 +12,7 @@ import type ContextProviderProps from '../interface/ContextProviderProps';
const ThemeContext = createContext({ toggleTheme: () => {} });
function getInitialThemeMode(prefersDarkMode: boolean): ThemeModeEnum {
- if (localStorage.getItem('theme') != undefined) {
+ if (typeof window !== 'undefined' && localStorage.getItem('theme') != null) {
return localStorage.getItem('theme') as ThemeModeEnum;
} else {
return prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light;
diff --git a/src/app/feeds/[feedDataType]/[feedId]/loading.tsx b/src/app/feeds/[feedDataType]/[feedId]/loading.tsx
new file mode 100644
index 0000000..c5da83b
--- /dev/null
+++ b/src/app/feeds/[feedDataType]/[feedId]/loading.tsx
@@ -0,0 +1,99 @@
+import { Box, Container, Skeleton } from '@mui/material';
+
+export default function Loading(): React.ReactElement {
+ return (
+
+
+ {/* Breadcrumb skeleton */}
+
+
+
+ {/* Main content area skeleton */}
+
+ {/* Left panel skeleton */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx b/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx
new file mode 100644
index 0000000..5d87c66
--- /dev/null
+++ b/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx
@@ -0,0 +1,8 @@
+import FullMapView from '../../../../screens/Feed/components/FullMapView';
+import { type ReactElement } from 'react';
+
+export default function FullMapViewPage(): ReactElement {
+ // TODO: room for improvement: pass necessary props instead of fetching inside
+ // Also think of a way to manage data if gotten from the previous page
+ return ();
+ for (const route of routes) {
+ const raw = route.routeType;
+ const routeTypeStr = raw == null ? undefined : String(raw).trim();
+ if (routeTypeStr != null) {
+ uniqueRouteTypesSet.add(routeTypeStr);
+ }
+ }
+ const routeTypes = Array.from(uniqueRouteTypesSet).sort((a, b) => {
+ const validNumberA = a.trim() !== '' && Number.isFinite(Number(a));
+ const validNumberB = b.trim() !== '' && Number.isFinite(Number(b));
+ if (!validNumberA && !validNumberB) return a.localeCompare(b);
+ if (!validNumberA || !validNumberB) return validNumberA ? -1 : 1;
+ return Number(a) - Number(b);
+ });
+ return { totalRoutes, routeTypes };
+ } catch (e) {
+ return { totalRoutes: undefined, routeTypes: undefined };
+ }
+});
+
+export async function generateMetadata(
+ { params }: Props,
+ parent: ResolvingMetadata,
+): Promise {
+ const { feedId, feedDataType } = await params;
+ const accessToken = await getSSRAccessToken();
+ const t = await getTranslations();
+
+ const feed = await fetchFeedData(feedDataType, feedId, accessToken);
+
+ if (feed == null) {
+ return {
+ title: 'Feed Not Found | Mobility Database',
+ };
+ }
+
+ // Fetch related feeds for GTFS-RT to generate complete structured data
+ const { gtfsFeeds, gtfsRtFeeds } =
+ feedDataType === 'gtfs_rt' &&
+ (feed as GTFSRTFeedType)?.feed_references != null
+ ? await fetchRelatedFeeds(
+ (feed as GTFSRTFeedType)?.feed_references ?? [],
+ accessToken,
+ )
+ : { gtfsFeeds: [], gtfsRtFeeds: [] };
+
+ const sortedProviders = formatProvidersSorted(feed?.provider ?? '');
+ const title = generatePageTitle(
+ sortedProviders,
+ feed.data_type as 'gtfs' | 'gtfs_rt' | 'gbfs',
+ (feed as { feed_name?: string })?.feed_name,
+ );
+ const description = generateDescriptionMetaTag(
+ t,
+ sortedProviders,
+ feed.data_type as 'gtfs' | 'gtfs_rt' | 'gbfs',
+ (feed as { feed_name?: string })?.feed_name,
+ );
+
+ // Generate structured data for SEO
+ const structuredData = generateFeedStructuredData(
+ feed,
+ description,
+ gtfsFeeds,
+ gtfsRtFeeds,
+ );
+
+ return {
+ title,
+ description,
+ openGraph: {
+ title,
+ description,
+ url: `https://mobilitydatabase.org/feeds/${feedDataType}/${feedId}`,
+ siteName: 'Mobility Database',
+ type: 'website',
+ },
+ twitter: {
+ card: 'summary',
+ title,
+ description,
+ },
+ alternates: {
+ canonical: `/feeds/${feedDataType}/${feedId}`,
+ },
+ other: {
+ // Structured data for JSON-LD
+ ...(structuredData != null && {
+ 'script:ld+json': JSON.stringify(structuredData),
+ }),
+ },
+ };
+}
+
+export default async function FeedPage({
+ params,
+}: Props): Promise {
+ const { feedId, feedDataType } = await params;
+ const accessToken = await getSSRAccessToken();
+
+ const feedPromise = fetchFeedData(feedDataType, feedId, accessToken);
+ const datasetsPromise =
+ feedDataType === 'gtfs'
+ ? fetchInitialDatasets(feedId, accessToken)
+ : Promise.resolve([]);
+
+ const [feed, initialDatasets] = await Promise.all([
+ feedPromise,
+ datasetsPromise,
+ ]);
+
+ if (feed == null) {
+ notFound();
+ }
+
+ let gtfsFeedsRelated: GTFSFeedType[] = [];
+ let gtfsRtFeedsRelated: GTFSRTFeedType[] = [];
+ if (feed.data_type === 'gtfs_rt') {
+ const gtfsRtFeed: GTFSRTFeedType = feed;
+ // TODO: optimize to avoid double fetching. Need a new endpoint
+ const { gtfsFeeds, gtfsRtFeeds } = await fetchRelatedFeeds(
+ gtfsRtFeed?.feed_references ?? [],
+ accessToken,
+ );
+
+ const associatedGtfsRtFeedsArrays = await Promise.all(
+ gtfsFeeds.map(
+ async (gtfsFeed) =>
+ await getGtfsFeedAssociatedGtfsRtFeeds(
+ gtfsFeed?.id ?? '',
+ accessToken,
+ ),
+ ),
+ );
+ gtfsFeedsRelated = gtfsFeeds;
+ const allGtfsRtFeeds = [
+ ...gtfsRtFeeds,
+ ...associatedGtfsRtFeedsArrays.flat(),
+ ];
+ const uniqueGtfsRtFeedsMap = new Map();
+ allGtfsRtFeeds.forEach((feedItem) => {
+ if (feedItem?.id != null) {
+ uniqueGtfsRtFeedsMap.set(feedItem.id, feedItem);
+ }
+ });
+ gtfsRtFeedsRelated = Array.from(uniqueGtfsRtFeedsMap.values());
+ }
+
+ // Fetch routes data for GTFS feeds
+ const { totalRoutes, routeTypes } =
+ feedDataType === 'gtfs'
+ ? await fetchRoutesData(
+ feedId,
+ (feed as GTFSFeedType)?.visualization_dataset_id ?? '',
+ )
+ : { totalRoutes: undefined, routeTypes: undefined };
+
+ return (
+ {
+ const { feedDataType } = await params;
+ const accessToken = await getSSRAccessToken();
+
+ // IMPORTANT: here feedDataType is actually feedId (due to routing hack)
+ const feedId = feedDataType;
+ const feed = await getFeed(feedId, accessToken);
+
+ if (feed == undefined) {
+ notFound();
+ }
+
+ redirect(`/feeds/${feed.data_type}/${feedId}`);
+}
diff --git a/src/app/interface/RemoteConfig.ts b/src/app/interface/RemoteConfig.ts
index c5514bf..ebcc106 100644
--- a/src/app/interface/RemoteConfig.ts
+++ b/src/app/interface/RemoteConfig.ts
@@ -1,14 +1,8 @@
-import { remoteConfig } from '../../firebase';
-
-type FirebaseDefaultConfig = typeof remoteConfig.defaultConfig;
-
-export interface BypassConfig {
- regex: string[];
-}
-
export type GbfsVersionConfig = string[];
-export interface RemoteConfigValues extends FirebaseDefaultConfig {
+// FEATUTRE BYPASS CURRENTLY DISABLED
+export interface RemoteConfigValues {
+ [key: string]: boolean | number | string;
enableLanguageToggle: boolean;
/** Enable Metrics view
* Values:
@@ -36,10 +30,6 @@ export interface RemoteConfigValues extends FirebaseDefaultConfig {
gbfsValidator: boolean;
}
-const featureByPassDefault: BypassConfig = {
- regex: [],
-};
-
const gbfsVersionsDefault: GbfsVersionConfig = [];
// Add default values for remote config here
@@ -50,7 +40,7 @@ export const defaultRemoteConfigValues: RemoteConfigValues = {
'https://storage.googleapis.com/mobilitydata-gtfs-analytics-dev',
gbfsMetricsBucketEndpoint:
'https://storage.googleapis.com/mobilitydata-gbfs-analytics-dev',
- featureFlagBypass: JSON.stringify(featureByPassDefault),
+ featureFlagBypass: '',
enableFeedStatusBadge: false,
gbfsVersions: JSON.stringify(gbfsVersionsDefault),
enableGtfsVisualizationMap: false,
@@ -59,5 +49,3 @@ export const defaultRemoteConfigValues: RemoteConfigValues = {
enableDetailedCoveredArea: false,
gbfsValidator: false,
};
-
-remoteConfig.defaultConfig = defaultRemoteConfigValues;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..6597654
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,73 @@
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Analytics } from '@vercel/analytics/next';
+import ThemeRegistry from './registry';
+import { Providers } from './providers';
+import { type ReactElement } from 'react';
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale, getMessages } from 'next-intl/server';
+import { getRemoteConfigValues } from '../lib/remote-config.server';
+import { Mulish, IBM_Plex_Mono } from 'next/font/google';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import { Container } from '@mui/material';
+
+export const metadata = {
+ title: 'Mobility Database',
+ description: 'Mobility Database',
+};
+
+const mulish = Mulish({
+ weight: ['400', '500', '700'],
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-mulish',
+});
+
+const ibmPlexMono = IBM_Plex_Mono({
+ weight: ['400', '500', '700'],
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-ibm-plex-mono',
+});
+
+export default async function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}): Promise {
+ const [locale, messages, remoteConfig] = await Promise.all([
+ getLocale(),
+ getMessages(),
+ getRemoteConfigValues(),
+ ]);
+
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..f780ffa
--- /dev/null
+++ b/src/app/providers.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+import ContextProviders from './components/Context';
+import { RemoteConfigProvider } from './context/RemoteConfigProvider';
+import { type RemoteConfigValues } from './interface/RemoteConfig';
+
+// Look into this provider and see if it's client blocking. Niche provider might be able to isolate for single use
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AuthTokenSync from './components/AuthTokenSync';
+
+interface ProvidersProps {
+ children: React.ReactNode;
+ remoteConfig: RemoteConfigValues;
+}
+
+/// To revisit which providers are needed at this level
+export function Providers({
+ children,
+ remoteConfig,
+}: ProvidersProps): React.ReactElement {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/app/registry.tsx b/src/app/registry.tsx
new file mode 100644
index 0000000..8744a22
--- /dev/null
+++ b/src/app/registry.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import { ThemeProvider } from './context/ThemeProvider';
+
+export default function ThemeRegistry({
+ children,
+}: {
+ children: React.ReactNode;
+}): React.ReactElement {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/app/router/ProtectedRoute.tsx b/src/app/router/ProtectedRoute.tsx
index 40fa3e3..62fb220 100644
--- a/src/app/router/ProtectedRoute.tsx
+++ b/src/app/router/ProtectedRoute.tsx
@@ -16,7 +16,7 @@ export const ProtectedRoute = ({
}: {
targetStatus?: string;
redirect?: string;
-}): JSX.Element => {
+}): React.ReactElement => {
const userProfileStatus = useSelector(selectUserProfileStatus);
useEffect(() => {
app.auth();
diff --git a/src/app/router/Router.tsx b/src/app/router/Router.tsx
index 48e05f8..c3ecf97 100644
--- a/src/app/router/Router.tsx
+++ b/src/app/router/Router.tsx
@@ -10,11 +10,9 @@ import ChangePassword from '../screens/ChangePassword';
import Home from '../screens/Home';
import ForgotPassword from '../screens/ForgotPassword';
import FAQ from '../screens/FAQ';
-import About from '../screens/About';
import PostRegistration from '../screens/PostRegistration';
import TermsAndConditions from '../screens/TermsAndConditions';
import PrivacyPolicy from '../screens/PrivacyPolicy';
-import Feed from '../screens/Feed';
import Feeds from '../screens/Feeds';
import { SIGN_OUT_TARGET } from '../constants/Navigation';
import {
@@ -34,7 +32,6 @@ import GBFSFeedAnalytics from '../screens/Analytics/GBFSFeedAnalytics';
import GBFSNoticeAnalytics from '../screens/Analytics/GBFSNoticeAnalytics';
import GBFSVersionAnalytics from '../screens/Analytics/GBFSVersionAnalytics';
import ContactUs from '../screens/ContactUs';
-import FullMapView from '../screens/Feed/components/FullMapView';
import GbfsValidator from '../screens/GbfsValidator';
import { GbfsAuthProvider } from '../context/GbfsAuthProvider';
@@ -91,7 +88,6 @@ export const AppRouter: React.FC = () => {
{
path='feeds/gtfs_rt'
element={
- {t('common:name')}:
- {' ' + (user?.fullName ?? t('common:unknown'))}
+ {tCommon('name')}:
+ {' ' + (user?.fullName ?? tCommon('unknown'))}
{user?.email !== undefined && user?.email !== '' ? (
- {t('common:email')}: {' '}
- {' ' + (user?.email ?? t('common:unknown'))}
+ {tCommon('email')}: {' '}
+ {' ' + (user?.email ?? tCommon('unknown'))}
) : null}
{user?.organization !== undefined && (
- {t('common:organization')}: {' ' + user?.organization}
+ {tCommon('organization')}: {' ' + user?.organization}
)}
{user?.isRegisteredToReceiveAPIAnnouncements === true ? (
@@ -400,7 +401,7 @@ export default function APIAccount(): React.ReactElement {
onClick={handleSignOutClick}
data-cy='signOutButton'
>
- {t('common:signOut')}
+ {tCommon('signOut')}
diff --git a/src/app/screens/Analytics/GBFSFeedAnalytics/DetailPanel.tsx b/src/app/screens/Analytics/GBFSFeedAnalytics/DetailPanel.tsx
index 4cabf31..51fd1cd 100644
--- a/src/app/screens/Analytics/GBFSFeedAnalytics/DetailPanel.tsx
+++ b/src/app/screens/Analytics/GBFSFeedAnalytics/DetailPanel.tsx
@@ -93,7 +93,7 @@ const DetailPanel: React.FC = ({ row }) => {
return (
-
+
Notices
@@ -108,7 +108,7 @@ const DetailPanel: React.FC = ({ row }) => {
)}
-
+
Monthly Notice Count Trends
diff --git a/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx b/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx
index 3928133..d9ab0fe 100644
--- a/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx
+++ b/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx
@@ -70,7 +70,7 @@ export default function GBFSFeedAnalytics(): React.ReactElement {
(state: RootState) => state.gbfsAnalytics.selectedFile,
);
- const getFileDisplayKey = (file: AnalyticsFile): JSX.Element => {
+ const getFileDisplayKey = (file: AnalyticsFile): React.ReactElement => {
const dateString = file.file_name.split('_')[1]; // Extracting the year and month
const date = new Date(dateString.replace('.json', '')); // Creating a date object
const formattedDate = date.toLocaleDateString('en-CA', {
diff --git a/src/app/screens/Analytics/GTFSFeedAnalytics/DetailPanel.tsx b/src/app/screens/Analytics/GTFSFeedAnalytics/DetailPanel.tsx
index 1650941..5b2edac 100644
--- a/src/app/screens/Analytics/GTFSFeedAnalytics/DetailPanel.tsx
+++ b/src/app/screens/Analytics/GTFSFeedAnalytics/DetailPanel.tsx
@@ -75,7 +75,7 @@ const DetailPanel: React.FC = ({ row }) => {
return (
-
+
Monthly Feed Validation Metrics
@@ -101,7 +101,7 @@ const DetailPanel: React.FC = ({ row }) => {
-
+
state.gtfsAnalytics.selectedFile,
);
- const getFileDisplayKey = (file: AnalyticsFile): JSX.Element => {
+ const getFileDisplayKey = (file: AnalyticsFile): React.ReactElement => {
const dateString = file.file_name.split('_')[1]; // Extracting the year and month
const date = new Date(dateString.replace('.json', '')); // Creating a date object
const formattedDate = date.toLocaleDateString('en-CA', {
diff --git a/src/app/screens/ContactUs.tsx b/src/app/screens/ContactUs.tsx
index 853a1cb..0a01b6c 100644
--- a/src/app/screens/ContactUs.tsx
+++ b/src/app/screens/ContactUs.tsx
@@ -4,8 +4,7 @@ import Container from '@mui/material/Container';
import { Button, Card, styled, Typography, useTheme } from '@mui/material';
import EmailIcon from '@mui/icons-material/Email';
import GitHubIcon from '@mui/icons-material/GitHub';
-import { useTranslation } from 'react-i18next';
-import { MainPageHeader } from '../styles/PageHeader.style';
+import { useTranslations } from 'next-intl';
const ContactUsItem = styled(Card)(({ theme }) => ({
padding: theme.spacing(2),
@@ -32,7 +31,7 @@ const ContactUsItem = styled(Card)(({ theme }) => ({
}));
export default function ContactUs(): React.ReactElement {
- const { t } = useTranslation('contactUs');
+ const t = useTranslations('contactUs');
const theme = useTheme();
const SlackSvg = (
- {t('title')}
+ {t('title')}
- Frequently Asked Questions (FAQ)
+ Frequently Asked Questions (FAQ)
n);
@@ -28,7 +29,8 @@ export function getFeedFormattedName(
}
export function generateDescriptionMetaTag(
- t: TFunction<'feeds'>,
+ // Look into proper typing for t
+ t: (key: string, options?: Record) => string,
sortedProviders: string[],
dataType: 'gtfs' | 'gtfs_rt' | 'gbfs' | undefined,
feedName?: string,
@@ -42,13 +44,13 @@ export function generateDescriptionMetaTag(
}
let dataTypeVerbose = '';
if (dataType === 'gtfs') {
- dataTypeVerbose = t('common:gtfsSchedule');
+ dataTypeVerbose = t('common.gtfsSchedule');
} else if (dataType === 'gtfs_rt') {
- dataTypeVerbose = t('common:gtfsRealtime');
+ dataTypeVerbose = t('common.gtfsRealtime');
} else if (dataType === 'gbfs') {
- dataTypeVerbose = t('common:gbfs');
+ dataTypeVerbose = t('common.gbfs');
}
- return t('detailPageDescription', { formattedName, dataTypeVerbose });
+ return t('feeds.detailPageDescription', { formattedName, dataTypeVerbose });
}
export function generatePageTitle(
@@ -76,7 +78,7 @@ export const formatServiceDateRange = (
dateStart: string,
dateEnd: string,
timeZone?: string,
-): JSX.Element => {
+): React.ReactElement => {
const startDate = new Date(dateStart);
const endDate = new Date(dateEnd);
const usedTimezone = timeZone ?? 'UTC';
@@ -129,8 +131,12 @@ export const sortGbfsVersions = (
// Discuss if gbfs-feeds endpoint should include the bounding box
/* eslint-disable */
export function computeBoundingBox(
- geojson: any,
-): LatLngExpression[] | undefined {
+ geojson: GeoJSONData | GeoJSONDataGBFS,
+): LatLngTuple[] | undefined {
+ if (geojson == null) {
+ return undefined;
+ }
+
let minX = Infinity,
minY = Infinity,
maxX = -Infinity,
@@ -164,7 +170,7 @@ export function computeBoundingBox(
}
if (geojson.type === 'FeatureCollection') {
- geojson.features.forEach((f: any) => extractCoords(f.geometry));
+ geojson.features?.forEach((f: any) => extractCoords(f.geometry));
}
if (
@@ -181,3 +187,38 @@ export function computeBoundingBox(
[maxY, maxX],
];
}
+
+export const getBoundingBox = (
+ feed: GTFSFeedType,
+): LatLngTuple[] | undefined => {
+ if (feed == undefined || feed.data_type !== 'gtfs') {
+ return undefined;
+ }
+ const gtfsFeed: GTFSFeedType = feed;
+ if (
+ gtfsFeed.bounding_box?.maximum_latitude == undefined ||
+ gtfsFeed.bounding_box?.maximum_longitude == undefined ||
+ gtfsFeed.bounding_box?.minimum_latitude == undefined ||
+ gtfsFeed.bounding_box?.minimum_longitude == undefined
+ ) {
+ return undefined;
+ }
+ return [
+ [
+ gtfsFeed.bounding_box.minimum_latitude,
+ gtfsFeed.bounding_box.minimum_longitude,
+ ],
+ [
+ gtfsFeed.bounding_box.minimum_latitude,
+ gtfsFeed.bounding_box.maximum_longitude,
+ ],
+ [
+ gtfsFeed.bounding_box.maximum_latitude,
+ gtfsFeed.bounding_box.maximum_longitude,
+ ],
+ [
+ gtfsFeed.bounding_box.maximum_latitude,
+ gtfsFeed.bounding_box.minimum_longitude,
+ ],
+ ];
+};
diff --git a/src/app/screens/Feed/Feed.spec.tsx b/src/app/screens/Feed/Feed.spec.tsx
index 0d69116..a9ee160 100644
--- a/src/app/screens/Feed/Feed.spec.tsx
+++ b/src/app/screens/Feed/Feed.spec.tsx
@@ -1,9 +1,10 @@
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup } from '@testing-library/react';
import {
type GTFSFeedType,
type GTFSRTFeedType,
} from '../../services/feeds/utils';
-import { type TFunction } from 'i18next';
+import { renderToStaticMarkup } from 'react-dom/server';
+
import {
formatProvidersSorted,
generatePageTitle,
@@ -116,46 +117,46 @@ describe('Feed page', () => {
]);
});
- it('should format the page title correctly when there are more than one and gtfs', () => {
+ it('should format the page title correctly when there are more than one and gtfs', async () => {
const formattedProviders = formatProvidersSorted(mockFeed?.provider ?? '');
- render(
- ) => string;
const descriptionAllInfo = generateDescriptionMetaTag(
mockT,
diff --git a/src/app/screens/Feed/Feed.styles.ts b/src/app/screens/Feed/Feed.styles.ts
index 18d264c..d45dce6 100644
--- a/src/app/screens/Feed/Feed.styles.ts
+++ b/src/app/screens/Feed/Feed.styles.ts
@@ -1,7 +1,8 @@
+'use client';
+
import { Box, styled, type SxProps, type Theme } from '@mui/material';
export const feedDetailContentContainerStyle = (props: {
- theme: Theme;
isGtfsRT: boolean;
}): SxProps => {
return {
diff --git a/src/app/screens/Feed/FeedView.tsx b/src/app/screens/Feed/FeedView.tsx
new file mode 100644
index 0000000..dff96c2
--- /dev/null
+++ b/src/app/screens/Feed/FeedView.tsx
@@ -0,0 +1,377 @@
+import {
+ Box,
+ Button,
+ Container,
+ CssBaseline,
+ Grid,
+ Typography,
+} from '@mui/material';
+
+// Components
+import FeedTitle from './components/FeedTitle';
+import OfficialChip from '../../components/OfficialChip';
+import DataQualitySummary from './components/DataQualitySummary';
+import CoveredAreaMap from '../../components/CoveredAreaMap';
+import FeedSummary from './components/FeedSummary';
+import AssociatedFeeds from './components/AssociatedFeeds';
+import GbfsVersions from './components/GbfsVersions';
+import PreviousDatasets from './components/PreviousDatasets';
+import { WarningContentBox } from '../../components/WarningContentBox';
+import FeedNavigationControls from './components/FeedNavigationControls';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+
+import { getTranslations } from 'next-intl/server';
+
+// Styles
+import { ctaContainerStyle } from './Feed.styles';
+
+// Utils
+import {
+ type BasicFeedType,
+ type GBFSFeedType,
+ type GTFSFeedType,
+ type GTFSRTFeedType,
+} from '../../services/feeds/utils';
+import ClientDownloadButton from './components/ClientDownloadButton';
+import { type components } from '../../services/feeds/types';
+import ClientQualityReportButton from './components/ClientQualityReportButton';
+import { getBoundingBox } from './Feed.functions';
+
+interface Props {
+ feed: BasicFeedType;
+ feedDataType: string;
+ initialDatasets?: Array;
+ relatedFeeds?: GTFSFeedType[];
+ relatedGtfsRtFeeds?: GTFSRTFeedType[];
+ totalRoutes?: number;
+ routeTypes?: string[];
+}
+
+type LatestDatasetFull = components['schemas']['GtfsDataset'] | undefined;
+
+export default async function FeedView({
+ feed,
+ feedDataType,
+ initialDatasets,
+ relatedFeeds = [],
+ relatedGtfsRtFeeds = [],
+ totalRoutes,
+ routeTypes,
+}: Props): Promise {
+ const t = await getTranslations('feeds');
+ const tGbfs = await getTranslations('gbfs');
+ const tCommon = await getTranslations('common');
+ if (feed == undefined) return Feed not found ;
+
+ // Basic derived data
+ const sortedProviders =
+ feed.provider != null && String(feed.provider).trim().length > 0
+ ? String(feed.provider)
+ .split(',')
+ .map((s) => s.trim())
+ .sort()
+ : [];
+
+ const downloadLatestUrl =
+ feed?.data_type === 'gtfs'
+ ? (feed as GTFSFeedType)?.latest_dataset?.hosted_url
+ : feed?.source_info?.producer_url;
+
+ const gbfsOpenFeedUrlElement = (): React.ReactElement => {
+ if (gbfsAutodiscoveryUrl == undefined) {
+ return <>;
+ }
+ return (
+ }
+ >
+ {tGbfs('openAutoDiscoveryUrl')}
+
+ );
+ };
+
+ const hasFeedRedirect = feed?.redirects != null && feed.redirects.length > 0;
+
+ const gbfsAutodiscoveryUrl =
+ feed?.data_type === 'gbfs'
+ ? (feed as GBFSFeedType)?.source_info?.producer_url
+ : undefined; // Simplified
+
+ const boundingBox = getBoundingBox(feed as GTFSFeedType);
+
+ let latestDataset: LatestDatasetFull;
+ if (feed.data_type === 'gtfs') {
+ const gtfsFeed: GTFSFeedType = feed;
+ latestDataset = initialDatasets?.find(
+ (dataset) => dataset.id === gtfsFeed.latest_dataset?.id,
+ );
+ }
+
+ const hasDatasets =
+ initialDatasets != undefined && initialDatasets.length > 0;
+
+ return (
+
+
+
+
+
+
+
+ {feed?.feed_name !== '' && feed?.data_type === 'gtfs' && (
+
+
+ {feed?.feed_name}
+
+
+ )}
+
+ {feed?.data_type === 'gtfs' && (
+
+
+ )}
+
+
+ {latestDataset?.validation_report?.validated_at != null && (
+
+ {`${t('qualityReportUpdated')}: ${new Date(
+ latestDataset.validation_report.validated_at,
+ ).toDateString()}`}
+
+ )}
+ {feed?.official_updated_at != undefined && (
+
+ {`${t('officialFeedUpdated')}: ${new Date(
+ feed?.official_updated_at,
+ ).toDateString()}`}
+
+ )}
+ {feed.external_ids?.some((eId) => eId.source === 'tld') ===
+ true && (
+
+ {t('dataAttribution')}{' '}
+
+ Transitland
+
+
+ )}
+ {feed.external_ids?.some((eId) => eId.source === 'ntd') ===
+ true && (
+
+ {t('dataAttribution')}
+ {' the United States '}
+
+ National Transit Database
+
+
+ )}
+
+
+ {feed?.data_type === 'gtfs_rt' &&
+ (feed as GTFSRTFeedType)?.entity_types != undefined && (
+
+
+ {' '}
+ {((feed as GTFSRTFeedType)?.entity_types ?? [])
+ .map(
+ (entityType) =>
+ (
+ ({
+ tu: tCommon('gtfsRealtimeEntities.tripUpdates'),
+ vp: tCommon(
+ 'gtfsRealtimeEntities.vehiclePositions',
+ ),
+ sa: tCommon('gtfsRealtimeEntities.serviceAlerts'),
+ }) as const satisfies Record
+ )[entityType],
+ )
+ .join(` ${tCommon('and')} `)}
+
+
+ )}
+
+ {/* Warnings */}
+ {feedDataType === 'gtfs' && !hasDatasets && !hasFeedRedirect && (
+
+ {t.rich('unableToDownloadFeed', {
+ link: (chunks) => (
+
+ {chunks}
+
+ ),
+ })}
+
+ )}
+ {hasFeedRedirect && (
+
+
+ {t.rich('feedHasBeenReplaced', {
+ link: (chunks) => (
+
+ {chunks}
+
+ ),
+ })}
+
+
+ )}
+
+ {/* CTA Buttons */}
+
+ {feed.data_type === 'gtfs' &&
+ downloadLatestUrl != null &&
+ downloadLatestUrl.length > 0 && (
+
+
+
+
+ {(feed.data_type === 'gtfs' || feed.data_type === 'gbfs') && (
+
+
+ {feed?.data_type === 'gtfs_rt' && (
+ f?.id !== feed.id)}
+ gtfsRtFeeds={relatedGtfsRtFeeds.filter(
+ (f) => f?.id !== feed.id,
+ )}
+ />
+ )}
+
+
+
+ {feed?.data_type === 'gbfs' && (
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/app/screens/Feed/components/AssociatedFeeds.tsx b/src/app/screens/Feed/components/AssociatedFeeds.tsx
index 303977e..0d8bdb0 100644
--- a/src/app/screens/Feed/components/AssociatedFeeds.tsx
+++ b/src/app/screens/Feed/components/AssociatedFeeds.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import * as React from 'react';
import { ContentBox } from '../../../components/ContentBox';
import {
@@ -14,7 +16,7 @@ import {
type AllFeedType,
type GTFSRTFeedType,
} from '../../../services/feeds/utils';
-import { Link } from 'react-router-dom';
+import NextLink from 'next/link';
export interface AssociatedFeedsProps {
feeds: AllFeedType[] | undefined;
@@ -23,7 +25,7 @@ export interface AssociatedFeedsProps {
const renderAssociatedGTFSFeedRow = (
assocFeed: GTFSFeedType,
-): JSX.Element | undefined => {
+): React.ReactElement | undefined => {
const theme = useTheme();
if (assocFeed === undefined) {
return undefined;
@@ -34,8 +36,8 @@ const renderAssociatedGTFSFeedRow = (
return (
{
+): React.ReactElement | undefined => {
const theme = useTheme();
if (assocGTFSRTFeed === undefined) {
return undefined;
@@ -77,8 +79,8 @@ const renderAssociatedGTFSRTFeedRow = (
return (
=> {
+ // Lazy load react-ga4 to avoid loading it unnecessarily
+ const ReactGA = (await import('react-ga4')).default;
+ ReactGA.event({
+ category: 'engagement',
+ action: 'download_latest_dataset',
+ label: 'Download Latest Dataset',
+ });
+ };
+
+ return (
+ => {
+ const ReactGA = (await import('react-ga4')).default;
+ ReactGA.event({
+ category: 'engagement',
+ action: 'open_full_quality_report',
+ label: 'Open Full Quality Report',
+ });
+ };
+
+ return (
+ {
+ const [t, tCommon, config] = await Promise.all([
+ getTranslations('feeds'),
+ getTranslations('common'),
+ getRemoteConfigValues(),
+ ]);
+
return (
{latestDataset?.validation_report == undefined && (
@@ -55,9 +60,10 @@ export default function DataQualitySummary({
latestDataset?.validation_report?.unique_error_count !==
undefined &&
latestDataset?.validation_report?.unique_error_count > 0
- ? `${latestDataset?.validation_report
- ?.unique_error_count} ${t('common:feedback.errors')}`
- : t('common:feedback.noErrors')
+ ? `${
+ latestDataset?.validation_report?.unique_error_count
+ } ${tCommon('feedback.errors')}`
+ : tCommon('feedback.noErrors')
}
color={
latestDataset?.validation_report?.unique_error_count !==
@@ -89,11 +95,10 @@ export default function DataQualitySummary({
latestDataset?.validation_report?.unique_warning_count !==
undefined &&
latestDataset?.validation_report?.unique_warning_count > 0
- ? `${latestDataset?.validation_report
- ?.unique_warning_count} ${t(
- 'common:feedback.warnings',
- )}`
- : t('common:feedback.noWarnings')
+ ? `${
+ latestDataset?.validation_report?.unique_warning_count
+ } ${tCommon('feedback.warnings')}`
+ : tCommon('feedback.noWarnings')
}
color={
latestDataset?.validation_report?.unique_warning_count !==
@@ -115,7 +120,7 @@ export default function DataQualitySummary({
rel='noopener noreferrer nofollow'
label={`${
latestDataset?.validation_report?.unique_info_count ?? '0'
- } ${t('common:feedback.infoNotices')}`}
+ } ${tCommon('feedback.infoNotices')}`}
color='primary'
variant='outlined'
/>
diff --git a/src/app/screens/Feed/components/ExternalIds.tsx b/src/app/screens/Feed/components/ExternalIds.tsx
index 324a5c0..c5c526d 100644
--- a/src/app/screens/Feed/components/ExternalIds.tsx
+++ b/src/app/screens/Feed/components/ExternalIds.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React from 'react';
import {
Box,
@@ -13,7 +15,7 @@ import {
externalIdSourceMap,
filterFeedExternalIdsToSourceMap,
} from '../../../utils/externalIds';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
type ExternalIdInfo = components['schemas']['ExternalIds'];
@@ -24,7 +26,7 @@ export interface ExternalIdsProps {
export default function ExternalIds({
externalIds,
}: ExternalIdsProps): React.ReactElement | null {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
if (externalIds == null || externalIds.length === 0) return null;
const filteredExternalIds = filterFeedExternalIdsToSourceMap(externalIds);
if (filteredExternalIds.length === 0) return null;
diff --git a/src/app/screens/Feed/components/FeedNavigationControls.tsx b/src/app/screens/Feed/components/FeedNavigationControls.tsx
new file mode 100644
index 0000000..8a30878
--- /dev/null
+++ b/src/app/screens/Feed/components/FeedNavigationControls.tsx
@@ -0,0 +1,53 @@
+import { Button, Grid, Typography } from '@mui/material';
+import { ChevronLeft } from '@mui/icons-material';
+import { getTranslations } from 'next-intl/server';
+
+interface Props {
+ feedDataType: string;
+ feedId: string;
+}
+
+export default async function FeedNavigationControls({
+ feedDataType,
+ feedId,
+}: Props): Promise {
+ const t = await getTranslations('common');
+
+ return (
+
+
+
+
+ {t('feeds')}
+
+ /
+
+ {t(`${feedDataType}`)}
+
+ / {feedDataType === 'gbfs' ? feedId?.replace('gbfs-', '') : feedId}
+
+
+
+ );
+}
diff --git a/src/app/screens/Feed/components/FeedSummary.tsx b/src/app/screens/Feed/components/FeedSummary.tsx
index c8c2ef0..f33b9a0 100644
--- a/src/app/screens/Feed/components/FeedSummary.tsx
+++ b/src/app/screens/Feed/components/FeedSummary.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+// TODO: needs to be a server friendly component
import { useMemo, useState } from 'react';
import { type components } from '../../../services/feeds/types';
import LicenseDialog from './LicenseDialog';
@@ -16,13 +19,13 @@ import {
DialogTitle,
Grid,
IconButton,
- Link,
+ Link as MuiLink,
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import { GroupCard, GroupHeader } from '../FeedSummary.styles';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import LinkIcon from '@mui/icons-material/Link';
@@ -40,13 +43,8 @@ import { getEmojiFlag, type TCountryCode } from 'countries-list';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import GavelIcon from '@mui/icons-material/Gavel';
import { getFeedStatusData } from '../../../utils/feedStatusConsts';
-import { useSelector } from 'react-redux';
-import { Link as RouterLink } from 'react-router-dom';
+import Link from 'next/link';
import ReactGA from 'react-ga4';
-import {
- selectGtfsDatasetRoutesTotal,
- selectGtfsDatasetRouteTypes,
-} from '../../../store/supporting-files-selectors';
import { getRouteTypeTranslatedName } from '../../../constants/RouteTypes';
import {
featureChipsStyle,
@@ -64,6 +62,8 @@ export interface FeedSummaryProps {
sortedProviders: string[];
latestDataset?: components['schemas']['GtfsDataset'] | undefined;
autoDiscoveryUrl?: string;
+ totalRoutes?: number;
+ routeTypes?: string[];
}
export default function FeedSummary({
@@ -71,8 +71,11 @@ export default function FeedSummary({
sortedProviders,
latestDataset,
autoDiscoveryUrl,
+ routeTypes,
+ totalRoutes,
}: FeedSummaryProps): React.ReactElement {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
const theme = useTheme();
const [openLocationDetails, setOpenLocationDetails] = useState<
'summary' | 'fullList' | undefined
@@ -82,8 +85,6 @@ export default function FeedSummary({
const [showAllFeatures, setShowAllFeatures] = useState(false);
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
- const totalRoutes = useSelector(selectGtfsDatasetRoutesTotal);
- const routeTypes = useSelector(selectGtfsDatasetRouteTypes);
const uniqueCountries = useMemo(() => {
return getCountryLocationSummaries(feed?.locations ?? []).map(
@@ -176,12 +177,12 @@ export default function FeedSummary({
>
@@ -300,7 +301,7 @@ export default function FeedSummary({
variant='h6'
sx={{ fontWeight: 700, mr: 0.5 }}
>
- {getRouteTypeTranslatedName(routeType, t)}
+ {getRouteTypeTranslatedName(routeType, tCommon)}
{index < routeTypes.length - 1 ? ',' : ''}
@@ -318,8 +319,8 @@ export default function FeedSummary({
color='secondary'
size='small'
sx={{ height: 'fit-content', mt: 0.5, ml: '-5px' }}
- component={RouterLink}
- to='./map'
+ component={Link}
+ href={`/feeds/${feed?.data_type}/${feed?.id}/map`}
onClick={handleOpenDetailedMapClick}
>
{t('feedSummary.viewOnMap')}
@@ -405,14 +406,14 @@ export default function FeedSummary({
? t('feedSummary.producerUrl')
: t('feedSummary.providerUrl')}
-
)}
@@ -444,7 +445,7 @@ export default function FeedSummary({
color='secondary'
size='small'
startIcon={
{feed?.source_info?.authentication_type === 1 &&
- t('common:apiKey')}
+ tCommon('apiKey')}
{feed?.source_info?.authentication_type === 2 &&
- t('common:httpHeader')}
+ tCommon('httpHeader')}
{feed?.source_info?.authentication_info_url != undefined && (
- {t('common:start')}
+ {tCommon('start')}
{formatDateShort(
@@ -543,11 +544,13 @@ export default function FeedSummary({
sx={{
height: '1px',
width: '100%',
- background: `radial-gradient(circle,${getFeedStatusData(
- (feed as GTFSFeedType)?.status ?? '',
- theme,
- t,
- )?.color} 54%, rgba(255, 255, 255, 0) 100%)`,
+ background: `radial-gradient(circle,${
+ getFeedStatusData(
+ (feed as GTFSFeedType)?.status ?? '',
+ theme,
+ t,
+ )?.color
+ } 54%, rgba(255, 255, 255, 0) 100%)`,
}}
>
{/* TODO: nice to have, a placement of the chip relative to the current date */}
@@ -574,7 +577,7 @@ export default function FeedSummary({
- {t('common:end')}
+ {tCommon('end')}
{formatDateShort(
@@ -593,7 +596,7 @@ export default function FeedSummary({
+
+
{showAllFeatures
- ? t('common:showLess')
- : t('common:showMore', {
+ ? tCommon('showLess')
+ : tCommon('showMore', {
count: allFeatures.length - 6,
})}
@@ -682,7 +685,7 @@ export default function FeedSummary({
>
{feed?.source_info?.license_is_spdx != undefined &&
feed.source_info.license_is_spdx && (
@@ -719,7 +722,7 @@ export default function FeedSummary({
) : (
- {
+ const tCommon = await getTranslations('common');
const mainProvider = sortedProviders[0];
let extraProviders: string | undefined;
let realtimeFeedName: string | undefined;
if (sortedProviders.length > 1) {
extraProviders =
- '+' + (sortedProviders.length - 1) + ' ' + t('common:others');
+ '+' + (sortedProviders.length - 1) + ' ' + tCommon('others');
}
if (
feed?.data_type === 'gtfs_rt' &&
@@ -33,8 +32,8 @@ export default function FeedTitle({
return (
(routeTypes ?? []).map((routeTypeId) => {
- const translatedName = getRouteTypeTranslatedName(routeTypeId, t);
+ const translatedName = getRouteTypeTranslatedName(routeTypeId, tCommon);
return {
title: translatedName,
checked: filteredRouteTypeIds.includes(routeTypeId),
@@ -340,13 +344,13 @@ export default function FullMapView(): React.ReactElement {
sx={{ pl: 0, display: { xs: 'none', md: 'inline-flex' } }}
onClick={() => {
if (!hasError && feedId != null) {
- navigate(`/feeds/${feedId}`);
+ router.push(`/feeds/gtfs/${feedId}`);
} else {
- navigate('/');
+ router.push('/');
}
}}
>
- {t('common:back')}
+ {tCommon('back')}
{
const nextTypeIds = checkboxData
.map((item) =>
- item.checked ? item?.props?.routeTypeId ?? '' : '',
+ item.checked ? (item?.props?.routeTypeId ?? '') : '',
)
.filter((item) => item !== '');
@@ -482,9 +486,9 @@ export default function FullMapView(): React.ReactElement {
sx={{ position: 'absolute', top: 10, right: 10, zIndex: 1000 }}
onClick={() => {
if (!hasError && feedId != null) {
- navigate(`/feeds/${feedId}`);
+ router.push(`/feeds/${feed?.data_type}/${feedId}`);
} else {
- navigate('/');
+ router.push('/');
}
}}
>
@@ -605,7 +609,7 @@ export default function FullMapView(): React.ReactElement {
{ value: 14, label: '14' },
]}
onChange={(_, v) => {
- setCustomStopRadius(v as number);
+ setCustomStopRadius(v);
}}
aria-label={t(
'fullMapView.style.customStopRadiusAria',
diff --git a/src/app/screens/Feed/components/GbfsVersions.tsx b/src/app/screens/Feed/components/GbfsVersions.tsx
index 54ec507..41e55b1 100644
--- a/src/app/screens/Feed/components/GbfsVersions.tsx
+++ b/src/app/screens/Feed/components/GbfsVersions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import * as React from 'react';
import { ContentBox } from '../../../components/ContentBox';
import {
@@ -10,7 +12,7 @@ import {
Typography,
useTheme,
} from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -61,7 +63,9 @@ export default function GbfsVersions({
}: GbfsVersionsProps): React.ReactElement {
const [snackbarOpen, setSnackbarOpen] = React.useState(false);
const theme = useTheme();
- const { t } = useTranslation('gbfs');
+ const t = useTranslations('gbfs');
+ const tFeeds = useTranslations('feeds');
+ const tCommon = useTranslations('common');
const getGbfsVersionUrl = (version: string, feature: string): string => {
if (
@@ -159,10 +163,10 @@ export default function GbfsVersions({
label={
item.latest_validation_report?.total_error != null &&
item.latest_validation_report?.total_error > 0
- ? `${item.latest_validation_report?.total_error} ${t(
- 'common:feedback.errors',
- )}`
- : t('common:feedback.noErrors')
+ ? `${
+ item.latest_validation_report?.total_error
+ } ${tCommon('feedback.errors')}`
+ : tCommon('feedback.noErrors')
}
variant='outlined'
color={
@@ -183,7 +187,7 @@ export default function GbfsVersions({
component={'div'}
sx={{ mt: '-2px', mb: 2 }}
>
- {t('feeds:qualityReportUpdated')}
+ {tFeeds('qualityReportUpdated')}
{': '}
{displayFormattedDate(
item.latest_validation_report?.validated_at ?? '',
@@ -239,7 +243,7 @@ export default function GbfsVersions({
- {t('feeds:features')}
+ {tFeeds('features')}
0;
return (
-
+
{ruleData.rules?.map((rule, index) => (
-
+
void;
+ initialDatasets?: paths['/v1/gtfs_feeds/{id}/datasets']['get']['responses'][200]['content']['application/json'];
+ feedId: string;
}
export default function PreviousDatasets({
- datasets,
- isLoadingDatasets,
- hasloadedAllDatasets,
- loadMoreDatasets,
+ initialDatasets,
+ feedId,
}: PreviousDatasetsProps): React.ReactElement {
const theme = useTheme();
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
+ const [datasets, setDatasets] = React.useState(initialDatasets ?? []);
+ const [isLoadingDatasets, setIsLoadingDatasets] = React.useState(false);
+ const [hasloadedAllDatasets, setHasLoadedAllDatasets] = React.useState(
+ (initialDatasets?.length ?? 0) < 10,
+ );
const [scrollPosition, setScrollPosition] = React.useState(0);
const bottomRef = React.useRef(null);
const listRef = React.useRef(null);
+ const loadMoreDatasets = React.useCallback(
+ async (offset: number) => {
+ if (isLoadingDatasets || hasloadedAllDatasets) return;
+
+ setIsLoadingDatasets(true);
+ try {
+ const accessToken = await getUserAccessToken();
+ const newDatasets = await getGtfsFeedDatasets(feedId, accessToken, {
+ limit: 10,
+ offset,
+ });
+
+ if (newDatasets != null && newDatasets.length > 0) {
+ if (newDatasets.length < 10) {
+ setHasLoadedAllDatasets(true);
+ }
+ setDatasets((prev) => [...prev, ...newDatasets]);
+ } else {
+ setHasLoadedAllDatasets(true);
+ }
+ } catch (error) {
+ setHasLoadedAllDatasets(true);
+ } finally {
+ setIsLoadingDatasets(false);
+ }
+ },
+ [feedId, isLoadingDatasets, hasloadedAllDatasets],
+ );
+
React.useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
+ const entry = entries[0];
if (
- entries[0].isIntersecting &&
+ entry.isIntersecting &&
!hasloadedAllDatasets &&
- !isLoadingDatasets
+ !isLoadingDatasets &&
+ datasets.length > 0
) {
- const currentNumberOfDatasets = datasets?.length ?? 0;
+ const currentNumberOfDatasets = datasets.length;
const currentScrollPosition = listRef.current?.scrollTop ?? 0;
- loadMoreDatasets(currentNumberOfDatasets);
+ void loadMoreDatasets(currentNumberOfDatasets);
setScrollPosition(currentScrollPosition);
}
},
- { root: null, threshold: 1.0 },
+ {
+ root: listRef.current,
+ threshold: 1.0,
+ rootMargin: '20px',
+ },
);
- if (bottomRef.current != null) {
- observer.observe(bottomRef.current);
+ const bottomElement = bottomRef.current;
+ if (bottomElement != null) {
+ observer.observe(bottomElement);
}
+
return () => {
- if (bottomRef.current != null) observer.unobserve(bottomRef.current);
+ if (bottomElement != null) {
+ observer.unobserve(bottomElement);
+ }
};
- }, [datasets, hasloadedAllDatasets]);
+ }, [datasets, hasloadedAllDatasets, isLoadingDatasets, loadMoreDatasets]);
/**
* When datasets loads, the default behavior is to bring the user to the bottom
@@ -88,7 +131,7 @@ export default function PreviousDatasets({
list.scrollTop = scrollPosition + 150;
}
}
- }, [datasets]);
+ }, [datasets, scrollPosition]);
return (
<>
@@ -182,11 +225,11 @@ export default function PreviousDatasets({
dataset?.validation_report?.unique_error_count !=
undefined &&
dataset?.validation_report?.unique_error_count > 0
- ? `${dataset?.validation_report
- ?.unique_error_count} ${t(
- 'common:feedback.errors',
- )}`
- : t('common:feedback.noErrors')
+ ? `${
+ dataset?.validation_report
+ ?.unique_error_count
+ } ${tCommon('feedback.errors')}`
+ : tCommon('feedback.noErrors')
}
color={
dataset?.validation_report?.unique_error_count !=
@@ -219,11 +262,11 @@ export default function PreviousDatasets({
?.unique_warning_count != undefined &&
dataset?.validation_report?.unique_warning_count >
0
- ? `${dataset?.validation_report
- ?.unique_warning_count} ${t(
- 'common:feedback.warnings',
- )}`
- : t('common:feedback.noWarnings')
+ ? `${
+ dataset?.validation_report
+ ?.unique_warning_count
+ } ${tCommon('feedback.warnings')}`
+ : tCommon('feedback.noWarnings')
}
color={
dataset?.validation_report
@@ -246,7 +289,7 @@ export default function PreviousDatasets({
label={`${
dataset?.validation_report?.unique_info_count ??
'0'
- } ${t('common:feedback.infoNotices')}`}
+ } ${tCommon('feedback.infoNotices')}`}
color='primary'
variant='outlined'
/>
@@ -277,7 +320,7 @@ export default function PreviousDatasets({
href={dataset.hosted_url}
rel='noreferrer nofollow'
>
- {t('common:download')}
+ {tCommon('download')}
)}
diff --git a/src/app/screens/Feed/index.tsx b/src/app/screens/Feed/index.tsx
index e2707ff..3b819d9 100644
--- a/src/app/screens/Feed/index.tsx
+++ b/src/app/screens/Feed/index.tsx
@@ -1,3 +1,6 @@
+// This component is deprecated in favor of FeedView
+// They should have the same functionality
+
import * as React from 'react';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
@@ -35,11 +38,9 @@ import {
selectHasLoadedAllDatasets,
selectLatestDatasetsData,
} from '../../store/dataset-selectors';
-import PreviousDatasets from './components/PreviousDatasets';
-import DataQualitySummary from './components/DataQualitySummary';
import AssociatedFeeds from './components/AssociatedFeeds';
import { WarningContentBox } from '../../components/WarningContentBox';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import { Helmet } from 'react-helmet-async';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import {
@@ -74,7 +75,7 @@ const wrapComponent = (
structuredData: Record | undefined,
child: React.ReactElement,
): React.ReactElement => {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
const theme = useTheme();
return (
{
};
export default function Feed(): React.ReactElement {
- const { t } = useTranslation('feeds');
- const theme = useTheme();
+ const t = useTranslations('feeds');
const dispatch = useAppDispatch();
const { feedId, feedDataType } = useParams();
const user = useSelector(selectUserProfile);
@@ -355,7 +355,7 @@ export default function Feed(): React.ReactElement {
feedId,
structuredData,
-
+
-
+
{feed?.feed_name !== '' && feed?.data_type === 'gtfs' && (
-
+
)}
- {feed?.data_type === 'gtfs' && (
+ {/* {feed?.data_type === 'gtfs' && (
+
{' '}
{((feed as GTFSRTFeedType)?.entity_types ?? [])
@@ -512,28 +512,29 @@ export default function Feed(): React.ReactElement {
!hasDatasets &&
!hasFeedRedirect && (
-
- Unable to download this feed. If there is a more recent URL for
- this feed,{' '}
-
- please submit it here
-
-
+ {t.rich('unableToDownloadFeed', {
+ link: (chunks) => (
+
+ {chunks}
+
+ ),
+ })}
)}
{hasFeedRedirect && (
-
+
-
- This feed has been replaced with a different producer URL.
-
- Go to the new feed here
-
-
+ {t.rich('feedHasBeenReplaced', {
+ link: (chunks) => (
+
+ {chunks}
+
+ ),
+ })}
)}
@@ -567,10 +568,9 @@ export default function Feed(): React.ReactElement {
)}
{feed?.data_type === 'gbfs' && <>{gbfsOpenFeedUrlElement()}}
-
+
@@ -605,15 +605,15 @@ export default function Feed(): React.ReactElement {
)}
{feed?.data_type === 'gtfs' && hasDatasets && (
-
-
+ {/* {
loadDatasets(offset);
}}
- />
+ /> */}
)}
,
diff --git a/src/app/screens/FeedSubmission/Form/FirstStep.tsx b/src/app/screens/FeedSubmission/Form/FirstStep.tsx
index 29fe8f0..0a36064 100644
--- a/src/app/screens/FeedSubmission/Form/FirstStep.tsx
+++ b/src/app/screens/FeedSubmission/Form/FirstStep.tsx
@@ -20,7 +20,7 @@ import {
} from 'react-hook-form';
import { type YesNoFormInput, type FeedSubmissionFormFormInput } from '.';
import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import { isValidFeedLink } from '../../../services/feeds/utils';
import FormLabelDescription from './components/FormLabelDescription';
@@ -47,7 +47,8 @@ export default function FormFirstStep({
submitFormData,
setNumberOfSteps,
}: FormFirstStepProps): React.ReactElement {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
const {
control,
handleSubmit,
@@ -109,7 +110,7 @@ export default function FormFirstStep({
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-
+
Add or update a feed
-
+
@@ -121,7 +121,8 @@ export default function AdvancedSearchTable({
selectedFeatures,
selectedGbfsVersions,
}: AdvancedSearchTableProps): React.ReactElement {
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
const [anchorEl, setAnchorEl] = React.useState(null);
const [popoverData, setPopoverData] = React.useState(
undefined,
@@ -220,7 +221,7 @@ export default function AdvancedSearchTable({
variant='body1'
sx={{ mr: 1, fontWeight: 'bold' }}
>
- {t(`common:${feed.data_type}`)}
+ {tCommon(`${feed.data_type}`)}
diff --git a/src/app/screens/Feeds/GtfsRtEntities.tsx b/src/app/screens/Feeds/GtfsRtEntities.tsx
index 0d65091..63ab710 100644
--- a/src/app/screens/Feeds/GtfsRtEntities.tsx
+++ b/src/app/screens/Feeds/GtfsRtEntities.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
import UpdateIcon from '@mui/icons-material/Update';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import LocationOnIcon from '@mui/icons-material/LocationOn';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
type GtfsRtEntitySelection = 'vp' | 'tu' | 'sa';
@@ -43,7 +43,7 @@ export default function GtfsRtEntities({
entities,
includeName = false,
}: GtfsRtEntitiesProps): React.ReactElement {
- const { t } = useTranslation('common');
+ const t = useTranslations('common');
const entityData = {
vp: {
icon: (
diff --git a/src/app/screens/Feeds/PopoverList.tsx b/src/app/screens/Feeds/PopoverList.tsx
index 508c800..19cf372 100644
--- a/src/app/screens/Feeds/PopoverList.tsx
+++ b/src/app/screens/Feeds/PopoverList.tsx
@@ -1,5 +1,5 @@
import { Popper, Box, Typography, useTheme } from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
interface PopoverListProps {
popoverData: string[];
@@ -13,7 +13,7 @@ export default function PopoverList({
title,
}: PopoverListProps): React.ReactElement {
const theme = useTheme();
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
return (
x)
.sort() ?? [];
const displayName = providers[0];
- let manyProviders: JSX.Element | undefined;
+ let manyProviders: React.ReactElement | undefined;
if (providers.length > 1) {
manyProviders = (
{
it('should display the correct data type depending on the feed type', () => {
const { getByText } = render(getDataTypeElement('gtfs'));
- expect(getByText('common:gtfsSchedule')).toBeInTheDocument();
+ expect(getByText('gtfsSchedule')).toBeInTheDocument();
});
it('should display the correct data type depending on the feed type', () => {
const { getByText } = render(getDataTypeElement('gtfs_rt'));
- expect(getByText('common:gtfsRealtime')).toBeInTheDocument();
+ expect(getByText('gtfsRealtime')).toBeInTheDocument();
});
});
diff --git a/src/app/screens/Feeds/SearchTable.tsx b/src/app/screens/Feeds/SearchTable.tsx
index 0ea6b7d..b2652ad 100644
--- a/src/app/screens/Feeds/SearchTable.tsx
+++ b/src/app/screens/Feeds/SearchTable.tsx
@@ -18,7 +18,7 @@ import {
getLocationName,
getCountryLocationSummaries,
} from '../../services/feeds/utils';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import GtfsRtEntities from './GtfsRtEntities';
import { Link } from 'react-router-dom';
import { getEmojiFlag, type TCountryCode } from 'countries-list';
@@ -37,13 +37,13 @@ const HeaderTableCell = styled(TableCell)(() => ({
export const getDataTypeElement = (
dataType: 'gtfs' | 'gtfs_rt' | 'gbfs',
-): JSX.Element => {
- const { t } = useTranslation('feeds');
+): React.ReactElement => {
+ const tCommon = useTranslations('common');
const DataTypeHolder = ({
children,
}: {
children: React.ReactNode;
- }): JSX.Element => {
+ }): React.ReactElement => {
return (
{t('common:gtfsSchedule')};
+ return {tCommon('gtfsSchedule')} ;
} else if (dataType === 'gtfs_rt') {
- return {t('common:gtfsRealtime')} ;
+ return {tCommon('gtfsRealtime')} ;
} else {
- return {t('common:gbfs')} ;
+ return {tCommon('gbfs')} ;
}
};
@@ -73,7 +73,7 @@ export default function SearchTable({
const [providersPopoverData, setProvidersPopoverData] = React.useState<
string[] | undefined
>(undefined);
- const { t } = useTranslation('feeds');
+ const t = useTranslations('feeds');
if (feedsData === undefined) return <>;
// Reason for all component overrite is for SEO purposes.
diff --git a/src/app/screens/Feeds/index.tsx b/src/app/screens/Feeds/index.tsx
index e140bbe..a109954 100644
--- a/src/app/screens/Feeds/index.tsx
+++ b/src/app/screens/Feeds/index.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
@@ -26,9 +27,9 @@ import {
selectFeedsData,
selectFeedsStatus,
} from '../../store/feeds-selectors';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import SearchTable from './SearchTable';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
import {
getDataTypeParamFromSelectedFeedTypes,
getInitialSelectedFeedTypes,
@@ -38,7 +39,6 @@ import {
searchBarStyles,
stickyHeaderStyles,
} from './Feeds.styles';
-import { MainPageHeader } from '../../styles/PageHeader.style';
import { ColoredContainer } from '../../styles/PageLayout.style';
import AdvancedSearchTable from './AdvancedSearchTable';
import ViewHeadlineIcon from '@mui/icons-material/ViewHeadline';
@@ -47,8 +47,11 @@ import { SearchFilters } from './SearchFilters';
export default function Feed(): React.ReactElement {
const theme = useTheme();
- const { t } = useTranslation('feeds');
- const [searchParams, setSearchParams] = useSearchParams();
+ const t = useTranslations('feeds');
+ const tCommon = useTranslations('common');
+ const searchParams = useSearchParams();
+ const router = useRouter();
+ const pathname = usePathname();
const [searchLimit] = useState(20); // leaving possibility to edit in future
const [selectedFeedTypes, setSelectedFeedTypes] = useState(
getInitialSelectedFeedTypes(searchParams),
@@ -173,7 +176,10 @@ export default function Feed(): React.ReactElement {
newSearchParams.set('utm_source', 'transitfeeds');
}
if (searchParams.toString() !== newSearchParams.toString()) {
- setSearchParams(newSearchParams, { replace: false });
+ const queryString = newSearchParams.toString();
+ router.push(
+ `${pathname}${queryString.length > 0 ? `?${queryString}` : ''}`,
+ );
}
}, [
activeSearch,
@@ -310,9 +316,9 @@ export default function Feed(): React.ReactElement {
maxWidth={'xl'}
sx={{ boxSizing: 'content-box' }}
>
-
- {t('common:feeds')}
-
+
+ {tCommon('feeds')}
+
{activeSearch !== '' && (
{t('searchFor')}: {activeSearch}
@@ -367,7 +373,7 @@ export default function Feed(): React.ReactElement {
type='submit'
sx={{ m: 1, height: '55px', mr: 0 }}
>
- {t('common:search')}
+ {tCommon('search')}
@@ -383,9 +389,7 @@ export default function Feed(): React.ReactElement {
}}
>
{
setActivePagination(1);
- setSelectedFeedTypes(feedTypes);
+ setSelectedFeedTypes({ ...feedTypes });
}}
setIsOfficialFeedSearch={(isOfficial) => {
setActivePagination(1);
@@ -418,14 +422,14 @@ export default function Feed(): React.ReactElement {
>
-
+
{selectedFeedTypes.gtfs && (
{
setActivePagination(1);
setSelectedFeedTypes({
@@ -440,7 +444,7 @@ export default function Feed(): React.ReactElement {
color='primary'
variant='outlined'
size='small'
- label={t('common:gtfsRealtime')}
+ label={tCommon('gtfsRealtime')}
onDelete={() => {
setActivePagination(1);
setSelectedFeedTypes({
@@ -455,7 +459,7 @@ export default function Feed(): React.ReactElement {
color='primary'
variant='outlined'
size='small'
- label={t('common:gbfs')}
+ label={tCommon('gbfs')}
onDelete={() => {
setActivePagination(1);
setSelectedFeedTypes({
@@ -528,7 +532,7 @@ export default function Feed(): React.ReactElement {
)}
{feedStatus === 'loading' && (
-
+
- {t('common:errors.generic')}
+
+ {tCommon('errors.generic')}
-
- Please check your internet connection and try again. If
- the problem persists
-
- contact us
-
- for for further assistance.
-
+ {t.rich('errorAndContact', {
+ contactLink: (chunks) => (
+
+ {chunks}
+
+ ),
+ })}
)}
@@ -576,7 +579,7 @@ export default function Feed(): React.ReactElement {
{feedsData !== undefined && feedStatus === 'loaded' && (
<>
{feedsData?.results?.length === 0 && (
-
+
{t('noResults', { activeSearch })}
{t('searchSuggestions')}
@@ -605,8 +608,7 @@ export default function Feed(): React.ReactElement {
feedsData?.results?.length > 0 && (
) : null}
{
setRequiresAuth(auth !== undefined);
- setAuthType(auth == undefined ? '' : auth.authType ?? '');
+ setAuthType(auth == undefined ? '' : (auth.authType ?? ''));
setBasicAuthUsername(
auth != null && 'username' in auth ? auth.username : undefined,
);
diff --git a/src/app/screens/GbfsValidator/ValidationReport.tsx b/src/app/screens/GbfsValidator/ValidationReport.tsx
index f4d6d91..2c2543e 100644
--- a/src/app/screens/GbfsValidator/ValidationReport.tsx
+++ b/src/app/screens/GbfsValidator/ValidationReport.tsx
@@ -255,7 +255,9 @@ export default function ValidationReport({
{groupedByFile.map((fg, index) => (
(fileGroupRefs.current[index] = el)}
+ ref={(el) => {
+ fileGroupRefs.current[index] = el;
+ }}
tabIndex={-1}
sx={ValidationElementCardStyles(theme, index)}
>
diff --git a/src/app/screens/GbfsValidator/index.tsx b/src/app/screens/GbfsValidator/index.tsx
index b53583e..07c745e 100644
--- a/src/app/screens/GbfsValidator/index.tsx
+++ b/src/app/screens/GbfsValidator/index.tsx
@@ -1,8 +1,6 @@
import { OpenInNew } from '@mui/icons-material';
import { Box, Button, Link, Typography, useTheme } from '@mui/material';
import React, { useEffect } from 'react';
-import gbfsLogo from './gbfs.svg';
-import githubLogo from './github.svg';
import GbfsFeedSearchInput from './GbfsFeedSearchInput';
import { useSearchParams } from 'react-router-dom';
import {
@@ -130,7 +128,7 @@ export default function GbfsValidator(): React.ReactElement {
@@ -180,7 +178,7 @@ export default function GbfsValidator(): React.ReactElement {
diff --git a/src/app/screens/Home.tsx b/src/app/screens/Home.tsx
index 55a4884..54f8048 100644
--- a/src/app/screens/Home.tsx
+++ b/src/app/screens/Home.tsx
@@ -33,7 +33,7 @@ const ActionBox = ({
iconHeight,
buttonHref,
buttonText,
-}: ActionBoxProps): JSX.Element => (
+}: ActionBoxProps): React.ReactElement => (
;
+ errors?: components["schemas"]["FileError"][];
schema?: Record;
/** @description System errors that occurred while processing this file, such as fetch failures or parsing errors. These are not validation errors but rather issues that prevented proper validation. */
- systemErrors?: Array;
+ systemErrors?: components["schemas"]["SystemError"][];
};
ValidationResult: {
summary?: {
/** @example v1.2 */
validatorVersion?: string;
- files?: Array;
+ files?: components["schemas"]["GbfsFile"][];
};
};
};
@@ -101,13 +102,10 @@ export interface components {
requestBodies: {
ValidateRequestBody: {
content: {
- 'application/json': {
+ "application/json": {
/** @example https://example.com/gbfs.json */
feedUrl: string;
- auth?:
- | components['schemas']['BasicAuth']
- | components['schemas']['BearerTokenAuth']
- | components['schemas']['OAuthClientCredentialsGrantAuth'];
+ auth?: components["schemas"]["BasicAuth"] | components["schemas"]["BearerTokenAuth"] | components["schemas"]["OAuthClientCredentialsGrantAuth"];
};
};
};
diff --git a/src/app/services/feeds/index.ts b/src/app/services/feeds/index.ts
index 45214b5..7e4eb38 100644
--- a/src/app/services/feeds/index.ts
+++ b/src/app/services/feeds/index.ts
@@ -1,12 +1,11 @@
import createClient, { type Middleware } from 'openapi-fetch';
import type { paths } from './types';
import { type AllFeedsParams, type AllFeedType } from './utils';
-import { getEnvConfig } from '../../utils/config';
-
-const API_BASE_URL = getEnvConfig('REACT_APP_FEED_API_BASE_URL');
+import { type GtfsRoute } from '../../types';
+import { getFeedFilesBaseUrl } from '../../utils/config';
const client = createClient({
- baseUrl: `${API_BASE_URL}`,
+ baseUrl: String(process.env.NEXT_PUBLIC_FEED_API_BASE_URL),
querySerializer: {
// serialize arrays as comma-separated values
// More info: https://swagger.io/docs/specification/serialization/#query
@@ -24,7 +23,9 @@ const throwOnError: Middleware = {
if (res.headers.get('content-type')?.includes('json') === true) {
body = await res.clone().json();
}
- throw new Error(body);
+ const errorMessage =
+ typeof body === 'string' ? body : JSON.stringify(body);
+ throw new Error(errorMessage);
}
return undefined;
},
@@ -310,3 +311,35 @@ export const getLicense = async (
client.eject(authMiddleware);
});
};
+
+/**
+ * Builds the URL for the routes.json file for a given feed and dataset.
+ * @param feedId - The feed ID
+ * @param datasetId - The dataset ID (visualization_dataset_id )
+ * @returns The URL for the routes.json file
+ */
+export function buildRoutesUrl(feedId: string, datasetId: string): string {
+ return `${getFeedFilesBaseUrl()}/${feedId}/${datasetId}/pmtiles/routes.json`;
+}
+
+/**
+ * Fetches the routes.json data for a GTFS feed.
+ * @param feedId - The feed ID
+ * @param datasetId - The dataset ID (visualization_dataset_id)
+ * @returns An array of GtfsRoute objects, or undefined if the fetch fails
+ */
+export const getGtfsFeedRoutes = async (
+ feedId: string,
+ datasetId: string,
+): Promise => {
+ const url = buildRoutesUrl(feedId, datasetId);
+ try {
+ const res = await fetch(url, { headers: { Accept: 'application/json' } });
+ if (!res.ok) {
+ return undefined;
+ }
+ return (await res.json()) as GtfsRoute[];
+ } catch (error) {
+ return undefined;
+ }
+};
diff --git a/src/app/store/feed-selectors.ts b/src/app/store/feed-selectors.ts
index f1c578e..ff1e632 100644
--- a/src/app/store/feed-selectors.ts
+++ b/src/app/store/feed-selectors.ts
@@ -10,7 +10,7 @@ import {
isGtfsRtFeedType,
} from '../services/feeds/utils';
import { type RootState } from './store';
-import type { LatLngExpression } from 'leaflet';
+import type { LatLngTuple } from 'leaflet';
export const selectFeedData = (state: RootState): BasicFeedType => {
return state.feedProfile.data;
@@ -100,7 +100,7 @@ export const selectRelatedGtfsRTFeedsData = (
export const selectFeedBoundingBox = (
state: RootState,
-): LatLngExpression[] | undefined => {
+): LatLngTuple[] | undefined => {
if (
!(
isGtfsFeedType(state.feedProfile.data) ||
diff --git a/src/app/store/saga/gbfs-validator-saga.ts b/src/app/store/saga/gbfs-validator-saga.ts
index a4c87ed..1a8152f 100644
--- a/src/app/store/saga/gbfs-validator-saga.ts
+++ b/src/app/store/saga/gbfs-validator-saga.ts
@@ -5,18 +5,17 @@ import {
validateFailure,
type ValidateRequestBody,
} from '../gbfs-validator-reducer';
-import { getEnvConfig } from '../../utils/config';
import type { components } from '../../services/feeds/gbfs-validator-types';
-const getValidatorBaseUrl = (): string =>
- getEnvConfig('REACT_APP_GBFS_VALIDATOR_API_BASE_URL');
+const getValidatorBaseUrl =
+ String(process.env.NEXT_PUBLIC_GBFS_VALIDATOR_API_BASE_URL) ?? '';
function* runValidation(
action: ReturnType,
): Generator {
try {
const payload: ValidateRequestBody = action.payload;
- const url = `${getValidatorBaseUrl().replace(/\/$/, '')}/validate`;
+ const url = `${getValidatorBaseUrl.replace(/\/$/, '')}/validate`;
const response: Response = yield call(fetch, url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
diff --git a/src/app/store/saga/supporting-files-saga.spec.ts b/src/app/store/saga/supporting-files-saga.spec.ts
index 8f66561..92246e0 100644
--- a/src/app/store/saga/supporting-files-saga.spec.ts
+++ b/src/app/store/saga/supporting-files-saga.spec.ts
@@ -10,7 +10,18 @@ import {
buildRoutesUrl,
} from './supporting-files-saga';
+// Mock the entire http module
+jest.mock('../../services/http', () => ({
+ getJson: jest.fn(),
+}));
+
+const mockedHttp = http as jest.Mocked;
+
describe('supporting-files-saga', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
it('worker saga dispatches success when getJson resolves', async () => {
const fakeData = {
type: 'FeatureCollection',
@@ -18,7 +29,7 @@ describe('supporting-files-saga', () => {
extracted_at: '2025-01-01T00:00:00Z',
extraction_url: 'http://example.com/source',
};
- const getJsonSpy = jest.spyOn(http, 'getJson').mockResolvedValue(fakeData);
+ mockedHttp.getJson.mockResolvedValue(fakeData);
const dispatched: unknown[] = [];
@@ -34,7 +45,7 @@ describe('supporting-files-saga', () => {
}),
).toPromise();
- expect(getJsonSpy).toHaveBeenCalledWith('http://example.com');
+ expect(mockedHttp.getJson).toHaveBeenCalledWith('http://example.com');
expect(dispatched).toContainEqual(
loadingSupportingFileSuccess({
key: 'gtfsGeolocationGeojson',
@@ -43,13 +54,10 @@ describe('supporting-files-saga', () => {
data: fakeData,
}),
);
- getJsonSpy.mockRestore();
});
it('worker saga dispatches fail when getJson throws', async () => {
- const getJsonSpy = jest
- .spyOn(http, 'getJson')
- .mockRejectedValue(new Error('Network error'));
+ mockedHttp.getJson.mockRejectedValue(new Error('Network error'));
const dispatched: unknown[] = [];
@@ -65,7 +73,7 @@ describe('supporting-files-saga', () => {
}),
).toPromise();
- expect(getJsonSpy).toHaveBeenCalledWith('http://example.com');
+ expect(mockedHttp.getJson).toHaveBeenCalledWith('http://example.com');
expect(
dispatched.some(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -73,7 +81,6 @@ describe('supporting-files-saga', () => {
(action) => action.type === loadingSupportingFileFail.type,
),
).toBe(true);
- getJsonSpy.mockRestore();
});
it('buildRoutesUrl creates correct URL', () => {
diff --git a/src/app/store/storage.ts b/src/app/store/storage.ts
new file mode 100644
index 0000000..3c8ba2c
--- /dev/null
+++ b/src/app/store/storage.ts
@@ -0,0 +1,26 @@
+import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
+
+const createNoopStorage = (): {
+ getItem: (key: string) => Promise;
+ setItem: (key: string, value: string) => Promise;
+ removeItem: (key: string) => Promise;
+} => {
+ return {
+ async getItem(_key: string) {
+ return await Promise.resolve(null);
+ },
+ async setItem(_key: string, value: string) {
+ return await Promise.resolve(value);
+ },
+ async removeItem(_key: string) {
+ await Promise.resolve();
+ },
+ };
+};
+
+const storage =
+ typeof window !== 'undefined'
+ ? createWebStorage('local')
+ : createNoopStorage();
+
+export default storage;
diff --git a/src/app/store/store.ts b/src/app/store/store.ts
index 697616e..f00ff08 100644
--- a/src/app/store/store.ts
+++ b/src/app/store/store.ts
@@ -7,7 +7,7 @@ import {
PURGE,
REGISTER,
} from 'redux-persist';
-import storage from 'redux-persist/lib/storage';
+import storage from './storage';
import {
configureStore,
type ThunkAction,
@@ -76,7 +76,7 @@ export const store = makeStore();
// Expose store to Cypress e2e tests
/* eslint-disable */
-if (window.Cypress) {
+if (typeof window !== 'undefined' && (window as any).Cypress) {
(window as any).store = store;
}
/* eslint-enable */
diff --git a/src/app/styles/Footer.css b/src/app/styles/Footer.css
index b03b27c..383f26f 100644
--- a/src/app/styles/Footer.css
+++ b/src/app/styles/Footer.css
@@ -5,8 +5,6 @@
font-size: 13px;
box-sizing: border-box;
min-height: 210px;
- position: absolute;
- bottom: 0;
}
.link-button:hover {
diff --git a/src/app/styles/PageHeader.style.ts b/src/app/styles/PageHeader.style.ts
deleted file mode 100644
index 4433e77..0000000
--- a/src/app/styles/PageHeader.style.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { styled, Typography, type TypographyProps } from '@mui/material';
-
-export const MainPageHeader = styled(Typography)({
- fontWeight: 700,
-});
-
-MainPageHeader.defaultProps = {
- variant: 'h4',
- color: 'primary',
- component: 'h1',
-};
diff --git a/src/app/types.ts b/src/app/types.ts
index b2e85c9..8e9fcf7 100644
--- a/src/app/types.ts
+++ b/src/app/types.ts
@@ -3,12 +3,13 @@ import {
GoogleAuthProvider,
OAuthProvider,
} from 'firebase/auth';
+import { type ReactElement } from 'react';
export type ChildrenElement =
| string
- | JSX.Element
- | JSX.Element[]
- | (() => JSX.Element);
+ | ReactElement
+ | ReactElement[]
+ | (() => ReactElement);
export interface EmailLogin {
email: string;
diff --git a/src/app/utils/auth-server.ts b/src/app/utils/auth-server.ts
new file mode 100644
index 0000000..c29225c
--- /dev/null
+++ b/src/app/utils/auth-server.ts
@@ -0,0 +1,45 @@
+import { cookies } from 'next/headers';
+import { app } from '../../firebase';
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+// TODO: for anonymous auth use fireabse admin
+
+/**
+ * Retrieves the Firebase access token from the 'firebase_token' cookie.
+ * If the cookie is missing, performs a server-side anonymous login to generate a token.
+ * This ensures SSR pages can access the API even for direct, unauthenticated visits.
+ */
+export async function getSSRAccessToken(): Promise {
+ const cookieStore = await cookies();
+ const tokenCookie = cookieStore.get('firebase_token');
+
+ if (tokenCookie?.value != null && tokenCookie.value.length > 0) {
+ try {
+ // Basic JWT decoding to check expiry
+ const token = tokenCookie.value;
+ const payloadBase64 = token.split('.')[1];
+ const payload = JSON.parse(
+ Buffer.from(payloadBase64, 'base64').toString(),
+ );
+ const now = Math.floor(Date.now() / 1000);
+
+ if (payload.exp != null && payload.exp > now) {
+ return token;
+ }
+ } catch (error) {}
+ }
+
+ // Fallback: Server-side Anonymous Login
+ // We use NONE persistence to verify we don't store this session in any shared environment storage
+ try {
+ const auth = app.auth();
+ await auth.setPersistence(firebase.auth.Auth.Persistence.NONE);
+ const userCredential = await auth.signInAnonymously();
+ if (userCredential.user != null) {
+ const token = await userCredential.user.getIdToken();
+ return token;
+ }
+ } catch (error) {}
+
+ return '';
+}
diff --git a/src/app/utils/config.spec.ts b/src/app/utils/config.spec.ts
index ef001d1..2b2ce99 100644
--- a/src/app/utils/config.spec.ts
+++ b/src/app/utils/config.spec.ts
@@ -7,12 +7,12 @@ describe('getEnvConfig', () => {
jest.resetModules();
process.env = {
...originalEnv,
- REACT_APP_GOOGLE_ANALYTICS_ID: ' This is the value ',
+ NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ' This is the value ',
};
});
it('should return the environment variable value if it is set and trimmed', () => {
- expect(getEnvConfig('REACT_APP_GOOGLE_ANALYTICS_ID')).toEqual(
+ expect(getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID')).toEqual(
'This is the value',
);
});
@@ -24,12 +24,12 @@ describe('getEnvConfig', () => {
jest.resetModules();
process.env = {
...originalEnv,
- REACT_APP_GOOGLE_ANALYTICS_ID: '{{REACT_APP_GOOGLE_ANALYTICS_ID}}',
+ NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: '{{NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}}',
};
});
it('should return an empty string if the value is a placeholder', () => {
- expect(getEnvConfig('REACT_APP_GOOGLE_ANALYTICS_ID')).toEqual('');
+ expect(getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID')).toEqual('');
});
});
});
diff --git a/src/app/utils/config.ts b/src/app/utils/config.ts
index bba23b1..d419a3d 100644
--- a/src/app/utils/config.ts
+++ b/src/app/utils/config.ts
@@ -12,7 +12,7 @@ export const getEnvConfig = (key: string): string => {
export const getProjectShortName = (): 'dev' | 'qa' | 'prod' => {
// Example value: mobility-feeds-dev
let result: 'dev' | 'qa' | 'prod' = 'prod';
- const projectId = getEnvConfig('REACT_APP_FIREBASE_PROJECT_ID');
+ const projectId = getEnvConfig('NEXT_PUBLIC_FIREBASE_PROJECT_ID');
if (projectId.length > 0) {
const nameSections = projectId.split('-');
if (nameSections.length == 3) {
diff --git a/src/app/utils/consts.tsx b/src/app/utils/consts.tsx
index dad0c4b..fec8fef 100644
--- a/src/app/utils/consts.tsx
+++ b/src/app/utils/consts.tsx
@@ -27,7 +27,7 @@ export interface DatasetComponentFeature extends DatasetFeature {
interface ComprehensiveDatasetFeature extends DatasetFeature {
color: string;
- icon: JSX.Element;
+ icon: React.ReactElement;
}
export function groupFeaturesByComponent(
@@ -68,7 +68,7 @@ export function getFeatureComponentDecorators(
export function getComponentDecorators(component: string): {
color: string;
- icon: JSX.Element;
+ icon: React.ReactElement;
} {
switch (component) {
case 'Accessibility':
diff --git a/src/app/utils/feedStatusConsts.tsx b/src/app/utils/feedStatusConsts.tsx
index ee14919..9fda1de 100644
--- a/src/app/utils/feedStatusConsts.tsx
+++ b/src/app/utils/feedStatusConsts.tsx
@@ -1,5 +1,4 @@
import { type Theme } from '@mui/material';
-import { type TFunction } from 'i18next';
export interface FeedStatusData {
toolTip: string;
@@ -12,7 +11,7 @@ export interface FeedStatusData {
export function getFeedStatusData(
status: string,
theme: Theme,
- t: TFunction,
+ t: (key: string) => string,
): FeedStatusData | undefined {
const data: Record = {
active: {
diff --git a/src/app/utils/precompute.ts b/src/app/utils/precompute.ts
index 4a3696e..abd1627 100644
--- a/src/app/utils/precompute.ts
+++ b/src/app/utils/precompute.ts
@@ -16,7 +16,7 @@ class CancellationError extends Error {
export interface PrecomputeDeps {
// runtime inputs
- mapRef: RefObject;
+ mapRef: RefObject;
bounds: LngLatBoundsLike;
preview: boolean;
cancelRequestRef: RefObject;
@@ -176,8 +176,7 @@ export function createPrecomputation(deps: PrecomputeDeps): {
for (let r = 0; r < rows; r++) {
const cy = minLat + (r + 0.5) * latStep;
for (let c = 0; c < cols; c++) {
- if (cancelRequestRef.current === true) {
- // user requested to cancel
+ if (cancelRequestRef.current) {
throw new CancellationError();
}
const cx = minLng + (c + 0.5) * lngStep;
@@ -257,9 +256,7 @@ export function createPrecomputation(deps: PrecomputeDeps): {
const lat2 = Number(f.geometry?.coordinates?.[1] ?? 0);
const lon2 = Number(f.geometry?.coordinates?.[0] ?? 0);
if (isNaN(lat2) || isNaN(lon2) || lat2 === 0 || lon2 === 0) {
- console.error(
- `invalid stop ${stopId} (${lng},${lat}) for route ${rid} (${stopName})`,
- );
+ // Skip invalid coordinates
}
byRouteId[rid].push({
isStop: true,
@@ -309,9 +306,7 @@ export function createPrecomputation(deps: PrecomputeDeps): {
.then(() => {})
.catch((e) => {
if (e.name === 'CancellationError') {
- // cancelled by user, ignore
- } else {
- console.error('Precomputation error:', e);
+ console.error('Precomputation cancelled by user.');
}
});
});
diff --git a/src/firebase.ts b/src/firebase.ts
index b17db1e..4083758 100644
--- a/src/firebase.ts
+++ b/src/firebase.ts
@@ -1,22 +1,20 @@
import firebase from 'firebase/compat/app';
-import 'firebase/compat/remote-config';
import 'firebase/compat/auth';
const firebaseConfig = {
- apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
- authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
- projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
- storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
- messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
- appId: process.env.REACT_APP_FIREBASE_APP_ID,
+ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+ authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+ projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+ storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+ appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
export const app = firebase.initializeApp(firebaseConfig);
-export const remoteConfig = firebase.remoteConfig();
-remoteConfig.settings.minimumFetchIntervalMillis = Number(
- process.env.REACT_APP_REMOTE_CONFIG_MINIMUM_FETCH_INTERVAL_MILLI ?? 3600000, // default to 12 hours
-);
-if (window.Cypress) {
+if (
+ typeof window !== 'undefined' &&
+ (window as { Cypress?: unknown }).Cypress != null
+) {
app.auth().useEmulator('http://localhost:9099/');
}
diff --git a/src/i18n.ts b/src/i18n.ts
deleted file mode 100644
index faa77fd..0000000
--- a/src/i18n.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-
-export const supportedLanguages = ['en', 'fr'];
-
-i18n
- .use(Backend)
- //.use(LanguageDetector) TOOD: renable when we are good for production
- .use(initReactI18next)
- .init({
- fallbackLng: 'en',
- debug: false,
- supportedLngs: supportedLanguages,
- ns: ['common', 'account', 'feeds', 'contactUs'], // List your namespaces here
- defaultNS: 'common', // Default namespace
- interpolation: {
- escapeValue: false, // React already escapes by default
- },
- backend: {
- loadPath: '/locales/{{lng}}/{{ns}}.json', // Path to load namespaces
- },
- detection: {
- // order and from where user language should be detected
- order: [
- 'querystring',
- 'cookie',
- 'localStorage',
- 'sessionStorage',
- 'navigator',
- 'htmlTag',
- 'path',
- 'subdomain',
- ],
-
- // keys or params to lookup language from
- lookupQuerystring: 'lng',
- lookupCookie: 'i18next',
- lookupLocalStorage: 'i18nextLng',
- lookupSessionStorage: 'i18nextLng',
- lookupFromPathIndex: 0,
- lookupFromSubdomainIndex: 0,
-
- // cache user language on
- caches: ['localStorage', 'cookie'],
- excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
-
- // optional expire and domain for set cookie
- cookieMinutes: 10,
- cookieDomain: 'myDomain',
-
- // optional htmlTag with lang attribute, the default is:
- htmlTag: document.documentElement,
- },
- });
-
-export default i18n;
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
new file mode 100644
index 0000000..48f0f69
--- /dev/null
+++ b/src/i18n/config.ts
@@ -0,0 +1,8 @@
+export const locales = ['en', 'fr'] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = 'en';
+
+// Subdomain to locale mapping
+export const subdomainToLocale: Record = {
+ fr: 'fr',
+};
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
new file mode 100644
index 0000000..062c0d6
--- /dev/null
+++ b/src/i18n/request.ts
@@ -0,0 +1,16 @@
+import { getRequestConfig } from 'next-intl/server';
+import { cookies } from 'next/headers';
+import { locales, defaultLocale } from './config';
+
+export default getRequestConfig(async () => {
+ const cookieStore = await cookies();
+ const locale = cookieStore.get('NEXT_LOCALE')?.value ?? defaultLocale;
+ const validLocale = locales.includes(locale as (typeof locales)[number])
+ ? locale
+ : defaultLocale;
+
+ return {
+ locale: validLocale,
+ messages: (await import(`../../messages/${validLocale}.json`)).default,
+ };
+});
diff --git a/src/index.tsx b/src/index.tsx
index 8581e9b..1b3ade5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import './sentry';
import { SentryErrorBoundary } from './sentry';
import SentryErrorFallback from './app/components/SentryErrorFallback';
import React from 'react';
@@ -11,7 +10,7 @@ import ContextProviders from './app/components/Context';
import { CssBaseline } from '@mui/material';
import { ThemeProvider } from './app/context/ThemeProvider';
-const gaId = getEnvConfig('REACT_APP_GOOGLE_ANALYTICS_ID');
+const gaId = getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID');
if (gaId.length > 0) {
ReactGA.initialize(gaId);
ReactGA.send('pageview');
@@ -39,5 +38,5 @@ root.render(
-
+ ,
);
diff --git a/src/instrumentation.ts b/src/instrumentation.ts
new file mode 100644
index 0000000..1514f81
--- /dev/null
+++ b/src/instrumentation.ts
@@ -0,0 +1,20 @@
+/**
+ * Next.js Instrumentation for MSW (Mock Service Worker)
+ *
+ * This file enables API mocking during e2e tests by intercepting
+ * server-side fetch requests.
+ *
+ * MSW is only enabled when NEXT_PUBLIC_API_MOCKING is set to 'enabled'
+ */
+
+export async function register(): Promise {
+ if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ const { server } = await import('./mocks/server');
+ server.listen({
+ onUnhandledRequest: 'bypass', // Don't warn about unhandled requests
+ });
+ console.log('🔶 MSW Server started for API mocking');
+ }
+ }
+}
diff --git a/src/lib/firebase-admin.ts b/src/lib/firebase-admin.ts
new file mode 100644
index 0000000..7a6c301
--- /dev/null
+++ b/src/lib/firebase-admin.ts
@@ -0,0 +1,48 @@
+import { initializeApp, getApps, cert, type App } from 'firebase-admin/app';
+
+/**
+ * Server-only Firebase Admin SDK initialization.
+ * Uses Application Default Credentials (ADC) which works automatically on Cloud Run.
+ * For local development, you can either:
+ * 1. Run `gcloud auth application-default login`
+ * 2. Set GOOGLE_APPLICATION_CREDENTIALS env var to a service account JSON path
+ */
+
+let adminApp: App | undefined;
+
+export function getFirebaseAdminApp(): App {
+ if (adminApp != undefined) {
+ return adminApp;
+ }
+
+ const existingApps = getApps();
+ if (existingApps.length > 0) {
+ adminApp = existingApps[0];
+ return adminApp;
+ }
+
+ // Check if we have explicit credentials via environment variable
+ const serviceAccountJson = process.env.FIREBASE_SERVICE_ACCOUNT_JSON;
+
+ if (serviceAccountJson != null && serviceAccountJson.length > 0) {
+ try {
+ const serviceAccount = JSON.parse(serviceAccountJson);
+ adminApp = initializeApp({
+ credential: cert(serviceAccount),
+ projectId: serviceAccount.project_id,
+ });
+ } catch (error) {
+ console.error('Failed to parse FIREBASE_SERVICE_ACCOUNT_JSON:', error);
+ // Fall through to ADC
+ }
+ }
+
+ if (adminApp == undefined) {
+ // Use Application Default Credentials (works on Cloud Run automatically)
+ adminApp = initializeApp({
+ projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+ });
+ }
+
+ return adminApp;
+}
diff --git a/src/lib/remote-config.server.ts b/src/lib/remote-config.server.ts
new file mode 100644
index 0000000..d170446
--- /dev/null
+++ b/src/lib/remote-config.server.ts
@@ -0,0 +1,127 @@
+import 'server-only';
+
+import { cache } from 'react';
+import { getRemoteConfig } from 'firebase-admin/remote-config';
+import { getFirebaseAdminApp } from './firebase-admin';
+import {
+ defaultRemoteConfigValues,
+ type RemoteConfigValues,
+} from '../app/interface/RemoteConfig';
+
+/**
+ * Cache duration for Remote Config fetches (in seconds).
+ * - Development: 5 minutes (300 seconds)
+ * - Production: 1 hour (3600 seconds)
+ */
+const CACHE_DURATION_SECONDS =
+ process.env.NODE_ENV === 'development' ? 300 : 3600;
+
+/**
+ * In-memory cache for Remote Config values.
+ * This provides fast access on subsequent requests within the same server instance.
+ */
+let cachedConfig: RemoteConfigValues | null = null;
+let cacheTimestamp: number = 0;
+
+/**
+ * Parse a Remote Config parameter value into the appropriate type.
+ */
+function parseConfigValue(
+ value: string,
+ defaultValue: boolean | number | string,
+): boolean | number | string {
+ const valueLower = value.toLowerCase();
+
+ // Boolean
+ if (valueLower === 'true' || valueLower === 'false') {
+ return valueLower === 'true';
+ }
+
+ // Number
+ if (!isNaN(Number(value)) && value.trim() !== '') {
+ return Number(value);
+ }
+
+ // Default to string
+ return value;
+}
+
+/**
+ * Fetch Remote Config from Firebase Admin SDK.
+ * Returns the template parameters merged with defaults.
+ */
+async function fetchRemoteConfigFromFirebase(): Promise {
+ const app = getFirebaseAdminApp();
+ const remoteConfigAdmin = getRemoteConfig(app);
+
+ try {
+ const template = await remoteConfigAdmin.getTemplate();
+ const fetchedConfig = { ...defaultRemoteConfigValues };
+
+ // Process each parameter from the template
+ for (const [key, parameter] of Object.entries(template.parameters)) {
+ if (
+ key in defaultRemoteConfigValues &&
+ parameter.defaultValue != undefined
+ ) {
+ const defaultVal = parameter.defaultValue as { value?: string };
+ if (defaultVal.value !== undefined) {
+ const parsedValue = parseConfigValue(
+ defaultVal.value,
+ defaultRemoteConfigValues[key as keyof RemoteConfigValues],
+ );
+ (fetchedConfig as Record)[key] = parsedValue;
+ }
+ }
+ }
+
+ return fetchedConfig;
+ } catch (error) {
+ console.error('Failed to fetch Remote Config from Firebase:', error);
+ // Return defaults on error
+ return defaultRemoteConfigValues;
+ }
+}
+
+/**
+ * Get Remote Config values with server-side caching.
+ * This function is safe to call from Server Components and Server Actions.
+ *
+ * Caching strategy:
+ * - React cache() deduplicates calls within the same request (e.g., layout + page)
+ * - In-memory cache for fast access across multiple requests within the same server instance
+ * - Cache invalidates after CACHE_DURATION_SECONDS
+ * - On error, returns cached values if available, otherwise defaults
+ */
+export const getRemoteConfigValues = cache(
+ async (): Promise => {
+ const now = Date.now();
+ const cacheAge = (now - cacheTimestamp) / 1000;
+
+ // Return cached config if still valid
+ if (cachedConfig != undefined && cacheAge < CACHE_DURATION_SECONDS) {
+ return cachedConfig;
+ }
+
+ try {
+ const freshConfig = await fetchRemoteConfigFromFirebase();
+ cachedConfig = freshConfig;
+ cacheTimestamp = now;
+ return freshConfig;
+ } catch (error) {
+ console.error('Error fetching Remote Config:', error);
+ // Return stale cache if available, otherwise defaults
+ return cachedConfig ?? defaultRemoteConfigValues;
+ }
+ },
+);
+
+/**
+ * Force refresh the Remote Config cache.
+ * Useful for admin operations or webhooks that need immediate updates.
+ */
+export async function refreshRemoteConfig(): Promise {
+ cachedConfig = null;
+ cacheTimestamp = 0;
+ return await getRemoteConfigValues();
+}
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
new file mode 100644
index 0000000..54fef2f
--- /dev/null
+++ b/src/mocks/handlers.ts
@@ -0,0 +1,37 @@
+import { http, HttpResponse } from 'msw';
+
+// Import fixtures
+import feedJson from '../../cypress/fixtures/feed_test-516.json';
+import gtfsFeedJson from '../../cypress/fixtures/gtfs_feed_test-516.json';
+import datasetsFeedJson from '../../cypress/fixtures/feed_datasets_test-516.json';
+
+const API_BASE_URL =
+ process.env.NEXT_PUBLIC_FEED_API_BASE_URL ??
+ 'https://api-dev.mobilitydatabase.org';
+
+export const handlers = [
+ // Mock GET /v1/feeds/{id} - basic feed info
+ http.get(`${API_BASE_URL}/v1/feeds/test-516`, () => {
+ return HttpResponse.json(feedJson);
+ }),
+
+ // Mock GET /v1/gtfs_feeds/{id} - GTFS specific feed info
+ http.get(`${API_BASE_URL}/v1/gtfs_feeds/test-516`, () => {
+ return HttpResponse.json(gtfsFeedJson);
+ }),
+
+ // Mock GET /v1/gtfs_feeds/{id}/datasets - feed datasets
+ http.get(`${API_BASE_URL}/v1/gtfs_feeds/test-516/datasets`, () => {
+ return HttpResponse.json(datasetsFeedJson);
+ }),
+
+ // Mock GET /v1/gtfs_feeds/{id}/gtfs_rt_feeds - associated GTFS-RT feeds
+ http.get(`${API_BASE_URL}/v1/gtfs_feeds/test-516/gtfs_rt_feeds`, () => {
+ return HttpResponse.json([]);
+ }),
+
+ // Mock routes endpoint for map visualization
+ http.get(/.*test-516.*routes\.json$/, () => {
+ return HttpResponse.json([]);
+ }),
+];
diff --git a/src/mocks/server.ts b/src/mocks/server.ts
new file mode 100644
index 0000000..526a29e
--- /dev/null
+++ b/src/mocks/server.ts
@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+// Create the MSW server for Node.js (server-side) for e2e tests and SSR mocking
+export const server = setupServer(...handlers);
diff --git a/src/proxy.ts b/src/proxy.ts
new file mode 100644
index 0000000..659ad55
--- /dev/null
+++ b/src/proxy.ts
@@ -0,0 +1,20 @@
+import { type NextRequest, NextResponse } from 'next/server';
+import { subdomainToLocale, defaultLocale } from './i18n/config';
+
+export function proxy(request: NextRequest): NextResponse {
+ const hostname = request.headers.get('host') ?? '';
+ const subdomain = hostname.split('.')[0];
+
+ // Determine locale from subdomain (fr.mobilitydata.org → 'fr')
+ const locale = subdomainToLocale[subdomain] ?? defaultLocale;
+
+ // Set locale in cookie for server components to read
+ const response = NextResponse.next();
+ response.cookies.set('NEXT_LOCALE', locale);
+
+ return response;
+}
+
+export const config = {
+ matcher: ['/((?!api|_next|.*\\..*).*)'],
+};
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///