Electron Fundamentals, v2

Electron Fundamentals, v2 Indicate Unsaved Changes

Topics:
Steve Kinney
Steve Kinney
Temporal

This course is out of date and does not reflect our standards or industry best practices.

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Indicate Unsaved Changes" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve adds a variable in the code that tracks whether the document has been updated since the last save.

Get Unlimited Access Now

Transcript from the "Indicate Unsaved Changes" Lesson

[00:00:00]
>> Steve Kinney: Weird though is like I can just type, type, type, type, type and I do not know if I have any unsaved changes or not. I went and got a cup of coffee and I came back and sat down. Is this different? I do not remember. It would be cool if we could show them some kind of visual indicator to see whether or not, they have unsaved changes.

[00:00:20] Now that originalContent, we have the kinda current content whenever they go ahead and set it. So, we could do something like.
>> Steve Kinney: We can make another global. I'm torn on this one, do like isEdited = false.
>> Steve Kinney: Right, cuz when the application starts up it hasn't been edited, right?

[00:00:49] So, then we can go ahead, and whenever they do that key up.
>> Steve Kinney: We can say isEdited = currentContent.
>> Steve Kinney: Does not equal.
>> Steve Kinney: Original content.
>> Steve Kinney: And then after we renderMarkdownToHtml or before, it really doesn't matter, we can call that updateUserInterface again.
>> Steve Kinney: I don't love this.

[00:01:29] The other thing I might consider doing is passing it in.
>> Steve Kinney: As an argument. Let's actually do that. Either one is fine. Whichever one makes you happier. I don't want to impede on your happiness. I'll just take a isEdited, and right now we're just gonna console log.
>> Steve Kinney: Get rid of that global now.

[00:01:58] All right let's review before we see it in action which is whenever there is a key up, we're going to see if the currentContent is not equal to the originalContent. If so, it's been edited, we're gonna pass whatever that value is updateUserInterface, which right now is just gonna console.log whether or not we're in an edited state.

[00:02:24]
>> Steve Kinney: All right, fun fact, when you make a change to the main process, you do need to kill the application and restart it. When we make a change to just the renderer process,
>> Steve Kinney: The good buddy refreshes back. And just hit refresh and you'll be able to see.

[00:02:45] So, hit open. Grocery list, it's edit is undefined.
>> Steve Kinney: True, delete, delete, false. Add AD, it's true, false, true, false. Right, so now in update user interface, we know whether or not the document has been edited.