sadewole

import React, {
  useState,
  useEffect,
  useCallback,
  useRef,
  Fragment,
} from 'react';
import moment from 'moment';

const SessionTimeout =()=> {

sadewole

const SessionTimeout = () => {
  const [events, setEvents] = useState(['click', 'load', 'scroll']);
  const [second, setSecond] = useState(0);

sadewole

let timeStamp;
let warningInactiveInterval = useRef();
let startTimerInterval = useRef();

// start inactive check
let timeChecker = () => {
  startTimerInterval.current = setTimeout(() => {
    let storedTimeStamp = sessionStorage.getItem('lastTimeStamp');
    warningInactive(storedTimeStamp);
  }, 60000);

sadewole

// reset interval timer
let resetTimer = useCallback(() => {
  clearTimeout(startTimerInterval.current);
  clearInterval(warningInactiveInterval.current);

  if (isAuthenticated) {
    timeStamp = moment();
    sessionStorage.setItem('lastTimeStamp', timeStamp);
  } else {
    clearInterval(warningInactiveInterval.current);

sadewole

const SessionTimeout = () => {
  const [events, setEvents] = useState(['click', 'load', 'scroll']);
  const [second, setSecond] = useState(0);

  // reset interval timer
  let resetTimer = useCallback(() => {

    if (isAuthenticated) {
      timeStamp = moment();
      sessionStorage.setItem('lastTimeStamp', timeStamp);

sadewole

const SessionTimeout = () => {
  const [events, setEvents] = useState(['click', 'load', 'scroll']);
  const [second, setSecond] = useState(0);
  
  let timeStamp;
  let warningInactiveInterval = useRef();
  let startTimerInterval = useRef();

  // start inactive check
  let timeChecker = () => {

sadewole

  let timeStamp;
  let warningInactiveInterval = useRef();
  let startTimerInterval = useRef();

  // start inactive check
  let timeChecker = () => {
    startTimerInterval.current = setTimeout(() => {
      let storedTimeStamp = sessionStorage.getItem('lastTimeStamp');
      warningInactive(storedTimeStamp);
    }, 60000);

sadewole

import React, { useEffect, useRef, useCallback } from 'react';
import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
import mbxGeocoding from '@mapbox/mapbox-sdk/services/geocoding';

const GenerateMap = () => {
	return <React.Fragment />
}

export default GenerateMap;

sadewole

const map = useRef(null);
const mapContainerRef = useRef(null);
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_API; // your mapbox api  

useEffect(() => {
    if (map.current) return; // Checks if there's an already existing map initialised.
    
    map.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',

sadewole

  return (
    <div>
      <div ref={mapContainerRef} className='map-container' />
    </div>
  );