Fix styling codeeditor (#114)

* Remove dead code

* Fix overflow for code editor

front-end/peer-prep/src/components/PracticePage/CodeView/styles.tsx

@@ -1,7 +1,8 @@
 export const CodeViewContainerStyle = {
-    backgroundColor: "#131B25",
-    height: "80%",
-    width: "90%",
-    display: "grid",
-    borderRadius: "15px"
-}
+	backgroundColor: "#131B25",
+	height: "80%",
+	width: "90%",
+	minHeight: "50px",
+	minWidth: "50px",
+	borderRadius: "15px",
+};

front-end/peer-prep/src/components/PracticePage/index.tsx

@@ -11,7 +11,7 @@ import MatchingServicePopUp from "../MatchingServicePopUp";
 import QuestionView from "./QuestionView";
 import CodeView from "./CodeView";
 import ChatView from "./ChatView";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
 import { io } from "socket.io-client";
 
@@ -28,10 +28,6 @@ const PracticePage = () => {
 	//const partnerDetails = {"test":3};
 	const partnerDetails = useSelector(MatchSlice.selectPartnerDetails);
 
-	const isPartnerDetailsEmpty = () => {
-		return Object.keys(partnerDetails).length === 0;
-	};
-
 	// Displays first question if user refreshes the browser
 	useEffect(() => {
 		axios({
@@ -61,19 +57,19 @@ const PracticePage = () => {
 			.catch(() => {});
 	}, []);
 
+	let practicePageStyle;
+	if (Object.keys(partnerDetails).length === 0) {
+		practicePageStyle = Styles.practicePageContainerStyle;
+	} else {
+		practicePageStyle = Styles.practicePageMatchedContainerStyle;
+	}
+
 	return (
 		<div>
-			<div
-				id="PracticePage"
-				style={
-					isPartnerDetailsEmpty()
-						? Styles.practicePageContainerStyle
-						: Styles.practicePageMatchedContainerStyle
-				}
-			>
+			<div id="PracticePage" style={practicePageStyle}>
 				<QuestionView />
 				<CodeView />
-				{isPartnerDetailsEmpty() ? (
+				{Object.keys(partnerDetails).length === 0 ? (
 					<Button
 						sx={{ marginRight: "25%" }}
 						variant="contained"

front-end/peer-prep/src/index.tsx

@@ -35,7 +35,6 @@ import MatchingServicePage from "./components/MatchingServicePopUp";
 import axios from "axios";
 import AdminPage from "./components/AdminPage";
 import PracticePage from "./components/PracticePage";
-import PracticeMatchedPage from "./components/PracticeMatchedPage";
 
 const ProtectedRoute = () => {
 	const [user, loading, error] = useAuthState(auth);
@@ -110,7 +109,6 @@ const RootApp = () => {
 							<Route path="user" element={<UserPage />} />
 							<Route path="/admin" element={<AdminPage />} />
 							<Route path="practice" element={<PracticePage />} />
-							<Route path="matched" element={<PracticeMatchedPage/>} />
 						</Route>
 						{/* All non-protected routes are written here */}
 						<Route path="/" element={<SignInPage />} />