Complete Swipe-To-Refresh

index.ts

@@ -1,3 +1,16 @@
+import { TIME_REQUEST } from './services/time';
+import { pointerService } from './services/pointer';
+import { bus } from './services/bus';
+
+export const isPastThreshold = (y: number) => y >= 102;
+
+// Business rules enabled by the pointerService
+pointerService.responses.subscribe(({ payload: y }) => {
+  if (isPastThreshold(y)) {
+    pointerService.cancelCurrent();
+    bus.trigger(TIME_REQUEST);
+  }
+});
+
 // Adapted from https://www.learnrxjs.io/learn-rxjs/recipes/swipe-to-refresh
 // Original code: https://stackblitz.com/edit/rxjs-refresh
-console.clear();

services/bus.ts

@@ -0,0 +1,12 @@
+import { Bus } from '@rxfx/bus';
+
+// Our place to set up listeners and services - our effect containers, and for viewing execution logs
+export const bus = new Bus<number | string>();
+bus.spy(console.log); // bus.spy((e) => e.type || console.log(e));
+
+// Example usage
+bus.listen(
+  (e) => e === '.help',
+  () => console.log('Drag down ⟲ to refresh')
+);
+bus.trigger('.help');

services/pointer.ts

@@ -0,0 +1,61 @@
+import { createService } from '@rxfx/service';
+import { fromEvent } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import { bus } from './bus';
+import { setRefreshPos, resetRefresh } from './DOM';
+
+const MOBILE = { DOWN: 'touchstart', UP: 'touchend', MOVE: 'touchmove' };
+const DESKTOP = { DOWN: 'mousedown', UP: 'mouseup', MOVE: 'mousemove' };
+
+export const POINTER_EVENTS =
+  'ontouchstart' in document.documentElement ? MOBILE : DESKTOP;
+
+const mouseYsUntilUp = fromEvent(document, POINTER_EVENTS.MOVE).pipe(
+  map((ev: MouseEvent) => ev.clientY),
+  takeUntil(fromEvent(document, POINTER_EVENTS.UP))
+);
+
+export const pointerService = createService<'up' | 'down', number, Error>(
+  'pointer',
+  bus,
+  (event) => {
+    if (event === 'down') {
+      return mouseYsUntilUp;
+    }
+  }
+);
+
+/////////////////// UI updates /////////////////
+pointerService.responses.subscribe((r) => setRefreshPos(r.payload));
+bus
+  .query(pointerService.actions.complete.match)
+  .subscribe(() => resetRefresh());
+
+/////////////////// DOM Event Harvesting /////////////////
+
+// DOM listener setup + teardown
+const sendDown = (e: Event) => {
+  e.preventDefault();
+  pointerService.request('down');
+};
+const sendUp = (e: Event) => {
+  e.preventDefault();
+  pointerService.request('up');
+};
+
+export const connectDOMEventsToPointerService = () => {
+  document.addEventListener(POINTER_EVENTS.DOWN, sendDown);
+  document.addEventListener(POINTER_EVENTS.UP, sendUp);
+};
+export const disconnectDOMEventsFromPointerService = () => {
+  document.removeEventListener(POINTER_EVENTS.DOWN, sendDown);
+  document.removeEventListener(POINTER_EVENTS.UP, sendUp);
+};
+connectDOMEventsToPointerService();
+
+// Example:
+// pointerService.request('test');
+// puts these events on the bus
+// {type: "pointer/request", payload: "test", meta: {…}}
+// {type: "pointer/started", payload: undefined}
+// {type: "pointer/complete", payload: undefined}

services/time.ts

@@ -0,0 +1,43 @@
+import { after } from '@rxfx/after';
+import { bus } from './bus';
+import { setData } from './DOM';
+import {
+  connectDOMEventsToPointerService,
+  disconnectDOMEventsFromPointerService,
+} from './pointer';
+
+export const TIME_REQUEST = 'time/request';
+
+const fakeTimeResponse = after(2500, () => {
+  console.log('Time listener is live, and singleton!');
+  return new Date().toUTCString();
+});
+
+const handleRequestBegin = () => {
+  console.log('loading...');
+  disconnectDOMEventsFromPointerService();
+  setData('loading...');
+};
+
+const handleRequestDone = (newDate) => {
+  console.log(newDate);
+  connectDOMEventsToPointerService();
+  setData('Refreshed at: ' + newDate);
+};
+
+bus.listenBlocking(
+  (e) => e === TIME_REQUEST,
+  () => fakeTimeResponse,
+  {
+    subscribe: handleRequestBegin,
+    next: handleRequestDone,
+  }
+);
+
+bus.trigger(TIME_REQUEST);
+bus.trigger(TIME_REQUEST);
+// Now we see that the effect *will not* execute if already executing!
+// No tracking variables required!
+// time/request
+// time/request
+// Time listener is live! TODO put in DOM