database-selector.tsx 1.3 KB

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