-
+
);
-}
+};
export default NewQuestion;
diff --git a/peerprep/app/questions/page.tsx b/peerprep/app/questions/page.tsx
index 79f4b080b9..48c169e0b2 100644
--- a/peerprep/app/questions/page.tsx
+++ b/peerprep/app/questions/page.tsx
@@ -1,14 +1,42 @@
import React from "react";
import QuestionList from "@/components/questionpage/QuestionList";
import Matchmaking from "@/components/questionpage/Matchmaking";
+import { QuestionFilterProvider } from "@/contexts/QuestionFilterContext";
+import { hydrateUid } from "../actions/server_actions";
+import { isError, Question, StatusBody, UserData } from "@/api/structs";
+import { UserInfoProvider } from "@/contexts/UserInfoContext";
+import { fetchAllQuestions } from "@/app/questions/helper";
+import { redirect } from "next/navigation";
+
+async function QuestionsPage() {
+ const userData = (await hydrateUid()) as UserData;
+
+ if (!userData) {
+ redirect("/auth/login");
+ }
+
+ const questions: Question[] | StatusBody = await fetchAllQuestions();
+
+ if (isError(questions)) {
+ return (
+
+ );
+ }
-const QuestionsPage = () => {
return (
-
-
-
-
+
+
+
+
+
);
-};
+}
export default QuestionsPage;
diff --git a/peerprep/app/theme-provider.tsx b/peerprep/app/theme-provider.tsx
new file mode 100644
index 0000000000..ebc04774af
--- /dev/null
+++ b/peerprep/app/theme-provider.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext } from "react";
+
+export const ThemeContext = createContext({});
+
+export default function ThemeProvider({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return
{children};
+}
diff --git a/peerprep/components.json b/peerprep/components.json
new file mode 100644
index 0000000000..bcec1f91f9
--- /dev/null
+++ b/peerprep/components.json
@@ -0,0 +1,20 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "app/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ }
+}
\ No newline at end of file
diff --git a/peerprep/components/animations/FadeUp.tsx b/peerprep/components/animations/FadeUp.tsx
new file mode 100644
index 0000000000..0c3af43e22
--- /dev/null
+++ b/peerprep/components/animations/FadeUp.tsx
@@ -0,0 +1,27 @@
+"use client";
+import { motion } from "framer-motion";
+import { ReactNode } from "react";
+
+// Code adapted from https://staticmania.com/blog/how-to-use-framer-motion-for-animations-in-next-js
+
+export const fadeUpVariant = {
+ initial: { opacity: 0, y: 10 },
+ animate: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ duration: 0.2,
+ },
+ },
+ exit: { opacity: 0 },
+};
+
+const FadeUpAnimation = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default FadeUpAnimation;
diff --git a/peerprep/components/home/BoringSlideShow.tsx b/peerprep/components/home/BoringSlideShow.tsx
new file mode 100644
index 0000000000..07a7cadcf8
--- /dev/null
+++ b/peerprep/components/home/BoringSlideShow.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import Carousel, { ImageProps } from "@/components/home/Carousel";
+
+const images: ImageProps[] = [
+ {
+ url: "/boring1.png",
+ alt: "L**tc*de",
+ },
+ {
+ url: "/boring2.png",
+ alt: "H*ckerr*nk",
+ },
+ {
+ url: "/boring3.png",
+ alt: "K*ttis",
+ },
+];
+
+const BoringSlideShow = () => {
+ return
;
+};
+
+export default BoringSlideShow;
diff --git a/peerprep/components/home/Carousel.tsx b/peerprep/components/home/Carousel.tsx
new file mode 100644
index 0000000000..59080e425c
--- /dev/null
+++ b/peerprep/components/home/Carousel.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, MotionConfig } from "framer-motion";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+
+export type ImageProps = {
+ url: string;
+ alt: string;
+};
+
+const Carousel = ({ images }: { images: ImageProps[] }) => {
+ const [index, setIndex] = useState(0);
+ const intervalRef = useRef
(null);
+
+ const clearExistingInterval = () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ };
+
+ const startInterval = () => {
+ clearExistingInterval();
+ intervalRef.current = setInterval(() => {
+ setIndex((prevIndex) => (prevIndex + 1) % images.length);
+ }, 5000);
+ };
+
+ const prevSlide = () => {
+ setIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+ clearExistingInterval();
+ startInterval();
+ };
+
+ const nextSlide = () => {
+ setIndex((prevIndex) => (prevIndex + 1) % images.length);
+ clearExistingInterval();
+ startInterval();
+ };
+
+ useEffect(() => {
+ startInterval();
+
+ return () => clearExistingInterval();
+ }, [images.length]);
+
+ return (
+
+
+
+
+
+ {[...images, ...images].map((image, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/peerprep/components/modifyQuestion/Tiptap.tsx b/peerprep/components/modifyQuestion/Tiptap.tsx
new file mode 100644
index 0000000000..6cb6d7c5d7
--- /dev/null
+++ b/peerprep/components/modifyQuestion/Tiptap.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import "@/style/tiptap.css";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import React from "react";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { Subscript } from "@tiptap/extension-subscript";
+import { Superscript } from "@tiptap/extension-superscript";
+import { Link } from "@tiptap/extension-link";
+import { Underline } from "@tiptap/extension-underline";
+import { MenuBar } from "@/components/modifyQuestion/MenuBar";
+
+type TipTapProps = {
+ defaultContent: string;
+ onChange: (richText: string) => void;
+};
+
+const Tiptap = ({ defaultContent, onChange }: TipTapProps) => {
+ const editor = useEditor({
+ extensions: [
+ StarterKit,
+ Subscript,
+ Superscript,
+ Underline,
+ Link,
+ Placeholder.configure({
+ placeholder: "Add your question here",
+ }),
+ ],
+ content: defaultContent,
+ immediatelyRender: false,
+ onUpdate({ editor }) {
+ onChange(editor.getHTML());
+ },
+ });
+
+ return (
+
+ );
+};
+
+export default Tiptap;
diff --git a/peerprep/components/modifyQuestion/Tooltip.tsx b/peerprep/components/modifyQuestion/Tooltip.tsx
new file mode 100644
index 0000000000..0b5d9f3e80
--- /dev/null
+++ b/peerprep/components/modifyQuestion/Tooltip.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "@/style/addquestion.module.css";
+
+type TooltipProps = {
+ text: string;
+ children: React.ReactNode;
+};
+
+const Tooltip = ({ text, children }: TooltipProps) => {
+ return (
+
+ {children}
+ {text}
+
+ );
+};
+
+export default Tooltip;
diff --git a/peerprep/components/navbar/Navbar.tsx b/peerprep/components/navbar/Navbar.tsx
new file mode 100644
index 0000000000..f231185128
--- /dev/null
+++ b/peerprep/components/navbar/Navbar.tsx
@@ -0,0 +1,114 @@
+import Link from "next/link";
+import React from "react";
+import {
+ Disclosure,
+ DisclosureButton,
+ DisclosurePanel,
+} from "@headlessui/react";
+import { Menu, X } from "lucide-react";
+import Image from "next/image";
+import { ProfileDropdown } from "@/components/navbar/ProfileDropdown";
+
+// Navbar adapted from https://tailwindui.com/components/application-ui/navigation/navbars
+
+interface NavbarItemProps {
+ href: string;
+ name: string;
+}
+
+const navigation: NavbarItemProps[] = [
+ { href: "/", name: "Home" },
+ { href: "/questions", name: "Questions" },
+ // { href: "/auth/login", name: "Login" },
+];
+
+const MobileMenu = () => {
+ return (
+
+ {/* Mobile menu button*/}
+
+
+ Open main menu
+
+
+
+
+ );
+};
+
+const MobileDropdown = () => {
+ return (
+
+
+ {navigation.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+ );
+};
+
+const NavigationList = () => {
+ return (
+
+
+ {navigation.map((item) => (
+
+ {item.name}
+
+ ))}
+
+
+ {/* Profile dropdown */}
+
+
+ {authenticated && (
+
+ )}
+
-
+
setFontSize(Number(e.target.value))}
/>
@@ -83,21 +315,59 @@ export default function CollabEditor({ question }: Props) {
onChange={(e) => setTheme(e.target.value)}
options={themes}
className={
- "border border-gray-600 bg-gray-800 text-white p-2 rounded"
+ "rounded border border-gray-600 bg-gray-800 p-2 text-white"
}
/>
setLanguage(e.target.value)}
+ onChange={(e) => setLanguage(e.target.value as Language)}
options={languages}
className={
- "border border-gray-600 bg-gray-800 text-white p-2 rounded"
+ "rounded border border-gray-600 bg-gray-800 p-2 text-white"
}
/>
-
+
formatCode(value, language)}>
+ Format code
+
+
+ {roomID &&
+ (connected ? (
+
+ ) : (
+
+
+ Disconnected. Check logs.
+
+
+ ))}
+
+ {roomID &&
+ (connected ? (
+
+
+
+ {otherUserConnected
+ ? "Other user connected"
+ : "Other user disconnected"}
+
+
+ ) : (
+
Disconnected. Check logs.
+ ))}
();
+ const [callStarts, setCallStarts] = useState(false);
+
+ const myVideo = useRef(null);
+ const userVideo = useRef(null);
+ const connectionRef = useRef();
+
+ useEffect(() => {
+ socket.removeAllListeners();
+ socket.open();
+ return () => {
+ console.log("socket cleanup called");
+ if (socket) {
+ console.log("destroying socket");
+ socket.close();
+ }
+ if (connectionRef.current) {
+ connectionRef.current.destroy();
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ // capture the stream within the cleanup function itself.
+ let videoElement: MediaStream | undefined;
+
+ navigator.mediaDevices
+ .getUserMedia({ video: true, audio: true })
+ .then((newStream) => {
+ console.log("new stream's status is " + newStream.active);
+ newStream.getTracks().forEach((track: MediaStreamTrack) => {
+ console.log(
+ "media track status (ready/enabled): " +
+ track.readyState +
+ "/" +
+ track.enabled,
+ );
+ });
+ if (myVideo.current) {
+ console.log("can set myVideo.current");
+ myVideo.current.srcObject = newStream;
+ }
+ setStream(newStream);
+ videoElement = newStream;
+ })
+ .catch((err) => console.log("failed to get stream", err));
+
+ return () => {
+ console.log("cleaning up media");
+ if (videoElement) {
+ console.log("destroying stream");
+ videoElement.getTracks().forEach((track) => track.stop());
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ if (!roomId || !stream || !socket.connected) {
+ console.log("stream status: " + stream);
+ console.log("connection status: " + socket.connected);
+ return;
+ }
+ console.log("in hook");
+
+ // clear all listeners if we are reinitializing this.
+ socket.removeAllListeners();
+ console.log("removed all listeners");
+
+ // when we receive the first peer connection, we immediately send out
+ // a peer connection request.
+ attachSocketInitiator(stream, roomId, userVideo, setCallStarts, connectionRef);
+
+ // as the receiver, I will propagate my data outwards now.
+ attachSocketReceiver(stream, roomId, userVideo, setCallStarts, connectionRef);
+
+ socket.on("endCall", () => {
+ // immediately destroy the socket listeners
+ destroyCallListeners(roomId);
+ if (userVideo.current) {
+ (userVideo.current.srcObject as MediaStream)
+ .getTracks()
+ .forEach((tracks: MediaStreamTrack) => {
+ tracks.stop();
+ });
+ userVideo.current.srcObject = null;
+ setCallStarts(false);
+ }
+ if (connectionRef.current && !connectionRef.current.destroyed) {
+ connectionRef.current.destroy();
+ }
+ // reattach the sockets
+ attachSocketInitiator(stream, roomId, userVideo, setCallStarts, connectionRef);
+ attachSocketReceiver(stream, roomId, userVideo, setCallStarts, connectionRef);
+ // rejoin the room
+ socket.emit("joinRoom", {
+ target: roomId,
+ });
+ });
+
+ socket.emit("joinRoom", {
+ target: roomId,
+ });
+ console.log("applied all hooks");
+ }, [stream, socket.connected]);
+
+ return (
+
+
+
+
+
+ {!callStarts &&
+
+ No signal from other user.
+ (Don't worry - the call doesn't start until we get a signal from both users!)
+
}
+
+
+
+ // TODO: move this to some admin panel or something
+
router.push(`questions/new`)}>
Add Question
+
+
+ {isMatching
+ ? "Cancel Match"
+ : matchHash === ""
+ ? "Find Match"
+ : "Redirecting..."}
+
+ {!isMatching && (
+
setDifficultyFilter(e.target.value)}
+ // truthfully we don't need this difficulties list, but we are temporarily including it
+ options={difficulties}
+ />
+ )}
+ {!isMatching && (
+
+ setTopicFilter(
+ e.target.value === "all" ? topicList : [e.target.value],
+ )
+ }
+ options={topicList}
+ />
+ )}
+ {isMatching && }
+
);
};
diff --git a/peerprep/components/questionpage/QuestionCard.tsx b/peerprep/components/questionpage/QuestionCard.tsx
index b878b76487..79c4e4a8a8 100644
--- a/peerprep/components/questionpage/QuestionCard.tsx
+++ b/peerprep/components/questionpage/QuestionCard.tsx
@@ -4,8 +4,9 @@ import { Difficulty, Question } from "@/api/structs";
import PeerprepButton from "../shared/PeerprepButton";
import { useRouter } from "next/navigation";
import styles from "@/style/questionCard.module.css";
-import { deleteQuestion } from "@/app/api/internal/questions/helper";
-import DOMPurify from "dompurify";
+import { deleteQuestion } from "@/app/questions/helper";
+import DOMPurify from "isomorphic-dompurify";
+import { useUserInfo } from "@/contexts/UserInfoContext";
type QuestionCardProps = {
question: Question;
@@ -13,6 +14,10 @@ type QuestionCardProps = {
const QuestionCard: React.FC
= ({ question }) => {
const router = useRouter();
+ // Note that this is purely UI, there are additional checks in the API call
+ const userData = useUserInfo();
+ const isAdmin = userData.isAdmin;
+
const handleDelete = async () => {
if (
confirm(
@@ -20,6 +25,7 @@ const QuestionCard: React.FC = ({ question }) => {
)
) {
const status = await deleteQuestion(question.id);
+ router.refresh();
if (status.error) {
console.log("Failed to delete question.");
console.log(`Code ${status.status}: ${status.error}`);
@@ -30,6 +36,9 @@ const QuestionCard: React.FC = ({ question }) => {
console.log("Deletion cancelled.");
}
};
+ const handleEdit = () => {
+ router.push(`questions/edit/${question.id}`);
+ };
const getDifficultyColor = (difficulty: Difficulty) => {
switch (difficulty) {
@@ -52,12 +61,12 @@ const QuestionCard: React.FC = ({ question }) => {
return (
-
+
{question.title}
Difficulty:{" "}
@@ -72,7 +81,7 @@ const QuestionCard: React.FC = ({ question }) => {
-
+
{
= ({ question }) => {
-
router.push(`questions/${question.id}`)}>
+ router.push(`/questions/${question.id}`)}
+ >
View
- Delete
+ {isAdmin && Edit}
+ {isAdmin && (
+ Delete
+ )}
);
diff --git a/peerprep/components/questionpage/QuestionList.tsx b/peerprep/components/questionpage/QuestionList.tsx
index 62a0396706..5901e00da6 100644
--- a/peerprep/components/questionpage/QuestionList.tsx
+++ b/peerprep/components/questionpage/QuestionList.tsx
@@ -1,43 +1,33 @@
"use client";
import React, { useEffect, useState } from "react";
import QuestionCard from "./QuestionCard";
-import { Question, StatusBody, Difficulty, isError } from "@/api/structs";
+import { Difficulty, Question } from "@/api/structs";
import PeerprepDropdown from "../shared/PeerprepDropdown";
import PeerprepSearchBar from "../shared/PeerprepSearchBar";
+import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
-const QuestionList: React.FC = () => {
- const [questions, setQuestions] = useState
([]);
- const [loading, setLoading] = useState(true);
- const [difficultyFilter, setDifficultyFilter] = useState(
- Difficulty.All
- );
- const [topicFilter, setTopicFilter] = useState("all");
- const [searchFilter, setSearchFilter] = useState("");
- const [topics, setTopics] = useState(["all"]);
-
- useEffect(() => {
- const fetchQuestions = async () => {
- const payload = await fetch(
- `${process.env.NEXT_PUBLIC_NGINX}/api/internal/questions`
- ).then((res) => res.json());
- // uh
- if (isError(payload)) {
- // should also reflect the error
- return;
- }
- const data: Question[] = payload;
+type Props = {
+ questions: Question[];
+};
- setLoading(false);
- setQuestions(data);
+// TODO make multiple select for topics at least
+const QuestionList = ({ questions }: Props) => {
+ const [searchFilter, setSearchFilter] = useState("");
- // get all present topics in all qns
- const uniqueTopics = Array.from(
- new Set(data.flatMap((question) => question.topicTags))
- );
- setTopics(["all", ...uniqueTopics]);
- };
+ const {
+ topicList,
+ setTopicList,
+ difficultyFilter,
+ setDifficultyFilter,
+ topicFilter,
+ setTopicFilter,
+ } = useQuestionFilter();
- fetchQuestions();
+ useEffect(() => {
+ const uniqueTopics = Array.from(
+ new Set(questions.flatMap((question) => question.topicTags)),
+ );
+ setTopicList(["all", ...uniqueTopics]);
}, []);
const filteredQuestions = questions.filter((question) => {
@@ -45,8 +35,7 @@ const QuestionList: React.FC = () => {
difficultyFilter === Difficulty.All ||
Difficulty[question.difficulty] === difficultyFilter;
const matchesTopic =
- topicFilter === topics[0] ||
- (question.topicTags ?? []).includes(topicFilter);
+ topicFilter === "all" || (question.topicTags ?? []).includes(topicFilter);
const matchesSearch =
searchFilter === "" ||
(question.title ?? "").toLowerCase().includes(searchFilter.toLowerCase());
@@ -56,9 +45,19 @@ const QuestionList: React.FC = () => {
const sortedQuestions = filteredQuestions.sort((a, b) => a.id - b.id);
+ const handleSetDifficulty = (e: React.ChangeEvent) => {
+ const diff = e.target.value;
+ setDifficultyFilter(diff);
+ };
+
+ const handleSetTopics = (e: React.ChangeEvent) => {
+ const topic = e.target.value;
+ setTopicFilter(topic);
+ };
+
return (
-
-
+
+
{
setDifficultyFilter(e.target.value)}
+ onChange={handleSetDifficulty}
options={Object.keys(Difficulty).filter((key) => isNaN(Number(key)))}
/>
setTopicFilter(e.target.value)}
- options={topics}
+ onChange={handleSetTopics}
+ options={topicList}
/>
- {loading ? (
-
Loading questions...
- ) : (
-
- {sortedQuestions.map((question) => (
-
- ))}
-
- )}
+
+ {sortedQuestions.map((question) => (
+
+ ))}
+
);
};
diff --git a/peerprep/components/shared/PeerprepButton.tsx b/peerprep/components/shared/PeerprepButton.tsx
index c0436a76ad..c2e70d3ec6 100644
--- a/peerprep/components/shared/PeerprepButton.tsx
+++ b/peerprep/components/shared/PeerprepButton.tsx
@@ -3,18 +3,27 @@ import React from "react";
import styles from "@/style/elements.module.css";
type PeerprepButtonProps = {
- onClick: () => void;
+ onClick?: () => void;
children: React.ReactNode;
className?: string;
+ disabled?: boolean;
+ type?: "button" | "submit" | "reset";
};
const PeerprepButton: React.FC
= ({
onClick,
children,
className,
+ disabled,
+ type,
}) => {
return (
-