migrating to the app router

lionstory · Jun 1, 2023 · e89a2d8 · e89a2d8
1 parent c61fa30
commit e89a2d8
Show file tree

Hide file tree

Showing 11 changed files with 626 additions and 242 deletions.
diff --git a/README.md b/README.md
@@ -53,3 +53,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 ## License
 
 This repo is MIT licensed.
+
+## Todos
+
+- Update OG image design + include "roomgpt.io"
diff --git a/pages/dream.tsx → app/dream/page.tsx b/pages/dream.tsx → app/dream/page.tsx
@@ -1,49 +1,50 @@
+"use client";
+
 import { AnimatePresence, motion } from "framer-motion";
-import { NextPage } from "next";
-import Head from "next/head";
 import Image from "next/image";
 import { useState } from "react";
 import { UploadDropzone } from "react-uploader";
 import { Uploader } from "uploader";
-import { CompareSlider } from "../components/CompareSlider";
-import Footer from "../components/Footer";
-import Header from "../components/Header";
-import LoadingDots from "../components/LoadingDots";
-import ResizablePanel from "../components/ResizablePanel";
-import Toggle from "../components/Toggle";
-import appendNewToName from "../utils/appendNewToName";
-import downloadPhoto from "../utils/downloadPhoto";
-import DropDown from "../components/DropDown";
-import { roomType, rooms, themeType, themes } from "../utils/dropdownTypes";
+import { CompareSlider } from "../../components/CompareSlider";
+import Footer from "../../components/Footer";
+import Header from "../../components/Header";
+import LoadingDots from "../../components/LoadingDots";
+import ResizablePanel from "../../components/ResizablePanel";
+import Toggle from "../../components/Toggle";
+import appendNewToName from "../../utils/appendNewToName";
+import downloadPhoto from "../../utils/downloadPhoto";
+import DropDown from "../../components/DropDown";
+import { roomType, rooms, themeType, themes } from "../../utils/dropdownTypes";
 
 // Configuration for the uploader
 const uploader = Uploader({
   apiKey: !!process.env.NEXT_PUBLIC_UPLOAD_API_KEY
     ? process.env.NEXT_PUBLIC_UPLOAD_API_KEY
     : "free",
 });
+
 const options = {
   maxFileCount: 1,
   mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
   editor: { images: { crop: false } },
   styles: {
     colors: {
       primary: "#2563EB", // Primary buttons & links
-      error: "#d23f4d",   // Error messages
-      shade100: "#fff",   // Standard text
-      shade200: "#fffe",  // Secondary button text
-      shade300: "#fffd",  // Secondary button text (hover)
-      shade400: "#fffc",  // Welcome text
-      shade500: "#fff9",  // Modal close button
-      shade600: "#fff7",  // Border
-      shade700: "#fff2",  // Progress indicator background
-      shade800: "#fff1",  // File item background
-      shade900: "#ffff"   // Various (draggable crop buttons, etc.)
+      error: "#d23f4d", // Error messages
+      shade100: "#fff", // Standard text
+      shade200: "#fffe", // Secondary button text
+      shade300: "#fffd", // Secondary button text (hover)
+      shade400: "#fffc", // Welcome text
+      shade500: "#fff9", // Modal close button
+      shade600: "#fff7", // Border
+      shade700: "#fff2", // Progress indicator background
+      shade800: "#fff1", // File item background
+      shade900: "#ffff", // Various (draggable crop buttons, etc.)
     },
   },
 };
 
-const Home: NextPage = () => {
+export default function DreamPage() {
   const [originalPhoto, setOriginalPhoto] = useState<string | null>(null);
   const [restoredImage, setRestoredImage] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
@@ -61,7 +62,6 @@ const Home: NextPage = () => {
       onUpdate={(file) => {
         if (file.length !== 0) {
           setPhotoName(file[0].originalFile.originalFileName);
-          // TODO: Make sure these are the image dimensions we want
           setOriginalPhoto(file[0].fileUrl.replace("raw", "thumbnail"));
           generatePhoto(file[0].fileUrl.replace("raw", "thumbnail"));
         }
@@ -72,9 +72,9 @@ const Home: NextPage = () => {
   );
 
   async function generatePhoto(fileUrl: string) {
-    await new Promise((resolve) => setTimeout(resolve, 200)); // TODO: See if I even need this
+    await new Promise((resolve) => setTimeout(resolve, 200));
     setLoading(true);
-    const res = await fetch("/api/generate", {
+    const res = await fetch("/generate", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -95,9 +95,6 @@ const Home: NextPage = () => {
 
   return (
     <div className="flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
-      <Head>
-        <title>RoomGPT</title>
-      </Head>
       <Header />
       <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 mt-4 sm:mb-0 mb-8">
         <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-100 sm:text-6xl mb-5">
@@ -122,8 +119,9 @@ const Home: NextPage = () => {
                     </div>
                     <DropDown
                       theme={theme}
-                      // @ts-ignore
-                      setTheme={(newTheme) => setTheme(newTheme)}
+                      setTheme={(newTheme) =>
+                        setTheme(newTheme as typeof theme)
+                      }
                       themes={themes}
                     />
                   </div>
@@ -141,8 +139,7 @@ const Home: NextPage = () => {
                     </div>
                     <DropDown
                       theme={room}
-                      // @ts-ignore
-                      setTheme={(newRoom) => setRoom(newRoom)}
+                      setTheme={(newRoom) => setRoom(newRoom as typeof room)}
                       themes={rooms}
                     />
                   </div>
@@ -274,6 +271,4 @@ const Home: NextPage = () => {
       <Footer />
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/pages/api/generate.ts → app/generate/route.ts b/pages/api/generate.ts → app/generate/route.ts
@@ -2,6 +2,8 @@ import { Ratelimit } from "@upstash/ratelimit";
 import type { NextApiRequest, NextApiResponse } from "next";
 import requestIp from "request-ip";
 import redis from "../../utils/redis";
+import { NextResponse } from "next/server";
+import { headers } from "next/headers";
 
 type Data = string;
 interface ExtendedNextApiRequest extends NextApiRequest {
@@ -21,26 +23,33 @@ const ratelimit = redis
     })
   : undefined;
 
-export default async function handler(
-  req: ExtendedNextApiRequest,
-  res: NextApiResponse<Data>
-) {
+export async function POST(request: Request) {
   // Rate Limiter Code
   if (ratelimit) {
-    const identifier = requestIp.getClientIp(req);
-    const result = await ratelimit.limit(identifier!);
-    res.setHeader("X-RateLimit-Limit", result.limit);
-    res.setHeader("X-RateLimit-Remaining", result.remaining);
+    const headersList = headers();
+    const referer = headersList.get("RemoteAddr");
+
+    const result = await ratelimit.limit(referer!);
+    // res.setHeader("X-RateLimit-Limit", result.limit);
+    // res.setHeader("X-RateLimit-Remaining", result.remaining);
 
     if (!result.success) {
-      res
-        .status(429)
-        .json("Too many uploads in 1 day. Please try again in a 24 hours.");
-      return;
+      return new Response(
+        "Too many uploads in 1 day. Please try again in a 24 hours.",
+        {
+          status: 429,
+          headers: {
+            "X-RateLimit-Limit": result.limit,
+            "X-RateLimit-Remaining": result.remaining,
+          } as any,
+        }
+      );
     }
   }
 
-  const { imageUrl, theme, room } = req.body;
+  const { imageUrl, theme, room } = await request.json();
+  // const { imageUrl, theme, room } = req.body;
+
   // POST request to Replicate to start the image restoration generation process
   let startResponse = await fetch("https://api.replicate.com/v1/predictions", {
     method: "POST",
@@ -91,7 +100,8 @@ export default async function handler(
       await new Promise((resolve) => setTimeout(resolve, 1000));
     }
   }
-  res
-    .status(200)
-    .json(restoredImage ? restoredImage : "Failed to restore image");
+
+  return NextResponse.json(
+    restoredImage ? restoredImage : "Failed to restore image"
+  );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,46 @@
+import { Analytics } from "@vercel/analytics/react";
+import { Metadata } from "next";
+import "../styles/globals.css";
+
+let title = "Dream Room Generator";
+let description = "Generate your dream room in seconds.";
+let ogimage = "https://roomgpt-demo.vercel.app/og-image.png";
+let sitename = "roomGPT.io";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  icons: {
+    icon: "/favicon.ico",
+  },
+  openGraph: {
+    images: [ogimage],
+    title,
+    description,
+    url: "https://roomgpt-demo.vercel.app",
+    siteName: sitename,
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [ogimage],
+    title,
+    description,
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-[#17181C] text-white">
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  );
+}
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -1,18 +1,12 @@
-import { NextPage } from "next";
-import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import SquigglyLines from "../components/SquigglyLines";
 
-const Home: NextPage = () => {
+export default function HomePage() {
   return (
     <div className="flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
-      <Head>
-        <title>RoomGPT</title>
-      </Head>
-
       <Header />
       <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 sm:mt-20 mt-20 background-gradient">
         <a
@@ -69,10 +63,7 @@ const Home: NextPage = () => {
           </div>
         </div>
       </main>
-      {/* <Testimonials /> */}
       <Footer />
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/app/test/route.ts b/app/test/route.ts
@@ -0,0 +1,15 @@
+import { Ratelimit } from "@upstash/ratelimit";
+import type { NextApiRequest, NextApiResponse } from "next";
+import redis from "../../utils/redis";
+import { NextResponse } from "next/server";
+import { headers } from "next/headers";
+
+export async function GET(request: Request) {
+  const headersList = headers();
+  // console.log({ headersList });
+  const referer = headersList.get("x-real-ip");
+  // const ref = headersList.get("Referer");
+  console.log({ referer });
+
+  return new Response(referer);
+}