import { useMsal } from "@azure/msal-react";
import { AppDispatch } from "app/store";
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
import Footer from "components/footer";
import Header from "components/header";
import { clearToken } from "features/auth";
import React from "react";
import { useDispatch } from "react-redux";
import styles from "styles/app.module.scss";

const SamplePage: React.FC = (): JSX.Element => {
  const { instance } = useMsal();
  const dispatch: AppDispatch = useDispatch();
  return (
    <div className={styles.wrap}>
      <Header userName="XXXXXX" />
      <UpdateTokenTimer />
      <div>
        <button
          type="button"
          className={styles.buttonText}
          onClick={() => {
            instance.logout({ postLogoutRedirectUri: "/" });
            dispatch(clearToken());
          }}
        >
          sign out
        </button>
      </div>
      <Footer />
    </div>
  );
};

export default SamplePage;
