Ttonev/hr portal latest #6
Conversation
| return <>{formattedDate}</>; | ||
| }; | ||
|
|
||
| const clearSorting = useCallback(() => { |
There was a problem hiding this comment.
Why do you need useCallback hook here?
| setIsSorted(false); | ||
| }, []); | ||
|
|
||
| const handleSortingChanged = useCallback(() => { |
There was a problem hiding this comment.
Why do you need useCallback hook here?
There was a problem hiding this comment.
It is recommended since sorting is passed as a prop to the button and the grid. Using it should avoid unnecessary re-render and improve performance.
There was a problem hiding this comment.
Have you tested this and did u see a boost in performance? useCallback is needed for:
- If you pass that function as a dependancy to another hook
- The function is passed as a prop (like you do) to a component that uses memoization. Our components don
t use neitheruseMemonorReact.memo`.
I don't see any benefit overcomplicating the code, plus that if you don't need it you could cause a minor performance lost
|
When building and running the main app( npm run build and npm run preview), routing to the sample seems to be incorrect as it currently loads the wrong view from the hr-portal-view and not the actual sample: |
it is building for me, can you please show what error it throws: If it is regarding the main app as per maya's comment, I have updated the routes for the hr-portal, the rest of the apps still point towards the view tho |
…d-demos-react into ttonev/hr-portal-latest
| @@ -1,5 +1,5 @@ | |||
| body { | |||
| font-family: 'Open Sans', sans-serif; | |||
| --ig-font-family: "Open Sans", sans-serif; | |||
There was a problem hiding this comment.
Do you need this? Doesnt this font family come from the ig-typography class?
| @@ -3,8 +3,7 @@ | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>HR Portal</title> | |||
| <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'> | |||
| <link href='https://fonts.googleapis.com/css?family=Titillium+Web:wght@300;400;600;700' rel='stylesheet'> | |||
| <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>S | |||
There was a problem hiding this comment.
There is a S letter at the end of line 6
| setIsSorted(false); | ||
| }, []); | ||
|
|
||
| const handleSortingChanged = useCallback(() => { |
There was a problem hiding this comment.
Have you tested this and did u see a boost in performance? useCallback is needed for:
- If you pass that function as a dependancy to another hook
- The function is passed as a prop (like you do) to a component that uses memoization. Our components don
t use neitheruseMemonorReact.memo`.
I don't see any benefit overcomplicating the code, plus that if you don't need it you could cause a minor performance lost
|
Please inside the project/hr-portal remove the routing since it is not needed. |
| @@ -12,14 +12,14 @@ export const routes: RouteObject[] = [ | |||
| children: [ | |||
| { index: true, loader: () => redirect('inventory') }, | |||
| { path: 'inventory', element: <ERPHGridView /> }, | |||
| { path: 'hr-portal', element: <HRPortalView /> }, | |||
| { path: 'hr-portal', element: <HRPortal /> }, | |||
There was a problem hiding this comment.
This is not correct. You should change the content of the HRPportalView instead of replacing it here. Also, the sample does not look good. Images are missing, the themes are not correct when running the main app.
| @@ -0,0 +1,19 @@ | |||
| body { | |||
| background: hsla(var(--ig-surface-500, 0 0% 100%)); | |||
There was a problem hiding this comment.
Do you need these colors here?
No description provided.