Prompt Update - UI #372
Draft
Prompt Update - UI #372
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
👷 Deploy request for lumen-notes pending review.Visit the deploys page to approve it
|
✅ Deploy Preview for lumen-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Amazing @Pkcarreno 💖 I'll take a look soon! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #348
This time taking what was done in the previous PR and adding the visual/interaction side of the process.
There are two ways in which the user is "notified" that there is a new update, the first is through buttons on the interface that only appear when an update is available.
The second is by making use of the sonner library, showing a toast on the screen.
When clicking on the toast the app is immediately updated
In the case of clicking on one of the two buttons in the layout it generates a alert dialog before updating.
In this version only 2 dependencies were installed:
Also I created a context of the service worker state and placed it in the form of a provider to maintain consistency of the data in the app.
I placed this provider in
src/index.tsx, if you don't like the position I gave it you can modify it without problem, the important thing is to keep the<Toaster />component at the same level or higher than<PromptUpdateProvider />.And the icon of "refresh" that was added is taken from featherIcon
Only one issue remains, it is ideal to check before updating that the status is "synchronized" or at least force the synchronization of the notes before refreshing the page. I left a comment to manage this, I could not fully understand the synchronization process and how to integrate it yet.
The above file is
src/components/nav-bar.tsxline 329What do you think of the UI and implementation? I look forward to any changes or suggestions.