[web] add metadata and add check when creating solution

Author: PhantomKnight287

apps/web/app/[username]/layout.client.tsx

@@ -69,14 +69,18 @@ export function ProfileButtons({
         Enrolled in {user._count.tracks}{" "}
         {user._count.tracks <= 1 ? "Track" : "Tracks"}
       </Link>
-      <Button
-        variant={"outline"}
-        className="rounded-xl text-left flex flex-row items-center justify-start gap-2"
+      <Link
+        href={`/@${username}/solutions`}
+        className={buttonVariants({
+          variant: pathname === "solutions" ? "secondary" : "outline",
+          className:
+            "rounded-xl text-left flex flex-row items-center !justify-start gap-2",
+        })}
       >
         <CheckCheck className="text-purple-500" />
         {user._count.solutions}{" "}
         {user._count.solutions <= 1 ? "Solution" : "Solutions"} Posted
-      </Button>
+      </Link>
       <LayoutClientComponents username={username} />
     </div>
   );

apps/web/app/tracks/[track]/challenge/[challenge]/solutions/create/page.client.tsx

@@ -16,8 +16,15 @@ import Link from "next/link";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Markdown } from "@/components/markdown";
 
+
 let timeout: NodeJS.Timeout;
-function CreateSolutionPage({ files }: { files: ChallengeFilesStructure[] }) {
+function CreateSolutionPage({
+  files,
+  solved,
+}: {
+  files: ChallengeFilesStructure[];
+  solved: boolean;
+}) {
   const [editableFiles, setEditableFiles] = useState(files);
   const [activeFile, setActiveFile] = useState<string>(
     `${editableFiles[0].name}-0`
@@ -86,8 +93,8 @@ function CreateSolutionPage({ files }: { files: ChallengeFilesStructure[] }) {
           <Label htmlFor="title" className="text-lg">
             Title
           </Label>
-          <Button type="submit" disabled={loading}>
-            Create Solution
+          <Button type="submit" disabled={loading || !solved}>
+            {!solved ? "Solve the challenge first" : "Create Solution"}
           </Button>
         </div>
         <TextareaAutosize
@@ -97,6 +104,7 @@ function CreateSolutionPage({ files }: { files: ChallengeFilesStructure[] }) {
           ref={titleRef}
           required
           autoFocus
+          disabled={!solved}
         />
         <Label htmlFor="description" className="text-lg">
           Description
@@ -120,6 +128,7 @@ function CreateSolutionPage({ files }: { files: ChallengeFilesStructure[] }) {
                 placeholder="Write description of your solution here(supports Markdown)"
                 minRows={3}
                 value={description}
+                disabled={!solved}
                 onChange={(e) => setDescription(e.target.value)}
                 required
               />
@@ -167,6 +176,12 @@ function CreateSolutionPage({ files }: { files: ChallengeFilesStructure[] }) {
                   ?.name.split(".")[1] as any
               ]
             }
+            options={{
+              readOnly: !solved,
+              readOnlyMessage: {
+                value: "Please solve the challenge first",
+              },
+            }}
             value={
               (editableFiles.find(
                 (file, index) => `${file.name}-${index}` === activeFile

apps/web/app/tracks/[track]/challenge/[challenge]/solutions/create/page.tsx

@@ -3,6 +3,12 @@ import CreateSolutionPage from "./page.client";
 import { prisma } from "@repo/db";
 import { ChallengeFilesStructure } from "@repo/challenges/src";
 import { auth } from "@/auth";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create a solution",
+  description: "Create a solution",
+};
 
 async function CreateSolution({
   params,
@@ -21,6 +27,14 @@ async function CreateSolution({
       track: { slug: params.track },
     },
   });
+  const solved = await prisma.solves.findFirst({
+    where: {
+      type: "accepted",
+      challenge: {
+        slug: params.challenge,
+      },
+    },
+  });
   if (!challenge) notFound();
   const editableFiles: ChallengeFilesStructure[] = [];
   const files = challenge.initialFiles;
@@ -47,7 +61,7 @@ async function CreateSolution({
 
   return (
     <div className="container">
-      <CreateSolutionPage files={editableFiles} />
+      <CreateSolutionPage files={editableFiles} solved={!!solved?.id} />
     </div>
   );
 }

apps/web/app/tracks/[track]/challenge/[challenge]/solved/_components/solutions.tsx

@@ -45,7 +45,7 @@ async function Solutions({
           <Link
             className="flex flex-col gap-2 p-2 bg-border rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700"
             key={solution.id}
-            href={`/solution/${solution.id}`}
+            href={`/solutions/${solution.id}`}
           >
             <div className="flex flex-row items-center justify-between">
               <div className="flex flex-row items-center gap-2">

apps/web/app/tracks/page.tsx

@@ -3,6 +3,7 @@ import { TrackCard } from "@/components/track-card";
 import { prisma } from "@/lib/db";
 import { Metadata, Viewport } from "next";
 import { env } from "@/env.mjs";
+import { getCachedTracks } from "@/cache/tracks";
 
 export const dynamic = "force-dynamic";
 
@@ -38,24 +39,7 @@ export const viewport: Viewport = {
 
 export default async function Tracks({}: { searchParams: { type?: string } }) {
   const session = await auth();
-  const tracks = await prisma.track.findMany({
-    include: {
-      _count: {
-        select: {
-          users: true,
-        },
-      },
-      ...(session?.user?.id
-        ? {
-            users: {
-              where: {
-                id: session.user.id,
-              },
-            },
-          }
-        : undefined),
-    },
-  });
+  const tracks = await getCachedTracks(session?.user?.id);
 
   return (
     <main className="flex mt-12">

apps/web/components/hero/index.tsx

@@ -13,23 +13,26 @@ export async function Hero() {
         <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
           <div className="flex flex-col justify-center space-y-4">
             <div className="space-y-2">
-              {githubStars != null ? (
-                <Link
-                  href={siteConfig.urls.github}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <Badge
-                    aria-hidden="true"
-                    className="rounded-md px-3.5 py-1.5"
-                    variant="secondary"
+              <div className="w-full flex">
+                {githubStars != null ? (
+                  <Link
+                    href={siteConfig.urls.github}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="mx-auto lg:mx-0"
                   >
-                    <Github className="mr-2 size-3.5" aria-hidden="true" />
-                    {githubStars} stars on GitHub
-                  </Badge>
-                  <span className="sr-only">GitHub</span>
-                </Link>
-              ) : null}
+                    <Badge
+                      aria-hidden="true"
+                      className="rounded-md px-3.5 py-1.5"
+                      variant="secondary"
+                    >
+                      <Github className="mr-2 size-3.5" aria-hidden="true" />
+                      {githubStars} stars on GitHub
+                    </Badge>
+                    <span className="sr-only">GitHub</span>
+                  </Link>
+                ) : null}
+              </div>
               <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center lg:text-left">
                 Learn JavaScript frameworks with interactive challenges
               </h1>