[C-3255] Sub-route logic & redirects for sign up flow #6489
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,128 @@ | ||
| import { useSelector } from 'react-redux' | ||
| import { Redirect, Route, RouteProps, Switch } from 'react-router-dom' | ||
|
|
||
| import { getSignOn } from 'common/store/pages/signon/selectors' | ||
| import SignOnPageState from 'common/store/pages/signon/types' | ||
| import { AppState } from 'store/types' | ||
| import { | ||
| SIGN_UP_ARTISTS_PAGE, | ||
| SIGN_UP_EMAIL_PAGE, | ||
| SIGN_UP_FINISH_PROFILE_PAGE, | ||
| SIGN_UP_GENRES_PAGE, | ||
| SIGN_UP_HANDLE_PAGE, | ||
| SIGN_UP_PASSWORD_PAGE, | ||
| SignUpPath, | ||
| TRENDING_PAGE | ||
| } from 'utils/route' | ||
|
|
||
| import { CreatePasswordPage } from './pages/CreatePasswordPage' | ||
| import { FinishProfilePage } from './pages/FinishProfilePage' | ||
| import { PickHandlePage } from './pages/PickHandlePage' | ||
| import { SelectArtistsPage } from './pages/SelectArtistsPage' | ||
| import { SelectGenrePage } from './pages/SelectGenrePage' | ||
| import { SignUpPage } from './pages/SignUpPage' | ||
|
|
||
| /** | ||
| * Checks against existing sign up redux state, | ||
| * then determines if the requested path should be allowed or not | ||
| * if not allowed, also returns furthest step possible based on existing state | ||
| */ | ||
| const determineAllowedRoute = ( | ||
| signUpState: SignOnPageState, | ||
| requestedRoute: string | SignUpPath // this string should have already trimmed out /signup/ | ||
| ) => { | ||
| const attemptedPath = requestedRoute.replace('/signup/', '') | ||
| // Have to type as string[] to avoid too narrow of a type for comparing against | ||
| let allowedRoutes: string[] = [SignUpPath.createEmail] // create email is available by default | ||
| if (signUpState.email.value) { | ||
| // Already have email | ||
| allowedRoutes.push(SignUpPath.createPassword) | ||
| } | ||
| if (signUpState.password.value) { | ||
| // Already have password | ||
| allowedRoutes.push(SignUpPath.pickHandle) | ||
| } | ||
| if (signUpState.handle.value) { | ||
| // Already have handle | ||
| allowedRoutes.push(SignUpPath.finishProfile) | ||
| } | ||
| if (signUpState.name.value) { | ||
| // Already have display name | ||
| // At this point the account is fully created & logged in; now user can't back to account creation steps | ||
| allowedRoutes = [SignUpPath.selectGenres] | ||
| } | ||
|
|
||
| // TODO: These checks below here may need to fall under a different route umbrella separate from sign up | ||
| if (signUpState.genres) { | ||
| // Already have genres selected | ||
| allowedRoutes.push(SignUpPath.selectArtists) | ||
| } | ||
|
|
||
| if (signUpState.followArtists?.selectedUserIds?.length >= 3) { | ||
| // Already have 3 artists followed | ||
| // Done with sign up if at this point so we return early (none of these routes are allowed anymore) | ||
| // TODO: trigger welcome modal when redirecting from here | ||
| return { isAllowedRoute: false, correctedRoute: TRENDING_PAGE } | ||
| } | ||
|
|
||
| const isAllowedRoute = allowedRoutes.includes(attemptedPath) | ||
| // If requested route is allowed return that, otherwise return the last step in the route stack | ||
| const correctedPath = isAllowedRoute | ||
| ? attemptedPath | ||
| : allowedRoutes[allowedRoutes.length - 1] | ||
| return { | ||
| isAllowedRoute, | ||
| correctedRoute: `/signup/${correctedPath}` | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * <Route> wrapper that handles redirecting through the sign up page flow | ||
| */ | ||
| export function SignUpRoute({ children, ...rest }: RouteProps) { | ||
| const existingSignUpState = useSelector((state: AppState) => getSignOn(state)) | ||
| return ( | ||
| <Route | ||
| {...rest} | ||
| render={({ location }) => { | ||
| // Check if the route is allowed, if not we redirect accordingly | ||
| const { isAllowedRoute, correctedRoute } = determineAllowedRoute( | ||
| existingSignUpState, | ||
| location.pathname | ||
| ) | ||
| return isAllowedRoute ? ( | ||
| <>{children}</> | ||
| ) : ( | ||
| <Redirect to={correctedRoute} /> | ||
|
|
||
| ) | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export const SignUpRootPage = () => { | ||
| return ( | ||
| <div> | ||
| <Switch> | ||
| <Route exact path={SIGN_UP_EMAIL_PAGE}> | ||
|
There was a problem hiding this comment. my expectations was that this would be the "SignupRoute" and each one would check if they are allowed to render, and if not, redirect? i think its probably fine to do this all in a root route like you did though. There was a problem hiding this comment. Yeah either way works technically. There was a problem hiding this comment. Also I guess since we're probably rearranging it anyways, the individual wrappers makes it simpler to move around |
||
| <SignUpPage /> | ||
| </Route> | ||
| <Route exact path={SIGN_UP_PASSWORD_PAGE}> | ||
| <CreatePasswordPage /> | ||
| </Route> | ||
| <Route exact path={SIGN_UP_HANDLE_PAGE}> | ||
| <PickHandlePage /> | ||
| </Route> | ||
| <Route exact path={SIGN_UP_FINISH_PROFILE_PAGE}> | ||
| <FinishProfilePage /> | ||
| </Route> | ||
| <Route exact path={SIGN_UP_GENRES_PAGE}> | ||
| <SelectGenrePage /> | ||
| </Route> | ||
| <Route exact path={SIGN_UP_ARTISTS_PAGE}> | ||
| <SelectArtistsPage /> | ||
| </Route> | ||
| </Switch> | ||
| </div> | ||
| ) | ||
| } | ||
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
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
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
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keeps all the links the same (i.e.
/signupwill redirect to/signup/create-account)