"use client"; import axios from "axios"; import { Button } from "@/components/ui/button"; import * as React from 'react'; import { useEffect, useState } from "react"; import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; const ApiKeyPage = () => { const [apiKeyViewable, setApiKeyViewable] = useState<number>(-1) const [apiKeys, setApiKeys] = useState<{ id: string, label: string, userId: string }[]>([]) useEffect(() => { const fetchData = async () => { await axios.get("/api/tokens") .then(d => setApiKeys(d.data ?? [])) .catch(console.error) }; fetchData(); }, []); const onApiKeyAdd = async (label: string) => { await axios.post("/api/token", { label }) .then(d => setApiKeys(apiKeys.concat([d.data]))) .catch(console.error) } const onApiKeyDelete = async (id: string) => { await axios.delete("/api/token/" + id) .then((d) => setApiKeys(apiKeys.filter(k => k.id != d.data.id))) .catch(console.error) } return ( <div> <div className="px-10 py-5 mx-5 my-10"> <div> <div className="text-xl justify-left mt-10 text-center">API Keys</div> <Table> <TableCaption>A list of your secret API keys.</TableCaption> <TableHeader> <TableRow> <TableHead>Label</TableHead> <TableHead>Token</TableHead> <TableHead>Action</TableHead> </TableRow> </TableHeader> <TableBody> {apiKeys.map((key, index) => ( <TableRow key={key.id}> <TableCell className="font-medium">{key.label}</TableCell> <TableCell>{apiKeyViewable == index ? key.id : "*".repeat(key.id.length)}</TableCell> <TableCell> <Button onClick={() => setApiKeyViewable((v) => v != index ? index : -1)}> {apiKeyViewable == index ? "HIDE" : "VIEW"} </Button> <Button onClick={() => onApiKeyDelete(key.id)} className="ml-[10px] bg-red-500 hover:bg-red-700">DELETE</Button> </TableCell> <TableCell></TableCell> </TableRow> ))} <TableRow key="ADD"> <TableCell className="font-medium"></TableCell> <TableCell></TableCell> <TableCell><Button onClick={() => onApiKeyAdd("Key label")}>ADD</Button></TableCell> </TableRow> </TableBody> </Table> </div> </div> </div> ); } export default ApiKeyPage;