iniital commit

Client/src/Components/ProtectedRoute/index.jsx

@@ -0,0 +1,27 @@
+import { Route, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+/**
+ * ProtectedRoute is a higher-order component that wraps the `Route` component from `react-router-dom`
+ * to create a protected route. It uses Redux to check if the user is authenticated. If the user is
+ * authenticated, it renders the component passed to it; otherwise, it redirects the user to the login page.
+ *
+ * @param {Object} props - The props passed to the ProtectedRoute component.
+ * @param {React.ComponentType} props.Component - The component to render if the user is authenticated.
+ * @param {Object} rest - The remaining props passed to the Route component.
+ * @returns {React.ReactElement} A Route component that conditionally renders the passed Component or redirects to the login page.
+ */
+
+const ProtectedRoute = ({ Component, ...rest }) => {
+  const authState = useSelector((state) => state.auth);
+  console.log(authState);
+
+  return true ? <Component {...rest} /> : <Navigate to="/login" replace />;
+};
+
+ProtectedRoute.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+};
+
+export default ProtectedRoute;