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);