Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating more UX friendly alerts #134

Closed
GuillermoFloresV opened this issue Oct 2, 2022 · 17 comments · Fixed by #416
Closed

Creating more UX friendly alerts #134

GuillermoFloresV opened this issue Oct 2, 2022 · 17 comments · Fixed by #416

Comments

@GuillermoFloresV
Copy link
Member

For Rob's mentees/micro-internship, do NOT assign to anyone else
Currently, the alerts we have set in place are vanilla JS alerts that can be seen as less user-friendly/cumbersome.

We want to be able to produce banner alerts or some other alert form that is more modern and sleek but still gets the overarching message across.
Perhaps something like this:
Screenshot from 2022-10-02 10-21-58

Current alert view:
Screenshot from 2022-10-02 10-20-22

KevinTieu9 added a commit to KevinTieu9/classroom that referenced this issue Oct 26, 2022
Banner notifies the user that a class has been created, it waits for a set amount of times, approximately 5 seconds, before the page refreshes.

Banner uses the toastify banner like the one used for issue freeCodeCamp#134 alert banner

Co-Authored-By: yeeao <[email protected]>
Co-Authored-By: fadibuni <[email protected]>
KevinTieu9 added a commit to KevinTieu9/classroom that referenced this issue Oct 29, 2022
…sses

ClassInviteTable, modal, and index with toastify elements have been modified and trimmed.
@Komal914
Copy link
Contributor

Komal914 commented Jul 7, 2023

I will be working on this! From code labs.

@Komal914
Copy link
Contributor

Komal914 commented Jul 7, 2023

@GuillermoFloresV How can I reproduce this error?

@lloydchang
Copy link
Contributor

lloydchang commented Jul 8, 2023

Broader Context:

Currently, the alerts we have set in place are vanilla JS alerts that can be seen as less user-friendly/cumbersome.


@Komal914 asked me in CodeDay Slack

Hey @Lloyd Chang, I was taking on this issue on but I am not how to reproduce this error. I was wondering if maybe you would know. #134

• I am replying to @Komal914 here in GitHub:


Hi @Komal914 and @GuillermoFloresV,

I have received the vanilla JS alerts that @GuillermoFloresV alluded to.

Here are three examples of vanilla JS alerts in the Admin view:

Screen Shot 2023-07-06 at 10 20 34 AM (1)

1 of 3 unhandled errors

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (12507:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (12535:0)
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js (19902:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21618:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Screen Shot 2023-07-06 at 10 24 12 AM

 2 of 3 unhandled errors

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (12507:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (12535:0)
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js (19902:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21618:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27426:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Screen Shot 2023-07-06 at 10 25 16 AM

3 of 3 unhandled errors

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Call Stack
updateHostRoot
node_modules/react-dom/cjs/react-dom.development.js (19849:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21615:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27426:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
recoverFromConcurrentError
node_modules/react-dom/cjs/react-dom.development.js (25850:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25750:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Screen Shot 2023-07-06 at 10 26 04 AM

@Komal914
Copy link
Contributor

Komal914 commented Jul 8, 2023

So, right as we change the role in prisma to admin, the errors pop up? @lloydchang

@Komal914
Copy link
Contributor

Komal914 commented Jul 8, 2023

I was able to reproduce the error :)))
Screenshot 2023-07-08 at 10 42 23 AM

@GuillermoFloresV
Copy link
Member Author

GuillermoFloresV commented Jul 10, 2023

Hi there @Komal914 , sorry to be getting back to you so late. Some of the vanilla JS alerts that I allude to are currently in these locations:

# 1
# 2
# 3

These kinds of alerts are the ones that we want to update. The alerts that are shown above are React Errors which can now be documented in a separate issue for a future fix.

@Komal914
Copy link
Contributor

Hi @GuillermoFloresV. Just so I have a good understanding of the updates, I should move on from the 3 errors about runtime and hydration with react. Instead, I need to focus on the alerts which show errors outputs upon calling the API endpoints. Rather than alerts, we would like them to be presented with a better UI, perhaps with an existing error component or by using tailwind classes. Sounds good?

@GuillermoFloresV
Copy link
Member Author

Yes, although not all alerts are caused by an error (see # 1 in my previous comment). Our main objective is to see an alert that lets the user know their request was successful/it failed. The examples I linked above are a starting point for you to get an idea, if those are finished we can move on to adding more where needed.

We had previously installed a library known as react-toastify (There is no need for you to install it, it already exists in the repository)

You can use this library as well to add the alerts we want. I can try to provide an example for you soon (I am currently working on refactoring the code for our classes page a.k.a # 1 that I linked in my comment above) if that is of more use to you.

@lloydchang
Copy link
Contributor

The alerts that are shown above are React Errors which can now be documented in a separate issue for a future fix.

Reported
#359
#360
#361

@Komal914
Copy link
Contributor

Hey @GuillermoFloresV , I was not able to test the UI alerts for the student side as I could not see any classes to try to join. When I change my role to student, the dashboard is not visible and no classes are available to test to join. These following were untested:
Student alert 1 untested
Student alert 2 untested

However, I did test on the teacher side and it is working.
Teacher Alert Tested

Here is the link to my commits:
My commits

I know you are not suppose to make a PR without testing all the changes you made but I am not sure how to test from the student side. I was hoping you would be able to guide me.

@lloydchang
Copy link
Contributor

Relates to https://codedayorg.slack.com/archives/C05EZKUU456/p1689278492275899

@lloydchang
Copy link
Contributor

@Komal914 See https://dev.to/jmalvarez/how-to-cherry-pick-a-commit-from-another-repository-4pf1
for instructions about how to git cherry-pick from a remote.


@Komal914 My suggestion is for you to cherry-pick @GuillermoFloresV's pull request's 2 Git commits into @theGaryLarson's repository — especially if you believe that @GuillermoFloresV already fixed the underlying bug via the pull request at https://github.com/freeCodeCamp/classroom/pull/357/commits — the underlying bug that has been blocking you this week.


Context:

@Komal914 wrote at https://github.com/freeCodeCamp/classroom/pull/357#issuecomment-1636858282

@lloydchang yes, I think this may be what is causing the Alerts to disappear, since the page refreshes right after

@GuillermoFloresV
Copy link
Member Author

Hi there, @Komal914

Sorry for getting back a bit late, the bug you are encountering shows that displayClassCreatedNotification is not defined.

But I do not see you using this component inside your code, where did it come from? Sorry if I am missing some context.

However, the underlying reason why you would not be able to see your toastify is because you are reloading the page before you call the component. So the browser starts a reload and then calls the component. I am working on this in #365 and I can push these changes to main to help you out if you have not been able to cherry-pick them yet, that is. Let me know and I can push them, I'll be finishing up that PR today either way so you should see it get merged relatively soon.

@Komal914
Copy link
Contributor

Komal914 commented Jul 17, 2023

Hi @GuillermoFloresV, I think the error you are referring to has been fixed (it was a typo). Currently I am struggling with the page reloading too quick before the alert has a chance to stay and notify. I will try to cherry pick just to learn the concept but I can also wait till a PR is up and pull in those changes.

@lloydchang
Copy link
Contributor

lloydchang commented Jul 22, 2023

Status: @Komal914 confirmed that #357 is blocking this #134

On July 17th, Komal Kaur messaged Lloyd Chang, Guillermo Flores V in CodeDay Labs #help-desk channel at https://codedayorg.slack.com/archives/C05EZKUU456/p1689623550089979?thread_ts=1689278492.275899

I pulled in the commits from fast-reload-classes and the alerts are staying up for the full 5 seconds 🙂

Attached: Screen Recording 2023-07-17 at 12.52.04 PM.mov

Guillermo Flores V replied:

Great, that pr should hopefully be merged soon!

@lloydchang
Copy link
Contributor

#357 is merged, which unblocks this #134

@lloydchang
Copy link
Contributor

lloydchang commented Jul 31, 2023

@Komal914 FWIW

#357 is merged, which unblocks this #134
#134 (comment)

Hence you can create a new pull request for #134
before you look for a new issue.
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants