Added redemptions & redeemable actions. Fixed a few bugs.

This commit is contained in:
Tom
2024-06-24 22:16:55 +00:00
parent 68df045c54
commit 6548ce33e0
35 changed files with 1787 additions and 471 deletions

View File

@@ -3,63 +3,46 @@
import axios from "axios";
import { Button } from "@/components/ui/button";
import * as React from 'react';
import { ApiKey, User } from "@prisma/client";
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
const SettingsPage = () => {
const { data: session, status } = useSession();
const [apiKeyViewable, setApiKeyViewable] = useState(0)
const [apiKeyChanges, setApiKeyChanges] = useState(0)
const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
const ApiKeyPage = () => {
const [apiKeyViewable, setApiKeyViewable] = useState<number>(-1)
const [apiKeys, setApiKeys] = useState<{ id: string, label: string, userId: string }[]>([])
useEffect(() => {
const fetchData = async () => {
try {
const keys = (await axios.get("/api/tokens")).data ?? {};
setApiKeys(keys)
} catch (error) {
console.log("ERROR", error)
}
await axios.get("/api/tokens")
.then(d => setApiKeys(d.data ?? []))
.catch(console.error)
};
fetchData().catch(console.error);
}, [apiKeyChanges]);
fetchData();
}, []);
const onApiKeyAdd = async () => {
try {
await axios.post("/api/token", {
label: "Key label"
});
setApiKeyChanges(apiKeyChanges + 1)
} catch (error) {
console.log("ERROR", error)
}
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) => {
try {
await axios.delete("/api/token/" + id);
setApiKeyChanges(apiKeyChanges - 1)
} catch (error) {
console.log("ERROR", error)
}
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">API Keys</div>
<Table className="max-w-2xl">
<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>View</TableHead>
<TableHead>Action</TableHead>
</TableRow>
</TableHeader>
@@ -67,20 +50,20 @@ const SettingsPage = () => {
{apiKeys.map((key, index) => (
<TableRow key={key.id}>
<TableCell className="font-medium">{key.label}</TableCell>
<TableCell>{(apiKeyViewable & (1 << index)) > 0 ? key.id : "*".repeat(key.id.length)}</TableCell>
<TableCell>{apiKeyViewable == index ? key.id : "*".repeat(key.id.length)}</TableCell>
<TableCell>
<Button onClick={() => setApiKeyViewable((v) => v ^ (1 << index))}>
{(apiKeyViewable & (1 << index)) > 0 ? "HIDE" : "VIEW"}
<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><Button onClick={() => onApiKeyDelete(key.id)}>DEL</Button></TableCell>
<TableCell></TableCell>
</TableRow>
))}
<TableRow key="ADD">
<TableCell className="font-medium"></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell><Button onClick={onApiKeyAdd}>ADD</Button></TableCell>
<TableCell><Button onClick={() => onApiKeyAdd("Key label")}>ADD</Button></TableCell>
</TableRow>
</TableBody>
</Table>
@@ -90,4 +73,4 @@ const SettingsPage = () => {
);
}
export default SettingsPage;
export default ApiKeyPage;