biggus-dickus/web/src/vocab/vocabulary-list.tsx

import { useState, type FormEvent } from "react";
import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next";

import { useVocabularies, useCreateVocabulary, useRenameVocabulary, useDeleteVocabulary } from "../api/queries";
import { useLang } from "../lib/use-lang";
import { rowStateClass } from "../lib/class-recipes";
import { byKey } from "../lib/sort";
import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
import { MutationError } from "../components/mutation-error";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ListSkeleton } from "@/components/ui/skeletons";

export function VocabularyList() {
  const { t } = useTranslation();

  const lang = useLang();

  const { data, isLoading, isError } = useVocabularies();

  const create = useCreateVocabulary();
  const renameVocabulary = useRenameVocabulary();
  const deleteVocabulary = useDeleteVocabulary();

  const [key, setKey] = useState("");
  const [filter, setFilter] = useState("");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [draftKey, setDraftKey] = useState("");

  const onCreate = (event: FormEvent) => {
    event.preventDefault();

    if (!key.trim()) return;

    create.mutate({ key: key.trim() }, { onSuccess: () => setKey("") });
  };

  const q = filter.trim().toLowerCase();
  const rows = [...(data ?? [])]
    .filter((v) => !q || v.key.toLowerCase().includes(q))
    .sort(byKey(lang));

  return (
    <div className="flex h-full flex-col">
      <form onSubmit={onCreate} className="space-y-1 border-b p-3">
        <div className="text-sm font-medium">{t("vocab.newVocabulary")}</div>
        <Label htmlFor="vocab-key">{t("vocab.key")}</Label>
        <div className="flex gap-2">
          <Input
            id="vocab-key"
            value={key}
            onChange={(e) => setKey(e.target.value)}
          />
          <Button type="submit" size="sm" disabled={create.isPending}>
            {t("vocab.create")}
          </Button>
        </div>
        <MutationError error={create.error} />
      </form>
      <div className="border-b p-2">
        <Input
          aria-label={t("common.filter")}
          placeholder={t("common.filter")}
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        />
      </div>
      {isLoading ? (
        <ListSkeleton className="flex-1 overflow-auto" />
      ) : (
        <ul className="flex-1 overflow-auto">
          {isError && (
            <li className="p-3 text-sm text-destructive">{t("vocab.loadError")}</li>
          )}
          {data?.length === 0 && (
            <li className="p-3 text-sm text-muted-foreground">{t("vocab.empty")}</li>
          )}
          {data && data.length > 0 && rows.length === 0 && (
            <li className="p-3 text-sm text-muted-foreground">{t("common.noMatches")}</li>
          )}
          {rows.map((v) => (
          <li key={v.id} className="flex items-center gap-1 border-b pr-2">
            {editingId === v.id ? (
              <form
                className="flex flex-1 flex-wrap gap-1 p-1"
                onSubmit={(e) => {
                  e.preventDefault();
                  if (!draftKey.trim()) return;
                  renameVocabulary.mutate(
                    { id: v.id, key: draftKey.trim() },
                    { onSuccess: () => setEditingId(null) },
                  );
                }}
              >
                <Input
                  aria-label={t("vocab.key")}
                  value={draftKey}
                  onChange={(e) => setDraftKey(e.target.value)}
                />
                <Button type="submit" size="sm" disabled={renameVocabulary.isPending}>
                  {t("actions.save")}
                </Button>
                <Button type="button" variant="ghost" size="sm" onClick={() => setEditingId(null)}>
                  {t("form.cancel")}
                </Button>
                <MutationError error={renameVocabulary.error} />
              </form>
            ) : (
              <>
                <NavLink
                  to={`/vocabularies/${v.id}`}
                  className={({ isActive }) =>
                    `block flex-1 px-3 py-2 text-sm ${rowStateClass(isActive)}`
                  }
                >
                  {v.key}
                </NavLink>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => { setEditingId(v.id); setDraftKey(v.key); }}
                >
                  {t("actions.rename")}
                </Button>
                <DeleteConfirmDialog
                  description={t("actions.confirmDeleteVocabulary")}
                  onConfirm={() => deleteVocabulary.mutateAsync(v.id)}
                />
              </>
            )}
          </li>
          ))}
        </ul>
      )}
    </div>
  );
}