4d0783d9be
Use flush effects to custom apply css-in-js solution to app. Re-introduce flush effects to app-render, and remove default support of styled-jsx in `app/`. So that users will choose their own css-in-js solution if they need any customization. styled-jsx won't appear in client bundle if you didn't use it. For now we have to inject the initial styles before `</head>` to avoid hydration errors. Later on we can remove this once react can handle it. - [x] inject styles before end of head element - [x] add tests
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
// useLayoutSegments() // Only the segments for the current place. ['children', 'dashboard', 'children', 'integrations'] -> /dashboard/integrations (/dashboard/layout.js would get ['children', 'dashboard', 'children', 'integrations'])
|
|
|
|
import { useContext } from 'react'
|
|
import {
|
|
SearchParamsContext,
|
|
// ParamsContext,
|
|
PathnameContext,
|
|
// LayoutSegmentsContext,
|
|
} from './hooks-client-context'
|
|
import {
|
|
AppRouterContext,
|
|
LayoutRouterContext,
|
|
} from '../../shared/lib/app-router-context'
|
|
|
|
export {
|
|
FlushEffectsContext,
|
|
useFlushEffects,
|
|
} from '../../shared/lib/flush-effects'
|
|
|
|
/**
|
|
* Get the current search params. For example useSearchParams() would return {"foo": "bar"} when ?foo=bar
|
|
*/
|
|
export function useSearchParams() {
|
|
return useContext(SearchParamsContext)
|
|
}
|
|
|
|
/**
|
|
* Get an individual search param. For example useSearchParam("foo") would return "bar" when ?foo=bar
|
|
*/
|
|
export function useSearchParam(key: string): string | string[] {
|
|
const params = useContext(SearchParamsContext)
|
|
return params[key]
|
|
}
|
|
|
|
// TODO-APP: Move the other router context over to this one
|
|
/**
|
|
* Get the router methods. For example router.push('/dashboard')
|
|
*/
|
|
export function useRouter(): import('../../shared/lib/app-router-context').AppRouterInstance {
|
|
return useContext(AppRouterContext)
|
|
}
|
|
|
|
// TODO-APP: getting all params when client-side navigating is non-trivial as it does not have route matchers so this might have to be a server context instead.
|
|
// export function useParams() {
|
|
// return useContext(ParamsContext)
|
|
// }
|
|
|
|
/**
|
|
* Get the current pathname. For example usePathname() on /dashboard?foo=bar would return "/dashboard"
|
|
*/
|
|
export function usePathname(): string {
|
|
return useContext(PathnameContext)
|
|
}
|
|
|
|
// TODO-APP: define what should be provided through context.
|
|
// export function useLayoutSegments() {
|
|
// return useContext(LayoutSegmentsContext)
|
|
// }
|
|
|
|
// TODO-APP: Expand description when the docs are written for it.
|
|
/**
|
|
* Get the current segment one level down from the layout.
|
|
*/
|
|
export function useSelectedLayoutSegment(
|
|
parallelRouteKey: string = 'children'
|
|
): string {
|
|
const { tree } = useContext(LayoutRouterContext)
|
|
|
|
const segment = tree[1][parallelRouteKey][0]
|
|
|
|
return Array.isArray(segment) ? segment[1] : segment
|
|
}
|