all problems in poroblem sections

vishalmishraa · Jul 25, 2024 · d5383ee · d5383ee
1 parent f469346
commit d5383ee
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 58 deletions.
diff --git a/apps/web/app/components/Landing.tsx b/apps/web/app/components/Landing.tsx
@@ -1,14 +1,14 @@
 import { Contests } from "./Contests";
 import { Hero } from "./Hero";
-import { Problems } from "./Problems";
+import { PopularProblems } from "./PopularProblems";
 
 export function Landing() {
   return (
     <div className="flex flex-col min-h-screen">
       <main className="flex-1">
         <Hero />
-        <Contests/>
-        <Problems/>
+        <Contests />
+        <PopularProblems />
       </main>
     </div>
   );

diff --git a/apps/web/app/components/PopularProblems.tsx b/apps/web/app/components/PopularProblems.tsx
@@ -0,0 +1,60 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "./ui/card";
+import { getProblems } from "../controllers/problem";
+import { PrimaryButton } from "./LinkButton";
+
+export async function PopularProblems() {
+  const problems = await getProblems();
+
+  return (
+    <section className="bg-white dark:bg-gray-900 py-8 md:py-12 min-h-screen">
+      <div className="container mx-auto px-4 md:px-6">
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold mb-2">Popular Problems</h2>
+          <p className="text-gray-500 dark:text-gray-400">
+            Check out the most popular programming problems on algoearth.
+          </p>
+        </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {problems.map((problem) => (
+            <ProblemCard problem={problem} key={problem.id} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ProblemCard({ problem }: { problem: any }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{problem.title}</CardTitle>
+        <CardDescription>Easy problem for beginners</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-gray-500 dark:text-gray-400">Difficulty</p>
+            <p>{problem.difficulty}</p>
+          </div>
+          <div>
+            <p className="text-gray-500 dark:text-gray-400">Submissions</p>
+            <p>{problem.solved}</p>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <PrimaryButton href={`/problem/${problem.id}`}>
+          View Problem
+        </PrimaryButton>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/web/app/components/Problems.tsx b/apps/web/app/components/Problems.tsx
@@ -1,60 +1,61 @@
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from "./ui/card";
-import { getProblems } from "../controllers/problem";
-import { PrimaryButton } from "./LinkButton";
+    Card,
+    CardHeader,
+    CardTitle,
+    CardDescription,
+    CardContent,
+    CardFooter,
+  } from "./ui/card";
+  import { getAllProblems, getProblems } from "../controllers/problem";
+  import { PrimaryButton } from "./LinkButton";
+
+  export async function Problems() {
+    const problems = await getAllProblems();
 
-export async function Problems() {
-  const problems = await getProblems();
-
-  return (
-    <section className="bg-white dark:bg-gray-900 py-8 md:py-12 min-h-screen">
-      <div className="container mx-auto px-4 md:px-6">
-        <div className="mb-6">
-          <h2 className="text-2xl font-bold mb-2">Popular Problems</h2>
-          <p className="text-gray-500 dark:text-gray-400">
-            Check out the most popular programming problems on algoearth.
-          </p>
-        </div>
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {problems.map((problem) => (
-            <ProblemCard problem={problem} key={problem.id} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function ProblemCard({ problem }: { problem: any }) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{problem.title}</CardTitle>
-        <CardDescription>Easy problem for beginners</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-gray-500 dark:text-gray-400">Difficulty</p>
-            <p>{problem.difficulty}</p>
+    return (
+      <section className="bg-white dark:bg-gray-900 py-8 md:py-12 min-h-screen">
+        <div className="container mx-auto px-4 md:px-6">
+          <div className="mb-6">
+            <h2 className="text-2xl font-bold mb-2">Popular Problems</h2>
+            <p className="text-gray-500 dark:text-gray-400">
+              Check out the most popular programming problems on algoearth.
+            </p>
           </div>
-          <div>
-            <p className="text-gray-500 dark:text-gray-400">Submissions</p>
-            <p>{problem.solved}</p>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {problems.map((problem) => (
+              <ProblemCard problem={problem} key={problem.id} />
+            ))}
           </div>
         </div>
-      </CardContent>
-      <CardFooter>
-        <PrimaryButton href={`/problem/${problem.id}`}>
-          View Problem
-        </PrimaryButton>
-      </CardFooter>
-    </Card>
-  );
-}
+      </section>
+    );
+  }
+
+  function ProblemCard({ problem }: { problem: any }) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{problem.title}</CardTitle>
+          <CardDescription>Easy problem for beginners</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-500 dark:text-gray-400">Difficulty</p>
+              <p>{problem.difficulty}</p>
+            </div>
+            <div>
+              <p className="text-gray-500 dark:text-gray-400">Submissions</p>
+              <p>{problem.solved}</p>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <PrimaryButton href={`/problem/${problem.id}`}>
+            View Problem
+          </PrimaryButton>
+        </CardFooter>
+      </Card>
+    );
+  }
+
diff --git a/apps/web/app/controllers/problem.ts b/apps/web/app/controllers/problem.ts
@@ -14,6 +14,19 @@ export const getProblems = async () => {
     return problems;
 };
 
+export const getAllProblems = async () => {
+    const problems = await db.problem.findMany({
+        where: {
+            hidden: false,
+        },
+        include: {
+            defaultCode: true,
+        },
+    });
+
+    return problems;
+}
+
 export const getProblem = async (ProblemId: string, contestId: string) => {
     if (contestId) {
         try {