more eslint fixes

.eslintrc.js

@@ -8,11 +8,8 @@ module.exports = {
   plugins: ["prettier"],
   rules: {
     "no-await-in-loop": "warn",
-    "no-restricted-syntax": "warn",
     "no-param-reassign": "warn",
     "no-underscore-dangle": "warn",
-    "no-return-assign": "warn",
-    "no-nested-ternary": "warn",
     "import/prefer-default-export": "off",
     "import/no-cycle": "warn",
     "react/prop-types": "warn",

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/components/locationLink.tsx

@@ -211,13 +211,7 @@ export function LocationLink(props: Props) {
                         }}
                       />
                     )}
-                    <text
-                      y={5}
-                      x={10}
-                      fontSize={11}
-                      style={{ pointerEvents: "none" }}
-                      fill={node.depth === 0 ? "white" : node.children ? "white" : "white"}
-                    >
+                    <text y={5} x={10} fontSize={11} style={{ pointerEvents: "none" }} fill="white">
                       {node.data.name}
                     </text>
                   </Group>

src/components/photolist/DefaultHeader.tsx

@@ -50,57 +50,65 @@ export function DefaultHeader(props: Props) {
     );
   };
 
-  const isScanView = () => {
-    // @ts-ignore
-    const path = route.location.pathname;
-    return path === "/";
-  };
+  const isScanView = () => route.location.pathname === "/";
 
   const { loading, numPhotosetItems, icon, numPhotos, title, additionalSubHeader, date, dayHeaderPrefix } = props;
 
+  function getHeaderContents() {
+    if (
+      !loading &&
+      auth.access &&
+      isScanView() &&
+      auth.access.is_admin &&
+      !user.scan_directory &&
+      numPhotosetItems < 1
+    ) {
+      return (
+        <div>
+          <p>{t("defaultheader.setup")}</p>
+          <Button
+            color="green"
+            onClick={() => {
+              setUserToEdit({ ...user });
+              setModalOpen(true);
+            }}
+          >
+            {t("defaultheader.gettingstarted")}
+          </Button>
+          <ModalUserEdit
+            onRequestClose={() => {
+              setModalOpen(false);
+            }}
+            userToEdit={userToEdit}
+            isOpen={modalOpen}
+            updateAndScan
+            userList={userList}
+            createNew={false}
+            firstTimeSetup
+          />
+        </div>
+      );
+    }
+
+    if (loading) {
+      return t("defaultheader.loading");
+    }
+
+    if (numPhotosetItems < 1) {
+      return t("defaultheader.noimages");
+    }
+
+    return null;
+  }
+
   if (loading || numPhotosetItems < 1) {
     return (
-      <div>
-        <Title order={4}>
-          <Group>
-            {!loading &&
-            auth.access &&
-            isScanView() &&
-            auth.access.is_admin &&
-            !user.scan_directory &&
-            numPhotosetItems < 1 ? (
-              <div>
-                <p>{t("defaultheader.setup")}</p>
-                <Button
-                  color="green"
-                  onClick={() => {
-                    setUserToEdit({ ...user });
-                    setModalOpen(true);
-                  }}
-                >
-                  {t("defaultheader.gettingstarted")}
-                </Button>
-              </div>
-            ) : loading ? (
-              t("defaultheader.loading")
-            ) : (
-              t("defaultheader.noimages")
-            )}
-            {loading ? <Loader size={25} /> : null}
-          </Group>
-        </Title>
-        <ModalUserEdit
-          onRequestClose={() => {
-            setModalOpen(false);
-          }}
-          userToEdit={userToEdit}
-          isOpen={modalOpen}
-          updateAndScan
-          userList={userList}
-          createNew={false}
-          firstTimeSetup
-        />
-      </div>
+      <Title order={4}>
+        <Group>
+          {getHeaderContents()}
+          {loading ? <Loader size={25} /> : null}
+        </Group>
+      </Title>
     );
   }
 

src/components/react-pig/components/Tile/Tile.jsx

@@ -49,19 +49,31 @@ const Tile = React.memo(
     // screenCenter is positioning logic for when the item is active and expanded
     const screenCenter = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
 
+    function getWidth(exp, sel) {
+      if (exp) {
+        return `${Math.ceil(calcWidth)}px`;
+      }
+      if (sel) {
+        return `${item.style.width - item.style.width * 0.1}px`;
+      }
+      return `${item.style.width}px`;
+    }
+
+    function getHeight(exp, sel) {
+      if (exp) {
+        return `${Math.ceil(calcHeight)}px`;
+      }
+      if (sel) {
+        return `${item.style.height - item.style.height * 0.1}px`;
+      }
+      return `${item.style.height}px`;
+    }
+
     const { width, height, transform, zIndex, marginLeft, marginRight, marginTop, marginBottom } = useSpring({
       transform: isExpanded ? screenCenter : gridPosition,
       zIndex: isExpanded ? 10 : 0, // 10 so that it takes a little longer before settling at 0
-      width: isExpanded
-        ? `${Math.ceil(calcWidth)}px`
-        : isSelected
-        ? `${item.style.width - item.style.width * 0.1}px`
-        : `${item.style.width}px`,
-      height: isExpanded
-        ? `${Math.ceil(calcHeight)}px`
-        : isSelected
-        ? `${item.style.height - item.style.height * 0.1}px`
-        : `${item.style.height}px`,
+      width: getWidth(isExpanded, isSelected),
+      height: getHeight(isExpanded, isSelected),
       marginLeft: isSelected && !isExpanded ? item.style.width * 0.05 : 0,
       marginRight: isSelected && !isExpanded ? item.style.width * 0.05 : 0,
       marginTop: isSelected && !isExpanded ? item.style.height * 0.05 : 0,

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 };
+}