nysoure/frontend/src/pages/create_collection_page.tsx

import { useState } from "react";
import { useTranslation } from "../utils/i18n";
import { MdOutlineImage, MdOutlineInfo } from "react-icons/md";
import showToast from "../components/toast";
import { network } from "../network/network";
import { useNavigate } from "react-router";

export default function CreateCollectionPage() {
  const [title, setTitle] = useState<string>("");
  const [article, setArticle] = useState<string>("");
  const [isLoading, setLoading] = useState(false);
  const [isUploadingimage, setUploadingImage] = useState(false);
  const { t } = useTranslation();
  const navigate = useNavigate();

  const handleAddImage = () => {
    if (isUploadingimage) {
      return;
    }
    const input = document.createElement("input");
    input.type = "file";
    input.accept = "image/*";
    input.multiple = true;
    input.onchange = async (e) => {
      const files = (e.target as HTMLInputElement).files;
      if (files) {
        for (let i = 0; i < files.length; i++) {
          if (files[i].size > 8 * 1024 * 1024) {
            showToast({
              message: t("Image size exceeds 5MB limit"),
              type: "error",
            });
            return;
          }
        }
        setUploadingImage(true);
        const imageIds: number[] = [];
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const res = await network.uploadImage(file);
          if (res.success) {
            imageIds.push(res.data!);
          } else {
            showToast({ message: res.message, type: "error" });
            setUploadingImage(false);
            return;
          }
        }
        if (imageIds.length > 0) {
          setArticle((prev) => {
            return (
              prev +
              "\n" +
              imageIds.map((id) => `![Image](/api/image/${id})`).join(" ")
            );
          });
        }
        setUploadingImage(false);
      }
    };
    input.click();
  };

  const createCollection = async () => {
    if (isLoading) {
      return;
    }
    if (title.trim() === "" || article.trim() === "") {
      showToast({
        message: t("Title and description cannot be empty"),
        type: "error",
      });
      return;
    }
    setLoading(true);
    const res = await network.createCollection(title, article);
    if (res.success) {
      showToast({
        message: t("Collection created successfully"),
        type: "success",
      });
      navigate(`/collection/${res.data?.id}`, { replace: true });
    } else {
      showToast({ message: res.message, type: "error" });
      setLoading(false);
    }
  };

  return (
    <div className="bg-base-100-tr82 shadow m-4 p-4 rounded-lg">
      <h1 className="text-xl font-bold">{t("Create Collection")}</h1>
      <div className="mt-4">
        <label className="block">{t("Title")}</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="input mt-1 w-full"
        />
        <label className="mt-8 flex items-center">
          {t("Description")}
          <span className="w-2"></span>
          <div className="badge badge-info badge-soft badge-sm">
            <MdOutlineInfo className="inline-block" size={16} />
            <span className="text-sm">Markdown</span>
          </div>
        </label>
        <textarea
          value={article}
          onChange={(e) => setArticle(e.target.value)}
          className="textarea mt-1 w-full min-h-80"
        />
      </div>
      <div className={"flex items-center mt-4"}>
        <button
          className={"btn btn-sm btn-circle mr-2"}
          onClick={handleAddImage}
        >
          {isUploadingimage ? (
            <span className={"loading loading-spinner loading-sm"}></span>
          ) : (
            <MdOutlineImage size={18} />
          )}
        </button>
        <span className={"grow"} />
        <button
          onClick={createCollection}
          className={`btn btn-primary h-8 text-sm mx-2 ${article === "" && "btn-disabled"}`}
        >
          {isLoading ? (
            <span className={"loading loading-spinner loading-sm"}></span>
          ) : null}
          {t("Submit")}
        </button>
      </div>
    </div>
  );
}