components/log-viewer-webui/client/src/App.tsx (5)

1-1: Prefer explicit comparison over negation per coding guidelines

According to the coding guidelines, negated expressions should use explicit comparison.

While this is an ESLint directive rather than actual code logic, for consistency with your coding guidelines, consider:

-/* eslint-disable react/jsx-key */
+/* eslint-disable react/jsx-key */

Note: Instead of disabling the ESLint rule, consider addressing the underlying issue by adding keys to your mapped elements.

---

3-7: Consider removing commented-out code and imports

The commented-out imports suggest this is a work in progress. Consider removing them if they're no longer needed.

Keeping unused imports commented out can lead to code clutter. Either restore the components or remove the commented lines.

---

10-13: Unclear purpose of commented collection instance

There's a commented-out MongoReplicaCollection instance that may indicate incomplete implementation or testing code.

-// const collection2 = new MongoReplicaCollection("compression-jobs");

Remove this commented line if it's not needed, or add a comment explaining why it's kept for future reference.

---

40-46: Remove commented debug code before merging

The commented debug logging code should be removed before merging to production.

-/* for (let i = 0; i < results.length; i++) {
-    console.log(results[i]);
-}
-
-for (let i = 0; i < results2.length; i++) {
-    console.log(results2[i]);
-} */

Consider using a more structured approach to debugging, such as a debug flag or environment variable, if debugging is needed in the future.

---

63-65: Consider removing commented UI components

The commented UI components indicate incomplete migration to the new data layer.

If these components are no longer needed, remove them completely. If they will be reintroduced later, add a TODO comment explaining the plan.

components/log-viewer-webui/client/src/mongoCDCLib/useTracker.tsx (4)

9-19: Consider more specific type instead of unknown[]

The return type unknown[] is very generic. Consider using a more specific type if the structure of the returned data is known.

-const useTracker = (
-    getCursor: () => MongoCollectionReactiveCursor,
-    dependencies: object[] = []
-): unknown[] => {
+const useTracker = <T = unknown>(
+    getCursor: () => MongoCollectionReactiveCursor<T>,
+    dependencies: unknown[] = []
+): T[] => {

This would make the hook more type-safe and provide better intellisense for consumers.

---

20-21: Update state type to match return type

If you implement the generic type suggestion above, also update the state type.

-const [data, setData] = useState<unknown[]>([]);
+const [data, setData] = useState<T[]>([]);

---

31-33: Consider expanded error handling

The error handling logs to console but doesn't provide a way for the component to know about or handle the error.

Consider adding an error state that components can use to show error messages:

+const [error, setError] = useState<Error | null>(null);

const unsubscribe = cursor.toReactiveArray({
    onData: handleData,
    onError: (error: unknown) => {
        console.error("Error fetching data:", error);
+       setError(error instanceof Error ? error : new Error(String(error)));
    },
});

// And then adjust the return:
-return data;
+return { data, error };

---

39-40: ESLint rule disabling should be explained

When disabling ESLint rules, it's good practice to include a comment explaining why.

-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Using custom dependencies array instead of auto-detected deps

components/log-viewer-webui/client/src/mongoCDCLib/MongoCollectionCursor.ts (1)

93-97: Follow coding guidelines for conditionals

According to the coding guidelines, prefer false == <expression> over !<expression> pattern.

-                if (response.error) {
+                if (false == (response.error == null)) {
                     reject(response.error);

                     return;
                 }

components/log-viewer-webui/client/src/mongoCDCLib/MongoCollection.ts (1)

39-41: Convert TODO comments to tracked issues

Rather than keeping TODO comments in the code, consider creating actual issues in your issue tracker and reference them in the comments. This improves traceability and ensures these tasks aren't forgotten.

         // eslint-disable-next-line no-warning-comments
-        // TODO: use the server URL from the environment / constructor args
+        // TODO(#123): use the server URL from the environment / constructor args
         this.socket = getSharedSocket();

...

     // eslint-disable-next-line no-warning-comments
-    // TODO: add support for non-reactive cursors
+    // TODO(#124): add support for non-reactive cursors

Also applies to: 48-49

components/log-viewer-webui/client/src/mongoCDCLib/MongoCollectionReactiveCursor.ts (2)

44-47: Follow coding guidelines for conditionals

According to the coding guidelines, prefer false == <expression> pattern over negation or equality checks.

-                if (this.queryId === response.queryId) {
-                    if (response.error) {
+                if (false == (this.queryId !== response.queryId)) {
+                    if (false == (response.error == null)) {
                         return this.listener?.onError(response.error);
                     }

---

76-79: Simplify conditional with null check

While the current conditional follows the coding guidelines by using !==, it could be simplified for better readability.

-            if ("undefined" !== typeof response.queryId) {
+            if (null != response.queryId) {
                 unsubscribedInfo.queryId = response.queryId;
                 this.queryId = response.queryId;
             }

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

components/log-viewer-webui/client/src/mongoCDCLib/MongoCollectionReactiveCursor.ts (2)

19-20: Define or import the Document type

The Document type is used in multiple places but is neither imported nor defined. This could cause TypeScript compilation errors.

Also applies to: 24-25, 55-55

---

104-104: Consider using a more specific event unsubscription

The current implementation removes the entire "collection::find::update" event listener which could affect other reactive cursors if multiple are used simultaneously. Consider using a more targeted approach.

components/log-viewer-webui/client/src/mongoCDCLib/MongoCollectionReactiveCursor.ts (2)

18-21: Consider consolidating duplicate interfaces

The Listener and ReactiveArrayCallback interfaces have identical structure. Consider consolidating them into a single interface to reduce duplication and improve maintainability.

interface Listener {
    onData: (data: Document[]) => void;
    onError: (error: Error) => void;
}

-interface ReactiveArrayCallback {
-    onData: (data: Document[]) => void;
-    onError: (error: Error) => void;
-}
+type ReactiveArrayCallback = Listener;

Also applies to: 23-26

---

75-106: Add method to refresh or invalidate cached data

The current implementation doesn't provide a way to manually refresh data or invalidate the cache. This could be useful in scenarios where data might be stale or when user actions should trigger a refresh.

Consider adding a refresh method:

+ /**
+  * Refreshes the data by re-querying the server.
+  */
+ refresh(): void {
+     if (null === this.queryId || null === this.listener) {
+         return;
+     }
+     
+     this.socket.emit("collection::find::refresh", {
+         queryId: this.queryId
+     });
+ }

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro