From 2c3b09b414e1b69c7b49f99a08397d2dc16e428f Mon Sep 17 00:00:00 2001 From: phamhieu Date: Wed, 4 May 2022 10:45:09 +0700 Subject: [PATCH 1/5] fix: fetch project detail --- studio/stores/app/ProjectStore.ts | 37 ++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/studio/stores/app/ProjectStore.ts b/studio/stores/app/ProjectStore.ts index d6d9c37c9d5..410d6f2199d 100644 --- a/studio/stores/app/ProjectStore.ts +++ b/studio/stores/app/ProjectStore.ts @@ -31,24 +31,35 @@ export default class ProjectStore extends PostgresMetaInterface { if (!response.error) { const project = response as Project - if ( - project.status === PROJECT_STATUS.ACTIVE_HEALTHY && - project.restUrl && - project.internalApiKey - ) { - const success = await pingPostgrest(project.restUrl, project.internalApiKey, { - kpsVersion: project.kpsVersion, - }) - project.postgrestStatus = success ? 'ONLINE' : 'OFFLINE' - } + // to improve UX, we wait for PingPostgrest result before continue + project.postgrestStatus = await this.myPingPostgrest(project) + // update project detail by key id this.data[project.id] = project - // lazy fetchs - this.fetchSubscriptionTier(project.id, project.ref) + // lazy fetches + this.fetchSubscriptionTier(project) } } - async fetchSubscriptionTier(projectId: number, projectRef: string) { + async myPingPostgrest(project: Project): Promise<'ONLINE' | 'OFFLINE' | undefined> { + if ( + project.status === PROJECT_STATUS.ACTIVE_HEALTHY && + project.restUrl && + project.internalApiKey + ) { + const success = await pingPostgrest(project.restUrl, project.internalApiKey, { + kpsVersion: project.kpsVersion, + }) + return success ? 'ONLINE' : 'OFFLINE' + } + return undefined + } + + async fetchSubscriptionTier(project: Project) { + const { id: projectId, ref: projectRef, status } = project + // if project.status is not ACTIVE_HEALTHY, don't fetch subscription + if (status !== PROJECT_STATUS.ACTIVE_HEALTHY) return + const url = `${this.url}/${projectRef}/subscription` const headers = constructHeaders(this.headers) const response = await get(url, { headers }) From 7711e5a9f5a26401e6a4fd86bd22ca5d052ac51c Mon Sep 17 00:00:00 2001 From: phamhieu Date: Wed, 4 May 2022 11:08:53 +0700 Subject: [PATCH 2/5] fix: re load project detail after building complete --- .../layouts/ProjectLayout/BuildingState.tsx | 14 +++++---- studio/stores/app/ProjectStore.ts | 29 +++++++++---------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx index d6ebac3fa95..34dc90d4eeb 100644 --- a/studio/components/layouts/ProjectLayout/BuildingState.tsx +++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx @@ -8,7 +8,7 @@ import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/H import { API_URL, PROJECT_STATUS } from 'lib/constants' import { useStore } from 'hooks' -import { get, getWithTimeout } from 'lib/common/fetch' +import { getWithTimeout } from 'lib/common/fetch' import { Project } from 'types' import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings' @@ -28,12 +28,14 @@ const ProjectBuildingState: FC = ({ project }) => { const { status } = projectStatus if (status === PROJECT_STATUS.ACTIVE_HEALTHY) { clearInterval(checkServerInterval.current) + // re-fetch project detail + await app.projects.fetchDetail(project.ref) - const res = await get(`${API_URL}/props/project/${project.ref}/connection-string`) - if (res && res.connectionString) { - app.onProjectConnectionStringUpdated(project.id, res.connectionString) - } - app.onProjectStatusUpdated(project.id, status) + // const res = await get(`${API_URL}/props/project/${project.ref}/connection-string`) + // if (res && res.connectionString) { + // app.onProjectConnectionStringUpdated(project.id, res.connectionString) + // } + // app.onProjectStatusUpdated(project.id, status) } } } diff --git a/studio/stores/app/ProjectStore.ts b/studio/stores/app/ProjectStore.ts index 410d6f2199d..b1f7234a0dd 100644 --- a/studio/stores/app/ProjectStore.ts +++ b/studio/stores/app/ProjectStore.ts @@ -9,7 +9,7 @@ import PostgresMetaInterface, { IPostgresMetaInterface } from '../common/Postgre import pingPostgrest from 'lib/pingPostgrest' export interface IProjectStore extends IPostgresMetaInterface { - fetchDetail: (projectRef: string) => void + fetchDetail: (projectRef: string) => Promise } export default class ProjectStore extends PostgresMetaInterface { @@ -57,22 +57,21 @@ export default class ProjectStore extends PostgresMetaInterface { async fetchSubscriptionTier(project: Project) { const { id: projectId, ref: projectRef, status } = project - // if project.status is not ACTIVE_HEALTHY, don't fetch subscription - if (status !== PROJECT_STATUS.ACTIVE_HEALTHY) return - - const url = `${this.url}/${projectRef}/subscription` - const headers = constructHeaders(this.headers) - const response = await get(url, { headers }) - if (!response.error) { - const subscriptionInfo = response as { - tier: { - supabase_prod_id: string + if (status === PROJECT_STATUS.ACTIVE_HEALTHY) { + const url = `${this.url}/${projectRef}/subscription` + const headers = constructHeaders(this.headers) + const response = await get(url, { headers }) + if (!response.error) { + const subscriptionInfo = response as { + tier: { + supabase_prod_id: string + } } + // update subscription_tier key + const clone = cloneDeep(this.data[projectId]) + clone.subscription_tier = subscriptionInfo.tier.supabase_prod_id + this.data[projectId] = clone } - // update subscription_tier key - const clone = cloneDeep(this.data[projectId]) - clone.subscription_tier = subscriptionInfo.tier.supabase_prod_id - this.data[projectId] = clone } } } From 00710f786d2418e98697650bfa6601bee46e85b5 Mon Sep 17 00:00:00 2001 From: phamhieu Date: Wed, 4 May 2022 11:39:18 +0700 Subject: [PATCH 3/5] chore: tidy up --- .../components/layouts/ProjectLayout/BuildingState.tsx | 9 +-------- studio/stores/app/AppStore.ts | 7 ------- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx index 34dc90d4eeb..8be01001081 100644 --- a/studio/components/layouts/ProjectLayout/BuildingState.tsx +++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx @@ -23,19 +23,12 @@ const ProjectBuildingState: FC = ({ project }) => { const projectStatus = await getWithTimeout(`${API_URL}/projects/${project.ref}/status`, { timeout: 2000, }) - if (projectStatus && !projectStatus.error) { const { status } = projectStatus if (status === PROJECT_STATUS.ACTIVE_HEALTHY) { clearInterval(checkServerInterval.current) - // re-fetch project detail + // re-fetch project detail. This will trigger UI state change to show the welcome screen await app.projects.fetchDetail(project.ref) - - // const res = await get(`${API_URL}/props/project/${project.ref}/connection-string`) - // if (res && res.connectionString) { - // app.onProjectConnectionStringUpdated(project.id, res.connectionString) - // } - // app.onProjectStatusUpdated(project.id, status) } } } diff --git a/studio/stores/app/AppStore.ts b/studio/stores/app/AppStore.ts index 03e4d6a4f0c..772e83835fe 100644 --- a/studio/stores/app/AppStore.ts +++ b/studio/stores/app/AppStore.ts @@ -15,7 +15,6 @@ export interface IAppStore { onProjectCreated: (project: any) => void onProjectUpdated: (project: any) => void onProjectDeleted: (project: any) => void - onProjectConnectionStringUpdated: (projectId: number, value: string) => void onProjectStatusUpdated: (projectId: number, value: string) => void onProjectPostgrestStatusUpdated: (projectId: number, value: 'OFFLINE' | 'ONLINE') => void onOrgAdded: (org: any) => void @@ -76,12 +75,6 @@ export default class AppStore implements IAppStore { } } - onProjectConnectionStringUpdated(projectId: number, value: string) { - const clone = cloneDeep(this.projects.data[projectId]) - clone.connectionString = value - this.projects.data[projectId] = clone - } - onProjectStatusUpdated(projectId: number, value: string) { const clone = cloneDeep(this.projects.data[projectId]) clone.status = value From d5166bd41331919ef6bb322f169eee377450ec24 Mon Sep 17 00:00:00 2001 From: phamhieu Date: Wed, 4 May 2022 11:46:43 +0700 Subject: [PATCH 4/5] chore: another tidy up --- studio/components/layouts/ProjectLayout/BuildingState.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx index 8be01001081..f8b15fa1f77 100644 --- a/studio/components/layouts/ProjectLayout/BuildingState.tsx +++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx @@ -27,7 +27,8 @@ const ProjectBuildingState: FC = ({ project }) => { const { status } = projectStatus if (status === PROJECT_STATUS.ACTIVE_HEALTHY) { clearInterval(checkServerInterval.current) - // re-fetch project detail. This will trigger UI state change to show the welcome screen + // re-fetch project detail. + // This will also trigger UI state change to show project building completed await app.projects.fetchDetail(project.ref) } } From d92335d1f353f0847dbdcbfa3ec6c172e3208ff0 Mon Sep 17 00:00:00 2001 From: phamhieu Date: Wed, 4 May 2022 14:22:28 +0700 Subject: [PATCH 5/5] chore: tidy up --- studio/stores/app/ProjectStore.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/studio/stores/app/ProjectStore.ts b/studio/stores/app/ProjectStore.ts index b1f7234a0dd..d3504b75cb7 100644 --- a/studio/stores/app/ProjectStore.ts +++ b/studio/stores/app/ProjectStore.ts @@ -32,7 +32,7 @@ export default class ProjectStore extends PostgresMetaInterface { if (!response.error) { const project = response as Project // to improve UX, we wait for PingPostgrest result before continue - project.postgrestStatus = await this.myPingPostgrest(project) + project.postgrestStatus = await this.pingPostgrest(project) // update project detail by key id this.data[project.id] = project @@ -41,7 +41,7 @@ export default class ProjectStore extends PostgresMetaInterface { } } - async myPingPostgrest(project: Project): Promise<'ONLINE' | 'OFFLINE' | undefined> { + async pingPostgrest(project: Project): Promise<'ONLINE' | 'OFFLINE' | undefined> { if ( project.status === PROJECT_STATUS.ACTIVE_HEALTHY && project.restUrl &&