149 lines
5.5 KiB
JavaScript
149 lines
5.5 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { useContext } from "react";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import MakeNewAppeal from "./myportal/makenewappeal";
|
|
import MyCases from "./myportal/mycases";
|
|
import SearchCases from "./myportal/searchcases";
|
|
import AwaitingSubmission from "./myportal/awaitingsubmission";
|
|
import MyRepresentations from "./myportal/myrepresentations";
|
|
import WatchedCases from "./myportal/watchedcases";
|
|
import YourAccount from "./myportal/youraccount";
|
|
import { parseCookies, setCookie, destroyCookie } from "nookies";
|
|
|
|
import IdleTimer from "react-idle-timer";
|
|
import TimeoutModal from "../components/timeoutmodal";
|
|
import { useState } from "react";
|
|
|
|
const MyPortal = (props) => {
|
|
let { t } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const inactiveTimeOut = 12000; // in seconds
|
|
const reminderTimeout = 60; // in seconds
|
|
|
|
let idleTimer = null;
|
|
let logoutTimer = null;
|
|
|
|
let onIdle = () => {
|
|
togglePopup();
|
|
logoutTimer = setTimeout(() => {
|
|
handleLogout();
|
|
}, 1000 * reminderTimeout * 1);
|
|
};
|
|
|
|
let togglePopup = () => {
|
|
showModal == true ? setShowModal(false) : setShowModal(true);
|
|
};
|
|
|
|
let handleStayLoggedIn = () => {
|
|
if (logoutTimer) {
|
|
clearTimeout(logoutTimer);
|
|
logoutTimer = null;
|
|
}
|
|
idleTimer.reset();
|
|
togglePopup();
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
console.log("////////////", "\n", "logout", "\n", "//////////");
|
|
destroyCookie({}, "pinsUser"),
|
|
window.localStorage.clear(),
|
|
router.replace(props.ggLogout);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<main className="" id="main-content" role="main">
|
|
<div className="servicebanner myportal govuk-!-margin-bottom-4">
|
|
<h1>
|
|
<img
|
|
src={
|
|
router.locale == "cy"
|
|
? "/assets/images/planning-casework-cy.svg"
|
|
: "/assets/images/planning-casework-en.svg"
|
|
}
|
|
alt={
|
|
router.locale == "cy"
|
|
? "Fy mhorth"
|
|
: "My Portal"
|
|
}
|
|
/>
|
|
</h1>
|
|
|
|
<div className="serviceBanner_userDetails">
|
|
<img
|
|
className="user_logo"
|
|
src="/assets/images/user.svg"
|
|
alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
|
|
/>{" "}
|
|
<div className="serviceBanner_userDetails_name">
|
|
{props.accountDetails.accountDetails.firstname}{" "}
|
|
{props.accountDetails.accountDetails.lastname}
|
|
</div>
|
|
<div>
|
|
<Link
|
|
href={
|
|
router.locale == "cy"
|
|
? "/allgofnodi"
|
|
: "/logout"
|
|
}
|
|
>
|
|
<a
|
|
onClick={() => {
|
|
handleLogout();
|
|
}}
|
|
className="govuk-header__link govuk-!-margin-right-3"
|
|
>
|
|
{t("common:signout-label")}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<div className="flex-container grid-row govuk-body ">
|
|
<MakeNewAppeal />
|
|
<MyCases myCases={props.myCases} />
|
|
<SearchCases />
|
|
<AwaitingSubmission
|
|
awaitingSubmission={props.awaitingSubmission}
|
|
/>
|
|
<MyRepresentations
|
|
myRepresentations={props.myRepresentations}
|
|
/>
|
|
<WatchedCases watchedCases={props.watchedCases} />
|
|
</div>
|
|
<div className="flex-container grid-row govuk-body ">
|
|
<YourAccount />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<IdleTimer
|
|
ref={(ref) => {
|
|
idleTimer = ref;
|
|
}}
|
|
element={document}
|
|
stopOnIdle={true}
|
|
onActive={console.log(" bbis active", idleTimer)}
|
|
onIdle={onIdle}
|
|
timeout={1000 * inactiveTimeOut * 1}
|
|
/>
|
|
|
|
<TimeoutModal
|
|
remainingCountdown={reminderTimeout}
|
|
showModal={showModal}
|
|
togglePopup={togglePopup}
|
|
handleStayLoggedIn={handleStayLoggedIn}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MyPortal;
|