cleanup and add a raw page

src/app/(pages)/[id]/page.tsx

@@ -1,76 +1,27 @@
-import React, { cache, ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { ActionMenu } from "@/app/components/action-menu";
 import { Metadata } from "next";
 import moment from "moment";
 import { notFound } from "next/navigation";
 import { CodeBlock } from "@/app/components/code-block";
-import { detectLanguage } from "@/app/common/lang-detection/detection";
 import { Button } from "@/app/components/ui/button";
 import Link from "next/link";
-
+import {
-type PasteProps = {
+  generatePasteMetadata,
-  params: {
+  getPaste,
-    id: string;
+  type Paste,
-  };
+} from "@/app/common/pastes";
-};
+import { PastePageProps } from "@/app/types/paste-page";
-
-type Paste = {
-  /**
-   * The paste content.
-   */
-  content: string;
-
-  /**
-   * The date the paste was created.
-   */
-  created: string;
-
-  /**
-   * The detected language of the paste.
-   */
-  language: string;
-};
-
-const getPaste = cache(async (id: string) => {
-  const response: Response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/${id}`,
-    {
-      next: {
-        revalidate: 300, // Keep this response cached for 5 minutes
-      },
-    },
-  );
-  const json = await response.json();
-
-  if (json.code && json.message) {
-    return undefined;
-  }
-  return {
-    content: json.content,
-    created: json.created,
-    language: await detectLanguage(json.content),
-  };
-}) as (id: string) => Promise<Paste | undefined>;
 
 export async function generateMetadata({
   params: { id },
-}: PasteProps): Promise<Metadata> {
+}: PastePageProps): Promise<Metadata> {
-  const data: Paste | undefined = await getPaste(id);
+  return generatePasteMetadata(id);
-  if (data == undefined) {
-    return {
-      description: "Not found",
-    };
-  }
-
-  return {
-    title: `Paste - ${id}.${data.language}`,
-    description: `Click to view the paste.`,
-  };
 }
 
 export default async function Paste({
   params: { id },
-}: PasteProps): Promise<ReactElement> {
+}: PastePageProps): Promise<ReactElement> {
   const data: Paste | undefined = await getPaste(id);
 
   if (data == undefined) {
@@ -87,6 +38,9 @@ export default async function Paste({
         <Link href={"/"}>
           <Button>New</Button>
         </Link>
+        <Link href={`/raw/${id}`}>
+          <Button>Raw</Button>
+        </Link>
       </ActionMenu>
 
       <div className="absolute right-0 bottom-0 text-right p-1.5">

src/app/(pages)/page.tsx

@@ -17,6 +17,10 @@ export default function Home(): ReactElement {
   async function createPaste() {
     // Ignore empty pastes, we don't want to save them
     if (!value || value.length == 0) {
+      toast({
+        title: "Paste",
+        description: "Paste is empty",
+      });
       return;
     }
 

src/app/(pages)/raw/[id]/page.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement } from "react";
+import { ActionMenu } from "@/app/components/action-menu";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Button } from "@/app/components/ui/button";
+import Link from "next/link";
+import {
+  generatePasteMetadata,
+  getPaste,
+  type Paste,
+} from "@/app/common/pastes";
+import { PastePageProps } from "@/app/types/paste-page";
+
+export async function generateMetadata({
+  params: { id },
+}: PastePageProps): Promise<Metadata> {
+  return generatePasteMetadata(id);
+}
+
+export default async function Paste({
+  params: { id },
+}: PastePageProps): Promise<ReactElement> {
+  const data: Paste | undefined = await getPaste(id);
+
+  if (data == undefined) {
+    return notFound();
+  }
+
+  return (
+    <div className="relative h-full">
+      <ActionMenu>
+        <Link href={"/"}>
+          <Button>New</Button>
+        </Link>
+        <Link href={`/${id}`}>
+          <Button>Formated</Button>
+        </Link>
+      </ActionMenu>
+
+      <div className="p-1 hljs !bg-transparent text-sm">
+        <code>{data.content}</code>
+      </div>
+    </div>
+  );
+}

src/app/common/pastes.ts

@@ -0,0 +1,63 @@
+import { cache } from "react";
+import { detectLanguage } from "@/app/common/lang-detection/detection";
+import { Metadata } from "next";
+
+export type Paste = {
+  /**
+   * The paste content.
+   */
+  content: string;
+
+  /**
+   * The date the paste was created.
+   */
+  created: string;
+
+  /**
+   * The detected language of the paste.
+   */
+  language: string;
+};
+
+/**
+ * Fetches a paste from the API.
+ */
+export const getPaste = cache(async (id: string) => {
+  const response: Response = await fetch(
+    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/${id}`,
+    {
+      next: {
+        revalidate: 300, // Keep this response cached for 5 minutes
+      },
+    },
+  );
+  const json = await response.json();
+
+  if (json.code && json.message) {
+    return undefined;
+  }
+  return {
+    content: json.content,
+    created: json.created,
+    language: await detectLanguage(json.content),
+  };
+}) as (id: string) => Promise<Paste | undefined>;
+
+/**
+ * Generates metadata for a paste.
+ *
+ * @param id The ID of the paste.
+ */
+export async function generatePasteMetadata(id: string): Promise<Metadata> {
+  const data: Paste | undefined = await getPaste(id);
+  if (data == undefined) {
+    return {
+      description: "Not found",
+    };
+  }
+
+  return {
+    title: `Paste - ${id}.${data.language}`,
+    description: `Click to view the paste.`,
+  };
+}

src/app/types/paste-page.ts

@@ -0,0 +1,5 @@
+export type PastePageProps = {
+  params: {
+    id: string;
+  };
+};