sadewole

/* Marker */
.marker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: blue;
  cursor: pointer;
}

sadewole

  const fetchData = useCallback(() => {
    const geocodingClient = mbxGeocoding({
      accessToken: mapboxgl.accessToken,
    });

    // geocoding with countries
    return geocodingClient
      .forwardGeocode({
        query: 'Ikeja, Lagos',
        countries: ['ng'],

sadewole

.map-container {
  width: 100%;
  height: 500px;
  border-radius: 5px;
}

sadewole

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

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

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

  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

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

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

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

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