fix(web): when user is opted-in redirect to the new dashboard on route change #7022
Conversation
LetItRock
requested review from
SokratisVidros,
BiswaViraj,
ChmaraX and
desiprisg
|
|
||
| export const OptInProvider = (props: PropsWithChildren) => { | ||
| const { children } = props; | ||
| const { status, isLoaded, redirectToLegacyDashboard } = useNewDashboardOptIn(); | ||
|
|
||
| useEffect(() => { | ||
| useLayoutEffect(() => { |
There was a problem hiding this comment.
redirect before dom is updated
| @@ -37,15 +36,13 @@ const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => { | |||
| <SegmentProvider> | |||
| <QueryClientProvider client={queryClient}> | |||
| <AuthProvider> | |||
| <OptInProvider> | |||
There was a problem hiding this comment.
the OptInProvider was only called when the application started, but we want to check opt-in when the route changes during app navigation
There was a problem hiding this comment.
I was wondering why this worked for me before but I guess it was because of this navigate() that was present before and triggered the useEffect:
https://github.com/novuhq/novu/pull/7017/files#diff-cc17c9f31a51ec7181c4bc7af9932388e5a3a796df090c2c17517d0f72401e97L23
| @@ -62,6 +63,8 @@ export function PrivatePageLayout() { | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| }, []); | |||
|
|
|||
| useOptInRedirect(); | |||
There was a problem hiding this comment.
The PrivatePageLayout is a top-level component that also has access to the router location, that's why the opt-in hook was placed here.
There was a problem hiding this comment.
The issue here is that PrivatePageLayout is also used in community version, the useOptInRedirect calls clerk useUser()
| if (isLoaded && status === NewDashboardOptInStatusEnum.OPTED_IN) { | ||
| const currentRoute = window.location.pathname.replace('/legacy', ''); | ||
| useLayoutEffect(() => { | ||
| if (shouldHandleOptInRedirect) { |
There was a problem hiding this comment.
in short, when the new dashboard ff is on, and the user is opted-in, we want to perform the check for the current pathname on app mount, and when the route changes
There was a problem hiding this comment.
if the route starts with /workflows then the user will be redirected to the new dashboard app
✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
What changed? Why was the change needed?
When the user navigates in the web app to the route that starts with
/workflowsand is opted-in, he will be redirected to the new Dashboard app. The same logic applies when the Web app is embedded in the new Dashboard.Screenshots
Screen.Recording.2024-11-15.at.17.41.20.mov