add json upload button and add page reload button to server and player pages
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m29s

This commit is contained in:
Lee 2024-04-22 22:50:13 +01:00
parent 63e4eedc37
commit 1e96ed1b1c
7 changed files with 90 additions and 2 deletions

@ -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}`;
}

@ -1,6 +1,15 @@
import { ReactElement } from "react"; import { ReactElement } from "react";
import { CodeHighlighter } from "./code-highlighter"; 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 = { type CodeDialogProps = {
/** /**
@ -28,12 +37,15 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild>{children}</DialogTrigger> <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> <DialogHeader>
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription> <DialogDescription>{description}</DialogDescription>
</DialogHeader> </DialogHeader>
<CodeHighlighter code={code} /> <CodeHighlighter code={code} />
<DialogFooter>
<CreateHasteButton content={code} />
</DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

@ -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>;
}

@ -8,6 +8,7 @@ import { Separator } from "../ui/separator";
import { SkinPartImage } from "./skin-part-image"; import { SkinPartImage } from "./skin-part-image";
import { CacheInformation } from "@/app/components/cache-information"; import { CacheInformation } from "@/app/components/cache-information";
import { PlayerSkin } from "@/app/components/player/player-skin"; import { PlayerSkin } from "@/app/components/player/player-skin";
import { ReloadPageButton } from "@/app/components/reload-page-button";
type PlayerViewProps = { type PlayerViewProps = {
/** /**
@ -38,6 +39,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
</div> </div>
</Card> </Card>
<div className="flex gap-2 flex-wrap justify-center"> <div className="flex gap-2 flex-wrap justify-center">
<ReloadPageButton />
<CodeDialog <CodeDialog
title="Player Data" title="Player Data"
description="The player's data from the API" description="The player's data from the API"

@ -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>
);
}

@ -4,6 +4,7 @@ import { ReactElement } from "react";
import { CodeDialog } from "../code-dialog"; import { CodeDialog } from "../code-dialog";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { CacheInformation } from "@/app/components/cache-information"; import { CacheInformation } from "@/app/components/cache-information";
import { ReloadPageButton } from "@/app/components/reload-page-button";
type ServerViewProps = { type ServerViewProps = {
/** /**
@ -30,6 +31,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
/> />
</div> </div>
<div className="flex gap-2 flex-wrap justify-center"> <div className="flex gap-2 flex-wrap justify-center">
<ReloadPageButton />
<CodeDialog <CodeDialog
title="Server Data" title="Server Data"
description="The servers's data from the API" description="The servers's data from the API"

@ -0,0 +1,6 @@
export type CreateHasteButtonProps = {
/**
* The content to create the haste with.
*/
content: string;
};