more eslint fixed (#387)

* enable react/no-unstable-nested-components rule * enable react/no-unused-class-component-methods rule * enable react/no-array-index-key rule * enable react/destructuring-assignment rule * enable react/sort-comp rule
LibrePhotos · Nov 4, 2023 · b060232 · b060232
1 parent e067ea4
commit b060232
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 142 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,15 +16,9 @@ module.exports = {
     "import/prefer-default-export": "off",
     "import/no-cycle": "warn",
     "react/prop-types": "warn",
-    "react/destructuring-assignment": "warn",
-    "react/sort-comp": "warn",
-    "react/no-access-state-in-setstate": "warn",
-    "react/jsx-props-no-spreading": "warn",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/no-unused-class-component-methods": "warn",
-    "react/no-array-index-key": "warn",
+    "react/jsx-props-no-spreading": "off", // some Mantine components need to use spread operator
+    "react-hooks/exhaustive-deps": "off", // at this stage it is too risky to enable this
     "react/require-default-props": "warn",
-    "react/no-unstable-nested-components": "warn",
   },
   parserOptions: {
     project: "./tsconfig.eslint.json",

diff --git a/src/components/AlbumLocationMap.tsx b/src/components/AlbumLocationMap.tsx
@@ -5,14 +5,8 @@ type Props = {
   photos: any[];
 };
 
-export function AlbumLocationMap(props: Readonly<Props>) {
-  const photosWithGPS = props.photos.filter(photo => {
-    if (photo.exif_gps_lon !== null && photo.exif_gps_lon) {
-      return true;
-    }
-    return false;
-  });
-
+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) {
@@ -22,8 +16,8 @@ export function AlbumLocationMap(props: Readonly<Props>) {
   const avgLat = sumLat / photosWithGPS.length;
   const avgLon = sumLon / photosWithGPS.length;
 
-  const markers = photosWithGPS.map((photo, idx) => (
-    <Marker key={`marker-${photo.id}-${idx}`} position={[photo.exif_gps_lat, photo.exif_gps_lon]} />
+  const markers = photosWithGPS.map(photo => (
+    <Marker key={`marker-${photo.id}`} position={[photo.exif_gps_lat, photo.exif_gps_lon]} />
   ));
   if (photosWithGPS.length > 0) {
     return (

diff --git a/src/components/LocationMap.tsx b/src/components/LocationMap.tsx
@@ -6,16 +6,16 @@ type Props = {
   photos: any[];
 };
 
-export function LocationMap(props: Props) {
+export function LocationMap({ photos }: Props) {
   const mapRef = useRef<Map>(null);
 
   const height = "200px";
 
   useEffect(() => {
     mapRef.current?.leafletElement.invalidateSize();
-  }, [height, props]);
+  }, [height, photos]);
 
-  const photosWithGPS = props.photos.filter(photo => {
+  const photosWithGPS = photos.filter(photo => {
     if (photo.exif_gps_lon !== null && photo.exif_gps_lon) {
       return true;
     }

diff --git a/src/components/charts/FaceClusterGraph.tsx b/src/components/charts/FaceClusterGraph.tsx
@@ -13,7 +13,7 @@ type Props = {
   height: number;
 };
 
-export function FaceClusterGraph(props: Props) {
+export function FaceClusterGraph({ height }: Props) {
   const [hintValue, setHintValue] = useState<any>({} as any);
   const { t } = useTranslation();
   const { observe: observeChange, width } = useDimensions({
@@ -30,8 +30,8 @@ export function FaceClusterGraph(props: Props) {
 
   const personNames = [...new Set(facesVis.map((el: any) => el.person_name))];
 
-  const mappedScatter = personNames.map((person_name, idx) => {
-    const thisPersonVis = facesVis.filter((el: any) => person_name === el.person_name);
+  const mappedScatter = personNames.map(name => {
+    const thisPersonVis = facesVis.filter((el: any) => name === el.person_name);
     const thisPersonData = thisPersonVis.map((el: any) => ({
       x: el.value.x,
       y: el.value.y,
@@ -44,7 +44,7 @@ export function FaceClusterGraph(props: Props) {
     return (
       <MarkSeries
         colorType="literal"
-        key={`cluster-marker-${idx}`}
+        key={`cluster-marker-${name}`}
         animation
         onValueClick={d => {
           setHintValue(d);
@@ -61,7 +61,7 @@ export function FaceClusterGraph(props: Props) {
           <Title order={3}> {t("facecluster")} </Title>
           <Text color="dimmed">{t("faceclusterexplanation")}</Text>
         </div>
-        <XYPlot width={width - 30} height={props.height}>
+        <XYPlot width={width - 30} height={height}>
           <HorizontalGridLines />
           <VerticalGridLines />
           {mappedScatter}

diff --git a/src/components/charts/SocialGraph.tsx b/src/components/charts/SocialGraph.tsx
@@ -12,7 +12,7 @@ type Props = {
   height: number;
 };
 
-export function SocialGraph(props: Props) {
+export function SocialGraph({ height }: Props) {
   const { colorScheme } = useMantineColorScheme();
   const { observe: observeChange, width } = useDimensions({
     onResize: ({ observe }) => {
@@ -49,7 +49,7 @@ export function SocialGraph(props: Props) {
       highlightColor: "orange",
       color: "#12939A",
     },
-    height: props.height,
+    height,
     width,
   };
   let graph;

diff --git a/src/components/charts/WordCloud.tsx b/src/components/charts/WordCloud.tsx
@@ -24,25 +24,27 @@ export function WordCloud(props: Props) {
   const { t } = useTranslation();
 
   const title = () => {
+    const { type } = props;
     let result = t("people");
-    if (props.type === "captions") {
+    if (type === "captions") {
       result = t("things");
     }
-    if (props.type === "location") {
+    if (type === "location") {
       result = t("places");
     }
     return result;
   };
 
   const series = () => {
+    const { type } = props;
     if (fetchedWordCloud) {
-      if (props.type === "people") {
+      if (type === "people") {
         return [{ data: wordCloud.people }];
       }
-      if (props.type === "captions") {
+      if (type === "captions") {
         return [{ data: wordCloud.captions }];
       }
-      if (props.type === "location") {
+      if (type === "location") {
         return [{ data: wordCloud.locations }];
       }
     }

diff --git a/src/components/locationLink.tsx b/src/components/locationLink.tsx
@@ -160,7 +160,7 @@ export function LocationLink(props: Props) {
                 );
               })}
 
-              {tree.descendants().map((node, key) => {
+              {tree.descendants().map(node => {
                 const rectWidth = 120;
                 const rectHeight = 30;
 
@@ -179,7 +179,7 @@ export function LocationLink(props: Props) {
                 }
 
                 return (
-                  <Group top={top} left={left} key={key}>
+                  <Group top={top} left={left} key={`${node.x}${node.y}`}>
                     {node.depth === 0 && (
                       <rect
                         height={rectHeight}

diff --git a/src/components/photolist/FavoritedOverlay.tsx b/src/components/photolist/FavoritedOverlay.tsx
@@ -1,9 +1,11 @@
 import React from "react";
 import { Star } from "tabler-icons-react";
 
+import { PigPhoto } from "../../actions/photosActions.types";
 import { useAppSelector } from "../../store/store";
 
-export function FavoritedOverlay(item: any) {
-  const { favorite_min_rating: rating } = useAppSelector(store => store.user.userSelfDetails);
-  return item.item.rating >= rating && <Star strokeWidth={3} style={{ marginRight: 4 }} color="#FFD700" />;
+export function FavoritedOverlay({ item }: { item: PigPhoto }) {
+  const { favorite_min_rating: favoriteMinRating } = useAppSelector(store => store.user.userSelfDetails);
+  const { rating } = item;
+  return rating >= favoriteMinRating && <Star strokeWidth={3} style={{ marginRight: 4 }} color="#FFD700" />;
 }
diff --git a/src/components/photolist/PhotoListView.tsx b/src/components/photolist/PhotoListView.tsx
@@ -348,7 +348,7 @@ function PhotoListViewComponent(props: Props) {
               getUrl={getUrl}
               toprightoverlay={FavoritedOverlay}
               bottomleftoverlay={VideoOverlay}
-              numberOfItems={numberOfItems || idx2hashRef.current.length}
+              numberOfItems={numberOfItems ?? idx2hashRef.current.length}
               updateItems={updateItems ? throttledUpdateItems : () => {}}
               updateGroups={updateGroups ? throttledUpdateGroups : () => {}}
               bgColor="inherit"