monaco-editor-lsp-next/src/app/(app)/problems/[id]/layout.tsx

import prisma from "@/lib/prisma";
import { notFound } from "next/navigation";
import { ProblemStoreProvider } from "@/providers/problem-store-provider";
import { PlaygroundHeader } from "@/components/features/playground/header";

interface ProblemProps {
  params: Promise<{ id: string }>;
  children: React.ReactNode;
}

export default async function ProblemLayout({
  params,
  children,
}: ProblemProps) {
  const { id } = await params;

  const [problem, editorLanguageConfigs, languageServerConfigs, submissions] = await Promise.all([
    prisma.problem.findUnique({
      where: { id },
      include: {
        templates: true,
        testcases: {
          include: {
            data: true,
          },
        },
      },
    }),
    prisma.editorLanguageConfig.findMany(),
    prisma.languageServerConfig.findMany(),
    prisma.submission.findMany({
      where: { problemId: id },
    })
  ]);

  if (!problem) {
    return notFound();
  }

  return (
    <div className="flex flex-col h-screen">
      <ProblemStoreProvider
        problemId={id}
        problem={problem}
        editorLanguageConfigs={editorLanguageConfigs}
        languageServerConfigs={languageServerConfigs}
        submissions={submissions}
      >
        <PlaygroundHeader />
        <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
          {children}
        </main>
      </ProblemStoreProvider>
    </div>
  );
}