Upgrade conneted-private-route to v6

onaio · Aug 18, 2023 · d6cc5b2 · d6cc5b2
1 parent 8478bcd
commit d6cc5b2
Show file tree

Hide file tree

Showing 10 changed files with 394 additions and 310 deletions.
diff --git a/packages/connected-private-route/package.json b/packages/connected-private-route/package.json
@@ -27,15 +27,15 @@
     ]
   },
   "dependencies": {
-    "@onaio/session-reducer": "^0.0.13"
+    "@onaio/session-reducer": "^0.0.13",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0"
   },
   "peerDependencies": {
     "@types/react-redux": "^7.0.8",
     "@types/react-router": "^4.4.5",
     "@types/react-router-dom": "^4.3.2",
     "react-redux": "^7.0.2",
-    "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0",
     "redux": "^4.0.1"
   },
   "devDependencies": {

diff --git a/packages/connected-private-route/src/index.tsx b/packages/connected-private-route/src/index.tsx
@@ -2,11 +2,11 @@ import { isAuthenticated } from '@onaio/session-reducer';
 import queryString from 'querystring';
 import React from 'react';
 import { connect } from 'react-redux';
-import { Redirect, Route, RouteProps } from 'react-router-dom';
+import { Navigate, PathRouteProps, Route, RouteProps, Routes, useLocation } from 'react-router-dom';
 import { Store } from 'redux';
 
 /** interface for PrivateRoute props */
-interface PrivateRouteProps extends RouteProps {
+interface PrivateRouteProps extends PathRouteProps {
   authenticated: boolean /** is the current user authenticated */;
   disableLoginProtection: boolean /** should we disable login protection */;
   redirectPath: string /** redirect to this path is use if not authenticated */;
@@ -34,16 +34,18 @@ const defaultPrivateRouteProps: Partial<PrivateRouteProps> = {
  */
 const PrivateRoute = (props: PrivateRouteProps) => {
   const {
-    component: Component,
+    Component,
     authenticated,
     disableLoginProtection,
     redirectPath,
     routerEnabled,
     routerDisabledRedirectPath,
-    location,
     ...theOtherProps
   } = props;
 
+  console.log({ props });
+  const location = useLocation();
+
   /** recreates the url : the path; query string if any; a hash tag if any */
   const currentPath = `${(location && location.pathname) || ''}${(location && location.search) ||
     ''}${(location && location.hash) || ''}`;
@@ -52,20 +54,22 @@ const PrivateRoute = (props: PrivateRouteProps) => {
 
   return (
     /* tslint:disable jsx-no-lambda */
-    <Route
-      {...theOtherProps}
-      render={routeProps => {
-        if (routerEnabled) {
-          return (authenticated === true || disableLoginProtection === true) && Component ? (
-            <Component {...routeProps} {...theOtherProps} />
-          ) : (
-            <Redirect to={fullRedirectPath} />
-          );
-        } else {
-          return <Redirect to={routerDisabledRedirectPath} />;
-        }
-      }}
-    />
+    <Routes>
+      <Route
+        {...theOtherProps}
+        Component={(routeProps: any) => {
+          if (routerEnabled) {
+            return (authenticated === true || disableLoginProtection === true) && Component ? (
+              <Component {...routeProps} {...theOtherProps} />
+            ) : (
+              <Navigate to={fullRedirectPath} />
+            );
+          } else {
+            return <Navigate to={routerDisabledRedirectPath} />;
+          }
+        }}
+      />
+    </Routes>
     /* tslint:enable jsx-no-lambda */
   );
 };
@@ -77,7 +81,7 @@ export { PrivateRoute }; // export the un-connected component
 /** Connect the component to the store */
 
 /** interface to describe props from mapStateToProps */
-interface DispatchedStateProps extends RouteProps {
+interface DispatchedStateProps {
   authenticated: boolean;
 }