From eda0fa1a5743b25ada69b1e5dc20c810b4925ca4 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 18 Aug 2023 11:15:26 +0700 Subject: [PATCH] Address comments --- .../AddNewPaymentMethodModal.tsx | 22 +++++------ .../Infrastructure/PauseProjectButton.tsx | 2 - .../layouts/ProjectLayout/PausingState.tsx | 25 ++++++++++++- studio/data/projects/keys.ts | 1 + studio/data/projects/project-status-query.ts | 37 +++++++++++++++++++ 5 files changed, 72 insertions(+), 15 deletions(-) create mode 100644 studio/data/projects/project-status-query.ts diff --git a/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx index c4c427db142..1c4afa89e8c 100644 --- a/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx +++ b/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx @@ -27,11 +27,11 @@ const AddNewPaymentMethodModal = ({ onConfirm, }: AddNewPaymentMethodModalProps) => { const { ui } = useStore() + const { isDarkMode } = useTheme() const [intent, setIntent] = useState() const selectedOrganization = useSelectedOrganization() const captchaLoaded = useIsHCaptchaLoaded() - const [captchaToken, setCaptchaToken] = useState(null) const [captchaRef, setCaptchaRef] = useState(null) @@ -53,6 +53,15 @@ const AddNewPaymentMethodModal = ({ }, []) useEffect(() => { + const initSetupIntent = async (hcaptchaToken: string | undefined) => { + const slug = selectedOrganization?.slug + if (!slug) return console.error('Slug is required') + if (!hcaptchaToken) return console.error('HCaptcha token required') + + setIntent(undefined) + setupIntent({ slug, hcaptchaToken }) + } + const loadPaymentForm = async () => { if (visible && captchaRef && captchaLoaded) { let token = captchaToken @@ -79,17 +88,6 @@ const AddNewPaymentMethodModal = ({ captchaRef?.resetCaptcha() } - const initSetupIntent = async (hcaptchaToken: string | undefined) => { - const slug = selectedOrganization?.slug - if (!slug) return console.error('Slug is required') - if (!hcaptchaToken) return console.error('HCaptcha token required') - - setIntent(undefined) - setupIntent({ slug, hcaptchaToken }) - } - - const { isDarkMode } = useTheme() - const options = { clientSecret: intent ? intent.client_secret : '', appearance: { theme: isDarkMode ? 'night' : 'flat', labels: 'floating' }, diff --git a/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx b/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx index f8c4a5d7d98..364336086f2 100644 --- a/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx +++ b/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx @@ -15,8 +15,6 @@ import { post } from 'lib/common/fetch' import { API_URL, PROJECT_STATUS } from 'lib/constants' import { Button, IconPause } from 'ui' -export interface PauseProjectButtonProps {} - const PauseProjectButton = () => { const queryClient = useQueryClient() const { ui } = useStore() diff --git a/studio/components/layouts/ProjectLayout/PausingState.tsx b/studio/components/layouts/ProjectLayout/PausingState.tsx index ddd078ccf28..5913db0dfb7 100644 --- a/studio/components/layouts/ProjectLayout/PausingState.tsx +++ b/studio/components/layouts/ProjectLayout/PausingState.tsx @@ -1,11 +1,34 @@ -import { Project } from 'types' +import { useQueryClient } from '@tanstack/react-query' +import { useParams } from 'common' import { Badge, IconCircle, IconLoader } from 'ui' +import { useProjectStatusQuery } from 'data/projects/project-status-query' +import { invalidateProjectsQuery } from 'data/projects/projects-query' +import { PROJECT_STATUS } from 'lib/constants' +import { timeout } from 'lib/helpers' +import { Project } from 'types' + export interface PausingStateProps { project: Project } const PausingState = ({ project }: PausingStateProps) => { + const { ref } = useParams() + const queryClient = useQueryClient() + const { refetch } = useProjectStatusQuery( + { projectRef: ref }, + { + onSuccess: async (res) => { + if ([PROJECT_STATUS.GOING_DOWN, PROJECT_STATUS.PAUSING].includes(res.status)) { + await timeout(2000) + refetch() + } else if (PROJECT_STATUS.INACTIVE) { + await invalidateProjectsQuery(queryClient) + } + }, + } + ) + return (
diff --git a/studio/data/projects/keys.ts b/studio/data/projects/keys.ts index c0043e00294..0a352b78df2 100644 --- a/studio/data/projects/keys.ts +++ b/studio/data/projects/keys.ts @@ -1,5 +1,6 @@ export const projectKeys = { list: () => ['all-projects'] as const, + status: (projectRef: string | undefined) => ['project', projectRef, 'status'] as const, types: (projectRef: string | undefined) => ['project', projectRef, 'types'] as const, detail: (projectRef: string | undefined) => ['project', projectRef, 'detail'] as const, readonlyStatusList: () => ['projects', 'readonly-statuses'] as const, diff --git a/studio/data/projects/project-status-query.ts b/studio/data/projects/project-status-query.ts new file mode 100644 index 00000000000..d5d4339d424 --- /dev/null +++ b/studio/data/projects/project-status-query.ts @@ -0,0 +1,37 @@ +import { useQuery, UseQueryOptions } from '@tanstack/react-query' + +import { get } from 'data/fetchers' +import { ResponseError } from 'types' +import { projectKeys } from './keys' + +export type ProjectStatusVariables = { + projectRef?: string +} + +export async function getProjectStatus( + { projectRef }: ProjectStatusVariables, + signal?: AbortSignal +) { + if (!projectRef) throw new Error('Project ref is required') + + const { data, error } = await get(`/platform/projects/{ref}/status`, { + params: { path: { ref: projectRef } }, + signal, + }) + + if (error) throw error + return data as { status: string } +} + +export type ProjectStatusData = Awaited> +export type ProjectStatusError = ResponseError + +export const useProjectStatusQuery = ( + { projectRef }: ProjectStatusVariables, + { enabled = true, ...options }: UseQueryOptions = {} +) => + useQuery( + projectKeys.status(projectRef), + ({ signal }) => getProjectStatus({ projectRef }, signal), + { enabled: enabled && typeof projectRef !== 'undefined', ...options } + )