refactor: remove effects to ngneat/effects

Author: NetanelBasal

README.md

@@ -77,54 +77,11 @@ function TodosComponent() {
   const [todos] = useObservable(todos$);
 
   useEffect$(() => loadTodos());
+  useEffect$(() => loadTodos(), deps);
 
   return <>{todos}</>;
 }
 ```
-
-## useComponentEffects
-To use an `effect` we first need to create it by using the `createEffect` function:
-
-```ts
-import { createEffect } from '@ngneat/react-rxjs';
-
-export const searchTodoEffect = createEffect((searchTerm$: Observable<string>) => {
-  return searchTerm$.pipe(
-    debounceTime(300),
-    switchMap((searchTerm) => fetchTodos({ searchTerm })),
-  );
-});
-```
-
-The `createEffect` function takes a `callback` function which is passed an `Observable` parameter and returns an `Observable`.
-
-Now we can register the effect in our component, and call it when we need:
-
-```ts
-import { useComponentEffects$ } from '@ngneat/react-rxjs';
-
-function SearchComponent() {
-  const searchTodo = useComponentEffects(searchTodoEffect);
-
-  return <input onChange={({ target: { value } }) => searchTodo(value)} />
-}
-```
-
-Every time the `effect` is called, its value is pushed into that `Observable`.
-
-
-We can also register multiple effects:
-
-```ts
-function FooComponent() {
-  const [addTodo, updateTodo, deleteTodo] = useComponentEffects([
-    addTodoEffect, updateTodoEffect, deleteTodoEffect
-  ]);
-
-  return ...
-}
-```
-
 ## useFromEvent
 It's the `fromEvent` observable, but with hooks:
 

packages/playground/src/app/app.tsx

@@ -1,26 +1,9 @@
-import { createEffect, useComponentEffects, useEffect$, useFromEvent, useObservable } from '@ngneat/react-rxjs';
-import { interval, Observable } from 'rxjs';
+import { useEffect$, useFromEvent, useObservable } from '@ngneat/react-rxjs';
+import { interval } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { fromFetch } from 'rxjs/fetch';
 import { ChangeEvent, useState } from 'react';
 
-const searchTodoEffect = createEffect((searchTerm$: Observable<string>) => {
-  return searchTerm$.pipe(
-    debounceTime(300),
-    tap({
-      next(v) {
-        console.log(v);
-      }
-    })
-  );
-});
-
-function SearchComponent() {
-  const searchTodo = useComponentEffects(searchTodoEffect);
-
-  return <input onChange={({ target: { value } }) => searchTodo(value)} />
-}
-
 function loadTodos() {
   return fromFetch<{ id: number }[]>('https://jsonplaceholder.typicode.com/todos', {
     selector: (response) => response.json(),
@@ -59,7 +42,6 @@ export function App() {
       {count}
       <button onClick={() => setSideEffect(e => e + 1)}>sideEffect</button>
       <button onClick={() => setShow(show => !show)}>Toggle</button>
-      {show && <SearchComponent />}
 
       <h1>useFromEvent</h1>
       <h3>{text}</h3>

packages/react-rxjs/src/index.ts

@@ -1,5 +1,4 @@
 export { useObservable } from './use-observable/use-observable';
 export { useUntilDestroyed } from './use-until-destroyed/use-until-destroyed';
 export { useEffect$ } from './use-effect/use-effect';
-export { useComponentEffects, createEffect } from './use-component-effects/use-component-effects';
 export { useFromEvent } from './use-from-event/use-from-event';

packages/react-rxjs/src/use-component-effects/use-component-effects.ts

@@ -0,0 +1,38 @@
+
+import { Observable, timer } from 'rxjs';
+import { finalize, tap } from 'rxjs/operators';
+import { render } from '@testing-library/react';
+import { useEffect$ } from './use-effect';
+
+jest.useFakeTimers();
+
+describe('useEffect$', () => {
+  const spy = jest.fn();
+  const destroySpy = jest.fn();
+
+  const source$ = timer(1000).pipe(
+    tap(spy),
+    finalize(destroySpy)
+  )
+
+  function FooComponent() {
+    useEffect$(() => source$);
+
+    return <div></div>
+  }
+
+
+  it('should register/unregister effects', () => {
+    const { unmount } = render(<FooComponent />);
+
+    jest.advanceTimersByTime(1000);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    expect(destroySpy).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
+  })
+})

packages/react-rxjs/src/use-effect/use-effect.spec.tsx

@@ -0,0 +1,38 @@
+import { finalize, tap } from 'rxjs/operators';
+import { render, fireEvent } from '@testing-library/react';
+import { ChangeEvent } from 'react';
+import { useFromEvent } from './use-from-event';
+
+describe('useFromEvent', () => {
+  const spy = jest.fn();
+  const destroySpy = jest.fn();
+
+  function SearchComponent() {
+    const { ref } = useFromEvent<ChangeEvent<HTMLInputElement>>('change', (event$) =>
+      event$.pipe(
+        tap(spy),
+        finalize(destroySpy)
+      )
+    );
+
+    return <input data-testid="input" ref={ref} />
+  }
+
+
+  it('should register the event', () => {
+    const { getByTestId, unmount } = render(<SearchComponent />);
+
+    fireEvent.change(getByTestId('input'));
+
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    fireEvent.change(getByTestId('input'));
+
+    expect(spy).toHaveBeenCalledTimes(2);
+
+    unmount();
+
+    expect(destroySpy).toHaveBeenCalledTimes(1);
+
+  })
+})