Convert class based to functional components #100
Conversation
|
@Vismayak could you take a first pass review of this PR? Since your keycloak PR might need this. Thank you so much! |
|
@Rashmil-1999 I get an error when I first go the DFR3Viewer, then to any other Viewer(Data, Hazard or Semantic Viewer) and back to the DFR3FViewer. This is the console error messages I am getting. Are you also getting the same error? |
|
So it seems like a side effect of using async await. if you wait like 5 seconds before jumping to other component, everything works fine otherwise it basically mutates a state even though the component was unmounted... classbased didn't cause such issues but using hooks you've got to be more careful it seems :( anyways good catch! let me see how to fix this. |
There was a problem hiding this comment.
Thank you for putting so much effort in refactoring this to hooks!
All the functionality works, just some minor comments.
Do we have task for refactoring SemanticViewer, Profile, and hazardViewer? If not could you help create separate task so in the future we could distribute the work looking at your example.
|
The red boxed text should be aligned? If you compare with prod, you will probably see what I mean |
| @@ -0,0 +1,196 @@ | |||
| import React from "react"; | |||
There was a problem hiding this comment.
how do I test this page? This is */playbook url right?
|
@Rashmil-1999 I briefly checked the code but I am not very good at react. So if you let me know what to checked in terms of functionality, I can perform that. I have deployed this to dev and checked some viewers and it looks okay |
There was a problem hiding this comment.
Code looks good.
A few thing I noticed:
- Search seems weird. E.g. When search an item doesn't exist; I clear the search box then search again, the search action is actually never fired leaving the page stuck on empty results.
- 3D fragility is not searchable and not showing up properly. e.g. search 6303c9e2cef2881193f226bd
- certain fragility breaks. e.g. 6489ba3355647c1f4968bbb8
| @@ -16,6 +16,7 @@ | |||
| "highcharts": "^9.1.0", | |||
| "jstat": "1.5.3", | |||
| "jwt-decode": "^3.1.2", | |||
| "keycloak-js": "^23.0.6", | |||
There was a problem hiding this comment.
This should be in the latest develop? could you merge latest develop back see if this goes away.
| onClickDelete("mapping"); | ||
| }} | ||
| > | ||
| DELETE |
There was a problem hiding this comment.
This is not introduced by this PR but any chance you could also fix the mapping delete to be red. Take a look at the fragility tab delete button style:
vs
| > | ||
| DELETE | ||
| Copy ID |
There was a problem hiding this comment.
The style got mixed up. Copy ID suppose to use outlined and Delete suppose to be in red color. Take a look at the current production page if you have a chance
This PR:
Production:
This PR converts the Data Viewer and DFR3 Viewer components to Functional components from Class-based.