Files
supabase/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
T
Ivan VasilovandJoshen Lim f29003e0e7 fix: Use protocol property when building API url (#30332)
* Fix the types for API settings to include protocol.

* Use the protocol property in all usages of endpoints.

* Update

* Lint

* Revert changes to retrieving protocol

* Remove console.logs

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-11-06 22:22:24 +01:00

57 lines
1.9 KiB
TypeScript

import { useParams } from 'common'
import { ReactNode, useEffect } from 'react'
import { toast } from 'sonner'
import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
import { withAuth } from 'hooks/misc/withAuth'
import { PROJECT_STATUS } from 'lib/constants'
import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
import ProjectLayout from '../ProjectLayout/ProjectLayout'
import StorageMenu from './StorageMenu'
export interface StorageLayoutProps {
title: string
children: ReactNode
}
const StorageLayout = ({ title, children }: StorageLayoutProps) => {
const { ref: projectRef } = useParams()
const project = useSelectedProject()
const storageExplorerStore = useStorageStore()
const { data: settings, isLoading } = useProjectSettingsV2Query({ projectRef })
const endpoint = settings?.app_config?.endpoint
const { serviceKey } = getAPIKeys(settings)
const isPaused = project?.status === PROJECT_STATUS.INACTIVE
useEffect(() => {
if (!isLoading && endpoint && serviceKey?.api_key) {
initializeStorageStore(endpoint, serviceKey.api_key)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading, projectRef, endpoint, serviceKey?.api_key])
const initializeStorageStore = async (endpoint: string, serviceApiKey: string) => {
if (isPaused) return
if (endpoint) {
const protocol = settings?.app_config?.protocol ?? 'https'
storageExplorerStore.initStore(projectRef!, endpoint, serviceApiKey, protocol)
} else {
toast.error(
'Failed to fetch project configuration. Try refreshing your browser, or reach out to us at support@supabase.io'
)
}
}
return (
<ProjectLayout title={title || 'Storage'} product="Storage" productMenu={<StorageMenu />}>
{children}
</ProjectLayout>
)
}
export default withAuth(StorageLayout)