Merge pull request #5 from CS3219-AY2425S1/frontend

Merge Frontend into Main

Author: WZWren

peerprep/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

peerprep/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# environment file
+.env
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

peerprep/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

peerprep/api/gateway.ts

@@ -0,0 +1,73 @@
+import { Question, StatusBody, QuestionFullBody } from "./structs";
+
+const questions: { [key: string]: Question } = {
+  "0" : {
+    "id": 0,
+    "difficulty": 2,
+    "title": "Two Sum",
+    "description": "Given an array of integers, return indices of the two numbers such that they add up to a specific target.",
+    "test_cases": {
+	  	"[2, 7, 11, 15], 9" : "[0, 1]",
+  		"[3, 2, 4], 6"      : "[1, 2]",
+  		"[3, 3], 6"         : "[0, 1]"
+	  }
+  },
+  "1" : {
+    "id": 1,
+    "difficulty": 1,
+    "title": "Reverse Integer",
+    "description": "Given a 32-bit signed integer, reverse digits of an integer.",
+    "test_cases": {
+		  "123" : "321",
+		  "1"   : "1",
+		  "22"  : "22"
+	  }
+  }
+};
+
+export async function fetchQuestion(questionId: string): Promise<Question|StatusBody> {
+  // remove this when services are up
+  if (process.env.DEV_ENV === "dev") {
+    return questions[questionId] === undefined
+        ? {error: "Question not found", status: 404}
+        : questions[questionId];
+  }
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/solve/${questionId}`);
+    if (!response.ok) {
+      return {
+        ...(await response.json()),
+        status: response.status
+      };
+    }
+    return await response.json() as Question;
+  } catch (err: any) {
+    return { error: err.message, status: 0};
+  }
+}
+
+export async function addQuestion(body: QuestionFullBody): Promise<StatusBody> {
+  try {
+    const response = await fetch(
+        `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`,
+        {
+          method: "POST",
+          body: JSON.stringify(body).replace(/(\"difficulty\":)\"([1-3])\"/, `$1$2`),
+          headers: {
+            "Content-type": "application/json; charset=UTF-8"
+          }
+        }
+    );
+    if (response.ok) {
+      return {
+        status: response.status
+      };
+    }
+    return {
+      error: (await response.json())["Error adding question: "],
+      status: response.status
+    };
+  } catch (err: any) {
+    return { error: err.message, status: 0};
+  }
+}

peerprep/api/structs.ts

@@ -0,0 +1,32 @@
+export enum Difficulty {
+  Easy = 1,
+  Medium,
+  Hard
+}
+
+export interface QuestionBody {
+  difficulty: Difficulty;
+  title: string;
+  description: string;
+}
+
+export interface TestCase {
+  test_cases: {
+    [key: string]: string;
+  };
+}
+
+export interface QuestionFullBody extends QuestionBody, TestCase {}
+
+export interface Question extends QuestionFullBody {
+  id: number;
+}
+
+export interface StatusBody {
+  status: number;
+  error?: string;
+}
+
+export function isError(obj: Question | StatusBody): obj is StatusBody {
+  return (obj as StatusBody).error !== undefined;
+}

peerprep/app/globals.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  @apply overflow-hidden;
+  @apply bg-black;
+  height: 100%;
+}
+
+body,
+p,
+h1,
+h2 {
+  @apply text-gray-100;
+}

peerprep/app/layout.tsx

@@ -0,0 +1,28 @@
+import TitleBar from "@/components/shared/TitleBar";
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import Container from "@/components/shared/Container";
+import styles from "@/style/layout.module.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <TitleBar />
+        <Container className={styles.main_container}>{children}</Container>
+      </body>
+    </html>
+  );
+}

peerprep/app/page.tsx

@@ -0,0 +1,5 @@
+import Link from "next/link";
+
+export default function Home() {
+  return <Link href="/questions">Questions</Link>;
+}

peerprep/app/questions/[question]/page.tsx

@@ -0,0 +1,28 @@
+import { fetchQuestion } from '@/api/gateway';
+import { Question as QnType, StatusBody, isError } from "@/api/structs";
+import styles from '@/style/question.module.css';
+import ErrorBlock from '@/components/shared/ErrorBlock';
+import React from 'react'
+import QuestionBlock from './question';
+
+type Props = {
+  params: {
+    question: string
+  }
+}
+
+async function Question({ params }: Props) {
+  const question = await fetchQuestion(params.question);
+
+  return (
+    <div className={styles.wrapper}>
+      {
+        isError(question)
+        ? <ErrorBlock err={question as StatusBody}/>
+        : <QuestionBlock question={question as QnType}/>
+      }
+    </div>
+  )
+}
+
+export default Question;

peerprep/app/questions/[question]/question.tsx

@@ -0,0 +1,55 @@
+import { Question, StatusBody, Difficulty } from "@/api/structs";
+import styles from '@/style/question.module.css';
+
+interface Props {
+  question : Question;
+}
+
+const difficultyColor = (diff: Difficulty) => {
+  return (
+    diff === Difficulty.Easy ? <p className={`${styles.title} ${styles.easy}`}>Easy</p>
+    : diff === Difficulty.Medium ? <p className={`${styles.title} ${styles.med}`}>Med</p>
+    : <p className={`${styles.title} ${styles.hard}`}>Hard</p>
+  );
+}
+
+function QuestionBlock({ question }: Props) {
+  const keys = question.test_cases ? Object.keys(question.test_cases) : [];
+
+  const createRow = (key: string) => (
+    <tr key={key}>
+      <td className={`${styles.table} ${styles.cell}`}>{key}</td>
+      <td className={`${styles.table} ${styles.cell}`}>{question.test_cases[key]}</td>
+    </tr>
+  );
+
+  return (
+    <>
+      <div className={styles.qn_container}>
+        <div className={styles.title_wrapper}>
+          <h1 className={styles.title}>Q{question.id}: {question.title}</h1>
+          {difficultyColor(question.difficulty)}
+        </div>
+        <br/>
+        <p>{question.description}</p>
+        <br/>
+        {question.test_cases && (
+          <table className={styles.table}>
+            <tbody>
+              <tr>
+                <th className={`${styles.table} ${styles.header} ${styles.input}`}>Input</th>
+                <th className={`${styles.table} ${styles.header} ${styles.output}`}>Expected Output</th>
+              </tr>
+              {keys.map(createRow)}
+            </tbody>
+          </table>
+        )}
+      </div>
+      <form className={styles.editor_container}>
+        <textarea className={styles.code_editor}/>
+      </form>
+    </>
+  );
+}
+
+export default QuestionBlock;