66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ShortcodeTable } from "@/components/shortcodes-table";
|
|
import type IShortcode from "@/interfaces/IShortcode";
|
|
import { request, useApi } from "@/hooks/use-api";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function ShortcodesPage() {
|
|
const {
|
|
data: shortcodes,
|
|
error,
|
|
isLoading,
|
|
mutate,
|
|
success,
|
|
} = useApi<IShortcode[]>("/shortcodes", undefined, true);
|
|
|
|
const handleUpdate = async (updatedShortcode: IShortcode) => {
|
|
const res = await request<IShortcode>(
|
|
`/shortcodes/${updatedShortcode.code}/update`,
|
|
{
|
|
method: "PATCH",
|
|
requiresAuth: true,
|
|
body: updatedShortcode,
|
|
},
|
|
);
|
|
mutate();
|
|
// Implement update logic here
|
|
console.log("Update shortcode:", updatedShortcode);
|
|
};
|
|
|
|
const handleDelete = async (code: string) => {
|
|
const res = await request<undefined>(`/shortcodes/${code}/delete`, {
|
|
requiresAuth: true,
|
|
method: "DELETE",
|
|
});
|
|
mutate();
|
|
};
|
|
|
|
const handleAdd = async (newShortcode: Omit<IShortcode, "id">) => {
|
|
const res = await request<IShortcode>(`/shortcodes/new`, {
|
|
body: newShortcode,
|
|
method: "POST",
|
|
requiresAuth: true,
|
|
});
|
|
console.log(res);
|
|
mutate();
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto py-10">
|
|
<h1 className="text-2xl font-bold mb-5">Shortcodes</h1>
|
|
{isLoading && (
|
|
<Loader2 className="flex w-full min-w-0 flex-col gap-1 justify-center animate-spin" />
|
|
)}
|
|
{error && <p>{error}</p>}
|
|
<ShortcodeTable
|
|
shortcodes={shortcodes ?? []}
|
|
onUpdate={handleUpdate}
|
|
onDelete={handleDelete}
|
|
onAdd={handleAdd}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|