diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx index b8496a29d020e1..052ee13a093539 100644 --- a/components/dashboard/src/Login.tsx +++ b/components/dashboard/src/Login.tsx @@ -6,7 +6,7 @@ import { AuthProviderInfo } from "@gitpod/gitpod-protocol"; import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie"; -import { useContext, useEffect, useState } from "react"; +import { useContext, useEffect, useMemo, useState } from "react"; import { UserContext } from "./user-context"; import { TeamsContext } from "./teams/teams-context"; import { getGitpodService } from "./service/service"; @@ -29,7 +29,7 @@ function Item(props: { icon: string; iconSize?: string; text: string }) { const iconSize = props.iconSize || 28; return (
- + {props.text}
{props.text}
); @@ -51,26 +51,28 @@ export function Login() { const { setUser } = useContext(UserContext); const { setTeams } = useContext(TeamsContext); - const urlHash = getURLHash(); - let hostFromContext: string | undefined; - let repoPathname: string | undefined; - - try { - if (urlHash.length > 0) { - const url = new URL(urlHash); - hostFromContext = url.host; - repoPathname = url.pathname; - } - } catch (error) { - // Hash is not a valid URL - } + const urlHash = useMemo(() => getURLHash(), []); const [authProviders, setAuthProviders] = useState([]); const [errorMessage, setErrorMessage] = useState(undefined); const [providerFromContext, setProviderFromContext] = useState(); + const [hostFromContext, setHostFromContext] = useState(); + const [repoPathname, setRepoPathname] = useState(); const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore() && !urlHash.startsWith("https://"); + useEffect(() => { + try { + if (urlHash.length > 0) { + const url = new URL(urlHash); + setHostFromContext(url.host); + setRepoPathname(url.pathname); + } + } catch (error) { + // Hash is not a valid URL + } + }, [urlHash]); + useEffect(() => { (async () => { setAuthProviders(await getGitpodService().server.getAuthProviders()); @@ -82,7 +84,7 @@ export function Login() { const providerFromContext = authProviders.find((provider) => provider.host === hostFromContext); setProviderFromContext(providerFromContext); } - }, [authProviders]); + }, [hostFromContext, authProviders]); const authorizeSuccessful = async (payload?: string) => { updateUser().catch(console.error);