From d6dd76021226802adf5295b3243d6f2ae4fa5cc2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 10 Mar 2024 17:59:58 +0000
Subject: refactor: Move all components to the top level directory

---
 .../dashboard/settings/components/AddApiKey.tsx    | 167 ---------------------
 .../settings/components/ApiKeySettings.tsx         |  49 ------
 .../dashboard/settings/components/DeleteApiKey.tsx |  74 ---------
 packages/web/app/dashboard/settings/page.tsx       |   2 +-
 4 files changed, 1 insertion(+), 291 deletions(-)
 delete mode 100644 packages/web/app/dashboard/settings/components/AddApiKey.tsx
 delete mode 100644 packages/web/app/dashboard/settings/components/ApiKeySettings.tsx
 delete mode 100644 packages/web/app/dashboard/settings/components/DeleteApiKey.tsx

(limited to 'packages/web/app/dashboard/settings')

diff --git a/packages/web/app/dashboard/settings/components/AddApiKey.tsx b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
deleted file mode 100644
index a4fd9c25..00000000
--- a/packages/web/app/dashboard/settings/components/AddApiKey.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { z } from "zod";
-import { useRouter } from "next/navigation";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm, SubmitErrorHandler } from "react-hook-form";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { useState } from "react";
-import { Check, Copy } from "lucide-react";
-import { ActionButton } from "@/components/ui/action-button";
-
-function ApiKeySuccess({ apiKey }: { apiKey: string }) {
-  const [isCopied, setCopied] = useState(false);
-
-  const onCopy = () => {
-    navigator.clipboard.writeText(apiKey);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div>
-      <div className="py-4">
-        Note: please copy the key and store it somewhere safe. Once you close
-        the dialog, you won&apos;t be able to access it again.
-      </div>
-      <div className="flex space-x-2 pt-2">
-        <Input value={apiKey} readOnly />
-        <Button onClick={onCopy}>
-          {!isCopied ? (
-            <Copy className="size-4" />
-          ) : (
-            <Check className="size-4" />
-          )}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
-  const formSchema = z.object({
-    name: z.string(),
-  });
-  const router = useRouter();
-  const mutator = api.apiKeys.create.useMutation({
-    onSuccess: (resp) => {
-      onSuccess(resp.key);
-      router.refresh();
-    },
-    onError: () => {
-      toast({ description: "Something went wrong", variant: "destructive" });
-    },
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-  });
-
-  async function onSubmit(value: z.infer<typeof formSchema>) {
-    mutator.mutate({ name: value.name });
-  }
-
-  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
-    toast({
-      description: Object.values(errors)
-        .map((v) => v.message)
-        .join("\n"),
-      variant: "destructive",
-    });
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit, onError)}
-        className="flex w-full space-x-3 space-y-8 pt-4"
-      >
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => {
-            return (
-              <FormItem className="flex-1">
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                  <Input type="text" placeholder="Name" {...field} />
-                </FormControl>
-                <FormDescription>
-                  Give your API key a unique name
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            );
-          }}
-        />
-        <ActionButton
-          className="h-full"
-          type="submit"
-          loading={mutator.isPending}
-        >
-          Create
-        </ActionButton>
-      </form>
-    </Form>
-  );
-}
-
-export default function AddApiKey() {
-  const [key, setKey] = useState<string | undefined>(undefined);
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-  return (
-    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-      <DialogTrigger asChild>
-        <Button>New API Key</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            {key ? "Key was successfully created" : "Create API key"}
-          </DialogTitle>
-          <DialogDescription>
-            {key ? (
-              <ApiKeySuccess apiKey={key} />
-            ) : (
-              <AddApiKeyForm onSuccess={setKey} />
-            )}
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter className="sm:justify-end">
-          <DialogClose asChild>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setKey(undefined)}
-            >
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/packages/web/app/dashboard/settings/components/ApiKeySettings.tsx b/packages/web/app/dashboard/settings/components/ApiKeySettings.tsx
deleted file mode 100644
index 1598f25f..00000000
--- a/packages/web/app/dashboard/settings/components/ApiKeySettings.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { api } from "@/server/api/client";
-import DeleteApiKey from "./DeleteApiKey";
-import AddApiKey from "./AddApiKey";
-
-export default async function ApiKeys() {
-  const keys = await api.apiKeys.list();
-  return (
-    <div className="pt-4">
-      <span className="text-xl">API Keys</span>
-      <hr className="my-2" />
-      <div className="flex flex-col space-y-3">
-        <div className="flex flex-1 justify-end">
-          <AddApiKey />
-        </div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Key</TableHead>
-              <TableHead>Created At</TableHead>
-              <TableHead>Action</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {keys.keys.map((k) => (
-              <TableRow key={k.id}>
-                <TableCell>{k.name}</TableCell>
-                <TableCell>**_{k.keyId}_**</TableCell>
-                <TableCell>{k.createdAt.toLocaleString()}</TableCell>
-                <TableCell>
-                  <DeleteApiKey name={k.name} id={k.id} />
-                </TableCell>
-              </TableRow>
-            ))}
-            <TableRow></TableRow>
-          </TableBody>
-        </Table>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx b/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
deleted file mode 100644
index 566136af..00000000
--- a/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { Trash } from "lucide-react";
-
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { useRouter } from "next/navigation";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
-import { ActionButton } from "@/components/ui/action-button";
-import { useState } from "react";
-
-export default function DeleteApiKey({
-  name,
-  id,
-}: {
-  name: string;
-  id: string;
-}) {
-  const [isDialogOpen, setDialogOpen] = useState(false);
-  const router = useRouter();
-  const mutator = api.apiKeys.revoke.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Key was successfully deleted",
-      });
-      setDialogOpen(false);
-      router.refresh();
-    },
-  });
-
-  return (
-    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
-      <DialogTrigger asChild>
-        <Button variant="destructive">
-          <Trash className="size-5" />
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete API Key</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete the API key &quot;{name}&quot;? Any
-            service using this API key will lose access.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter className="sm:justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-          <ActionButton
-            type="button"
-            variant="destructive"
-            loading={mutator.isPending}
-            onClick={() => mutator.mutate({ id })}
-          >
-            Delete
-          </ActionButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/packages/web/app/dashboard/settings/page.tsx b/packages/web/app/dashboard/settings/page.tsx
index 95637d8c..38091e6c 100644
--- a/packages/web/app/dashboard/settings/page.tsx
+++ b/packages/web/app/dashboard/settings/page.tsx
@@ -1,4 +1,4 @@
-import ApiKeySettings from "./components/ApiKeySettings";
+import ApiKeySettings from "@/components/dashboard/settings/ApiKeySettings";
 export default async function Settings() {
   return (
     <div className="m-4 flex flex-col space-y-2 rounded-md border bg-white p-4">
-- 
cgit v1.2.3-70-g09d2