- {!isLoading && (
- <>
-
-
Your challenge: {question?.title}
-
{question?.description}
-
-
-
- )}
-
+
+
+ {!isLoading && (
+ <>
+
+
Your challenge: {question?.title}
+
{question?.description}
+
+
+
+ )}
+
-
{/* chat section */}
Chat with your partner
-
+
{chatHistory.map((msg, index) => (
- {msg.senderId === cookies.get("userId") ? "You" : "Partner"}: {msg.message}
+ {msg.senderId === cookies.get("userId") ? "You" : "Partner"}:{" "}
+ {msg.message}
))}
- setChatMessage(e.target.value)}
- />
- } onClick={handleSendMessage}>
- Send
-
+
+ setChatMessage(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ handleSendMessage()
+ }
+ }}
+ />
+ }
+ onClick={handleSendMessage}
+ >
+ Send
+
+
-
-
-
Type below to ask help from AI!
- {aiResponse !== null && (
-
-
- Gemini Response:
- {aiResponse}
-
-
- )}
-
-
setAiText(e.target.value)}
+
+
+
+
+
+ {aiResponse !== null && (
+
+
+ Gemini Response:
+
+ {aiResponse}
+
+
+
+ )}
+
+ setAiText(e.target.value)}
/>
{isAiLoading ? (
- ) : (
- }
- onClick={handleAi}
- > Send
+ ) : (
+
)}
-
-
+
+
+
);
}
diff --git a/client/src/components/Header/Header.js b/client/src/components/Header/Header.js
index a04928ea33..e949b9ae55 100644
--- a/client/src/components/Header/Header.js
+++ b/client/src/components/Header/Header.js
@@ -1,11 +1,18 @@
-import { AppBar, Toolbar, Typography, Box, Button, ButtonGroup, CircularProgress, Stack } from "@mui/material";
+import {
+ AppBar,
+ Box,
+ Button,
+ CircularProgress,
+ SvgIcon,
+ Toolbar,
+ Typography
+} from "@mui/material";
import { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { ReactComponent as Logo } from "../../assets/logo.svg";
import { useAuth } from "../../hooks/useAuth";
function Header() {
- // TEMP
- let navigate = useNavigate();
const { isAuthenticated, checkIsAuthenticated } = useAuth();
const [loading, setLoading] = useState(true);
@@ -21,9 +28,13 @@ function Header() {
return (
-
-
- PeerPrep
+
+
+
@@ -31,13 +42,19 @@ function Header() {
) : isAuthenticated ? (
-
-
diff --git a/client/src/components/HomePage/HomePage.js b/client/src/components/HomePage/HomePage.js
index da3f5053a4..61d3b9ba66 100644
--- a/client/src/components/HomePage/HomePage.js
+++ b/client/src/components/HomePage/HomePage.js
@@ -1,6 +1,6 @@
import { Grid2 } from "@mui/material";
-import QueueCard from "./QueueCard";
import BasicCard from "./BasicCard";
+import QueueCard from "./QueueCard";
function HomePage() {
return (
@@ -13,12 +13,10 @@ function HomePage() {
justifyContent: "center",
}}
>
+
-
- Ongoing Session
-
-
+
@@ -39,7 +37,8 @@ function HomePage() {
description="View your previous question attempts and
their solutions to track your progress and learn from
your mistakes."
- label="Profile"
+ label="Coming Soon"
+ disabledButton={true}
/>
@@ -49,7 +48,8 @@ function HomePage() {
description="Enjoyed collaborating with someone? View
your past matches and send a friend request to your previous
matches."
- label="Previous Matches"
+ label="Coming Soon"
+ disabledButton={true}
/>
@@ -59,61 +59,4 @@ function HomePage() {
);
}
-export default HomePage;
-
-/**
- * <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ongoing Session
-
-
-
-
-
-
-
-
- *
- *
- */
+export default HomePage;
\ No newline at end of file
diff --git a/client/src/components/HomePage/QueueCard.js b/client/src/components/HomePage/QueueCard.js
index 67f5217e68..0730f8df39 100644
--- a/client/src/components/HomePage/QueueCard.js
+++ b/client/src/components/HomePage/QueueCard.js
@@ -17,13 +17,12 @@ import {
import { toggleButtonGroupClasses } from "@mui/material/ToggleButtonGroup";
import axios from "axios";
import { useEffect, useState } from "react";
-import { SVC_ENDPOINTS } from "../../consts/api";
-import { matchingSocket } from "../../socket";
+import { useNavigate } from "react-router-dom";
import Cookies from "universal-cookie";
-import CircularWithValueLabel from "./CircularWithValueLabel";
+import { SVC_ENDPOINTS } from "../../consts/api";
import { DIFFICULTY } from "../../consts/difficulty";
-import { Navigate, useNavigate } from "react-router-dom";
-import { collaborationSocket } from "../../socket";
+import { collaborationSocket, matchingSocket } from "../../socket";
+import CircularWithValueLabel from "./CircularWithValueLabel";
const steps = ["Difficulty", "Topic", "Start Queue"];
@@ -113,7 +112,7 @@ function QueueCard() {
clearInterval(timer);
const timerId = setInterval(() => {
setProgress((prevProgress) =>
- prevProgress <= 0 ? 0 : prevProgress - 10 / 3
+ prevProgress <= 0 ? 0 : Math.max(0, prevProgress - 10 / 3)
);
}, 1000);
setTimer(timerId);
@@ -150,7 +149,12 @@ function QueueCard() {
handleEnd();
console.log(queueState);
navigate("/collaborationpage", {
- state: { partnerId: temp_partnerId, roomId: temp_roomId, topic: topic, complexity: temp_complexity},
+ state: {
+ partnerId: temp_partnerId,
+ roomId: temp_roomId,
+ topic: topic,
+ complexity: temp_complexity,
+ },
});
}
return () => {
@@ -170,7 +174,14 @@ function QueueCard() {
return (
@@ -184,32 +195,38 @@ function QueueCard() {
{activeStep === 0 && (
-
-
-
- Easy
-
-
- Medium
-
-
- Hard
-
-
+
+ Easy
+
+
+ Medium
+
+
+ Hard
+
+
)}
{activeStep === 1 && (
@@ -235,56 +252,67 @@ function QueueCard() {
)}
{activeStep === 2 && (
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ height: "100%",
+ }}
+ >
{queueLoading && (
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ height: "100%",
+ }}
+ >
Finding You A Match! :D
+
-
+
+
)}
{!queueLoading && queueState.status === "timeout" && (
-
No Match Found! D:
-
- )}
- {queueLoading || collaborationSocket.connected && (
-
- Start
- Please end all ongoing session before matching again!
-
- )}
- {!queueLoading && queueState.status === "timeout" && !collaborationSocket.connected && (
-
- )}
- {!queueLoading && queueState.status !== "timeout" && !collaborationSocket.connected && (
-
-
-
)}
+ {queueLoading ||
+ (collaborationSocket.connected && (
+
+ Start
+ Please end all ongoing session before matching again!
+
+ ))}
+ {!queueLoading &&
+ queueState.status === "timeout" &&
+ !collaborationSocket.connected && (
+
+ )}
+ {!queueLoading &&
+ queueState.status !== "timeout" &&
+ !collaborationSocket.connected && (
+
+
+
+ )}
)}
{error && {error}}