enable no-restricted-syntax rule

.eslintrc.js

@@ -8,7 +8,6 @@ module.exports = {
   plugins: ["prettier"],
   rules: {
     "no-await-in-loop": "warn",
-    "no-restricted-syntax": "warn",
     "no-param-reassign": "warn",
     "no-underscore-dangle": "warn",
     "import/prefer-default-export": "off",

src/components/AlbumLocationMap.tsx

@@ -1,20 +1,15 @@
 import React from "react";
 import { Map, Marker, TileLayer } from "react-leaflet";
 
+import { PartialPhotoWithLocation, getAveragedCoordinates } from "../util/util";
+
 type Props = {
-  photos: any[];
+  photos: PartialPhotoWithLocation[];
 };
 
 export function AlbumLocationMap({ photos }: Readonly<Props>) {
-  const photosWithGPS = photos.filter(photo => photo.exif_gps_lon !== null && photo.exif_gps_lon);
-  let sumLat = 0;
-  let sumLon = 0;
-  for (const element of photosWithGPS) {
-    sumLat += parseFloat(element.exif_gps_lat);
-    sumLon += parseFloat(element.exif_gps_lon);
-  }
-  const avgLat = sumLat / photosWithGPS.length;
-  const avgLon = sumLon / photosWithGPS.length;
+  const photosWithGPS = photos.filter(photo => photo.exif_gps_lon !== null && photo.exif_gps_lat !== null);
+  const { avgLat, avgLon } = getAveragedCoordinates(photosWithGPS);
 
   const markers = photosWithGPS.map(photo => (
     <Marker key={`marker-${photo.id}`} position={[photo.exif_gps_lat, photo.exif_gps_lon]} />

src/components/ChunkedUploadButton.tsx

@@ -73,8 +73,7 @@ export function ChunkedUploadButton() {
     reader.onload = () => {
       const buffer = reader.result;
       // @ts-ignore
-      const md5 = MD5(buffer).toString();
-      return md5;
+      return MD5(buffer).toString();
     };
     return "";
   };
@@ -123,7 +122,7 @@ export function ChunkedUploadButton() {
         total += fileSize;
       });
       setTotalSize(total);
-      for (const file of acceptedFiles) {
+      acceptedFiles.forEach(async file => {
         const currentUploadedFileSizeStartValue = currentUploadedFileSize;
         // Check if the upload already exists via the hash of the file
         const hash = (await calculateMD5(file)) + userSelfDetails.id;
@@ -152,7 +151,7 @@ export function ChunkedUploadButton() {
           currentUploadedFileSize += file.size;
           setCurrentSize(currentUploadedFileSize);
         }
-      }
+      });
     },
   });
 

src/components/LocationMap.tsx

@@ -2,34 +2,22 @@ import { Box, Image, Loader } from "@mantine/core";
 import React, { useEffect, useRef } from "react";
 import { Map, Marker, Popup, TileLayer } from "react-leaflet";
 
+import { getAveragedCoordinates } from "../util/util";
+
 type Props = {
   photos: any[];
 };
 
 export function LocationMap({ photos }: Props) {
   const mapRef = useRef<Map>(null);
-
   const height = "200px";
 
   useEffect(() => {
     mapRef.current?.leafletElement.invalidateSize();
   }, [height, photos]);
 
-  const photosWithGPS = photos.filter(photo => {
-    if (photo.exif_gps_lon !== null && photo.exif_gps_lon) {
-      return true;
-    }
-    return false;
-  });
-
-  let sumLat = 0;
-  let sumLon = 0;
-  for (const element of photosWithGPS) {
-    sumLat += parseFloat(element.exif_gps_lat);
-    sumLon += parseFloat(element.exif_gps_lon);
-  }
-  const avgLat = sumLat / photosWithGPS.length;
-  const avgLon = sumLon / photosWithGPS.length;
+  const photosWithGPS = photos.filter(photo => photo.exif_gps_lon !== null && photo.exif_gps_lon);
+  const { avgLat, avgLon } = getAveragedCoordinates(photosWithGPS);
 
   const markers = photosWithGPS.map(photo => (
     <Marker key={photo.image_hash} position={[photo.exif_gps_lat, photo.exif_gps_lon]}>

src/util/util.test.ts

@@ -1,7 +1,7 @@
 import type { DatePhotosGroup } from "../actions/photosActions.types";
 import type { DirTree } from "../api_client/dir-tree";
 import i18n from "../i18n";
-import { EMAIL_REGEX, formatDateForPhotoGroups, fuzzyMatch, mergeDirTree } from "./util";
+import { EMAIL_REGEX, formatDateForPhotoGroups, fuzzyMatch, getAveragedCoordinates, mergeDirTree } from "./util";
 
 describe("email regex test", () => {
   test("good samples should match", () => {
@@ -228,6 +228,18 @@ describe("adjust date for photo list group", () => {
       },
     ];
     const actual = formatDateForPhotoGroups(photoGroups);
-    expect(actual[0].date).toEqual(i18n.t<string>("sidemenu.withouttimestamp"));
+    expect(actual[0].date).toEqual(i18n.t("sidemenu.withouttimestamp"));
+  });
+});
+
+describe("getAveragedCoordinates", () => {
+  test("should return average coordinates", () => {
+    const actual = getAveragedCoordinates([
+      { id: "1", exif_gps_lat: 1, exif_gps_lon: 2 },
+      { id: "2", exif_gps_lat: 3, exif_gps_lon: 4 },
+      { id: "3", exif_gps_lat: -3, exif_gps_lon: 6 },
+      { id: "4", exif_gps_lat: 2, exif_gps_lon: 1 },
+    ]);
+    expect(actual).toEqual({ avgLat: 0.75, avgLon: 3.25 });
   });
 });

src/util/util.ts

@@ -102,3 +102,22 @@ export function mergeDirTree(tree: DirTree[], branch: DirTree): DirTree[] {
     return folder;
   });
 }
+
+export type PartialPhotoWithLocation = {
+  id: string;
+  exif_gps_lat: number;
+  exif_gps_lon: number;
+  [key: string]: any;
+};
+
+export function getAveragedCoordinates(photos: PartialPhotoWithLocation[]) {
+  const { lat, lon } = photos.reduce(
+    (acc, photo) => {
+      acc.lat += parseFloat(`${photo.exif_gps_lat}`);
+      acc.lon += parseFloat(`${photo.exif_gps_lon}`);
+      return acc;
+    },
+    { lat: 0, lon: 0 }
+  );
+  return { avgLat: lat / photos.length, avgLon: lon / photos.length };
+}