Fix login and onboarding flows (#2390)
* Fix login and onboarding flows * Remove unused import * Update apps/web/components/Shell.tsx Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> * Prefer early return * Prevent regressions Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
This commit is contained in:
parent
c07b9b96fe
commit
d340ee62bb
1 changed files with 8 additions and 8 deletions
|
@ -14,7 +14,7 @@ import {
|
||||||
import { signOut, useSession } from "next-auth/react";
|
import { signOut, useSession } from "next-auth/react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import React, { Fragment, ReactNode, useEffect, useState } from "react";
|
import React, { Fragment, ReactNode, useEffect } from "react";
|
||||||
import { Toaster } from "react-hot-toast";
|
import { Toaster } from "react-hot-toast";
|
||||||
|
|
||||||
import Button from "@calcom/ui/Button";
|
import Button from "@calcom/ui/Button";
|
||||||
|
@ -76,6 +76,7 @@ function useRedirectToLoginIfUnauthenticated() {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
loading: loading && !session,
|
loading: loading && !session,
|
||||||
|
session,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -84,11 +85,7 @@ function useRedirectToOnboardingIfNeeded() {
|
||||||
const query = useMeQuery();
|
const query = useMeQuery();
|
||||||
const user = query.data;
|
const user = query.data;
|
||||||
|
|
||||||
const [isRedirectingToOnboarding, setRedirecting] = useState(false);
|
const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
user && setRedirecting(shouldShowOnboarding(user));
|
|
||||||
}, [router, user]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isRedirectingToOnboarding) {
|
if (isRedirectingToOnboarding) {
|
||||||
|
@ -137,7 +134,7 @@ export default function Shell(props: {
|
||||||
}) {
|
}) {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { loading } = useRedirectToLoginIfUnauthenticated();
|
const { loading, session } = useRedirectToLoginIfUnauthenticated();
|
||||||
const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
|
const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
|
||||||
|
|
||||||
const telemetry = useTelemetry();
|
const telemetry = useTelemetry();
|
||||||
|
@ -201,7 +198,7 @@ export default function Shell(props: {
|
||||||
const i18n = useViewerI18n();
|
const i18n = useViewerI18n();
|
||||||
const { status } = useSession();
|
const { status } = useSession();
|
||||||
|
|
||||||
if (i18n.status === "loading" || isRedirectingToOnboarding || loading) {
|
if (i18n.status === "loading" || query.status === "loading" || isRedirectingToOnboarding || loading) {
|
||||||
// show spinner whilst i18n is loading to avoid language flicker
|
// show spinner whilst i18n is loading to avoid language flicker
|
||||||
return (
|
return (
|
||||||
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
|
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
|
||||||
|
@ -209,6 +206,9 @@ export default function Shell(props: {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!session) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
|
<CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
|
||||||
|
|
Loading…
Reference in a new issue