From 08b7f4c3492dc48ce0ae3a1b1c94717f02068a24 Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Sat, 26 Jun 2021 01:49:23 +0300 Subject: [PATCH 1/8] feat: added select options to useSubscription --- .../documentation/realtime/use-realtime.md | 23 +++++++++++++++++++ src/hooks/realtime/use-realtime.ts | 11 ++++++--- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/docs/pages/documentation/realtime/use-realtime.md b/docs/pages/documentation/realtime/use-realtime.md index 3e664f4..5853c63 100644 --- a/docs/pages/documentation/realtime/use-realtime.md +++ b/docs/pages/documentation/realtime/use-realtime.md @@ -30,3 +30,26 @@ function Page() { return ... } ``` + +## Initial selection of records + +When initializing the component you might need to filter your data appropriately. You can pass the options directly to the `useSelect` hook. + +First argument can be either a `string` table name or `useSelect` options with table property. + +```tsx highlight=6 +import { useRealtime } from 'react-supabase' + +function Page() { + const [result, reexecute] = useRealtime( + { + table: 'todos', + columns: 'id, name, description', + filter: (query) => query.eq('completed', false), + }, + (data, payload) => data.username === payload.username, + ) + + return ... +} +``` diff --git a/src/hooks/realtime/use-realtime.ts b/src/hooks/realtime/use-realtime.ts index 2ae37bc..e06772b 100644 --- a/src/hooks/realtime/use-realtime.ts +++ b/src/hooks/realtime/use-realtime.ts @@ -1,7 +1,7 @@ import { useEffect, useReducer } from 'react' import { SupabaseRealtimePayload } from '@supabase/supabase-js' -import { UseSelectState, useSelect } from '../data' +import { UseSelectConfig, UseSelectState, useSelect } from '../data' import { useSubscription } from './use-subscription' export type UseRealtimeState = Omit< @@ -31,17 +31,22 @@ export type UseRealtimeCompareFn = ( type CompareFnDefaultData = Data & { id: any } export function useRealtime( - table: string, + options: string | ({ table: string } & UseSelectConfig), compareFn: UseRealtimeCompareFn = (a, b) => (>a).id === (>b).id, ): UseRealtimeResponse { + if (typeof options === 'string') { + options = { table: options } + } + const { table, ...config } = options + if (table === '*') throw Error( 'Must specify table or row. Cannot listen for all database changes.', ) - const [result, reexecute] = useSelect(table) + const [result, reexecute] = useSelect(table, config) const [state, dispatch] = useReducer< React.Reducer, UseRealtimeAction> >(reducer(compareFn), result) From 0a06b144e70a180cceae18ada8b088d0597af78d Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Sat, 26 Jun 2021 01:50:15 +0300 Subject: [PATCH 2/8] feat: pass type to compare fn --- src/hooks/realtime/use-realtime.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/realtime/use-realtime.ts b/src/hooks/realtime/use-realtime.ts index e06772b..f3ff20e 100644 --- a/src/hooks/realtime/use-realtime.ts +++ b/src/hooks/realtime/use-realtime.ts @@ -63,7 +63,7 @@ export function useRealtime( } const reducer = - (compareFn: UseRealtimeCompareFn) => + (compareFn: UseRealtimeCompareFn) => ( state: UseRealtimeState, action: UseRealtimeAction, From 13362672b83595c64a7cbc24b655d511bf3ad58c Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Sat, 26 Jun 2021 01:52:52 +0300 Subject: [PATCH 3/8] test: added tests to cover new args --- .../realtime/__snapshots__/use-realtime.test.tsx.snap | 2 ++ test/hooks/realtime/use-realtime.test.tsx | 7 +++++++ 2 files changed, 9 insertions(+) diff --git a/test/hooks/realtime/__snapshots__/use-realtime.test.tsx.snap b/test/hooks/realtime/__snapshots__/use-realtime.test.tsx.snap index cd35a0e..9e4d133 100644 --- a/test/hooks/realtime/__snapshots__/use-realtime.test.tsx.snap +++ b/test/hooks/realtime/__snapshots__/use-realtime.test.tsx.snap @@ -3,3 +3,5 @@ exports[`useRealtime should throw when not inside Provider 1`] = `"No client has been specified using Provider."`; exports[`useRealtime should throw when trying to listen all database changes 1`] = `"Must specify table or row. Cannot listen for all database changes."`; + +exports[`useRealtime should throw when trying to listen all database changes via options 1`] = `"Must specify table or row. Cannot listen for all database changes."`; diff --git a/test/hooks/realtime/use-realtime.test.tsx b/test/hooks/realtime/use-realtime.test.tsx index 3d6da9c..48f102d 100644 --- a/test/hooks/realtime/use-realtime.test.tsx +++ b/test/hooks/realtime/use-realtime.test.tsx @@ -13,4 +13,11 @@ describe('useRealtime', () => { const { result } = renderHook(() => useRealtime('*'), { wrapper }) expect(() => result.current).toThrowErrorMatchingSnapshot() }) + + it('should throw when trying to listen all database changes via options', () => { + const { result } = renderHook(() => useRealtime({ table: '*' }), { + wrapper, + }) + expect(() => result.current).toThrowErrorMatchingSnapshot() + }) }) From 04d8e5a794c431339e77764a7f0d10af06f83e74 Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Sat, 26 Jun 2021 02:00:53 +0300 Subject: [PATCH 4/8] docs: update example --- docs/pages/documentation/realtime/use-realtime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/documentation/realtime/use-realtime.md b/docs/pages/documentation/realtime/use-realtime.md index 5853c63..dc7025e 100644 --- a/docs/pages/documentation/realtime/use-realtime.md +++ b/docs/pages/documentation/realtime/use-realtime.md @@ -44,7 +44,7 @@ function Page() { const [result, reexecute] = useRealtime( { table: 'todos', - columns: 'id, name, description', + columns: 'id, username, description', filter: (query) => query.eq('completed', false), }, (data, payload) => data.username === payload.username, From 56bb840bc1748260f3e9a322448018197e382f99 Mon Sep 17 00:00:00 2001 From: Tom Meagher Date: Mon, 5 Jul 2021 21:15:09 -0400 Subject: [PATCH 5/8] ci: update size (#23) --- .github/workflows/main.yaml | 32 ++++++++++++++++++++++++++++++++ .github/workflows/size.yaml | 18 ------------------ 2 files changed, 32 insertions(+), 18 deletions(-) delete mode 100644 .github/workflows/size.yaml diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index 9b08758..7a3bcc9 100644 --- a/.github/workflows/main.yaml +++ b/.github/workflows/main.yaml @@ -71,3 +71,35 @@ jobs: - name: Run tests run: yarn test + + size: + name: Size + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [14] + steps: + - name: Check out + uses: actions/checkout@v2 + + - name: Set up Node ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + + - name: Load yarn cache + uses: actions/cache@v2.1.6 + id: yarn-cache + with: + path: ./node_modules + key: ${{ runner.os }}-yarn-cache-${{ hashFiles('**/yarn.lock') }} + restore-keys: ${{ runner.os }}-yarn-cache- + + - name: Install dependencies + if: steps.yarn-cache.outputs.cache-hit != 'true' + run: yarn --frozen-lockfile + + - uses: andresz1/size-limit-action@v1.5.1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + skip_step: install diff --git a/.github/workflows/size.yaml b/.github/workflows/size.yaml deleted file mode 100644 index 0c1a03b..0000000 --- a/.github/workflows/size.yaml +++ /dev/null @@ -1,18 +0,0 @@ -name: Size - -on: - pull_request: - -jobs: - size: - name: Size - runs-on: ubuntu-latest - env: - CI_JOB_NUMBER: 1 - steps: - - name: Check out - uses: actions/checkout@v2 - - - uses: andresz1/size-limit-action@v1.5.1 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} From fc974645bf491a36c31958810d6db53d191b461e Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Tue, 6 Jul 2021 08:34:04 +0300 Subject: [PATCH 6/8] feat: update useRealtime args --- docs/pages/documentation/realtime/use-realtime.md | 11 +++++++---- src/hooks/realtime/use-realtime.ts | 14 +++++++------- test/hooks/realtime/use-realtime.test.tsx | 13 ++++++++++--- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/docs/pages/documentation/realtime/use-realtime.md b/docs/pages/documentation/realtime/use-realtime.md index dc7025e..e03b0c7 100644 --- a/docs/pages/documentation/realtime/use-realtime.md +++ b/docs/pages/documentation/realtime/use-realtime.md @@ -24,6 +24,7 @@ import { useRealtime } from 'react-supabase' function Page() { const [result, reexecute] = useRealtime( 'todos', + { select: { columns:'id, username' } }, (data, payload) => data.username === payload.username, ) @@ -37,15 +38,17 @@ When initializing the component you might need to filter your data appropriately First argument can be either a `string` table name or `useSelect` options with table property. -```tsx highlight=6 +```tsx highlight=7,8,9,10 import { useRealtime } from 'react-supabase' function Page() { const [result, reexecute] = useRealtime( + 'todos', { - table: 'todos', - columns: 'id, username, description', - filter: (query) => query.eq('completed', false), + select: { + columns: 'id, username, description', + filter: (query) => query.eq('completed', false), + } }, (data, payload) => data.username === payload.username, ) diff --git a/src/hooks/realtime/use-realtime.ts b/src/hooks/realtime/use-realtime.ts index f3ff20e..7ee76b2 100644 --- a/src/hooks/realtime/use-realtime.ts +++ b/src/hooks/realtime/use-realtime.ts @@ -23,6 +23,10 @@ export type UseRealtimeAction = | { type: 'FETCH'; payload: UseSelectState } | { type: 'SUBSCRIPTION'; payload: SupabaseRealtimePayload } +export type UseRealtimeConfig = { + select?: Omit, 'pause'> +} + export type UseRealtimeCompareFn = ( data: Data, payload: Data, @@ -31,22 +35,18 @@ export type UseRealtimeCompareFn = ( type CompareFnDefaultData = Data & { id: any } export function useRealtime( - options: string | ({ table: string } & UseSelectConfig), + table: string, + config?: UseRealtimeConfig, compareFn: UseRealtimeCompareFn = (a, b) => (>a).id === (>b).id, ): UseRealtimeResponse { - if (typeof options === 'string') { - options = { table: options } - } - const { table, ...config } = options - if (table === '*') throw Error( 'Must specify table or row. Cannot listen for all database changes.', ) - const [result, reexecute] = useSelect(table, config) + const [result, reexecute] = useSelect(table, config?.select) const [state, dispatch] = useReducer< React.Reducer, UseRealtimeAction> >(reducer(compareFn), result) diff --git a/test/hooks/realtime/use-realtime.test.tsx b/test/hooks/realtime/use-realtime.test.tsx index 48f102d..a593caf 100644 --- a/test/hooks/realtime/use-realtime.test.tsx +++ b/test/hooks/realtime/use-realtime.test.tsx @@ -15,9 +15,16 @@ describe('useRealtime', () => { }) it('should throw when trying to listen all database changes via options', () => { - const { result } = renderHook(() => useRealtime({ table: '*' }), { - wrapper, - }) + const { result } = renderHook( + () => + useRealtime('*', { + select: { + columns: 'id, username, completed', + filter: (query) => query.eq('completed', false), + }, + }), + { wrapper }, + ) expect(() => result.current).toThrowErrorMatchingSnapshot() }) }) From 69ceb8eda605ce1ae95a7832f10d33383bd1a72d Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Tue, 6 Jul 2021 08:36:20 +0300 Subject: [PATCH 7/8] feat: add default type --- src/hooks/realtime/use-realtime.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/realtime/use-realtime.ts b/src/hooks/realtime/use-realtime.ts index 7ee76b2..f20d409 100644 --- a/src/hooks/realtime/use-realtime.ts +++ b/src/hooks/realtime/use-realtime.ts @@ -23,7 +23,7 @@ export type UseRealtimeAction = | { type: 'FETCH'; payload: UseSelectState } | { type: 'SUBSCRIPTION'; payload: SupabaseRealtimePayload } -export type UseRealtimeConfig = { +export type UseRealtimeConfig = { select?: Omit, 'pause'> } From f62cf4fc01dc6b651068cbdfa4beb32c374c8522 Mon Sep 17 00:00:00 2001 From: Ilko Kacharov Date: Tue, 6 Jul 2021 10:25:54 +0300 Subject: [PATCH 8/8] docs: highlight correct row --- docs/pages/documentation/realtime/use-realtime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/documentation/realtime/use-realtime.md b/docs/pages/documentation/realtime/use-realtime.md index e03b0c7..e79d706 100644 --- a/docs/pages/documentation/realtime/use-realtime.md +++ b/docs/pages/documentation/realtime/use-realtime.md @@ -18,7 +18,7 @@ You can pass a function for comparing subscription event changes. By default, th When using your own compare function, you typically want to compare unique values: -```tsx highlight=6 +```tsx highlight=7 import { useRealtime } from 'react-supabase' function Page() {