Merge pull request #148 from CS3219-AY2425S1/fix-any

fix bugs in fe

peerprep-fe/src/app/collaboration/components/AudioSharing.tsx

@@ -8,6 +8,7 @@ import {
   faMicrophone,
   faMicrophoneSlash,
 } from '@fortawesome/free-solid-svg-icons';
+import { SignalData } from '@/types/types';
 
 const AudioSharing = () => {
   const [isAudioEnabled, setIsAudioEnabled] = useState(false);
@@ -48,7 +49,7 @@ const AudioSharing = () => {
       },
     });
 
-    peer.on('signal', (data: any) => {
+    peer.on('signal', (data: SignalData) => {
       console.log('Sending signal data:', data);
       socketRef.current?.emit('signal', data);
     });
@@ -62,7 +63,7 @@ const AudioSharing = () => {
         .catch((error) => console.error('Error playing audio:', error));
     });
 
-    peer.on('error', (err: any) => {
+    peer.on('error', (err: Error) => {
       console.error('Peer connection error:', err);
       cleanupAudio();
     });
@@ -91,12 +92,12 @@ const AudioSharing = () => {
       console.log('Socket connected');
     });
 
-    socketRef.current.on('connect_error', (error: any) => {
+    socketRef.current.on('connect_error', (error: Error) => {
       console.error('Connection error:', error);
       cleanupAudio();
     });
 
-    socketRef.current.on('signal', async (data: any) => {
+    socketRef.current.on('signal', async (data: SignalData) => {
       console.log('Received signal data:', data);
 
       if (data.type === 'offer' && !peerRef.current) {
@@ -122,7 +123,7 @@ const AudioSharing = () => {
 
       if (peerRef.current) {
         try {
-          peerRef.current.signal(data);
+          peerRef.current.signal(data as SimplePeer.SignalData);
         } catch (error) {
           console.error('Error signaling peer:', error);
           cleanupAudio();

peerprep-fe/src/app/collaboration/components/CodeEditor.tsx

@@ -5,8 +5,9 @@ import Editor, { OnMount } from '@monaco-editor/react';
 import { Button } from '@/components/ui/button';
 import { Play } from 'lucide-react';
 import ConsoleCard from './ConsoleCard';
-import { toast, useToast } from '@/hooks/use-toast';
+import { toast } from '@/hooks/use-toast';
 import { executeCode } from '../api/codeRunner';
+import { editor } from 'monaco-editor';
 
 interface CodeEditorProps {
   onMount: OnMount;
@@ -22,7 +23,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
   const [showOutput, setShowOutput] = useState(false);
   const [output, setOutput] = useState('');
   const cardRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<any>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

peerprep-fe/src/app/collaboration/components/ConsoleCard.tsx

@@ -24,4 +24,6 @@ const ConsoleCard = forwardRef<HTMLDivElement, ConsoleCardProp>(
   },
 );
 
+ConsoleCard.displayName = 'ConsoleCard';
+
 export default ConsoleCard;

peerprep-fe/src/app/collaboration/page.tsx

@@ -14,7 +14,16 @@ import React, {
 import { useSearchParams } from 'next/navigation';
 import LoadingSpinner from '@/components/loading/LoadingSpinner';
 import { useCollaborationStore } from '@/state/useCollaborationStore';
-import CollaborationEditor from './components/CollaborationEditor';
+import dynamic from 'next/dynamic';
+import EditorSkeleton from './components/EditorSkeleton';
+
+const CollaborationEditor = dynamic(
+  () => import('./components/CollaborationEditor'),
+  {
+    ssr: false,
+    loading: () => <EditorSkeleton />,
+  },
+);
 
 function CollaborationPageContent() {
   const [selectionProblem, setSelectionProblem] = useState<Problem | null>(

peerprep-fe/src/types/types.ts

@@ -81,6 +81,12 @@ interface ConnectedClient {
   user: AwarenessUser;
 }
 
+// audio
+interface SignalData {
+  type?: string;
+  [key: string]: string | undefined;
+}
+
 export type {
   Problem,
   ProblemDialogData,
@@ -92,4 +98,5 @@ export type {
   UserMatchingRequest,
   AwarenessState,
   ConnectedClient,
+  SignalData,
 };