Upgrade react router to v6

.yarnrc.yml

@@ -1,3 +1,7 @@
 nodeLinker: node-modules
 
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
 yarnPath: .yarn/releases/yarn-3.6.1.cjs

app/package.json

@@ -6,7 +6,6 @@
     "@2fd/ant-design-icons": "^2.6.0",
     "@ant-design/icons": "^4.7.0",
     "@onaio/connected-private-route": "^0.0.11",
-    "@onaio/connected-reducer-registry": "^0.0.3",
     "@onaio/gatekeeper": "^0.4.0",
     "@onaio/redux-reducer-registry": "^0.0.9",
     "@onaio/session-reducer": "^0.0.12",
@@ -34,7 +33,6 @@
     "antd": "^5.5.2",
     "bootstrap": "^4.5.2",
     "client-oauth2": "^4.3.3",
-    "connected-react-router": "^6.8.0",
     "jsdom-global": "^3.0.2",
     "lodash": "^4.17.20",
     "react-query": "^3.15.1",
@@ -74,7 +72,7 @@
     "react-dom": "17.0.0",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.1",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.2.1"
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0"
   }
 }

app/src/App/AuthLayout.tsx

@@ -0,0 +1,101 @@
+import { isAuthenticated } from '@onaio/session-reducer';
+import queryString from 'querystring';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Navigate, Outlet, PathRouteProps, Route, RouteProps, Routes, useLocation } from 'react-router-dom';
+import { Store } from 'redux';
+
+/** interface for PrivateRoute props */
+interface AuthLayoutProps {
+  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 */;
+  routerDisabledRedirectPath: string /** redirect to this path if router is not enabled */;
+  routerEnabled: boolean /** is this route enabled */;
+}
+
+/** declare default props for PrivateRoute */
+const defaultPrivateRouteProps: Partial<AuthLayoutProps> = {
+  authenticated: false,
+  disableLoginProtection: false,
+  redirectPath: '/login',
+  routerDisabledRedirectPath: '/',
+  routerEnabled: true
+};
+
+/** The PrivateRoute component
+ * This component is a simple wrapper around Route and takes all its props in
+ * addition to:
+ *  1. {bool} authenticated
+ *  2. {string} redirectPath
+ *
+ * If authenticated === true then render the component supplied
+ * Otherwise redirect to the redirectPath
+ */
+export const AuthLayout = (props: AuthLayoutProps) => {
+  const {
+    authenticated,
+    disableLoginProtection,
+    redirectPath,
+    routerEnabled,
+    routerDisabledRedirectPath,
+  } = 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) || ''}`;
+  // we can now create the full redirect path, append next searchParma
+  const fullRedirectPath = `${redirectPath}?${queryString.stringify({ next: currentPath })}`;
+
+  if (routerEnabled) {
+    if (authenticated === true || disableLoginProtection === true) {
+      return <Outlet />;
+    } else {
+      return <Navigate to={fullRedirectPath} />
+    }
+  }
+  // If user is authenticated go to outlet else redirect to full redirect path
+  return <Navigate to={routerDisabledRedirectPath} />;
+};
+
+AuthLayout.defaultProps = defaultPrivateRouteProps;
+
+/** Connect the component to the store */
+
+/** interface to describe props from mapStateToProps */
+interface DispatchedStateProps {
+  authenticated: boolean;
+}
+
+/** map state to props */
+const mapStateToProps = (
+  state: Partial<Store>,
+  ownProps: Partial<AuthLayoutProps>
+): DispatchedStateProps => {
+  const result = {
+    authenticated: isAuthenticated(state)
+  };
+  Object.assign(result, ownProps);
+  return result;
+};
+
+/** create connected component */
+
+/** The ConnectedPrivateRoute component
+ * This component is a simple wrapper around Route and takes all its props in
+ * addition to:
+ *  1. {bool} authenticated - this comes from the Redux store
+ *  2. {string} redirectPath
+ *
+ * If authenticated === true then render the component supplied
+ * Otherwise redirect to the redirectPath
+ */
+const ConnectedPrivateRoute = connect<DispatchedStateProps, null, any>(
+  mapStateToProps,
+  null
+)(AuthLayout);
+
+export default ConnectedPrivateRoute;