mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import type { FetchPreviousPageOptions } from '@tanstack/react-query'
|
|
import { CirclePauseIcon, CirclePlayIcon } from 'lucide-react'
|
|
import { useQueryStates } from 'nuqs'
|
|
import { useEffect } from 'react'
|
|
import { Button } 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: false })
|
|
|
|
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
|
|
onClick={handleClick}
|
|
variant={live ? 'primary' : 'default'}
|
|
size="tiny"
|
|
icon={
|
|
live ? <CirclePauseIcon className="h-4 w-4" /> : <CirclePlayIcon className="h-4 w-4" />
|
|
}
|
|
>
|
|
Live
|
|
</Button>
|
|
</ShortcutTooltip>
|
|
)
|
|
}
|