refactor(tech-radar): requested changes

plugins/tech-radar/src/components/RadarComponent.tsx

@@ -14,44 +14,38 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Progress, useApi, errorApiRef, ErrorApi } from '@backstage/core';
+import { useAsync } from 'react-use';
 import Radar from '../components/Radar';
 import { TechRadarComponentProps, TechRadarLoaderResponse } from '../api';
 import getSampleData from '../sampleData';
 
 const useTechRadarLoader = (props: TechRadarComponentProps) => {
   const errorApi = useApi<ErrorApi>(errorApiRef);
-  const [error, setError] = useState<Error>();
-  const [loading, setLoading] = useState<boolean>(true);
-  const [data, setData] = useState<TechRadarLoaderResponse>();
 
   const { getData } = props;
 
-  useEffect(() => {
-    if (!getData) {
-      return;
+  const state = useAsync(async () => {
+    if (getData) {
+      const response: TechRadarLoaderResponse = await getData();
+      return response;
     }
-
-    getData()
-      .then((payload: TechRadarLoaderResponse) => {
-        setLoading(false);
-        setData(payload);
-        setError(undefined);
-      })
-      .catch((err: Error) => {
-        errorApi.post(err);
-        setLoading(false);
-        setError(err);
-        setData(undefined);
-      });
+    return undefined;
   }, [getData, errorApi]);
 
-  return { data, loading, error };
+  useEffect(() => {
+    const { error } = state;
+    if (error) {
+      errorApi.post(error);
+    }
+  }, [errorApi, state]);
+
+  return state;
 };
 
 const RadarComponent = (props: TechRadarComponentProps): JSX.Element => {
-  const { loading, error, data } = useTechRadarLoader(props);
+  const { loading, error, value: data } = useTechRadarLoader(props);
 
   return (
     <>

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -30,7 +30,20 @@ export type Props = {
   onEntryMouseLeave?: (entry: Entry) => void;
 };
 
-const ringStyles = {
+const useStyles = makeStyles<Theme>(theme => ({
+  quadrant: {
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+    pointerEvents: 'none',
+  },
+  quadrantHeading: {
+    pointerEvents: 'none',
+    userSelect: 'none',
+    marginTop: 0,
+    marginBottom: theme.spacing(8 / (18 * 0.375)),
+    fontSize: '18px',
+  },
   rings: {
     columns: 3,
   },
@@ -44,7 +57,7 @@ const ringStyles = {
     pointerEvents: 'none',
     userSelect: 'none',
     marginTop: 0,
-    marginBottom: 'calc(12px * 0.375)',
+    marginBottom: theme.spacing(8 / (12 * 0.375)),
     fontSize: '12px',
     fontWeight: 800,
   },
@@ -57,25 +70,6 @@ const ringStyles = {
     '-webkit-font-feature-settings': 'pnum',
     'font-feature-settings': 'pnum',
   },
-};
-
-const quadrantStyles = {
-  quadrant: {
-    height: '100%',
-    width: '100%',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-  },
-  quadrantHeading: {
-    pointerEvents: 'none',
-    userSelect: 'none',
-    marginTop: 0,
-    marginBottom: 'calc(18px * 0.375)',
-    fontSize: '18px',
-  },
-};
-
-const entryStyle = {
   entry: {
     pointerEvents: 'none',
     userSelect: 'none',
@@ -84,12 +78,6 @@ const entryStyle = {
   entryLink: {
     pointerEvents: 'none',
   },
-};
-
-const useStyles = makeStyles<Theme>(() => ({
-  ringStyles,
-  quadrantStyles,
-  entryStyle,
 }));
 
 const RadarLegend = (props: Props): JSX.Element => {
@@ -126,7 +114,7 @@ const RadarLegend = (props: Props): JSX.Element => {
     return (
       <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
         <h3 className={classes.ringHeading}>{ring.name}</h3>
-        {!entries.length ? (
+        {entries.length === 0 ? (
           <p>(empty)</p>
         ) : (
           <ol className={classes.ringList}>

plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx

@@ -71,7 +71,7 @@ const RadarPlot = (props: Props): JSX.Element => {
             x={entry.x || 0}
             y={entry.y || 0}
             color={entry.color || ''}
-            value={((entry && entry.index) || 0) + 1}
+            value={(entry?.index || 0) + 1}
             url={entry.url}
             moved={entry.moved}
             onMouseEnter={onEntryMouseEnter && (() => onEntryMouseEnter(entry))}
@@ -80,9 +80,9 @@ const RadarPlot = (props: Props): JSX.Element => {
         ))}
         <RadarBubble
           visible={!!activeEntry}
-          text={activeEntry ? activeEntry.title : ''}
-          x={activeEntry ? activeEntry.x || 0 : 0}
-          y={activeEntry ? activeEntry.y || 0 : 0}
+          text={activeEntry?.title || ''}
+          x={activeEntry?.x || 0}
+          y={activeEntry?.y || 0}
         />
       </g>
     </g>