@@ -632,8 +641,8 @@ const Playground = ({ playground }: InferGetServerSidePropsType
-
- )
+ )
+ );
}
export default Playground
diff --git a/src/pages/playgrounds/index.tsx b/src/pages/playgrounds/index.tsx
index 4e97b80..b07e32d 100644
--- a/src/pages/playgrounds/index.tsx
+++ b/src/pages/playgrounds/index.tsx
@@ -1,119 +1,127 @@
+import { Metadata } from "next";
+
+import { useRouter } from "next/navigation";
/* Copyright (c) rishabhrao (https://github.com/rishabhrao) */
-import { getSession, useUser } from "@auth0/nextjs-auth0"
-import Alert, { AlertTypes } from "@components/Alert"
-import AuthCheck from "@components/AuthCheck"
-import { nextPublicBaseUrl } from "@constants/nextPublicBaseUrl"
-import { Listbox } from "@headlessui/react"
-import { connectToDatabase } from "@lib/connectToDatabase"
-import { PlaygroundModel, PlaygroundType } from "@models/PlaygroundModel"
-import LogoIcon from "@public/logoWhite.png"
-import ProfileIconWhite from "@public/ProfileIconWhite.png"
-import type { GetServerSideProps, InferGetServerSidePropsType } from "next"
-import Head from "next/head"
-import Image from "next/image"
-import Link from "next/link"
-import { useRouter } from "next/router"
-import { Fragment, useState } from "react"
-import toast, { Toaster } from "react-hot-toast"
-
-export const getServerSideProps: GetServerSideProps<{ playgrounds: PlaygroundType[] }> = async ({ req, res }) => {
- const authSession = getSession(req, res)
-
- if (!authSession) {
- return {
- redirect: {
- destination: "/api/auth/login?returnTo=/playgrounds",
- permanent: false,
- },
- }
- }
-
- const userId = authSession.user.sub as string
-
- await connectToDatabase()
-
- const playgrounds = (
- await PlaygroundModel.find({ userId }, null, {
- sort: {
- createdAt: -1, // Sort by createdAt Desc
- },
- })
- ).map(playground => playground.toJSON())
-
- return {
- props: { playgrounds },
- }
-}
+import { getSession, useUser } from "@auth0/nextjs-auth0";
+import Alert, { AlertTypes } from "@components/Alert";
+import AuthCheck from "@components/AuthCheck";
+import { nextPublicBaseUrl } from "@constants/nextPublicBaseUrl";
+import { Listbox } from "@headlessui/react";
+import { connectToDatabase } from "@lib/connectToDatabase";
+import { PlaygroundModel, PlaygroundType } from "@models/PlaygroundModel";
+import LogoIcon from "@public/logoWhite.png";
+import ProfileIconWhite from "@public/ProfileIconWhite.png";
+import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import LegacyImage from "next/legacy/image";
+import Link from "next/link";
+import { Fragment, useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
+export const metadata: Metadata = {
+ title: `Playgrounds - rdamn`,
+ openGraph: {
+ title: "Playgrounds - rdamn",
+ },
+};
+
+// TODO: implement this function
+async function getPlaygrounds() { }
+
+export const getServerSideProps: GetServerSideProps<{
+ playgrounds: PlaygroundType[];
+}> = async ({ req, res }) => {
+ const authSession = getSession(req, res);
+
+ if (!authSession) {
+ return {
+ redirect: {
+ destination: "/api/auth/login?returnTo=/playgrounds",
+ permanent: false
+ }
+ };
+ }
+
+ const userId = authSession.user.sub as string;
+
+ await connectToDatabase();
+
+ const playgrounds = (await PlaygroundModel.find({ userId }, null, {
+ sort: {
+ createdAt: -1 // Sort by createdAt Desc
+ }
+ })).map(playground => playground.toJSON());
+
+ return {
+ props: { playgrounds }
+ };
+};
const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsType
) => {
- const { user: authUser, isLoading: isAuthLoading } = useUser()
-
- const router = useRouter()
-
- const [playgrounds, setPlaygrounds] = useState(ssrPlaygrounds)
-
- const [isCreatePlaygroundModalOpen, setisCreatePlaygroundModalOpen] = useState(false)
- const [isCreatePlaygroundLoading, setIsCreatePlaygroundLoading] = useState(false)
- const [newPlaygroundName, setNewPlaygroundName] = useState("")
- const [newPlaygroundTemplate, setNewPlaygroundTemplate] = useState("")
-
- const createNewPlayground = async () => {
- setIsCreatePlaygroundLoading(true)
-
- await fetch(`${nextPublicBaseUrl}/api/playgrounds/create`, {
- method: "POST",
- body: JSON.stringify({
- newPlaygroundName,
- newPlaygroundTemplate,
- }),
- headers: { "Content-Type": "application/json" },
- })
- .then(async res => {
- type serverResponseType = {
- success: boolean
- message: string
- newPlayground?: PlaygroundType
- }
-
- const responseBody = (await res.json()) as serverResponseType
-
- if (res.ok && responseBody.success && responseBody.newPlayground) {
- setPlaygrounds([responseBody.newPlayground, ...playgrounds])
-
- toast.custom(
- <>
-
- Playgrounds - rdamn
- , { position: "bottom-center", duration: 5000, id: "success" });
+
+ await router.push(`/playground/${responseBody.newPlayground.playgroundId}`);
+ }
+ else {
+ throw responseBody.message;
+ }
+ })
+ .catch((error: string) => {
+ toast.custom(
+ <>
+
-
-
-
-
+
+
+
+
+
rdamn
@@ -126,7 +134,7 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
@@ -136,18 +144,14 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
{authUser?.email}
-
-
-
-
- Logout
-
-
+
+
+
+
+
Logout
+
+
@@ -158,22 +162,18 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
Playgrounds
-
{
- setNewPlaygroundName("My Awesome Playground")
- setisCreatePlaygroundModalOpen(true)
- }}
- className="inline-flex items-center px-5 py-2 text-lg font-medium leading-5 text-gray-700 bg-white border border-gray-300 rounded-full shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
- >
+ {
+ setNewPlaygroundName("My Awesome Playground");
+ setisCreatePlaygroundModalOpen(true);
+ }} className="inline-flex items-center px-5 py-2 text-lg font-medium leading-5 text-gray-700 bg-white border border-gray-300 rounded-full shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-
Create
@@ -181,32 +181,15 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
- {playgrounds.map(playground => (
-
+ {playgrounds.map(playground => (
- {playground.playgroundTemplate === "html" ? (
-
-
- ) : playground.playgroundTemplate === "nextjs" ? (
-
-
- ) : (
-
-
- )}
+ {playground.playgroundTemplate === "html" ? (
+ ) : playground.playgroundTemplate === "nextjs" ? (
+ ) : (
+ )}
{playground.playgroundName}
@@ -226,19 +209,17 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
-
- ))}
+ ))}
{playgrounds.length === 0 &&
No Playgrounds yet... Create one!
}
@@ -257,10 +238,9 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
- {isCreatePlaygroundModalOpen && (
-
+ {isCreatePlaygroundModalOpen && (
@@ -308,29 +278,13 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
- {newPlaygroundTemplate === "html" ? (
-
-
- ) : newPlaygroundTemplate === "nextjs" ? (
-
-
- ) : (
-
-
- )}
+ {newPlaygroundTemplate === "html" ? (
+ ) : newPlaygroundTemplate === "nextjs" ? (
+ ) : (
+ )}
{newPlaygroundTemplate === "html" ? "HTML" : newPlaygroundTemplate === "nextjs" ? "Next.js" : "Select Playground Template"}
@@ -338,81 +292,46 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
-
-
- {({ selected, active }) => (
-
+
+ {({ selected, active }) => (
- {selected ? (
-
+ {selected ? (
-
-
- ) : null}
-
- )}
+ ) : null}
+ )}
-
- {({ selected, active }) => (
-
+
+ {({ selected, active }) => (
- {selected ? (
-
+ {selected ? (
-
-
- ) : null}
-
- )}
+ ) : null}
+ )}
@@ -420,46 +339,15 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
-
void createNewPlayground()}
- >
+ void createNewPlayground()}>
-
-
+
-
-
+
@@ -468,13 +356,13 @@ const Playgrounds = ({ playgrounds: ssrPlaygrounds }: InferGetServerSidePropsTyp
-
- )}
+
)}
-
- )
-}
+ ));
+};
+
+export default Playgrounds;
+
-export default Playgrounds
![rdamn Playground]({"/PlaygroundSS.png"})
-