Merge 06d45cc into 53a1a07

crimx · Feb 25, 2021 · 3601427 · 3601427
2 parents 53a1a07 + 06d45cc
commit 3601427
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 29 deletions.
diff --git a/packages/observable-hooks/src/internal/use-subscription-internal.ts b/packages/observable-hooks/src/internal/use-subscription-internal.ts
@@ -1,7 +1,23 @@
-import { Observable, Subscription } from 'rxjs'
+import { Observable, PartialObserver, Subscription } from 'rxjs'
 import { useForceUpdate, useIsomorphicLayoutEffect } from '../helpers'
 import { useEffect, useRef } from 'react'
 
+type Args<TInput> = [
+  Observable<TInput>, // inputs$
+  PartialObserver<TInput> | ((value: TInput) => void) | null | undefined,
+  ((error: any) => void) | null | undefined,
+  (() => void) | null | undefined
+];
+
+const getObserver = <TInput>(args: Args<TInput>) =>
+  typeof args[1] === 'function' || args[1] === null || args[1] === undefined
+    ? {
+        next: args[1],
+        error: args[2],
+        complete: args[3]
+      }
+    : args[1];
+
 /**
  *
  * @template TInput Input value within Observable.
@@ -11,12 +27,7 @@ import { useEffect, useRef } from 'react'
  */
 export function useSubscriptionInternal<TInput>(
   useCustomEffect: typeof useEffect,
-  args: [
-    Observable<TInput>, // inputs$
-    ((value: TInput) => void) | null | undefined, // next
-    ((error: any) => void) | null | undefined, // error
-    (() => void) | null | undefined // complete
-  ]
+  args: Args<TInput>
 ): React.MutableRefObject<Subscription | undefined> {
   const forceUpdate = useForceUpdate()
 
@@ -42,18 +53,20 @@ export function useSubscriptionInternal<TInput>(
           // stale observable
           return
         }
-        if (argsRef.current[1]) {
-          return argsRef.current[1](value)
+        const observer = getObserver(argsRef.current)
+        if (observer.next) {
+          return observer.next(value)
         }
       },
       error: error => {
         if (input$ !== argsRef.current[0]) {
           // stale observable
           return
         }
-        if (argsRef.current[2]) {
+        const observer = getObserver(argsRef.current)
+        if (observer.error) {
           errorRef.current = null
-          return argsRef.current[2](error)
+          return observer.error(error)
         }
         errorRef.current = error
         forceUpdate()
@@ -63,8 +76,9 @@ export function useSubscriptionInternal<TInput>(
           // stale observable
           return
         }
-        if (argsRef.current[3]) {
-          return argsRef.current[3]()
+        const observer = getObserver(argsRef.current)
+        if (observer.complete) {
+          return observer.complete()
         }
       }
     })

diff --git a/packages/observable-hooks/src/use-layout-subscription.ts b/packages/observable-hooks/src/use-layout-subscription.ts
@@ -1,4 +1,4 @@
-import { Observable, Subscription } from 'rxjs'
+import { Observable, PartialObserver, Subscription } from 'rxjs'
 import { useIsomorphicLayoutEffect } from './helpers'
 import { useSubscriptionInternal } from './internal/use-subscription-internal'
 
@@ -23,19 +23,30 @@ import { useSubscriptionInternal } from './internal/use-subscription-internal'
  * @param error Notify when a new error is thrown.
  * @param complete Notify when the Observable is complete.
  */
+export function useLayoutSubscription<TInput>(
+  input$: Observable<TInput>,
+  observer?: PartialObserver<TInput>
+): React.MutableRefObject<Subscription | undefined>
 export function useLayoutSubscription<TInput>(
   input$: Observable<TInput>,
   next?: ((value: TInput) => void) | null | undefined,
   error?: ((error: any) => void) | null | undefined,
   complete?: (() => void) | null | undefined
 ): React.MutableRefObject<Subscription | undefined>
 export function useLayoutSubscription<TInput>(
-  ...args: [
-    Observable<TInput>,
-    ((value: TInput) => void) | null | undefined,
-    ((error: any) => void) | null | undefined,
-    (() => void) | null | undefined
-  ]
+  input$: Observable<TInput>,
+  observerOrNext$?:
+    | PartialObserver<TInput>
+    | ((value: TInput) => void)
+    | null
+    | undefined,
+  error?: ((error: any) => void) | null | undefined,
+  complete?: (() => void) | null | undefined
 ): React.MutableRefObject<Subscription | undefined> {
-  return useSubscriptionInternal(useIsomorphicLayoutEffect, args)
+  return useSubscriptionInternal(useIsomorphicLayoutEffect, [
+    input$,
+    observerOrNext$,
+    error,
+    complete
+  ])
 }
diff --git a/packages/observable-hooks/src/use-subscription.ts b/packages/observable-hooks/src/use-subscription.ts
@@ -1,4 +1,4 @@
-import { Observable, Subscription } from 'rxjs'
+import { Observable, PartialObserver, Subscription } from 'rxjs'
 import { useEffect } from 'react'
 import { useSubscriptionInternal } from './internal/use-subscription-internal'
 
@@ -38,19 +38,30 @@ import { useSubscriptionInternal } from './internal/use-subscription-internal'
  * @param error Notify when a new error is thrown.
  * @param complete Notify when the Observable is complete.
  */
+export function useSubscription<TInput>(
+  input$: Observable<TInput>,
+  observer?: PartialObserver<TInput>
+): React.MutableRefObject<Subscription | undefined>
 export function useSubscription<TInput>(
   input$: Observable<TInput>,
   next?: ((value: TInput) => void) | null | undefined,
   error?: ((error: any) => void) | null | undefined,
   complete?: (() => void) | null | undefined
 ): React.MutableRefObject<Subscription | undefined>
 export function useSubscription<TInput>(
-  ...args: [
-    Observable<TInput>,
-    ((value: TInput) => void) | null | undefined,
-    ((error: any) => void) | null | undefined,
-    (() => void) | null | undefined
-  ]
+  input$: Observable<TInput>,
+  observerOrNext$?:
+    | PartialObserver<TInput>
+    | ((value: TInput) => void)
+    | null
+    | undefined,
+  error?: ((error: any) => void) | null | undefined,
+  complete?: (() => void) | null | undefined
 ): React.MutableRefObject<Subscription | undefined> {
-  return useSubscriptionInternal(useEffect, args)
+  return useSubscriptionInternal(useEffect, [
+    input$,
+    observerOrNext$,
+    error,
+    complete
+  ])
 }