feat: convert withRouter, server to TS (#1027)

* feat: convert withRouter, server to TS * small naming changes * minor change
4Catalyzer · Jan 8, 2023 · a77dfc4 · a77dfc4
1 parent 556b3e5
commit a77dfc4
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 29 deletions.
diff --git a/src/Link.tsx b/src/Link.tsx
@@ -75,7 +75,7 @@ function Link({
 
   if (childrenIsFunction || activeClassName || activeStyle || activePropName) {
     const toLocation = router.createLocation(to);
-    const active = router.isActive(match, toLocation, { exact });
+    const active = router.isActive(match!, toLocation, { exact });
 
     if (childrenIsFunction) {
       const add = { href, active, onClick: handleClick };

diff --git a/src/RouterContext.ts b/src/RouterContext.ts
@@ -1,4 +1,10 @@
 import React from 'react';
 
-// TODO: types
-export default React.createContext<any>(null);
+import { Match, Router } from './typeUtils';
+
+export interface RouterContextState<TContext = any> {
+  match: Match<TContext> | null;
+  router: Router;
+}
+
+export default React.createContext<RouterContextState>(null as any);
diff --git a/src/additional.d.ts b/src/additional.d.ts
@@ -11,5 +11,21 @@ declare global {
   }
 }
 
+declare module '@restart/context/mapContextToProps' {
+  export default function mapContextToProps<
+    TComponent,
+    TContext,
+    TContextProps,
+    TOwnProps,
+  >(
+    data: {
+      consumers: TContext;
+      mapToProps: (context: TContext) => TContext;
+      displayName: string;
+    },
+    Component: TComponent,
+  ): ContextInjectedComponent<TComponent, TContextProps, TOwnProps>;
+}
+
 // Force this to be a module
 export {};
diff --git a/src/createBaseRouter.tsx b/src/createBaseRouter.tsx
@@ -4,15 +4,14 @@ import { Store } from 'redux';
 import warning from 'tiny-warning';
 
 import ActionTypes from './ActionTypes';
-import RouterContext from './RouterContext';
+import RouterContext, { RouterContextState } from './RouterContext';
 import StaticContainer from './StaticContainer';
 import createRender from './createRender';
 import createStoreRouterObject from './createStoreRouterObject';
 import resolveRenderArgs from './resolveRenderArgs';
 import {
   ConnectedRouterProps,
   CreateRenderOptions,
-  Match,
   MatchBase,
   RenderArgs,
   Resolver,
@@ -35,10 +34,7 @@ interface BaseRouterState {
   matchContext: any;
   resolver: Resolver;
   iteration: number;
-  routerContext: {
-    match: Match | null;
-    router: Router;
-  };
+  routerContext: RouterContextState;
   element: React.ReactElement | null;
 }
 

diff --git a/src/createFarceStore.ts b/src/createFarceStore.ts
@@ -1,10 +1,16 @@
-import { Protocol } from 'farce';
+import { FarceStoreExtension, Protocol } from 'farce';
 import FarceActions from 'farce/Actions';
 import createHistoryEnhancer, {
   HistoryEnhancerOptions,
 } from 'farce/createHistoryEnhancer';
 import queryMiddleware from 'farce/queryMiddleware';
-import { Middleware, combineReducers, compose, createStore } from 'redux';
+import {
+  Middleware,
+  StoreEnhancer,
+  combineReducers,
+  compose,
+  createStore,
+} from 'redux';
 
 import Matcher from './Matcher';
 import createMatchEnhancer from './createMatchEnhancer';
@@ -35,7 +41,7 @@ function createFarceStore({
         ...historyOptions,
         protocol: historyProtocol,
         middlewares: historyMiddlewares || [queryMiddleware],
-      }) as any,
+      }) as StoreEnhancer<{ farce: FarceStoreExtension }>,
       createMatchEnhancer(new Matcher(routeConfig, matcherOptions)),
     ),
   );

diff --git a/src/server.js → src/server.tsx b/src/server.js → src/server.tsx
@@ -9,15 +9,21 @@ import createFarceStore from './createFarceStore';
 import createRender from './createRender';
 import getStoreRenderArgs from './getStoreRenderArgs';
 import defaultResolver from './resolver';
+import { RenderArgs } from './typeUtils';
 
 const propTypes = {
   renderArgs: PropTypes.shape({
-    router: routerShape.isRequired,
-  }).isRequired,
+    router: routerShape,
+  }),
   children: PropTypes.node,
 };
 
-function RouterProvider({ renderArgs, children }) {
+interface RouterProviderProps {
+  renderArgs: RenderArgs;
+  children: React.ReactNode;
+}
+
+function RouterProvider({ renderArgs, children }: RouterProviderProps) {
   return (
     <RouterContext.Provider
       value={useMemo(
@@ -37,6 +43,12 @@ RouterProvider.propTypes = propTypes;
 
 export { RouterProvider };
 
+interface FarceResult {
+  status: number;
+  element?: any;
+  redirect?: any;
+}
+
 export async function getFarceResult({
   url,
   historyMiddlewares,
@@ -52,15 +64,15 @@ export async function getFarceResult({
     renderReady,
     renderError,
   }),
-}) {
+}): Promise<FarceResult> {
   const store = createFarceStore({
     historyProtocol: new ServerProtocol(url),
     historyMiddlewares,
     historyOptions,
     routeConfig,
   });
 
-  let renderArgs;
+  let renderArgs: RenderArgs;
 
   try {
     renderArgs = await getStoreRenderArgs({
@@ -88,7 +100,10 @@ export async function getFarceResult({
   }
 
   return {
-    status: renderArgs.error ? renderArgs.error.status : 200,
+    status:
+      'error' in renderArgs && renderArgs.error
+        ? renderArgs.error.status
+        : 200,
     element: (
       <RouterProvider renderArgs={renderArgs}>
         {render(renderArgs)}

diff --git a/src/useLocation.ts b/src/useLocation.ts
@@ -2,6 +2,6 @@ import { Location } from 'farce';
 
 import useMatch from './useMatch';
 
-export default function useLocation(): Location {
-  return useMatch().location;
+export default function useLocation(): Location | undefined {
+  return useMatch()?.location;
 }
diff --git a/src/useMatch.ts b/src/useMatch.ts
@@ -2,6 +2,6 @@ import { Match } from './typeUtils';
 import useRouter from './useRouter';
 
 /** Returns the current route Match */
-export default function useMatch<TContext = any>(): Match<TContext> {
+export default function useMatch<TContext = any>(): Match<TContext> | null {
   return useRouter().match;
 }
diff --git a/src/useParams.ts b/src/useParams.ts
@@ -2,6 +2,6 @@ import { Params } from './typeUtils';
 import useMatch from './useMatch';
 
 /** Returns the current route params */
-export default function useParams(): Params {
-  return useMatch().params;
+export default function useParams(): Params | undefined {
+  return useMatch()?.params;
 }
diff --git a/src/useRouter.ts b/src/useRouter.ts
@@ -1,11 +1,12 @@
 import { useContext } from 'react';
 
-import RouterContext from './RouterContext';
-import { RouterState } from './typeUtils';
+import RouterContext, { RouterContextState } from './RouterContext';
 
 /**
  * Returns the Router and current route match from context
  */
-export default function useRouter<TContext = any>(): RouterState<TContext> {
-  return useContext<RouterState<TContext>>(RouterContext);
+export default function useRouter<
+  TContext = any,
+>(): RouterContextState<TContext> {
+  return useContext<RouterContextState<TContext>>(RouterContext);
 }
diff --git a/src/withRouter.js → src/withRouter.ts b/src/withRouter.js → src/withRouter.ts
@@ -2,11 +2,11 @@ import mapContextToProps from '@restart/context/mapContextToProps';
 
 import RouterContext from './RouterContext';
 
-export default function withRouter(Component) {
+export default function withRouter(Component: React.ComponentType<any>) {
   return mapContextToProps(
     {
       consumers: RouterContext,
-      mapToProps: (context) => context,
+      mapToProps: (context: typeof RouterContext) => context,
       displayName: `withRouter(${Component.displayName || Component.name})`,
     },
     Component,