diff --git a/src/App.tsx b/src/App.tsx index 2e28b97..6c21ac1 100644 --- a/src/App.tsx +++ b/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 (
@@ -30,20 +45,33 @@ function App() { - +
- - - + + + - - + + - +
); } -export default App; +export default withCookies(App); diff --git a/src/action/action.ts b/src/action/action.ts index 27c4aec..30b8ced 100644 --- a/src/action/action.ts +++ b/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!) }); } }) diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 728565c..0712736 100644 --- a/src/components/Dashboard.tsx +++ b/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 (
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx new file mode 100644 index 0000000..06819d1 --- /dev/null +++ b/src/components/ProtectedRoute.tsx @@ -0,0 +1,12 @@ +import { Route, Redirect } from "react-router"; +import React from "react"; + +const ProtectedRoute = ({ loginRedirect, ...props }) => { + return loginRedirect === "" ? ( + + ) : ( + + ); +}; + +export default ProtectedRoute; diff --git a/src/components/admin/editform/AddLayout.tsx b/src/components/admin/editform/AddLayout.tsx index d58d259..303593b 100644 --- a/src/components/admin/editform/AddLayout.tsx +++ b/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 (
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 0feae91..f81185e 100644 --- a/src/components/layout/Header.tsx +++ b/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); const isAuthenticated = state.isAuthenticated; - const userInfo = state.userInfo; - - const handleChange = (event: React.ChangeEvent) => { - setAuth(event.target.checked); - }; const handleMenu = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); diff --git a/src/components/manifest/Form.tsx b/src/components/manifest/Form.tsx index 72e8fe4..02ab65f 100644 --- a/src/components/manifest/Form.tsx +++ b/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 } }, []); diff --git a/src/components/manifest/ShowDeploymentManifest.tsx b/src/components/manifest/ShowDeploymentManifest.tsx index cd7776b..1dc0886 100644 --- a/src/components/manifest/ShowDeploymentManifest.tsx +++ b/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}`, { diff --git a/src/reducer/reducer.ts b/src/reducer/reducer.ts index 31c985d..fe8aa98 100644 --- a/src/reducer/reducer.ts +++ b/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; } diff --git a/src/store/store.tsx b/src/store/store.tsx index 5397e1f..72aaec1 100644 --- a/src/store/store.tsx +++ b/src/store/store.tsx @@ -4,11 +4,13 @@ import { reducer } from "../reducer/reducer"; type initialStateType = { isAuthenticated: Boolean; userInfo: Record; + loginRedirect: string; }; const initialState = { isAuthenticated: false, userInfo: {}, + loginRedirect: "", }; const store = createContext<{ state: initialStateType;