From 309e63b137620175fc053134b82ed672d79cbeaa Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 11 Jul 2023 21:46:47 +0800 Subject: [PATCH] Refactor error handling for projects mutation --- .../TransferProjectButton.tsx | 1 - .../data/projects/project-create-mutation.ts | 21 ++++++--- .../projects/project-transfer-mutation.ts | 10 +++++ .../[slug]/deploy-button/new-project.tsx | 45 +++++++------------ 4 files changed, 39 insertions(+), 38 deletions(-) diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx index 073260b00d0..6e4e8d04d45 100644 --- a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx +++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx @@ -77,7 +77,6 @@ const TransferProjectButton: FC<{}> = () => { await transferProject({ projectRef, targetOrganizationSlug: selectedOrg }) ui.setNotification({ category: 'success', - duration: 5000, message: `Successfully transferred project ${project?.name}.`, }) diff --git a/studio/data/projects/project-create-mutation.ts b/studio/data/projects/project-create-mutation.ts index f355ee965f4..09ab5b925cd 100644 --- a/studio/data/projects/project-create-mutation.ts +++ b/studio/data/projects/project-create-mutation.ts @@ -1,7 +1,9 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' +import { toast } from 'react-hot-toast' + import { post } from 'lib/common/fetch' import { API_URL, PRICING_TIER_PRODUCT_IDS, PROVIDERS } from 'lib/constants' -import { ProjectBase } from 'types' +import { ProjectBase, ResponseError } from 'types' import { projectKeys } from './keys' export type ProjectCreateVariables = { @@ -32,10 +34,7 @@ export async function createProject({ // auth_site_url: _store.selectedVercelProjectUrl, vercel_configuration_id: configurationId, }) - if (response.error) { - throw response.error - } - + if (response.error) throw response.error return response as ProjectBase } @@ -43,20 +42,28 @@ type ProjectCreateData = Awaited> export const useProjectCreateMutation = ({ onSuccess, + onError, ...options }: Omit< - UseMutationOptions, + UseMutationOptions, 'mutationFn' > = {}) => { const queryClient = useQueryClient() - return useMutation( + return useMutation( (vars) => createProject(vars), { async onSuccess(data, variables, context) { await queryClient.invalidateQueries(projectKeys.list()), await onSuccess?.(data, variables, context) }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to create project: ${data.message}`) + } else { + onError(data, variables, context) + } + }, ...options, } ) diff --git a/studio/data/projects/project-transfer-mutation.ts b/studio/data/projects/project-transfer-mutation.ts index 45cfe5abdcc..ba32612470d 100644 --- a/studio/data/projects/project-transfer-mutation.ts +++ b/studio/data/projects/project-transfer-mutation.ts @@ -1,4 +1,6 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' +import { toast } from 'react-hot-toast' + import { post } from 'lib/common/fetch' import { API_URL } from 'lib/constants' import { projectKeys } from './keys' @@ -33,6 +35,7 @@ type ProjectTransferData = Awaited> export const useProjectTransferMutation = ({ onSuccess, + onError, ...options }: Omit< UseMutationOptions, @@ -54,6 +57,13 @@ export const useProjectTransferMutation = ({ ]) await onSuccess?.(data, variables, context) }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to transfer project: ${data.message}`) + } else { + onError(data, variables, context) + } + }, ...options, } ) diff --git a/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx index a89c482c294..aa7ee41ea64 100644 --- a/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx +++ b/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx @@ -1,3 +1,4 @@ +import generator from 'generate-password' import { debounce } from 'lodash' import { useRouter } from 'next/router' import { ChangeEvent, useRef, useState } from 'react' @@ -14,12 +15,11 @@ import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-pr import { Integration } from 'data/integrations/integrations.types' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useProjectCreateMutation } from 'data/projects/project-create-mutation' -import generator from 'generate-password' import { useSelectedOrganization, useStore } from 'hooks' import { AWS_REGIONS, DEFAULT_MINIMUM_PASSWORD_STRENGTH, PROVIDERS } from 'lib/constants' import { passwordStrength } from 'lib/helpers' import { getInitialMigrationSQLFromGitHubRepo } from 'lib/integration-utils' -import { NextPageWithLayout, ProjectBase } from 'types' +import { NextPageWithLayout } from 'types' import { Alert, Button, Checkbox, IconBook, IconLifeBuoy, Input, Listbox, LoadingLine } from 'ui' const VercelIntegration: NextPageWithLayout = () => { @@ -79,7 +79,7 @@ const CreateProject = ({ const [passwordStrengthScore, setPasswordStrengthScore] = useState(-1) const [shouldRunMigrations, setShouldRunMigrations] = useState(true) const [dbRegion, setDbRegion] = useState(PROVIDERS.AWS.default_region) - // const [loading, setLoading] = useState(false) + const delayedCheckPasswordStrength = useRef( debounce((value: string) => checkPasswordStrength(value), 300) ).current @@ -96,7 +96,6 @@ const CreateProject = ({ useIntegrationConnectionsCreateMutation({}) const { data: organizationData, isLoading: isLoadingOrganizationsQuery } = useOrganizationsQuery() - const organization = organizationData?.find((x) => x.slug === slug) /** @@ -183,9 +182,7 @@ const CreateProject = ({ setLoading(true) try { - if (!organization) { - throw new Error('No organization set') - } + if (!organization) throw new Error('No organization set') let dbSql: string | undefined if (shouldRunMigrations) { @@ -203,29 +200,17 @@ const CreateProject = ({ }) } - let project: ProjectBase - - try { - project = await createProject({ - organizationId: organization.id, - name: projectName, - dbPass, - dbRegion, - dbSql, - configurationId, - }) - - setNewProjectRef(project.ref) - } catch (error: any) { - setLoading(false) - ui.setNotification({ - category: 'error', - message: `Failed to create project: ${error.message}`, - }) - return - } - } catch (error) { - console.error('Error', error) + const project = await createProject({ + organizationId: organization.id, + name: projectName, + dbPass, + dbRegion, + dbSql, + configurationId, + }) + setNewProjectRef(project.ref) + } catch (error: any) { + ui.setNotification({ error, category: 'error', message: error.message }) setLoading(false) } }