Merge pull request #173 from CS3219-AY2425S1/feat/remove-unused-components

remove unused components and add connecting state

Author: tyouwei

peerprep-fe/src/app/(main)/components/filter/FilterBadge.tsx

@@ -14,12 +14,6 @@ export function FilterBadge({ filterType, value, onRemove }: FilterBadgeProps) {
             : value === 'hard'
               ? 'bg-red-600'
               : 'bg-gray-600';
-      case 'Status':
-        return value === 'todo'
-          ? 'bg-yellow-600'
-          : value === 'solved'
-            ? 'bg-green-600'
-            : 'bg-gray-600';
       case 'Topics':
         return 'bg-indigo-600';
     }

peerprep-fe/src/app/(main)/components/filter/FilterBar.tsx

@@ -6,7 +6,7 @@ import { TopicsPopover } from './TopicsPopover';
 import { FilterState } from '@/hooks/useFilteredProblems';
 import { useState, useEffect } from 'react';
 import { useDebounce } from '@/hooks/useDebounce';
-import { DIFFICULTY_OPTIONS, STATUS_OPTIONS } from '@/lib/constants';
+import { DIFFICULTY_OPTIONS } from '@/lib/constants';
 
 interface FilterBarProps {
   filters: FilterState;
@@ -46,12 +46,6 @@ export default function FilterBar({
           onChange={(value) => updateFilter('difficulty', value)}
           value={filters.difficulty || ''}
         />
-        <FilterSelect
-          placeholder="Status"
-          options={STATUS_OPTIONS}
-          onChange={(value) => updateFilter('status', value)}
-          value={filters.status || ''}
-        />
         <TopicsPopover
           selectedTopics={filters.topics || []}
           onChange={(value) => updateFilter('topics', value)}
@@ -76,16 +70,6 @@ export default function FilterBar({
             onRemove={() => removeFilter('difficulty')}
           />
         )}
-        {filters.status && (
-          <FilterBadge
-            filterType="Status"
-            value={
-              STATUS_OPTIONS.find((opt) => opt.value === filters.status)
-                ?.label || ''
-            }
-            onRemove={() => removeFilter('status')}
-          />
-        )}
         {filters.topics &&
           filters.topics.map((topic) => (
             <FilterBadge

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

@@ -12,6 +12,9 @@ import { SignalData } from '@/types/types';
 
 const AudioSharing = () => {
   const [isAudioEnabled, setIsAudioEnabled] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState<
+    'Not Connected' | 'Connecting' | 'Connected'
+  >('Not Connected');
   const socketRef = useRef<Socket | null>(null);
   const peerRef = useRef<Instance | null>(null);
   const audioStreamRef = useRef<MediaStream | null>(null);
@@ -45,10 +48,12 @@ const AudioSharing = () => {
       peerRef.current = null;
     }
     setIsAudioEnabled(false);
+    setConnectionStatus('Not Connected');
   };
 
   const createPeer = (stream: MediaStream, initiator: boolean) => {
     console.log('Creating peer as initiator:', initiator);
+    setConnectionStatus('Connecting');
 
     const peer = new SimplePeer({
       initiator,
@@ -96,6 +101,7 @@ const AudioSharing = () => {
     // Add connection state logging
     peer.on('connect', () => {
       console.log('Peer connection established successfully');
+      setConnectionStatus('Connected');
     });
 
     return peer;
@@ -190,12 +196,18 @@ const AudioSharing = () => {
   };
 
   return (
-    <div>
-      <button onClick={toggleAudio}>
+    <div className="flex items-center gap-4">
+      <button
+        onClick={toggleAudio}
+        className="flex items-center gap-1 rounded bg-green-800 px-2 py-1 font-bold text-white transition duration-300 hover:bg-green-700"
+      >
         <FontAwesomeIcon
           icon={isAudioEnabled ? faMicrophone : faMicrophoneSlash}
         />
-        {isAudioEnabled ? ' Mute' : ' Unmute'}
+        {connectionStatus === 'Connected' &&
+          (isAudioEnabled ? 'Mute' : 'Unmute')}
+        {connectionStatus === 'Not Connected' && 'Connect'}
+        {connectionStatus === 'Connecting' && 'Connecting'}
       </button>
     </div>
   );

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

@@ -1,7 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import Link from 'next/link';
 import { GithubIcon } from 'lucide-react';
@@ -95,16 +94,7 @@ export default function LoginForm({ searchParams }: Props) {
               className="w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-sm text-white placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <Checkbox
-                id="remember"
-                className="rounded border-gray-600 text-blue-500 focus:ring-blue-500"
-              />
-              <label htmlFor="remember" className="ml-2 text-sm text-gray-400">
-                Remember me
-              </label>
-            </div>
+          <div className="flex items-center justify-start">
             <a href="#" className="text-sm text-blue-500 hover:underline">
               Forgot your password?
             </a>

peerprep-fe/src/components/problems/ProblemRow.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React, { useState } from 'react';
-import { CheckCircle2, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { Problem } from '@/types/types';
 import { Button } from '../ui/button';
 import { getDifficultyString } from '@/lib/utils';
@@ -12,15 +12,6 @@ import { useRouter } from 'next/navigation';
 import { axiosClient } from '@/network/axiosClient';
 import ProblemDescriptionPanel from './ProblemDescriptionPanel';
 
-function ProblemStatus({ status }: { status: string }) {
-  if (status === 'solved') {
-    return <CheckCircle2 className="h-5 w-5 text-green-500" />;
-  } else if (status === 'attempted') {
-    return <div className="h-5 w-5 rounded-full border-2 border-yellow-500" />;
-  }
-  return null;
-}
-
 interface Props {
   problem: Problem;
   showActions: boolean;
@@ -90,10 +81,6 @@ export default function ProblemRow({
   return (
     <>
       <tr className="border-b border-gray-800">
-        <td className="w-28 px-4 py-2">
-          {/* TODO: change to user status for this question */}
-          <ProblemStatus status={'unsolved'} />
-        </td>
         <td
           className="cursor-pointer px-4 py-2 font-medium transition-colors hover:text-blue-500"
           onClick={

peerprep-fe/src/components/problems/ProblemTable.tsx

@@ -30,7 +30,6 @@ export default function ProblemTable({
       <table className="w-full border-collapse">
         <thead>
           <tr className="border-b border-gray-700 text-left">
-            <th className="w-28 px-4 py-2">Status</th>
             <th className="w-1/3 px-4 py-2">Title</th>
             <th className="px-4 py-2">Topics</th>
             <th className="px-4 py-2">Difficulty</th>
@@ -41,9 +40,6 @@ export default function ProblemTable({
           {isLoading
             ? Array.from({ length: 5 }).map((_, index) => (
                 <tr key={index} className="border-b border-gray-800">
-                  <td className="w-28 px-4 py-2">
-                    <Skeleton className="h-5 w-5 bg-gray-600" />
-                  </td>
                   <td className="w-1/3 px-4 py-2">
                     <Skeleton className="h-6 w-full bg-gray-600" />
                   </td>