mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Joshen Lim
9b0dc8d9b9
## Context Taking a slightly different approach to [this PR](https://github.com/supabase/supabase/pull/43370) Original problem was that if you opened some folders while in a bucket and then switched to a different bucket, the folder UI will persists (folders from Bucket A will render when landing on Bucket B) ## Changes involved - Shift `StorageExplorerStateContextProvider` into `[bucketId].tsx]` instead of `ProjectContext` - The valtio store here only applies for the storage explorer so having it so high in the project's context was unnecessary - This also just implies that the valtio store will automatically reset whenever the bucket changes - Simplify storage explorer valtio store by initializing the store with the bucket - We'll initialize the selected bucket with the store now (Same as previous PR) - Removes unnecessary `setSelectedBucket` method which required a separate `useEffect` in `StorageExplorer.tsx` ## To test - [ ] Verify that the original is resolved - [ ] General smoke test of the storage explorer - i've also re-added the e2e test that Gildas wrote up in his PR
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA