Merge pull request #13 from varun-raj/feat-smart-merge

Feat: Smart Merge

Author: varun-raj

.env.sample

@@ -1,7 +1,7 @@
 IMMICH_URL="" # Immich URL
 IMMICH_API_KEY="" # Immich API Key
 DB_USERNAME="" # Postgress Database Username
-DB_PASSWORD = "" # Postgres Database Password
-DB_HOST = "" # Postgres Host (IP address or hostname of the database)
-DB_PORT = "" # Postgres Port number (Default: 5432)
-DB_DATABASE_NAME = "" # Name of the database 
+DB_PASSWORD="" # Postgres Database Password
+DB_HOST="" # Postgres Host (IP address or hostname of the database)
+DB_PORT="" # Postgres Port number (Default: 5432)
+DB_DATABASE_NAME="" # Name of the database 

src/components/albums/potential-albums/PotentialAlbumsAssets.tsx

@@ -37,7 +37,6 @@ export default function PotentialAlbumsAssets() {
       isSelected: selectedIds.includes(p.id),
     }));
   }, [assets, selectedIds]);
-  console.log(images)
 
   const slides = useMemo(
     () =>

src/components/assets/missing-location/MissingLocationAssets.tsx

@@ -0,0 +1,109 @@
+import "yet-another-react-lightbox/styles.css";
+import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
+import { listPotentialAlbumsAssets } from "@/handlers/api/album.handler";
+import { IAsset } from "@/types/asset";
+import React, { useEffect, useMemo, useState } from "react";
+import { Gallery } from "react-grid-gallery";
+import Lightbox from "yet-another-react-lightbox";
+import Captions from "yet-another-react-lightbox/plugins/captions";
+import { CalendarArrowDown, CalendarArrowUp, Hourglass } from "lucide-react";
+import { useMissingLocationContext } from "@/contexts/MissingLocationContext";
+import { listMissingLocationAssets } from "@/handlers/api/asset.handler";
+import { formatDate, parseDate } from "@/helpers/date.helper";
+import { addDays } from "date-fns";
+
+export default function MissingLocationAssets() {
+  const { startDate, selectedIds, assets, updateContext } = useMissingLocationContext();
+
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const [index, setIndex] = useState(-1);
+
+  const fetchAssets = async () => {
+    if (!startDate) return;
+    setLoading(true);
+    updateContext({
+      assets: [],
+    })
+    return listMissingLocationAssets({ startDate })
+      .then((assets) => updateContext({ assets }))
+      .catch(setErrorMessage)
+      .finally(() => setLoading(false));
+  };
+
+  const images = useMemo(() => {
+    return assets.map((p) => ({
+      ...p,
+      src: p.url as string,
+      original: p.previewUrl as string,
+      width: p.exifImageWidth as number,
+      height: p.exifImageHeight as number,
+      isSelected: selectedIds.includes(p.id),
+    }));
+  }, [assets, selectedIds]);
+
+  const slides = useMemo(
+    () =>
+      images.map(({ original, width, height }) => ({
+        src: original,
+        width,
+        height,
+      })),
+    [images]
+  );
+
+  const handleClick = (idx: number) => setIndex(idx);
+
+  const handleSelect = (_idx: number, asset: IAsset) => {
+    const isPresent  =selectedIds.includes(asset.id)
+    if(isPresent){
+      updateContext({selectedIds:selectedIds.filter((id)=>id!==asset.id)})
+    }
+    else{
+      updateContext({selectedIds:[...selectedIds,asset.id]})
+    }
+
+  };
+
+  useEffect(() => {
+    if (startDate) fetchAssets();
+  }, [startDate]);
+
+  if (loading) return (
+    <div className="flex flex-col gap-2 h-full justify-center items-center w-full">
+      <Hourglass />
+      <p className="text-lg">Loading...</p>
+    </div>
+  )
+
+  if (!startDate) return (
+    <div className="flex flex-col gap-2 h-full justify-center items-center w-full">
+      <CalendarArrowUp />
+      <p className="text-lg">Please select a date</p>
+      <p className="text-sm">
+        When you select a date from the left, you will see all the orphan assets captured on that date
+      </p>
+    </div>
+  )
+  return (
+    <>
+      <Lightbox
+        slides={slides}
+        plugins={[Captions]}
+        open={index >= 0}
+        index={index}
+        close={() => setIndex(-1)}
+      />
+      <div className="w-full overflow-y-auto max-h-[calc(100vh-60px)]">
+        <Gallery
+          images={images}
+          onClick={handleClick}
+          enableImageSelection={true}
+          onSelect={handleSelect}
+
+        />
+      </div>
+    </>
+  );
+}

src/components/assets/missing-location/MissingLocationDateItem.tsx

@@ -0,0 +1,27 @@
+import { useMissingLocationContext } from "@/contexts/MissingLocationContext";
+
+import { IMissingLocationDatesResponse } from "@/handlers/api/asset.handler";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+interface IProps {
+  record: IMissingLocationDatesResponse;
+  onSelect: (date: string) => void;
+}
+export default function MissingLocationDateItem({ record, onSelect }: IProps) {
+  const { startDate } = useMissingLocationContext()
+  return (
+    <div
+      role="button"
+      onClick={() => onSelect(record.date)}
+      key={record.date}
+      className={
+        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100 px-4",
+        startDate === record.date ? "bg-zinc-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700" : "")
+      }
+    >
+      <p className="font-mono text-sm">{record.date}</p>
+      <p className="text-xs">{record.asset_count} W/O Location</p>
+    </div>
+  );
+}

src/components/assets/missing-location/MissingLocationDates.tsx

@@ -0,0 +1,43 @@
+import React, { use, useEffect, useState } from "react";
+import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
+import { IMissingLocationDatesResponse, listMissingLocationDates } from "@/handlers/api/asset.handler";
+import MissingLocationDateItem from "./MissingLocationDateItem";
+import { useMissingLocationContext } from "@/contexts/MissingLocationContext";
+
+export default function MissingLocationDates() {
+  const { updateContext } = useMissingLocationContext();
+  const [dateRecords, setDateRecords] = React.useState<
+    IMissingLocationDatesResponse[]
+  >([]);
+
+  const [loading, setLoading] = useState(false);
+
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const fetchData = async () => {
+    return listMissingLocationDates({})
+      .then(setDateRecords)
+      .catch(setErrorMessage)
+      .finally(() => setLoading(false));
+  };
+
+  const handleSelect = (date: string) => {
+    updateContext({ startDate: date });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className="overflow-y-auto min-w-[170px] py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  dark:bg-zinc-900 bg-gray-200 flex flex-col gap-2 px-2">
+      {dateRecords.map((record) => (
+        <MissingLocationDateItem
+          key={record.date}
+          record={record}
+          onSelect={handleSelect}
+        />
+      ))}
+    </div>
+  );
+}

src/components/people/PeopleList.tsx

@@ -38,7 +38,6 @@ export default function PeopleList() {
 
   const handleRemove = (person: IPerson) => {
     setPeople((prev) => prev.filter((p) => {
-      console.log(p.id, person.id, p.id !== person.id);
       return p.id !== person.id
     }));
   }
@@ -48,7 +47,6 @@ export default function PeopleList() {
     fetchData();
   }, [filters]);
 
-  console.log(people.length);
 
   const renderContent = () => {
     if (loading) return <Loader />;