refactor: use interfaces for function params

js/src/hooks/use-particle.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import {
   subscribeToParticle,
   subscribeToParticleChildren,
@@ -26,13 +26,12 @@ export function useLiveParticle(path: ParticlePath): UseLiveParticleResult {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const docPath = useMemo(() => toFirestoreDocPath(path), [path]);
-
   useEffect(() => {
     setIsLoading(true);
     setError(null);
     setParticle(null);
 
+    const docPath = toFirestoreDocPath(path);
     const unsubscribe = subscribeToParticle(
       docPath,
       (data) => {
@@ -46,7 +45,7 @@ export function useLiveParticle(path: ParticlePath): UseLiveParticleResult {
     );
 
     return unsubscribe;
-  }, [docPath]);
+  }, [path]);
 
   return { particle, isLoading, error };
 }
@@ -57,47 +56,59 @@ interface UseLiveParticleChildrenResult {
   error: Error | null;
 }
 
+interface UseLiveParticleChildrenParams {
+  orderByField?: string;
+  orderDirection?: "asc" | "desc";
+  visibilityScopes?: string[];
+  onAdded?: (child: Particle) => void;
+  onRemoved?: (child: Particle, updatedChildren: Particle[]) => void;
+  whereFilter?: QueryFieldFilterConstraint;
+}
+
 export function useLiveParticleChildren(
   path: ParticlePath,
-  orderByField: string = "created_at",
-  orderDirection: "asc" | "desc" = "desc",
-  visibilityScopes?: string[],
-  onAdded?: (child: Particle) => void,
-  onRemoved?: (child: Particle, updatedChildren: Particle[]) => void,
-  whereFilter?: QueryFieldFilterConstraint
+  {
+    orderByField = "created_at",
+    orderDirection = "desc",
+    visibilityScopes,
+    onAdded,
+    onRemoved,
+    whereFilter,
+  }: UseLiveParticleChildrenParams
 ): UseLiveParticleChildrenResult {
   const [children, setChildren] = useState<Particle[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const collectionPath = useMemo(() => toFirestoreChildrenPath(path), [path]);
-
   useEffect(() => {
     setIsLoading(true);
     setError(null);
     setChildren([]);
 
+    const collectionPath = toFirestoreChildrenPath(path);
+
     const unsubscribe = subscribeToParticleChildren(
       collectionPath,
-      (data) => {
-        setChildren(data);
-        setIsLoading(false);
-      },
-      (err) => {
-        setError(err);
-        setIsLoading(false);
-      },
-      visibilityScopes,
-      orderByField,
-      orderDirection,
-      onAdded,
-      onRemoved,
-      whereFilter,
+      {
+        onData: (data) => {
+          setChildren(data);
+          setIsLoading(false);
+        },
+        onError: (err) => {
+          setError(err);
+          setIsLoading(false);
+        },
+        visibilityScopes,
+        orderByField,
+        orderDirection,
+        onAdded,
+        onRemoved,
+        whereFilter,
+      }
     );
 
     return unsubscribe;
-    // FIX: do we need to listen to more deps? Would that cause side effects that break behavior
-  }, [collectionPath]);
+  }, [path]);
 
   return { children, isLoading, error };
 }