database-selector.tsx41 lines · main

1	import { useConstant } from 'common'
2	import { createContext, PropsWithChildren, useCallback, useContext } from 'react'
3	import { proxy, snapshot, useSnapshot } from 'valtio'
4
5	export function createDatabaseSelectorState() {
6	const state = proxy({
7	selectedDatabaseId: undefined as string | undefined,
8	setSelectedDatabaseId: (id: string | undefined) => {
9	state.selectedDatabaseId = id
10	},
11	})
12
13	return state
14	}
15
16	export type DatabaseSelectorState = ReturnType<typeof createDatabaseSelectorState>
17
18	export const DatabaseSelectorStateContext = createContext<DatabaseSelectorState>(
19	createDatabaseSelectorState()
20	)
21
22	export const DatabaseSelectorStateContextProvider = ({ children }: PropsWithChildren) => {
23	const state = useConstant(createDatabaseSelectorState)
24
25	return (
26	<DatabaseSelectorStateContext.Provider value={state}>
27	{children}
28	</DatabaseSelectorStateContext.Provider>
29	)
30	}
31
32	export function useDatabaseSelectorStateSnapshot(options?: Parameters<typeof useSnapshot>[1]) {
33	const state = useContext(DatabaseSelectorStateContext)
34	return useSnapshot(state, options)
35	}
36
37	// Helper methods
38	export function useGetSelectedDatabaseId() {
39	const state = useContext(DatabaseSelectorStateContext)
40	return useCallback(() => snapshot(state).selectedDatabaseId, [state])
41	}