Progress

client/src/utils/private-route.js

@@ -1,20 +1,21 @@
-import React from "react";
-import { useNavigate, Route, useLocation } from "react-router-dom";
+import React, { useEffect } from 'react';
+import { Outlet, useSearchParams, useNavigate } from 'react-router-dom';
 
-function PrivateRoute({ component: Component, isAuthorized, ...rest }) {
-  const location = useLocation();
-    const navigate = useNavigate();
+const PrivateRoute = ({ isAuthorized }) => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
 
-  if (!isAuthorized) {
-    navigate(`/signin?redirect=${location.pathname}`);
-  }
-  return (
-    <Route
-      {...rest}
-      render={(props) => <Component {...props} />
-      }
-    />
-  );
+  useEffect(() => {
+    if (!isAuthorized) {
+      console.log('is not authorized');
+      searchParams.set("redirect", window.location.pathname);
+      navigate(`/signin?${searchParams.toString()}`);
+    } else {
+      console.log('isAuthorized');
+    }
+  }, [isAuthorized, navigate, searchParams]);
+
+  return <Outlet />;
 }
 
-export default PrivateRoute;
+export default PrivateRoute;

client/src/utils/prompt.js

@@ -15,4 +15,22 @@ function Prompt(props) {
     )
 }
 
-export default Prompt
+export default Prompt
+
+
+// Potential new solution:
+// import { useBlocker } from 'react-router-dom';
+//
+// function Prompt({ when, message }) {
+//     useBlocker((transition) => {
+//         if (when) {
+//             transition.retry();
+//             return !window.confirm(message);
+//         }
+//         return false;
+//     }, when);
+//
+//     return null;
+// }
+//
+// export default Prompt;