fix: address review comments

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

plugins/signals-react/README.md

@@ -20,15 +20,12 @@ of connections to the backend and also to allow multiple subscriptions using the
 Example of using the hook:
 
 ```ts
-import { useSignalApi } from '@backstage/plugin-signals-react';
+import { useSignal } from '@backstage/plugin-signals-react';
 
-const [message, setMessage] = useState<JsonObject | undefined>(undefined);
-useSignalApi('myplugin:topic', message => {
-  setMessage(message);
-});
+const { lastSignal } = useSignal('myplugin:topic');
 ```
 
-Whenever backend publishes new message to the topic `myplugin:topic`, the state of this component is changed.
+Whenever backend publishes new message to the topic `myplugin:topic`, the lastSignal is changed.
 
 ## Using API directly
 
@@ -39,9 +36,12 @@ subscriptions.
 import { signalsApiRef } from '@backstage/plugin-signals-react';
 
 const signals = useApi(signalsApiRef);
-signals.subscribe('myplugin:topic', (message: JsonObject) => {
-  console.log(message);
-});
+const { unsubscribe } = signals.subscribe(
+  'myplugin:topic',
+  (message: JsonObject) => {
+    console.log(message);
+  },
+);
 // Remember to unsubscribe
-signals.unsubscribe('myplugin:topic');
+unsubscribe();
 ```

plugins/signals-react/api-report.md

@@ -8,18 +8,21 @@ import { JsonObject } from '@backstage/types';
 
 // @public (undocumented)
 export type SignalApi = {
-  subscribe(topic: string, onMessage: (message: JsonObject) => void): string;
-  unsubscribe(subscription: string): void;
+  subscribe(
+    topic: string,
+    onMessage: (message: JsonObject) => void,
+  ): {
+    unsubscribe: () => void;
+  };
 };
 
 // @public (undocumented)
 export const signalApiRef: ApiRef<SignalApi>;
 
 // @public (undocumented)
-export const useSignalApi: (
-  topic: string,
-  onMessage: (message: JsonObject) => void,
-) => void;
+export const useSignal: (topic: string) => {
+  lastSignal: JsonObject | null;
+};
 
 // (No @packageDocumentation comment for this package)
 ```

plugins/signals-react/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/types": "workspace:^",
-    "@material-ui/core": "^4.9.13"
+    "@material-ui/core": "^4.12.4"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"
@@ -34,8 +34,8 @@
   "devDependencies": {
     "@backstage/cli": "workspace:^",
     "@backstage/test-utils": "workspace:^",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^12.1.3"
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0"
   },
   "files": [
     "dist"

plugins/signals-react/src/api/SignalApi.ts

@@ -23,7 +23,8 @@ export const signalApiRef = createApiRef<SignalApi>({
 
 /** @public */
 export type SignalApi = {
-  subscribe(topic: string, onMessage: (message: JsonObject) => void): string;
-
-  unsubscribe(subscription: string): void;
+  subscribe(
+    topic: string,
+    onMessage: (message: JsonObject) => void,
+  ): { unsubscribe: () => void };
 };

plugins/signals-react/src/hooks/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './useSignalApi';
+export * from './useSignal';

plugins/signals-react/src/hooks/useSignal.ts

@@ -19,27 +19,26 @@ import { JsonObject } from '@backstage/types';
 import { useEffect, useState } from 'react';
 
 /** @public */
-export const useSignalApi = (
-  topic: string,
-  onMessage: (message: JsonObject) => void,
-) => {
+export const useSignal = (topic: string) => {
   const apiHolder = useApiHolder();
   // Use apiHolder instead useApi in case signalApi is not available in the
   // backstage instance this is used
   const signals = apiHolder.get(signalApiRef);
-  const [subscription, setSubscription] = useState<null | string>(null);
+  const [lastSignal, setLastSignal] = useState<JsonObject | null>(null);
   useEffect(() => {
-    if (signals && !subscription) {
-      const sub = signals.subscribe(topic, onMessage);
-      setSubscription(sub);
+    let unsub: null | (() => void) = null;
+    if (signals) {
+      const { unsubscribe } = signals.subscribe(topic, (msg: JsonObject) => {
+        setLastSignal(msg);
+      });
+      unsub = unsubscribe;
     }
-  }, [subscription, signals, onMessage, topic]);
-
-  useEffect(() => {
     return () => {
-      if (signals && subscription) {
-        signals.unsubscribe(subscription);
+      if (signals && unsub) {
+        unsub();
       }
     };
-  }, [subscription, signals, topic]);
+  }, [signals, topic]);
+
+  return { lastSignal };
 };