refacto(invite|signin): remove unused code + fix signin on invite page. (#9745)

- Replace `window.location.replace` by `useRedirect` hook. - Remove unused code: `switchWorkspace, addUserByInviteHash...` - Refacto `Invite` component. - Fix signin on invite modal.
2025-01-21 16:33:31 +01:00
parent 2e9a77f702
commit 34afd73923
28 changed files with 67 additions and 715 deletions
--- a/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts
+++ b/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts
@ -69,7 +69,7 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
        setCurrentUser(null);
        setCurrentWorkspaceMember(null);
        setCurrentWorkspace(null);
-        setWorkspaces(null);
+        setWorkspaces([]);
        if (
          !isMatchingLocation(AppPath.Verify) &&
          !isMatchingLocation(AppPath.SignInUp) &&
--- a/packages/twenty-front/src/modules/auth/graphql/mutations/switchWorkspace.ts
+++ b/packages/twenty-front/src/modules/auth/graphql/mutations/switchWorkspace.ts
@ -1,23 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const SWITCH_WORKSPACE = gql`
-  mutation SwitchWorkspace($workspaceId: String!) {
-    switchWorkspace(workspaceId: $workspaceId) {
-      id
-      subdomain
-      authProviders {
-        sso {
-          id
-          name
-          type
-          status
-          issuer
-        }
-        google
-        magicLink
-        password
-        microsoft
-      }
-    }
-  }
-`;
--- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
+++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@ -349,7 +349,7 @@ export const useAuth = () => {
    [setIsVerifyPendingState, verify, setTokenPair, loadCurrentUser],
  );

-  const handleCrendentialsSignIn = useCallback(
+  const handleCredentialsSignIn = useCallback(
    async (email: string, password: string, captchaToken?: string) => {
      const { loginToken } = await handleChallenge(
        email,
@ -499,7 +499,7 @@ export const useAuth = () => {
    clearSession,
    signOut: handleSignOut,
    signUpWithCredentials: handleCredentialsSignUp,
-    signInWithCredentials: handleCrendentialsSignIn,
+    signInWithCredentials: handleCredentialsSignIn,
    signInWithGoogle: handleGoogleLogin,
    signInWithMicrosoft: handleMicrosoftLogin,
  };
--- a/packages/twenty-front/src/modules/auth/states/workspaces.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspaces.ts
@ -5,9 +5,9 @@ import { Workspace } from '~/generated/graphql';
 export type Workspaces = Pick<
  Workspace,
  'id' | 'logo' | 'displayName' | 'subdomain'
->;
+>[];

-export const workspacesState = createState<Workspaces[] | null>({
+export const workspacesState = createState<Workspaces>({
  key: 'workspacesState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/billing/hooks/useHandleCheckoutSession.ts
+++ b/packages/twenty-front/src/modules/billing/hooks/useHandleCheckoutSession.ts
@ -8,6 +8,7 @@ import {
 } from '~/generated-metadata/graphql';
 import { useCheckoutSessionMutation } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';

 export const useHandleCheckoutSession = ({
  recurringInterval,
@ -18,6 +19,8 @@ export const useHandleCheckoutSession = ({
  plan: BillingPlanKey;
  requirePaymentMethod: boolean;
 }) => {
+  const { redirect } = useRedirect();
+
  const { enqueueSnackBar } = useSnackBar();

  const [checkoutSession] = useCheckoutSessionMutation();
@ -44,7 +47,7 @@ export const useHandleCheckoutSession = ({
      );
      return;
    }
-    window.location.replace(data.checkoutSession.url);
+    redirect(data.checkoutSession.url);
  };
  return { isSubmitting, handleCheckoutSession };
 };
--- a/packages/twenty-front/src/modules/domain-manager/hooks/useBuildWorkspaceUrl.ts
+++ b/packages/twenty-front/src/modules/domain-manager/hooks/useBuildWorkspaceUrl.ts
@ -6,13 +6,13 @@ export const useBuildWorkspaceUrl = () => {
  const domainConfiguration = useRecoilValue(domainConfigurationState);

  const buildWorkspaceUrl = (
-    subdomain?: string,
+    subdomain: string,
    pathname?: string,
    searchParams?: Record<string, string>,
  ) => {
    const url = new URL(window.location.href);

-    if (isDefined(subdomain) && subdomain.length !== 0) {
+    if (subdomain.length !== 0) {
      url.hostname = `${subdomain}.${domainConfiguration.frontDomain}`;
    }

--- a/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerBillingSubscriptionPaused.tsx
+++ b/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerBillingSubscriptionPaused.tsx
@ -1,3 +1,4 @@
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
 import { SettingsPath } from '@/types/SettingsPath';
 import { isDefined } from 'twenty-ui';
@ -5,6 +6,8 @@ import { useBillingPortalSessionQuery } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 export const InformationBannerBillingSubscriptionPaused = () => {
+  const { redirect } = useRedirect();
+
  const { data, loading } = useBillingPortalSessionQuery({
    variables: {
      returnUrlPath: getSettingsPath(SettingsPath.Billing),
@ -13,7 +16,7 @@ export const InformationBannerBillingSubscriptionPaused = () => {

  const openBillingPortal = () => {
    if (isDefined(data) && isDefined(data.billingPortalSession.url)) {
-      window.location.replace(data.billingPortalSession.url);
+      redirect(data.billingPortalSession.url);
    }
  };

--- a/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerFailPaymentInfo.tsx
+++ b/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerFailPaymentInfo.tsx
@ -3,8 +3,11 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { isDefined } from 'twenty-ui';
 import { useBillingPortalSessionQuery } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';

 export const InformationBannerFailPaymentInfo = () => {
+  const { redirect } = useRedirect();
+
  const { data, loading } = useBillingPortalSessionQuery({
    variables: {
      returnUrlPath: getSettingsPath(SettingsPath.Billing),
@ -13,7 +16,7 @@ export const InformationBannerFailPaymentInfo = () => {

  const openBillingPortal = () => {
    if (isDefined(data) && isDefined(data.billingPortalSession.url)) {
-      window.location.replace(data.billingPortalSession.url);
+      redirect(data.billingPortalSession.url);
    }
  };

--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
@ -3,16 +3,13 @@ import { Workspaces } from '@/auth/states/workspaces';
 import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUrl';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
 import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId';
-import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
 import { NavigationDrawerHotKeyScope } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerHotKeyScope';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
  Avatar,
@ -20,6 +17,7 @@ import {
  MenuItemSelectAvatar,
  UndecoratedLink,
 } from 'twenty-ui';
+import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';

 const StyledContainer = styled.div<{ isNavigationDrawerExpanded: boolean }>`
  align-items: center;
@ -56,7 +54,7 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
 `;

 type MultiWorkspaceDropdownButtonProps = {
-  workspaces: Workspaces[];
+  workspaces: Workspaces;
 };

 export const MultiWorkspaceDropdownButton = ({
@ -64,19 +62,12 @@ export const MultiWorkspaceDropdownButton = ({
 }: MultiWorkspaceDropdownButtonProps) => {
  const theme = useTheme();
  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();

-  const [isMultiWorkspaceDropdownOpen, setToggleMultiWorkspaceDropdown] =
-    useState(false);
-
-  const { switchWorkspace } = useWorkspaceSwitching();
  const { buildWorkspaceUrl } = useBuildWorkspaceUrl();

-  const { closeDropdown } = useDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
-
-  const handleChange = async (workspaceId: string) => {
-    setToggleMultiWorkspaceDropdown(!isMultiWorkspaceDropdownOpen);
-    closeDropdown();
-    await switchWorkspace(workspaceId);
+  const handleChange = async (workspace: Workspaces[0]) => {
+    redirectToWorkspaceDomain(workspace.subdomain);
  };
  const [isNavigationDrawerExpanded] = useRecoilState(
    isNavigationDrawerExpandedState,
@ -116,7 +107,7 @@ export const MultiWorkspaceDropdownButton = ({
              to={buildWorkspaceUrl(workspace.subdomain)}
              onClick={(event) => {
                event?.preventDefault();
-                handleChange(workspace.id);
+                handleChange(workspace);
              }}
            >
              <MenuItemSelectAvatar
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
@ -57,8 +57,7 @@ export const NavigationDrawerHeader = ({
    isNavigationDrawerExpandedState,
  );

-  const isMultiWorkspace =
-    isMultiWorkspaceEnabled && workspaces !== null && workspaces.length > 1;
+  const isMultiWorkspace = isMultiWorkspaceEnabled && workspaces.length > 1;

  return (
    <StyledContainer>
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching.ts
@ -1,47 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-
-import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSwitchWorkspaceMutation } from '~/generated/graphql';
-import { isDefined } from '~/utils/isDefined';
-import { useRedirectToDefaultDomain } from '@/domain-manager/hooks/useRedirectToDefaultDomain';
-import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-
-export const useWorkspaceSwitching = () => {
-  const [switchWorkspaceMutation] = useSwitchWorkspaceMutation();
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
-  const { enqueueSnackBar } = useSnackBar();
-  const { redirectToDefaultDomain } = useRedirectToDefaultDomain();
-  const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
-
-  const switchWorkspace = async (workspaceId: string) => {
-    if (currentWorkspace?.id === workspaceId) return;
-
-    if (!isMultiWorkspaceEnabled) {
-      return enqueueSnackBar(
-        'Switching workspace is not available in single workspace mode',
-        {
-          variant: SnackBarVariant.Error,
-        },
-      );
-    }
-
-    const { data, errors } = await switchWorkspaceMutation({
-      variables: {
-        workspaceId,
-      },
-    });
-
-    if (isDefined(errors) || !isDefined(data?.switchWorkspace.subdomain)) {
-      return redirectToDefaultDomain();
-    }
-
-    redirectToWorkspaceDomain(data.switchWorkspace.subdomain);
-  };
-
-  return { switchWorkspace };
-};
--- a/packages/twenty-front/src/modules/workspace-member/graphql/mutations/addUserToWorkspace.ts
+++ b/packages/twenty-front/src/modules/workspace-member/graphql/mutations/addUserToWorkspace.ts
@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const ADD_USER_TO_WORKSPACE = gql`
-  mutation AddUserToWorkspace($inviteHash: String!) {
-    addUserToWorkspace(inviteHash: $inviteHash) {
-      id
-    }
-  }
-`;
--- a/packages/twenty-front/src/modules/workspace-member/graphql/mutations/addUserToWorkspaceByInviteToken.ts
+++ b/packages/twenty-front/src/modules/workspace-member/graphql/mutations/addUserToWorkspaceByInviteToken.ts
@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const ADD_USER_TO_WORKSPACE_BY_INVITE_TOKEN = gql`
-  mutation AddUserToWorkspaceByInviteToken($inviteToken: String!) {
-    addUserToWorkspaceByInviteToken(inviteToken: $inviteToken) {
-      id
-    }
-  }
-`;
--- a/packages/twenty-front/src/modules/workspace/graphql/queries/getWorkspaceFromInviteHash.ts
+++ b/packages/twenty-front/src/modules/workspace/graphql/queries/getWorkspaceFromInviteHash.ts
@ -7,6 +7,7 @@ export const GET_WORKSPACE_FROM_INVITE_HASH = gql`
      displayName
      logo
      allowImpersonation
+      subdomain
    }
  }
 `;