mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 02:45:07 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import type { FetchPreviousPageOptions } from '@tanstack/react-query'
|
|
import { CirclePause, CirclePlay } from 'lucide-react'
|
|
import { useQueryStates } from 'nuqs'
|
|
import { useEffect } from 'react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
import { useDataTable } from './providers/DataTableProvider'
|
|
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
import { useShortcut } from '@/state/shortcuts/useShortcut'
|
|
|
|
const REFRESH_INTERVAL = 10_000
|
|
|
|
interface LiveButtonProps {
|
|
searchParamsParser: any
|
|
fetchPreviousPage?: (options?: FetchPreviousPageOptions | undefined) => Promise<unknown>
|
|
}
|
|
|
|
export function LiveButton({ fetchPreviousPage, searchParamsParser }: LiveButtonProps) {
|
|
const [{ live, date, sort }, setSearch] = useQueryStates(searchParamsParser)
|
|
const { table } = useDataTable()
|
|
useShortcut(SHORTCUT_IDS.DATA_TABLE_TOGGLE_LIVE, handleClick, { registerInCommandMenu: true })
|
|
|
|
useEffect(() => {
|
|
let timeoutId: NodeJS.Timeout
|
|
|
|
async function fetchData() {
|
|
if (live) {
|
|
await fetchPreviousPage?.()
|
|
timeoutId = setTimeout(fetchData, REFRESH_INTERVAL)
|
|
} else {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}
|
|
|
|
fetchData()
|
|
|
|
return () => {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}, [live, fetchPreviousPage])
|
|
|
|
// REMINDER: make sure to reset live when date is set
|
|
// TODO: test properly
|
|
useEffect(() => {
|
|
if ((date || sort) && live) {
|
|
setSearch((prev) => ({ ...prev, live: null }))
|
|
}
|
|
}, [date, sort])
|
|
|
|
function handleClick() {
|
|
setSearch((prev) => ({
|
|
...prev,
|
|
live: !prev.live,
|
|
date: null,
|
|
sort: null,
|
|
}))
|
|
table.getColumn('date')?.setFilterValue(undefined)
|
|
table.resetSorting()
|
|
}
|
|
|
|
return (
|
|
<ShortcutTooltip
|
|
shortcutId={SHORTCUT_IDS.DATA_TABLE_TOGGLE_LIVE}
|
|
label={live ? 'Pause live mode' : 'Start live mode'}
|
|
side="bottom"
|
|
>
|
|
<Button
|
|
className={cn(live && 'border-info text-info hover:text-info')}
|
|
onClick={handleClick}
|
|
variant={live ? 'primary' : 'default'}
|
|
size="tiny"
|
|
icon={live ? <CirclePause className="h-4 w-4" /> : <CirclePlay className="h-4 w-4" />}
|
|
>
|
|
Live
|
|
</Button>
|
|
</ShortcutTooltip>
|
|
)
|
|
}
|