Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components /
Filename : APIKeysSettings.tsx
back
"use client";

import axios from "axios";
import { useQuery, useMutation } from "@tanstack/react-query";
import { RiDeleteBin6Line } from "react-icons/ri";
import { Card, CardContent, CardDescription, CardHeader } from "./ui/card";
import { toast } from "./ui/use-toast";
import { Button } from "./ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "./ui/alert-dialog";
import LoadingSpinner from "./LoadingSpinner";

export const getKeyLabel = (key: string) => {
  return key.length > 35 ? "OpenAI" : "Deepseek";
};

export const getLabelColor = (key: string) => {
  return key.length > 35
    ? "bg-green-200 text-green-800 rounded px-2 py-0.5"
    : "px-2 py-0.5 bg-blue-200 text-blue-800 rounded";
};

export default function APIKeysSettings() {
  // Fetch API keys using useQuery
  const { data, isLoading, refetch } = useQuery({
    queryKey: ["apiKeys"],
    queryFn: async () => {
      const response = await axios.get("/api/keys");
      return response.data.data.API_Keys;
    }
  });

  // Delete API key mutation
  const { mutate: deleteAPIKey, isLoading: isDeleting } = useMutation({
    mutationFn: async (apiKeyToDelete: string) => {
      return await axios.patch("/api/keys", { data: { apiKeyToDelete } });
    },
    onSuccess: () => {
      toast({
        title: "API Key Deleted",
        description: "Your API Key has been deleted"
      });
      refetch(); // Refetch the API keys after deletion
    },
    onError: (error) => {
      console.error("Error deleting API key:", error);
      toast({
        title: "Error",
        description: "Failed to delete API key. Please try again.",
        variant: "destructive"
      });
    }
  });

  // Show loading spinner while fetching keys
  if (isLoading || isDeleting) {
    return <LoadingSpinner message="Loading API Keys..." />;
  }

  return (
    <>
      {data && data.length > 0 && (
        <Card className="mt-4 p-0 border-0 sm:p-0">
          <CardHeader className="pb-4 px-0">
            <CardDescription className="text-muted-foreground">
              Your API Keys
            </CardDescription>
          </CardHeader>
          {data.map((key: string, index: number) => (
            <CardContent key={index} className="px-0">
              <div className="flex justify-between items-center gap-4 w-full">
                <div className="flex flex-col">
                  <div className="flex items-center gap-4">
                    <p className="text-xs truncate">{key}</p>
                    <span
                      className={`mt-1 inline-block mb-1 text-xs ${getLabelColor(
                        key
                      )}`}
                    >
                      {getKeyLabel(key)}
                    </span>
                  </div>
                </div>
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button
                      className="w-[90px] text-xs gap-2"
                      type="button"
                      variant="delete"
                      disabled={isDeleting}
                    >
                      {isDeleting ? (
                        <>Deleting...</>
                      ) : (
                        <>Delete <RiDeleteBin6Line size={12} /></>
                      )}
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                      <AlertDialogDescription>
                        This action cannot be undone. This will permanently delete your API key.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <AlertDialogAction onClick={() => deleteAPIKey(key)}>
                        Delete
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            </CardContent>
          ))}
        </Card>
      )}
    </>
  );
}