flat-fuchsia•13mo ago

Cross-page Modal?

Hi! I'd like to introduce a timeout modal for when the authentication token is about to expire. I'd like to avoid placing a modal on every single page. I attempted placing it in the renderComponent constant in _app.tsx, which didn't seem to work. How could I get the same modal to appear cross-pages?

5 Replies

kapa.ai•13mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, there isn't a direct example of implementing a timeout modal for an expiring authentication token. However, you can utilize the useModal hook provided by Refine to manage an Ant Design Modal across multiple pages. You can place the modal in your custom App component, which wraps all your pages. This way, the modal can be accessed from any page in your application. Here's a basic example of how you might structure this:

import { useModal } from "@pankod/refine";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {  
  const { modalProps, show, hide } = useModal();

  // Logic to check if authentication token is about to expire
  // If it is, call the `show` function

  return (  
    <Refine  
      // ...  
    >  
      {/* ... */}
      <Component {...pageProps} />
      <Modal {...modalProps} onCancel={hide}>
        {/* Modal content */}
      </Modal>
    </Refine>  
  );  
}  

export default MyApp;

import { useModal } from "@pankod/refine";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {  
  const { modalProps, show, hide } = useModal();

  // Logic to check if authentication token is about to expire
  // If it is, call the `show` function

  return (  
    <Refine  
      // ...  
    >  
      {/* ... */}
      <Component {...pageProps} />
      <Modal {...modalProps} onCancel={hide}>
        {/* Modal content */}
      </Modal>
    </Refine>  
  );  
}  

export default MyApp;

In this example, useModal returns an object containing modalProps, show, and hide functions. modalProps are the props for the Ant Design Modal, show is a function to display the modal, and hide is a function to hide the modal. You can call the show function when the authentication token is about to expire to display the modal. Please note that you'll need to implement the logic to check if the authentication token is about to expire. This isn't covered in the provided extracts. For more information on how to use the useModal hook, you can refer to the Refine documentation (https://refine.dev/docs/examples/ui/useModal). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•13mo ago

Weird. Tried my original solution again and it worked. @kapa.ai This causes hydration to fail.

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're experiencing issues with hydration. However, based on the information provided in the extracts, there isn't enough information to diagnose or provide a solution for hydration issues in a Refine application. Hydration issues can be complex and are often specific to the individual application's setup. They can be caused by a variety of factors, such as differences in server and client rendering, or issues with state management. I would recommend checking your application for any discrepancies between server-side and client-side rendering. Also, ensure that your state management is set up correctly and that you're not trying to access browser-specific APIs on the server. For more detailed help, you might want to refer to the Refine documentation (https://refine.dev/docs) or seek assistance from the Refine community or support channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below