wip 24.07.2024

Author: jsardev

package.json

@@ -20,7 +20,9 @@
     "react-dom": "18.2.0",
     "react-router-dom": "6.16.0",
     "remeda": "^1.29.0",
-    "zustand": "4.4.2"
+    "rxjs": "^7.8.1",
+    "zustand": "4.4.2",
+    "zustand-rx": "^2.0.1"
   },
   "devDependencies": {
     "@iconify-json/lucide": "1.1.131",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 import { selectCollectedCards } from './selectors'
 import { useGameState } from './state'
+import { GameState } from '.'
+import { subscribeWithSelector } from 'zustand/middleware'
+import { toStream, StateValueOf } from 'zustand-rx'
+import { StoreApi } from 'zustand'
 
 type GameStateListener<T> = (selectedState: T, previousSelectedState: T) => void
 
@@ -12,5 +16,12 @@ export const listenToAllCardsCollected = (
     return cards.length === collectedCards.length * 2
   }, listener)
 
+  type Test = typeof useGameState;
+
 export const listenToTurnTimer = (listener: GameStateListener<number>) =>
   useGameState.subscribe((state) => state.turn.timer, listener)
+
+  export const gameEnded$ = toStream<StoreApi<GameState>>(useGameState, state => {
+
+    return state.
+  })

src/modules/game/model/subscriptions.ts

@@ -0,0 +1,49 @@
+import { Observable } from 'rxjs'
+import { StoreApi } from 'zustand'
+
+/**
+ * This is a copy-pasted type from
+ * https://github.com/pmndrs/zustand/blob/a836356b5e4062abde852af3ba5ee6fc3f1a41fe/src/middleware/subscribeWithSelector.ts#L28-L40
+ *
+ *
+ */
+type StoreSubscribeWithSelector<T> = {
+  subscribe: {
+    (listener: (selectedState: T, previousSelectedState: T) => void): () => void
+    <U>(
+      selector: (state: T) => U,
+      listener: (selectedState: U, previousSelectedState: U) => void,
+      options?: {
+        equalityFn?: (a: U, b: U) => boolean
+        fireImmediately?: boolean
+      },
+    ): () => void
+  }
+}
+
+type ToStreamOptions = {
+  fireImmediately?: boolean
+}
+
+/**
+ * This file is a copy-pasted and modified version of
+ * https://github.com/patdx/zustand-rx/blob/main/libs/zustand-rx/src/lib/zustand-rx.ts
+ *
+ * TODO: Move to zustand-rx package after the following issue will be resolved:
+ * https://github.com/patdx/zustand-rx/issues/944
+ */
+export const toStream = <TState, TValue>(
+  store: StoreApi<TState> & StoreSubscribeWithSelector<TState>,
+  selector: (value: TState) => TValue,
+  { fireImmediately }: ToStreamOptions = {},
+): Observable<TValue> => {
+  return new Observable<TValue>((subscriber) => {
+    if (fireImmediately) {
+      subscriber.next(selector(store.getState()))
+    }
+    const unsubscribe = store.subscribe(selector, (value) => {
+      subscriber.next(value)
+    })
+    return () => unsubscribe()
+  })
+}