linkwarden/apps/web/components/ModalContent/BulkEditLinksModal.tsx

import React, { useState } from "react";
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection";
import useLinkStore from "@/store/links";
import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
import toast from "react-hot-toast";
import Modal from "../Modal";
import { useTranslation } from "next-i18next";
import { useBulkEditLinks } from "@linkwarden/router/links";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator";

type Props = {
  onClose: Function;
};

export default function BulkEditLinksModal({ onClose }: Props) {
  const { t } = useTranslation();
  const { selectedIds, clearSelected, selectionCount } = useLinkStore();
  const [submitLoader, setSubmitLoader] = useState(false);
  const [removePreviousTags, setRemovePreviousTags] = useState(false);
  const [updatedValues, setUpdatedValues] = useState<
    Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">
  >({ tags: [] });

  const updateLinks = useBulkEditLinks();
  const setCollection = (e: any) => {
    const collectionId = e?.value || null;
    setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
  };

  const setTags = (e: any) => {
    const tags = e.map((tag: any) => ({ name: tag.label }));
    setUpdatedValues((prevValues) => ({ ...prevValues, tags }));
  };

  const submit = async () => {
    if (!submitLoader) {
      setSubmitLoader(true);

      const load = toast.loading(t("updating"));

      const links = Object.keys(selectedIds).map((k) => ({
        id: Number(k),
      }));

      await updateLinks.mutateAsync(
        {
          links,
          newData: updatedValues,
          removePreviousTags,
        },
        {
          onSettled: (data, error) => {
            setSubmitLoader(false);
            toast.dismiss(load);

            if (error) {
              toast.error(error.message);
            } else {
              clearSelected();
              onClose();
              toast.success(t("updated"));
            }
          },
        }
      );
    }
  };

  return (
    <Modal toggleModal={onClose}>
      <p className="text-xl font-thin">
        {selectionCount === 1
          ? t("edit_link")
          : t("edit_links", { count: selectionCount })}
      </p>
      <Separator className="my-3" />

      <div className="mt-5">
        <div className="grid sm:grid-cols-2 gap-3">
          <div>
            <p className="mb-2">{t("move_to_collection")}</p>
            <CollectionSelection
              showDefaultValue={false}
              onChange={setCollection}
              creatable={false}
            />
          </div>

          <div>
            <p className="mb-2">{t("add_tags")}</p>
            <TagSelection onChange={setTags} />
          </div>
        </div>
        <div className="sm:ml-auto w-1/2 p-3">
          <label className="flex items-center gap-2 ">
            <input
              type="checkbox"
              className="checkbox checkbox-primary"
              checked={removePreviousTags}
              onChange={(e) => setRemovePreviousTags(e.target.checked)}
            />
            {t("remove_previous_tags")}
          </label>
        </div>
      </div>

      <div className="flex justify-end items-center mt-5">
        <Button variant="accent" onClick={submit}>
          {t("save_changes")}
        </Button>
      </div>
    </Modal>
  );
}