Rocket.Chat/client/contexts/RouterContext.ts

import { createContext, useContext, useMemo } from 'react';
import { useSubscription, Subscription } from 'use-subscription';

type RouteName = string;

type RouteParameters = Record<string, string>;

type QueryStringParameters = Record<string, string>;

type RouteGroupName = string;

export type RouterContextValue = {
	queryRoutePath: (
		name: RouteName,
		parameters: RouteParameters | undefined,
		queryStringParameters: QueryStringParameters | undefined,
	) => Subscription<string | undefined>;
	queryRouteUrl: (
		name: RouteName,
		parameters: RouteParameters | undefined,
		queryStringParameters: QueryStringParameters | undefined,
	) => Subscription<string | undefined>;
	pushRoute: (
		name: RouteName,
		parameters: RouteParameters | undefined,
		queryStringParameters: QueryStringParameters | undefined,
	) => void;
	replaceRoute: (
		name: RouteName,
		parameters: RouteParameters | undefined,
		queryStringParameters: QueryStringParameters | undefined,
	) => void;
	queryRouteParameter: (name: string) => Subscription<string | undefined>;
	queryQueryStringParameter: (name: string) => Subscription<string | undefined>;
	queryCurrentRoute: () => Subscription<[
		RouteName?,
		RouteParameters?,
		QueryStringParameters?,
		RouteGroupName?,
	]>;
};

export const RouterContext = createContext<RouterContextValue>({
	queryRoutePath: () => ({
		getCurrentValue: (): undefined => undefined,
		subscribe: () => (): void => undefined,
	}),
	queryRouteUrl: () => ({
		getCurrentValue: (): undefined => undefined,
		subscribe: () => (): void => undefined,
	}),
	pushRoute: () => undefined,
	replaceRoute: () => undefined,
	queryRouteParameter: () => ({
		getCurrentValue: (): undefined => undefined,
		subscribe: () => (): void => undefined,
	}),
	queryQueryStringParameter: () => ({
		getCurrentValue: (): undefined => undefined,
		subscribe: () => (): void => undefined,
	}),
	queryCurrentRoute: () => ({
		getCurrentValue: (): [undefined, {}, {}, undefined] => [undefined, {}, {}, undefined],
		subscribe: () => (): void => undefined,
	}),
});

type Route = {
	getPath: (parameters?: RouteParameters, queryStringParameters?: QueryStringParameters) => string | undefined;
	getUrl: (parameters?: RouteParameters, queryStringParameters?: QueryStringParameters) => string | undefined;
	push: (parameters?: RouteParameters, queryStringParameters?: QueryStringParameters) => void;
	replace: (parameters?: RouteParameters, queryStringParameters?: QueryStringParameters) => void;
}

export const useRoute = (name: string): Route => {
	const {
		queryRoutePath,
		queryRouteUrl,
		pushRoute,
		replaceRoute,
	} = useContext(RouterContext);

	return useMemo<Route>(() => ({
		getPath: (parameters, queryStringParameters): string | undefined =>
			queryRoutePath(name, parameters, queryStringParameters).getCurrentValue(),
		getUrl: (parameters, queryStringParameters): ReturnType<Route['getUrl']> =>
			queryRouteUrl(name, parameters, queryStringParameters).getCurrentValue(),
		push: (parameters, queryStringParameters): ReturnType<Route['push']> =>
			pushRoute(name, parameters, queryStringParameters),
		replace: (parameters, queryStringParameters): ReturnType<Route['replace']> =>
			replaceRoute(name, parameters, queryStringParameters),
	}), [queryRoutePath, queryRouteUrl, name, pushRoute, replaceRoute]);
};

export const useRoutePath = (
	name: string,
	parameters?: RouteParameters,
	queryStringParameters?: QueryStringParameters,
): string | undefined => {
	const { queryRoutePath } = useContext(RouterContext);

	return useSubscription(
		useMemo(
			() => queryRoutePath(name, parameters, queryStringParameters),
			[queryRoutePath, name, parameters, queryStringParameters],
		),
	);
};

export const useRouteUrl = (
	name: string,
	parameters?: RouteParameters,
	queryStringParameters?: QueryStringParameters,
): string | undefined => {
	const { queryRouteUrl } = useContext(RouterContext);

	return useSubscription(
		useMemo(
			() => queryRouteUrl(name, parameters, queryStringParameters),
			[queryRouteUrl, name, parameters, queryStringParameters],
		),
	);
};

export const useRouteParameter = (name: string): string | undefined => {
	const { queryRouteParameter } = useContext(RouterContext);

	return useSubscription(
		useMemo(
			() => queryRouteParameter(name),
			[queryRouteParameter, name],
		),
	);
};

export const useQueryStringParameter = (name: string): string | undefined => {
	const { queryQueryStringParameter } = useContext(RouterContext);

	return useSubscription(
		useMemo(
			() => queryQueryStringParameter(name),
			[queryQueryStringParameter, name],
		),
	);
};

export const useCurrentRoute = (): [RouteName?, RouteParameters?, QueryStringParameters?, RouteGroupName?] => {
	const { queryCurrentRoute } = useContext(RouterContext);

	return useSubscription(
		useMemo(
			() => queryCurrentRoute(),
			[queryCurrentRoute],
		),
	);
};