futz

Author: mlc

src/Results/PositionCell.tsx

@@ -1,4 +1,5 @@
-import { FunctionComponent } from 'preact';
+import type { FunctionComponent } from 'preact';
+import { useCallback } from 'preact/compat';
 import type { Point } from 'geojson';
 import Icon from '../Icon';
 import { formatCoord } from '../util';
@@ -14,16 +15,13 @@ const PositionCell: FunctionComponent<Props> = ({ coord }) => {
     query: [coord.coordinates[1], coord.coordinates[0]].join(','),
   });
   const url = 'https://www.google.com/maps/search/?' + params.toString();
+  const onCopyClick = useCallback(() => {
+    navigator.clipboard.writeText(stringCoord).catch(console.error);
+  }, [stringCoord]);
   return (
     <td className="position">
       <a href={url}>{stringCoord}</a>
-      <Icon
-        name="copy"
-        label="Copy coordinates"
-        onClick={() => {
-          navigator.clipboard.writeText(stringCoord).catch(console.error);
-        }}
-      />
+      <Icon name="copy" label="Copy coordinates" onClick={onCopyClick} />
     </td>
   );
 };

src/Results/index.tsx

@@ -1,21 +1,23 @@
 import { FunctionComponent } from 'preact';
-import { useMemo } from 'preact/compat';
 import { decorate } from '../computation';
 import { selectExtraGc, selectGameConfig } from '../gameConfig';
-import { useAppSelector } from '../store';
+import { createAppSelector, useAppSelector } from '../store';
 import Grid from './Grid';
 
-const Results: FunctionComponent = () => {
-  const game = useAppSelector(selectGameConfig);
-  const extraGc = useAppSelector(selectExtraGc);
-  const photos = useAppSelector((state) => state.data.photos);
-  const results = useMemo(() => {
+const selectResults = createAppSelector(
+  [selectGameConfig, (state) => state.data.photos],
+  (game, photos) => {
     if (game && photos && photos.features.length > 0) {
       return decorate(game, photos);
     } else {
       return null;
     }
-  }, [game, photos]);
+  }
+);
+
+const Results: FunctionComponent = () => {
+  const extraGc = useAppSelector(selectExtraGc);
+  const results = useAppSelector(selectResults);
   if (results && results.features.length > 0) {
     return (
       <>

src/parseData.ts

@@ -14,7 +14,13 @@ import { kml } from './togeojson';
 const readFile = (f: Blob): Promise<string> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.addEventListener('load', () => resolve(reader.result as string));
+    reader.addEventListener('load', () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject('Could not read data');
+      }
+    });
     reader.addEventListener('error', (e) => reject('Could not read file'));
     reader.readAsText(f);
   });