79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
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 "@/types/global";
|
|
import toast from "react-hot-toast";
|
|
import Modal from "../Modal";
|
|
|
|
type Props = {
|
|
onClose: Function;
|
|
};
|
|
|
|
export default function BulkEditLinksModal({ onClose }: Props) {
|
|
const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
|
|
const [submitLoader, setSubmitLoader] = useState(false);
|
|
const [updatedValues, setUpdatedValues] = useState<Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">>({ tags: [] });
|
|
|
|
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("Updating...");
|
|
|
|
const response = await updateLinks(selectedLinks, updatedValues);
|
|
|
|
toast.dismiss(load);
|
|
|
|
if (response.ok) {
|
|
toast.success(`Updated!`);
|
|
onClose();
|
|
} else toast.error(response.data as string);
|
|
|
|
setSelectedLinks([]);
|
|
setSubmitLoader(false);
|
|
onClose();
|
|
return response;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal toggleModal={onClose}>
|
|
<p className="text-xl font-thin">Edit Link</p>
|
|
<div className="divider mb-3 mt-1"></div>
|
|
<div className="mt-5">
|
|
<div className="grid sm:grid-cols-2 gap-3">
|
|
<div>
|
|
<p className="mb-2">Collection</p>
|
|
<CollectionSelection onChange={setCollection} />
|
|
</div>
|
|
|
|
<div>
|
|
<p className="mb-2">Tags</p>
|
|
<TagSelection onChange={setTags} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end items-center mt-5">
|
|
<button
|
|
className="btn btn-accent dark:border-violet-400 text-white"
|
|
onClick={submit}
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|