PNSPS-frontend-MaterialUI/src/components/AutoLogoutProvider.js

import React, { createContext, useState, useEffect } from 'react';
import {useNavigate} from "react-router-dom";
//import axios from "axios";
import {getUserData} from "../auth/utils";
import {isObjEmpty} from "../utils/Utils";
import {useIdleTimer} from "react-idle-timer";
import { handleLogoutFunction } from 'auth/index';
import { useDispatch } from "react-redux";
import { 
    isUserLoggedIn, 
    isGLDLoggedIn, 
    // isPrimaryLoggedIn, 
    // isCreditorLoggedIn,
    // isINDLoggedIn,
    // isORGLoggedIn,
    // getUserId
} from "utils/Utils";

const TimerContext = createContext();

const AutoLogoutProvider = ({ children }) => {
    const [lastRequestTime, setLastRequestTime] = useState(Date.now());
    const navigate = useNavigate();
    const [logoutInterval, setLogoutInterval] = useState(1);
    const [state, setState] = useState('Active');
    const dispatch = useDispatch()

    const onIdle = () => {
        setLastRequestTime(Date.now());
        setState('Idle')
    }

    const onActive = () => {
        setLastRequestTime(Date.now());
        setState('Active')
    }

    const {
        getRemainingTime,
        //getTabId,
        isLastActiveTab,
    } = useIdleTimer({
        onIdle,
        onActive,
        timeout: 1_000,
        throttle: 500,
        crossTab: true,
        syncTimers: 200,
    })

    const lastActiveTab = isLastActiveTab() === null ? 'loading' : isLastActiveTab()
    //const tabId = getTabId() === null ? 'loading' : getTabId().toString()

    useEffect(() => {
        const userData = getUserData();
        if(!isObjEmpty(userData)){
            //TODO: get auto logout time here
            if(isGLDLoggedIn()){
                setLogoutInterval(240);
            }else{
                setLogoutInterval(1);
            }
            // axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`,
            // )
            // .then((response) => {
            //     if (response.status === 200) {
            //         setLastRequestTime(Date.now());
            //         setLogoutInterval(parseInt(response.data.data));
            //     }
            // })
            // .catch(error => {
            //     console.log(error);
            //     return false;
            // });
        }
        else{
            //navigate('/login');
        }
    }, []);

    useEffect(() => {
        const interval = setInterval(async () => {
            const currentTime = Date.now();
            getRemainingTime();
            if(state !== "Active" && lastActiveTab){
                const timeElapsed = currentTime - lastRequestTime;
                // console.log(parseInt(timeElapsed/1000));
                // console.log(logoutInterval* 60);
                if (timeElapsed >= logoutInterval * 60 * 1000) {
                    if(isUserLoggedIn()){
                        alert("登入驗證已過期，請重新登入。")
                        dispatch(handleLogoutFunction());
                        navigate('/login');
                    }
                }
            }
            else if(state === "Active"){
                //TODO: if is active and remaining time < 5 min then refresh token
            }
        }, 1000); // Check every second

        return () => {
            clearInterval(interval);
        };
    }, [lastRequestTime,logoutInterval]);


    return (
        <TimerContext.Provider value={{lastRequestTime,setLastRequestTime}}>
            {children}
        </TimerContext.Provider>
    );
};

export { TimerContext, AutoLogoutProvider };