INFRA-399| Deepak Jain | adding redirect to /dashboard when not login

src/App.tsx

@@ -2,11 +2,15 @@ import * as React from "react";
 import "./App.css";
 import Form from "./components/manifest/Form";
 import ShowDeploymentManifest from "./components/manifest/ShowDeploymentManifest";
-import { Route } from "react-router";
+import { Route, Redirect } from "react-router";
 import { BrowserRouter as Router } from "react-router-dom";
 import Dashboard from "./components/Dashboard";
+import ProtectedRoute from "./components/ProtectedRoute";
 import AddLayout from "./components/admin/editform/AddLayout";
 import { CookiesProvider } from "react-cookie";
+import { getUser } from "./action/action";
+import { store } from "./store/store";
+import { withCookies } from "react-cookie";
 
 const config = {
   issuer: window.config.ISSUER,
@@ -17,6 +21,17 @@ const config = {
 };
 
 function App() {
+  const { state, dispatch } = React.useContext(store);
+  const isAuthenticated = state.isAuthenticated;
+  const userInfo = state.userInfo;
+  let loginRedirect = state.loginRedirect;
+
+  React.useEffect(() => {
+    if (Object.keys(userInfo).length == 0) {
+      getUser(state, dispatch);
+    }
+  }, []);
+
   return (
     <div>
       <CookiesProvider>
@@ -30,20 +45,33 @@ function App() {
           <Route path="/dashboard" exact>
             <Dashboard />
           </Route>
-          <Route path="/manifests/create" exact>
+          <ProtectedRoute
+            path="/manifests/create"
+            loginRedirect={loginRedirect}
+            exact
+          >
             <Form />
-          </Route>
-          <Route path="/manifests/:manifestId/edit" component={Form} exact />
-          <Route path={"/manifests"} exact>
+          </ProtectedRoute>
+          <ProtectedRoute
+            path="/manifests/:manifestId/edit"
+            component={Form}
+            loginRedirect={loginRedirect}
+            exact
+          />
+          <ProtectedRoute
+            path={"/manifests"}
+            exact
+            loginRedirect={loginRedirect}
+          >
             <ShowDeploymentManifest />
-          </Route>
-          <Route path={"/admin"} exact>
+          </ProtectedRoute>
+          <ProtectedRoute path={"/admin"} exact loginRedirect={loginRedirect}>
             <AddLayout />
-          </Route>
+          </ProtectedRoute>
         </Router>
       </CookiesProvider>
     </div>
   );
 }
 
-export default App;
+export default withCookies(App);

src/action/action.ts

@@ -1,5 +1,3 @@
-import _, { useContext } from "react";
-
 export const getUser = (state, dispatch) => {
   fetch("/api/user", {
     credentials: "include",
@@ -12,8 +10,10 @@ export const getUser = (state, dispatch) => {
     .then((body) => {
       if (body === "") {
         dispatch({ type: "setAuthentication", value: false });
+        dispatch({ type: "setLoginRedirect", value: "/dashboard" });
       } else {
         dispatch({ type: "setAuthentication", value: true });
+        dispatch({ type: "setLoginRedirect", value: "" });
         dispatch({ type: "setUserInfo", value: JSON.parse(body!) });
       }
     })

src/components/Dashboard.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useContext } from "react";
 import { withCookies } from "react-cookie";
 import { store } from "../store/store";
-import { getUser } from "../action/action";
 
 import MenuAppBar from "./layout/Header";
 
@@ -10,11 +9,6 @@ const Dashboard = (props) => {
   const isAuthenticated = state.isAuthenticated;
   const userInfo = state.userInfo;
 
-  useEffect(() => {
-    if (Object.keys(userInfo).length == 0) {
-      getUser(state, dispatch);
-    }
-  }, []);
   return (
     <div>
       <MenuAppBar name="Home" />

src/components/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+import { Route, Redirect } from "react-router";
+import React from "react";
+
+const ProtectedRoute = ({ loginRedirect, ...props }) => {
+  return loginRedirect === "" ? (
+    <Route {...props} />
+  ) : (
+    <Redirect to={loginRedirect} />
+  );
+};
+
+export default ProtectedRoute;

src/components/admin/editform/AddLayout.tsx

@@ -14,7 +14,6 @@ import { initialValues } from "../../constant/editForm";
 import MenuAppBar from "../../layout/Header";
 
 import { store } from "../../../store/store";
-import { getUser } from "../../../action/action";
 
 const handleSubmit = (values: any, {}) => {
   // @ts-ignore
@@ -199,12 +198,6 @@ const AddLayout = () => {
   const isAuthenticated = state.isAuthenticated;
   const userInfo = state.userInfo;
 
-  useEffect(() => {
-    if (Object.keys(userInfo).length == 0) {
-      getUser(state, dispatch);
-    }
-  }, []);
-
   return (
     <div>
       <MenuAppBar name="Admin Panel" />

src/components/layout/Header.tsx

@@ -6,12 +6,9 @@ import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 import AccountCircle from "@material-ui/icons/AccountCircle";
-import Switch from "@material-ui/core/Switch";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormGroup from "@material-ui/core/FormGroup";
+
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
-import { Button, ListItem } from "@material-ui/core";
 import { Link } from "react-router-dom";
 import { store } from "../../store/store";
 import { withCookies } from "react-cookie";
@@ -40,11 +37,6 @@ function MenuAppBar(props: any) {
   const open = Boolean(anchorEl);
   const [anchorEl1, setAnchorEl1] = React.useState<null | HTMLElement>(null);
   const isAuthenticated = state.isAuthenticated;
-  const userInfo = state.userInfo;
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setAuth(event.target.checked);
-  };
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);

src/components/manifest/Form.tsx

@@ -9,7 +9,6 @@ import Button from "@material-ui/core/Button";
 import { store } from "../../store/store";
 import { withCookies } from "react-cookie";
 import SchemaForm from "./SchemaForm";
-import { getUser } from "../../action/action";
 
 const styles = createStyles({
   container: {
@@ -62,9 +61,6 @@ const Form = (props: any) => {
       getManifestData(manifestIdParam).then((res) => {
         setFormInitData(res);
       });
-      if (Object.keys(userInfo).length == 0) {
-        getUser(state, dispatch);
-      }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }
   }, []);

src/components/manifest/ShowDeploymentManifest.tsx

@@ -3,7 +3,6 @@ import "./../components.css";
 import { Button, Card, Select } from "@material-ui/core";
 
 import { store } from "../../store/store";
-import { getUser } from "../../action/action";
 
 import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import Grid from "@material-ui/core/Grid";
@@ -109,12 +108,6 @@ const ShowDeploymentManifest = (props: any) => {
   const isAuthenticated = state.isAuthenticated;
   const userInfo = state.userInfo;
 
-  useEffect(() => {
-    if (Object.keys(userInfo).length == 0) {
-      getUser(state, dispatch);
-    }
-  }, []);
-
   const handleClick = () => {
     if (isAuthenticated) {
       fetch(`/api/manifest/${serviceName.id}`, {

src/reducer/reducer.ts

@@ -10,6 +10,11 @@ export const reducer = (state, action) => {
         ...state,
         userInfo: action.value,
       };
+    case "setLoginRedirect":
+      return {
+        ...state,
+        loginRedirect: action.value,
+      };
     default:
       return state;
   }

src/store/store.tsx

@@ -4,11 +4,13 @@ import { reducer } from "../reducer/reducer";
 type initialStateType = {
   isAuthenticated: Boolean;
   userInfo: Record<string, Object>;
+  loginRedirect: string;
 };
 
 const initialState = {
   isAuthenticated: false,
   userInfo: {},
+  loginRedirect: "",
 };
 const store = createContext<{
   state: initialStateType;