mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45: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 pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)