[FEATURE] send warning dialog when users want to close the tab

[Dun-sin]

Description

There may be cases where users want to close the tab while they are currently chatting, here's what you need to do:

• send a prompt when a user wants to close the tab, and they have a chat going on
• give a warning for them to understand that if they do, their current chat will be closed

Screenshots

No response

Additional information

No response

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

None

[github-actions]

It's great having you contribute to this project by creating an issue

Make sure you are assigned to this before you work on it and you read the Contributing.md file, Thank you! Welcome to the community 🤓

[ezhillragesh]

Hello @Dun-sin Can you assign me this issue to me I would Like to work on this issue.

[Dun-sin]

Hello @Dun-sin Can you assign me this issue to me I would Like to work on this issue.

Definitely, thanks for wanting to contribute, Make sure you follow the rules 👉🏽here👈🏽, else your PR will not be accepted and will be closed. Good Luck

[Abhishek19-dev]

Hello @Dun-sin can you assign me this issue . I am participating in Hacktobberfest and Hacksquad and I have implemented this type of feature on my website , so can assign this to me ! Thnks

[Dun-sin]

Hello @Dun-sin can you assign me this issue . I am participating in Hacktobberfest and Hacksquad and I have implemented this type of feature on my website , so can assign this to me ! Thnks

Okay, explain back to me what the issue is telling you to do

[Abhishek19-dev]

Hello @Dun-sin can you assign me this issue . I am participating in Hacktobberfest and Hacksquad and I have implemented this type of feature on my website , so can assign this to me ! Thnks

Okay, explain back to me what the issue is telling you to do

Ok sure , The issue requires implementing a warning mechanism for users attempting to close the chat tab while an active conversation is ongoing. The warning dialog will inform users that closing the tab will terminate their current chat session. It will offer two options: "Back to Chat" to return to the conversation or "Leave Chat" to proceed with closing the tab. This solution aims to prevent accidental chat closures and provides users with a clear choice regarding their ongoing chat session.

[Dun-sin]

Hello @Dun-sin can you assign me this issue . I am participating in Hacktobberfest and Hacksquad and I have implemented this type of feature on my website , so can assign this to me ! Thnks

Okay, explain back to me what the issue is telling you to do

Ok sure , The issue requires implementing a warning mechanism for users attempting to close the chat tab while an active conversation is ongoing. The warning dialog will inform users that closing the tab will terminate their current chat session. It will offer two options: "Back to Chat" to return to the conversation or "Leave Chat" to proceed with closing the tab. This solution aims to prevent accidental chat closures and provides users with a clear choice regarding their ongoing chat session.

Okay, you got it. thanks for wanting to contribute. ask if you have questions. Follow the rules here, or your PR won't be accepted and will be closed. Good luck!

[Abhishek19-dev]

Hello @Dun-sin can you assign me this issue . I am participating in Hacktobberfest and Hacksquad and I have implemented this type of feature on my website , so can assign this to me ! Thnks

Okay, explain back to me what the issue is telling you to do

Ok sure , The issue requires implementing a warning mechanism for users attempting to close the chat tab while an active conversation is ongoing. The warning dialog will inform users that closing the tab will terminate their current chat session. It will offer two options: "Back to Chat" to return to the conversation or "Leave Chat" to proceed with closing the tab. This solution aims to prevent accidental chat closures and provides users with a clear choice regarding their ongoing chat session.

Okay, you got it. thanks for wanting to contribute. ask if you have questions. Follow the rules here, or your PR won't be accepted and will be closed. Good luck!

Do you want , that warning dialog box appears when user clicks Close Chat button .

Also , can you please tell me other buttons or times this box should be displayed , i m thinking that it would be good to show this warning sign too when user tries to logout

[Dun-sin]

Hello @Dun-sin can you assign me this issue . I am participating in Hacktobberfest and Hacksquad and I have implemented this type of feature on my website , so can assign this to me ! Thnks

Okay, explain back to me what the issue is telling you to do

Ok sure , The issue requires implementing a warning mechanism for users attempting to close the chat tab while an active conversation is ongoing. The warning dialog will inform users that closing the tab will terminate their current chat session. It will offer two options: "Back to Chat" to return to the conversation or "Leave Chat" to proceed with closing the tab. This solution aims to prevent accidental chat closures and provides users with a clear choice regarding their ongoing chat session.

Okay, you got it. thanks for wanting to contribute. ask if you have questions. Follow the rules here, or your PR won't be accepted and will be closed. Good luck!

Do you want , that warning dialog box appears when user clicks Close Chat button .

Also , can you please tell me other buttons or times this box should be displayed , i m thinking that it would be good to show this warning sign too when user tries to logout

your inquiry is unclear, can you repeat without quoting and trying to be clear

[Dun-sin]

@Abhishek19-dev
according to the contributing guideline, your time is up and if there's a PR by the end of the day, you will be unassigned. You can request for extra time but not more than 2 days, but we need a response by the end of the day.

[Abhishek19-dev]

Mam please give me 2 more days ...

[Dun-sin]

@Abhishek19-dev it's been 2 days, sorry you will be unassigned now

[Aryakoste]

Hello @Dun-sin. The problem is whenever before unload event is called the default prompt is shown which says changes you made are not saved and if you want to leave. I tried disabling the default behavior but it doesnt go. So if we have to show only this then issue is solved but if we have to call our custom dialog we cant call window.close() on yes click because of browser restriction. We can only close tabs which are opened by window.open(). So what do you suggest.

[Dun-sin]

Hello @Dun-sin. The problem is whenever before unload event is called the default prompt is shown which says changes you made are not saved and if you want to leave. I tried disabling the default behavior but it doesnt go. So if we have to show only this then issue is solved but if we have to call our custom dialog we cant call window.close() on yes click because of browser restriction. We can only close tabs which are opened by window.open(). So what do you suggest.

hmm, let me try to understand what you are saying here, you are saying we can't present tab close? What browser are you testing that on? and also can i see the code of how you tried to do it? just a short snippet

[github-actions]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you.

[Girishg17]

Hi @Dun-sin i want to work on this please assign it to me. will finish in a day.

[Dun-sin]

Hi @Dun-sin i want to work on this please assign it to me. will finish in a day.

How do you plan to finish it in a day and how would you solve the issue?

[DanonymousCoder]

Hi, Is this issue still open

[Dun-sin]

@DanonymousCoder how do you plan to solve the issue based on what was discussed previously?

[DanonymousCoder]

@Dun-sin I would listen for the beforeunload event and display a warning message but i can't customize the dialog fully due to browser security restrictions, but i can display a default message.

[Dun-sin]

@Dun-sin I would listen for the beforeunload event and display a warning message but i can't customize the dialog fully due to browser security restrictions, but i can display a default message.

no, read the previous conversation in this issue, there was a problem they couldn't fix, i'm asking how would you make it work if they couldn't

[DanonymousCoder]

@Dun-sin I would use local or session storage to save and restore chat state. Then, I would display a custom warning before unload(but while i can't fully customize the browser's built-in dialog due to security restrictions, i can still inform the user that they will lose the chat state unless they confirm they want to leave) and for other navigation actions like clicking on links within the chat, i can use custom js to intercept the event, show a custom dialog, and confirm the user's intention to navigate away.

[Dun-sin]

@Dun-sin I would use local or session storage to save and restore chat state. Then, I would display a custom warning before unload(but while i can't fully customize the browser's built-in dialog due to security restrictions, i can still inform the user that they will lose the chat state unless they confirm they want to leave) and for other navigation actions like clicking on links within the chat, i can use custom js to intercept the event, show a custom dialog, and confirm the user's intention to navigate away.

Sounds good, quick things to note:

• we already have a mechanic for saving chat state, if you want to know more about it, I can give you a detailed explanation on discord
• we don't need a custom dialog, as long as users get the warning and can choose the activity after, it's fine
• for links you don't need to implement that, that would be a separate issue.

Will assign it to you, follow the rules in the contributing file as usual, good luck

[DanonymousCoder]

@Dun-sin Hi, can you please kindly unassign me this task. I'll be unable to do it

[tasosbeast]

@Dun-sin so if i understand correctly we need a warning dialog to the BuddyMatcher component that triggers when a user attempts to close the tab with an active chat. this is my implementation i dont know if you are happy with that . Take a look

const BuddyMatcher = () => {
  // ... existing code ...

  // Function to handle the warning dialog
  const handleBeforeUnload = (event) => {
    event.preventDefault();
    event.returnValue = 'You have an active chat. Are you sure you want to leave?';
  };

  useEffect(() => {
    // Add event listener for beforeunload
    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      // Cleanup event listener
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // ... existing code ...

  return (
    // ... existing code ...
  );
};

export default BuddyMatcher;  

[Dun-sin]

@Dun-sin so if i understand correctly we need a warning dialog to the BuddyMatcher component that triggers when a user attempts to close the tab with an active chat. this is my implementation i dont know if you are happy with that . Take a look

const BuddyMatcher = () => {
  // ... existing code ...

  // Function to handle the warning dialog
  const handleBeforeUnload = (event) => {
    event.preventDefault();
    event.returnValue = 'You have an active chat. Are you sure you want to leave?';
  };

  useEffect(() => {
    // Add event listener for beforeunload
    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      // Cleanup event listener
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // ... existing code ...

  return (
    // ... existing code ...
  );
};

export default BuddyMatcher;  

@tasosbeast it doesn't have to be on the BuddyMatcher, becareful about using AI as well, make sure you provide it the right context, i don't/can't know if that code works till you raise a PR