1// Provides the current repository slug (the :repo URL segment) to all
2// components rendered inside a /:repo/* route.
3//
4// Usage:
5// - Wrap the /:repo route subtree with <RepoShell /> as the route element.
6// - Read the current slug in any child component with useRepo().
7// - Pass the slug as `ref` to all GraphQL repository queries.
8
9import { createContext, useContext } from 'react'
10import { useParams, Outlet } from 'react-router-dom'
11
12const RepoContext = createContext<string | null>(null)
13
14// Route element for /:repo routes. Reads the :repo param and provides it
15// via context so any descendant can call useRepo() without prop drilling.
16export function RepoShell() {
17 const { repo } = useParams<{ repo: string }>()
18 return (
19 <RepoContext.Provider value={repo ?? null}>
20 <Outlet />
21 </RepoContext.Provider>
22 )
23}
24
25// Returns the current repo slug from the nearest RepoShell ancestor.
26// Returns null when rendered outside of a /:repo route (e.g. the picker page).
27export function useRepo(): string | null {
28 return useContext(RepoContext)
29}