Function CharactersPage

apps/frontend/src/components/character/page.tsx:23–268

()

}

export function CharactersPage() {
  const [characters, setCharacters] = useState<Character[]>([]);
  const [loading, setLoading] = useState(true);
  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
  const fetch = useFetch();
  const { toast } = useToast();

  const loadCharacters = async () => {
    try {
      setLoading(true);
      const response = await fetch("/characters");
      if (response.ok) {
        const data = await response.json();
        setCharacters(data);
      } else {
        toast({
          title: "Error",
          description: "Failed to load characters",
          variant: "destructive",
        });
      }
    } catch (error) {
      console.error("Error loading characters:", error);
      toast({
        title: "Error",
        description: "Failed to load characters",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (deleteConfirm !== id) {
      // First click - ask for confirmation
      setDeleteConfirm(id);
      return;
    }

    try {
      const response = await fetch(`/characters/${id}`, {
        method: "DELETE",
      });

      if (response.ok) {
        toast({
          title: "Success",
          description: "Character deleted successfully",
        });
        // Refresh the character list
        loadCharacters();
      } else {
        toast({
          title: "Error",
          description: "Failed to delete character",
          variant: "destructive",
        });