Display popup to indicate changes in Profile while changing screens without saving

[Prateek93a]

• Your Rocket.Chat Experimental app version: 1.20.0.0
• Your Rocket.Chat server version: 2.1.0-rc.0
• Device (or Simulator) you're running with: Samsung Galaxy J6 Android 9

As one can see in the Gif file, the app does not show any popup to alert the user to save changes before changing the screen or else the changes will be lost. I guess using a popup will improve user experience.

[vsvankhede06]

HI i would like to work on this using react.js
i have written some steps below that how can i implement it please let me know if i can help.

=> To display a popup to indicate changes in a user's profile while changing screens without saving in a React application, you can follow these steps:

Create a state variable to track whether changes have been made in the profile or not. You can use the useState hook to create this variable.

Use useEffect hook to listen for changes in the state variable that tracks whether changes have been made to the profile or not.

When the state variable changes, you can set a boolean value to true to indicate that changes have been made.

You can create a modal or a popup component that displays a message to indicate that changes have been made to the profile without saving.

You can conditionally render the modal or popup component based on the boolean value that indicates whether changes have been made or not.

[vsvankhede06]

function Profile() {
const [isProfileChanged, setIsProfileChanged] = useState(false);

useEffect(() => {
// Listen for changes in profile and set isProfileChanged to true
setIsProfileChanged(true);
}, [profile]);

return (

Profile

{isProfileChanged &&

Changes have been made to your profile without saving.

)}
{/* Rest of the profile component */}

);
}
here's a overview of code that we can use.

[dnlsilva]

@vsvankhede06 If you want to "work" on this task, just open a PR :)

[RajvardhanT7747]

I am interested to work on this issue