added logout functions to clear store

components/header.js

@@ -1,12 +1,14 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-
-export default function Header({ courseName }) {
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { setLogout } from "../store/accountDetails/action";
+const Header = (props) => {
     let { t, lang } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { setLogout } = props;
 
     return (
         <header
@@ -61,11 +63,8 @@ export default function Header({ courseName }) {
                 </div>
 
                 <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
-                    <Link href="/">
+                    <Link href="/logout">
                         <a
-                            onClick={() => {
-                                window.localStorage.clear();
-                            }}
                             className="govuk-header__link
                         govuk-header__link--service-name"
                         >
@@ -98,13 +97,8 @@ export default function Header({ courseName }) {
                                 <ul>
                                     {router.pathname != "/" ? (
                                         <li>
-                                            <Link href="/">
-                                                <a
-                                                    onClick={() => {
-                                                        window.localStorage.clear();
-                                                    }}
-                                                    className="govuk-header__link "
-                                                >
+                                            <Link href="/logout">
+                                                <a className="govuk-header__link ">
                                                     {t("common:signout-label")}
                                                 </a>
                                             </Link>
@@ -154,13 +148,8 @@ export default function Header({ courseName }) {
                     </div>
                     <div className="fullNav">
                         {router.pathname != "/" ? (
-                            <Link href="/">
-                                <a
-                                    onClick={() => {
-                                        window.localStorage.clear();
-                                    }}
-                                    className="govuk-header__link govuk-!-margin-right-3"
-                                >
+                            <Link href="/logout">
+                                <a className="govuk-header__link govuk-!-margin-right-3">
                                     {t("common:signout-label")}
                                 </a>
                             </Link>
@@ -200,4 +189,13 @@ export default function Header({ courseName }) {
             </div>
         </header>
     );
-}
+};
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setLogout: () => {
+            dispatch(setLogout());
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(Header);

pages/404.js

@@ -0,0 +1,13 @@
+// 404.js
+import Link from "next/link";
+
+export default function FourOhFour() {
+    return (
+        <>
+            <h1>404 - Page Not Found</h1>
+            <Link href="/">
+                <a>Go back home</a>
+            </Link>
+        </>
+    );
+}

pages/logout.js

@@ -0,0 +1,50 @@
+import _ from "lodash";
+import Link from "next/link";
+import Head from "next/head";
+import Header from "../components/header";
+import Banner from "../components/banner";
+import CookieBanner from "../components/cookieBanner";
+
+import Footer from "../components/footer";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { setLogout } from "../store/accountDetails/action";
+
+const LogOut = (props) => {
+    const { footerLinks, pages, setLogout } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    setLogout();
+    return (
+        <div>
+            <Head>
+                <title>{t("common:service-name")}</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName="Appeals Casework Portal" />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <h2>You have been logged out</h2>
+                    <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
+                        <Link href="/">Return to Planning Casework portal</Link>
+                    </div>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setLogout: () => {
+            dispatch(setLogout());
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(LogOut);

store/accountDetails/action.js

@@ -15,3 +15,9 @@ export const setAccountDetails = (accountDetails) => (dispatch) => {
         accountDetails: accountDetails,
     });
 };
+
+export const setLogout = () => (dispatch) => {
+    return dispatch({
+        type: "USER_LOGOUT",
+    });
+};

store/store.js

@@ -9,9 +9,10 @@ import LPAData from "./lpa/reducer";
 import accountDetails from "./accountDetails/reducer";
 import { reducer as formReducer } from "redux-form";
 import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
+import storage from "redux-persist/lib/storage";
 
 //COMBINING ALL REDUCERS
-const combinedReducer = combineReducers({
+const appReducer = combineReducers({
     search,
     searchResultsObj,
     formData,
@@ -21,6 +22,16 @@ const combinedReducer = combineReducers({
     form: formReducer,
 });
 
+const combinedReducer = (state, action) => {
+    if (action.type === "USER_LOGOUT") {
+        // for all keys defined in your persistConfig(s)
+        storage.removeItem("persist:acp");
+        // storage.removeItem('persist:otherKey')
+        return appReducer(undefined, action);
+    }
+    return appReducer(state, action);
+};
+
 const reducer = (state = {}, action) => {
     switch (action.type) {
         case HYDRATE:
@@ -77,7 +88,7 @@ const makeStore = ({ isServer }) => {
         const storage = require("redux-persist/lib/storage").default;
 
         const persistConfig = {
-            key: "nextjs",
+            key: "acp",
             whitelist: [
                 "search",
                 "searchResults",
@@ -87,7 +98,7 @@ const makeStore = ({ isServer }) => {
                 "accountDetails",
                 "form",
             ],
-            storage,
+            storage: storage,
             stateReconciler: autoMergeLevel2, // if needed, use a safer storage
         };