From 1e96ed1b1cfdcfe0bfadf32455e8a3e40051eab1 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Mon, 22 Apr 2024 22:50:13 +0100
Subject: [PATCH] add json upload button and add page reload button to server
 and player pages

---
 src/app/common/hastebin.ts                 | 17 +++++++++++++
 src/app/components/code-dialog.tsx         | 16 +++++++++++--
 src/app/components/create-haste-button.tsx | 21 ++++++++++++++++
 src/app/components/player/player-view.tsx  |  2 ++
 src/app/components/reload-page-button.tsx  | 28 ++++++++++++++++++++++
 src/app/components/server/server-view.tsx  |  2 ++
 src/app/types/create-haste-button.ts       |  6 +++++
 7 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 src/app/common/hastebin.ts
 create mode 100644 src/app/components/create-haste-button.tsx
 create mode 100644 src/app/components/reload-page-button.tsx
 create mode 100644 src/app/types/create-haste-button.ts

diff --git a/src/app/common/hastebin.ts b/src/app/common/hastebin.ts
new file mode 100644
index 0000000..221a9d6
--- /dev/null
+++ b/src/app/common/hastebin.ts
@@ -0,0 +1,17 @@
+const HASTE_URL: string = "https://haste.fascinated.cc";
+
+/**
+ * Creates a new haste with the given content.
+ *
+ * @param content the content to create the haste with
+ * @returns the URL of the created haste
+ */
+export async function createHaste(content: string): Promise<string> {
+  const response = await fetch(`${HASTE_URL}/documents`, {
+    method: "POST",
+    body: content,
+  });
+
+  const { key } = await response.json();
+  return `${HASTE_URL}/${key}`;
+}
diff --git a/src/app/components/code-dialog.tsx b/src/app/components/code-dialog.tsx
index 83e13ff..fb83043 100644
--- a/src/app/components/code-dialog.tsx
+++ b/src/app/components/code-dialog.tsx
@@ -1,6 +1,15 @@
 import { ReactElement } from "react";
 import { CodeHighlighter } from "./code-highlighter";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { CreateHasteButton } from "@/app/components/create-haste-button";
 
 type CodeDialogProps = {
   /**
@@ -28,12 +37,15 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
   return (
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-screen md:max-h-[700px] text-sm">
+      <DialogContent className="max-h-screen md:max-h-[700px] min-w-screen md:min-w-fit text-sm">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
         <CodeHighlighter code={code} />
+        <DialogFooter>
+          <CreateHasteButton content={code} />
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/components/create-haste-button.tsx b/src/app/components/create-haste-button.tsx
new file mode 100644
index 0000000..57f527f
--- /dev/null
+++ b/src/app/components/create-haste-button.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactElement } from "react";
+import { Button } from "@/app/components/ui/button";
+import { CreateHasteButtonProps } from "@/app/types/create-haste-button";
+import { createHaste } from "@/app/common/hastebin";
+
+export function CreateHasteButton({ content }: CreateHasteButtonProps): ReactElement {
+  /**
+   * Uploads the content to Haste and opens the URL in a new tab.
+   */
+  async function upload(): Promise<void> {
+    const url = await createHaste(content);
+    console.log(url);
+
+    // Open the URL in a new tab.
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+
+  return <Button onClick={() => upload()}>Create Haste</Button>;
+}
diff --git a/src/app/components/player/player-view.tsx b/src/app/components/player/player-view.tsx
index 0d1dc8c..a0b724f 100644
--- a/src/app/components/player/player-view.tsx
+++ b/src/app/components/player/player-view.tsx
@@ -8,6 +8,7 @@ import { Separator } from "../ui/separator";
 import { SkinPartImage } from "./skin-part-image";
 import { CacheInformation } from "@/app/components/cache-information";
 import { PlayerSkin } from "@/app/components/player/player-skin";
+import { ReloadPageButton } from "@/app/components/reload-page-button";
 
 type PlayerViewProps = {
   /**
@@ -38,6 +39,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
         </div>
       </Card>
       <div className="flex gap-2 flex-wrap justify-center">
+        <ReloadPageButton />
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"
diff --git a/src/app/components/reload-page-button.tsx b/src/app/components/reload-page-button.tsx
new file mode 100644
index 0000000..989452a
--- /dev/null
+++ b/src/app/components/reload-page-button.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactElement } from "react";
+import { Button } from "@/app/components/ui/button";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+
+export function ReloadPageButton(): ReactElement {
+  /**
+   * Reload the page.
+   */
+  function reload(): void {
+    window.location.reload();
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button onClick={() => reload()}>
+          <ArrowPathIcon className="w-4 h-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Reload the page</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/src/app/components/server/server-view.tsx b/src/app/components/server/server-view.tsx
index af7bd20..b7f58a4 100644
--- a/src/app/components/server/server-view.tsx
+++ b/src/app/components/server/server-view.tsx
@@ -4,6 +4,7 @@ import { ReactElement } from "react";
 import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
 import { CacheInformation } from "@/app/components/cache-information";
+import { ReloadPageButton } from "@/app/components/reload-page-button";
 
 type ServerViewProps = {
   /**
@@ -30,6 +31,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
         />
       </div>
       <div className="flex gap-2 flex-wrap justify-center">
+        <ReloadPageButton />
         <CodeDialog
           title="Server Data"
           description="The servers's data from the API"
diff --git a/src/app/types/create-haste-button.ts b/src/app/types/create-haste-button.ts
new file mode 100644
index 0000000..2d0b9e9
--- /dev/null
+++ b/src/app/types/create-haste-button.ts
@@ -0,0 +1,6 @@
+export type CreateHasteButtonProps = {
+  /**
+   * The content to create the haste with.
+   */
+  content: string;
+};