Question 303842 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Add a delay to a React-Admin logout process

I’ve implemented a AuthProvider.js in my React-Admin application and I’d like to delay the logout process by, say 5 seconds, and during that time period show a modal that says "logging out…".

For context, here’s the example from the docs:

logout: () => {
    localStorage.removeItem('username');
    return Promise.resolve();
},

I’ve set my AuthProvider.js to delay the logout process by seconds with following code:

logout: () => {

    // [add code here to show a modal]

    return new Promise(resolve => {
        setTimeout(() => {

            localStorage.removeItem('username');

            // [add code here to hide the modal]

            resolve();
        }, 5000); // add a delay of 5 seconds
    });
},

Is there any way to show the user a modal of some kind during the delay (see "add code here" comments)?

Tags:

2

Answers


  1. 0

    I think you can add some state like this

    make a custom hook

    // useModal.js

import { useState } from 'react';

const useModal = () => {
  const [isVisible, setIsVisible] = useState(false);

  const showModal = () => {
    setIsVisible(true);
  };

  const hideModal = () => {
    setIsVisible(false);
  };

  return { isVisible, showModal, hideModal };
};

export default useModal;

    then

    // AuthProvider.js

import React from 'react';
import useModal from './useModal'; // Import the custom hook

const AuthProvider = {
  // Other methods...
  const { isVisible: isLoggingOut, showModal, hideModal } = useModal();

  logout: () => {

    showModal(); // Show the modal when logout is initiated

    return new Promise((resolve) => {
      setTimeout(() => {
        localStorage.removeItem('username');
        hideModal(); // Hide the modal after the delay
        resolve();
      }, 5000); // add a delay of 5 seconds
    });
  },
};

export default AuthProvider;

    then create a modal component that is conditionally rendered based on the value of isLoggingOut.

    Login or Signup to reply.
  2. 0

    You need to implement communication between AuthProvider and React Component. You can do this with closure. for example:

    function buildAuthProvider({ onLogoutStarted, onLogoutFinished }) {
  return {
   ...
   logout: () => {
      onLogoutStarted(); //dispatch event to react component
      return new Promise((resolve) => {
       setTimeout(() => {
        onLogoutFinished(); //dispatch event to react component
       }, 5000); // add a delay of 5 seconds
     });
   }
  }
}

    then in your React component

    function App() {
  return (
    <Admin
     authProvider={
      buildAuthProvider({
        onLogoutStarted: () => {
          //tell react component to show logout modal
          //for example you can use Redux dispatch function
        },
        onLogoutFinished: () => {
          //tell react component to close logout modal
          //for example you can use Redux dispatch function
        } 
      })
     }
     dataProvider={dataProvider}
    >
    </Admin>
  );
 }

    you can use redux to dispatch event into your React component

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search