chore: added properties from react-router link component

Author: Micaela Torres

src/common/app-link/app-link.stories.tsx

@@ -25,37 +25,33 @@ export default {
 } as ComponentMeta<typeof AppLink>;
 
 export const Default: ComponentStory<typeof AppLink> = ({
-  routeName,
   className,
   targetBlank,
-  pathParams,
-  queryParams,
   children,
+  route,
 }) => (
-  <AppLink
-    routeName={routeName}
-    className={className}
-    pathParams={pathParams}
-    queryParams={queryParams}
-    targetBlank={targetBlank}
-  >
+  <AppLink route={route} className={className} targetBlank={targetBlank}>
     {children}
   </AppLink>
 );
 
 Default.argTypes = {
-  routeName: {
-    control: {
-      type: "select",
-      options: RouteName,
+  route: {
+    routeName: {
+      control: {
+        type: "select",
+        options: RouteName,
+      },
     },
   },
 };
 Default.args = {
   children: "My Link To Home",
-  routeName: RouteName.Home,
+  route: {
+    routeName: RouteName.Home,
+    pathParams: {},
+    queryParams: {},
+  },
   className: "",
   targetBlank: false,
-  pathParams: {},
-  queryParams: {},
 };

src/common/app-link/app-link.tsx

@@ -13,29 +13,35 @@ import type { Params, RouteName } from "../../routes/routes";
   defined in this project. To link outside, use <a></a> tags as usual.
 */
 
+type Route = {
+  pathParams?: Params;
+  queryParams?: Params;
+  routeName: RouteName;
+};
+
 // Extract pathParams from the routeName
-type AppLinkProps<R extends RouteName> = {
+type AppLinkProps = {
   children: React.ReactNode;
   className?: string;
-  pathParams?: Params;
-  queryParams?: Params;
-  routeName: R;
+  route: Route;
   targetBlank?: boolean;
+  replace?: boolean;
+  preventScrollReset?: boolean;
+  state?: any;
+  reloadDocument?: boolean;
 };
 
 const defaultProps = {
   className: "",
-  pathParams: {},
-  queryParams: {},
   targetBlank: false,
+  replace: false,
+  preventScrollReset: false,
+  reloadDocument: false,
 };
 
-const AppLink = <R extends RouteName>(props: AppLinkProps<R>) => {
-  const routePath = getRouteFor(
-    props.routeName,
-    props.pathParams,
-    props.queryParams,
-  );
+const AppLink = (props: AppLinkProps) => {
+  const { routeName, pathParams, queryParams } = props.route;
+  const routePath = getRouteFor(routeName, pathParams, queryParams);
   let targetBlankProps = {};
   if (props.targetBlank) {
     targetBlankProps = {
@@ -44,7 +50,15 @@ const AppLink = <R extends RouteName>(props: AppLinkProps<R>) => {
     };
   }
   return (
-    <Link className={props.className} to={routePath} {...targetBlankProps}>
+    <Link
+      className={props.className}
+      to={routePath}
+      replace={props.replace}
+      preventScrollReset={props.preventScrollReset}
+      state={props.state}
+      reloadDocument={props.reloadDocument}
+      {...targetBlankProps}
+    >
       {props.children}
     </Link>
   );

src/common/app-redirect/app-redirect.tsx

@@ -13,26 +13,24 @@ import type { Params, RouteName } from "../../routes/routes";
   defined in this project. To link outside, use <a></a> tags as usual.
 */
 
-type AppRedirectProps<R extends RouteName> = {
+type Route = {
   pathParams?: Params;
   queryParams?: Params;
-  routeName: R;
+  routeName: RouteName;
 };
 
-const defaultProps = {
-  pathParams: {},
-  queryParams: {},
+type AppRedirectProps = {
+  route: Route;
 };
 
-const AppRedirect = <R extends RouteName>(props: AppRedirectProps<R>) => {
+const AppRedirect = (props: AppRedirectProps) => {
+  const { routeName, pathParams, queryParams } = props.route;
   const goToPage = useGoToPage();
   useEffect(() => {
-    goToPage(props.routeName, props.pathParams, props.queryParams);
+    goToPage(routeName, pathParams, queryParams);
   }, []);
 
   return null;
 };
 
-AppRedirect.defaultProps = defaultProps;
-
 export { AppRedirect };

src/common/navbar/navbar.tsx

@@ -10,11 +10,16 @@ export const Navbar = () => (
     <Container>
       <div className={styles.internalContainer}>
         <div>
-          <AppLink routeName={RouteName.Home}>Logo goes here</AppLink>
+          <AppLink route={{ routeName: RouteName.Home }}>
+            Logo goes here
+          </AppLink>
         </div>
         <div className={styles.rightContainer}>
           <nav>
-            <AppLink className={globalStyles.link} routeName={RouteName.About}>
+            <AppLink
+              className={globalStyles.link}
+              route={{ routeName: RouteName.About }}
+            >
               About
             </AppLink>
           </nav>

src/pages/not-found/not-found.tsx

@@ -7,7 +7,7 @@ import { RouteName } from "routes/routes";
 const NotFound = () => (
   <div>
     This page does not exist!
-    <AppLink routeName={RouteName.Home}>Go Home</AppLink>
+    <AppLink route={{ routeName: RouteName.Home }}>Go Home</AppLink>
   </div>
 );