Fix clicking multiple times on "Refresh Rates"

09-decoupling-features-using-events/src/features/converter/ui/RefreshRates/RefreshRates.composition.ts

@@ -3,4 +3,4 @@ import { refreshRates } from "../../core/refreshRates";
 import { asCommand } from "~/shared/infrastructure/cqs";
 
 export const RefreshRates = () =>
-  Component({ useRefreshRates: asCommand(refreshRates, ["refresh"]) });
+  Component({ useRefreshRates: asCommand(refreshRates, "refresh") });

09-decoupling-features-using-events/src/services/network/index.ts

@@ -1 +1 @@
-export * from "./network.fetch";
+export * from "./network.fake";

09-decoupling-features-using-events/src/services/network/network.fake.ts

@@ -0,0 +1,12 @@
+// Pretend this is the real network request to avoid having to run a server on http://localhost:3000/ as required by network.fetch.ts
+export const get = async (_url: Url) => {
+  await new Promise(resolve => setTimeout(resolve, 4000*Math.random()));
+  if (Math.random() < 0.2) throw new Error("Failed to fetch rates!!");
+  return { RPC: {
+      RPC: 1,
+      IMC: Math.random(),
+      WPU: Math.random(),
+      DRG: Math.random(),
+      ZKL: 0,
+    } };
+};

09-decoupling-features-using-events/src/shared/infrastructure/cqs/cqs.swr.ts

@@ -1,17 +1,21 @@
 import { useState } from "react";
 import useSWR from "swr";
 
-type RequestId = List<Unique<string>>;
-
 export const asCommand =
-  <F extends AsyncFn>(command: F, requestId: RequestId): Provider<Command<F>> =>
-  () => {
-    const [run, setRun] = useState(false);
-    const { data, error, isLoading } = useSWR(run ? requestId : null, command);
+  <F extends AsyncFn>(command: F, _requestId: string): Provider<Command<F>> =>
+    () => {
+      const [requestId, setRequestId] = useState(_requestId);
+      console.log(`Command with requestId: ${requestId}`);
+      const { data, error, isLoading } = useSWR(requestId, command);
 
-    const execute = (() => setRun(true)) as F;
-    const status: Status = isLoading ? "pending" : !!error ? "failure" : "idle";
-    const result = { is: status, data, error };
+      const execute = (() => {
+        const recycleId = `${_requestId}_${Date.now()}`;
+        console.log(`Recycling requestId: ${recycleId}`);
+        setRequestId(recycleId)
+      }) as F;
+      const status: Status = isLoading ? "pending" : !!error ? "failure" : "idle";
+      const result = { is: status, data, error };
+      console.log(`Command result:`, result);
 
-    return { execute, result };
-  };
+      return { execute, result };
+    };