feat: linting issues and code quality

victor-hugo-dc · victor-hugo-dc · commit 1633a81426c5 · 2025-12-31T12:34:06.000-05:00
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -7,7 +7,7 @@
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { socket } from './socket';
 import StudentView from './components/StudentView';
 import TeacherView from './components/TeacherView';
@@ -64,25 +64,39 @@ function App() {
         }
     };
 
+    const checkTour = useCallback(() => {
+        const tourDone = localStorage.getItem('thoughtswap_tour_completed');
+        if (!tourDone && authState.isLoggedIn) {
+            setShowTour(true);
+        }
+    }, [authState.isLoggedIn]);
+
     useEffect(() => {
-        if (window.location.pathname === '/auth/success') {
-            const params = new URLSearchParams(window.location.search);
-            const name = params.get('name');
-            const role = params.get('role') as UserRole;
-            const email = params.get('email');
-
-            if (name && role && email) {
-                updateAuth({
-                    isLoggedIn: true,
-                    name: decodeURIComponent(name),
-                    email: decodeURIComponent(email),
-                    role: role,
-                    expiry: Date.now() + SESSION_DURATION,
-                });
+        // Only run auth success handling on first mount
+        const handleAuthSuccess = () => {
+            if (window.location.pathname === '/auth/success') {
+                const params = new URLSearchParams(window.location.search);
+                const name = params.get('name');
+                const role = params.get('role') as UserRole;
+                const email = params.get('email');
+
+                if (name && role && email) {
+                    updateAuth({
+                        isLoggedIn: true,
+                        name: decodeURIComponent(name),
+                        email: decodeURIComponent(email),
+                        role: role,
+                        expiry: Date.now() + SESSION_DURATION,
+                    });
+                }
+                window.history.replaceState({}, document.title, '/');
             }
-            window.history.replaceState({}, document.title, '/');
-        }
+        };
 
+        handleAuthSuccess();
+    }, []);
+
+    useEffect(() => {
         const handleAuthError = () => {
             setAuthErrorModal(true);
             updateAuth({ isLoggedIn: false, name: null, email: null, role: null });
@@ -111,7 +125,7 @@ function App() {
             socket.off('AUTH_ERROR', handleAuthError);
             socket.off('CONSENT_STATUS', handleConsentStatus);
         };
-    }, [authState.role]);
+    }, [authState.role, checkTour]);
 
     useEffect(() => {
         if (authState.isLoggedIn && !socket.connected) {
@@ -124,13 +138,6 @@ function App() {
         }
     }, [authState]);
 
-    const checkTour = () => {
-        const tourDone = localStorage.getItem('thoughtswap_tour_completed');
-        if (!tourDone && authState.isLoggedIn) {
-            setShowTour(true);
-        }
-    };
-
     const handleConsentResponse = (gaveConsent: boolean) => {
         socket.emit('UPDATE_CONSENT', { consentGiven: gaveConsent });
         setShowConsentModal(false);
@@ -184,7 +191,7 @@ function App() {
 
     // Handle tab/window close
     useEffect(() => {
-        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+        const handleBeforeUnload = () => {
             if (authState.role === 'TEACHER' && authState.isLoggedIn) {
                 const activeJoinCode = localStorage.getItem('thoughtswap_joinCode');
                 const activeTeacher = localStorage.getItem('thoughtswap_teacher_active');
diff --git a/packages/client/src/components/AdminView.tsx b/packages/client/src/components/AdminView.tsx
@@ -22,11 +22,42 @@ import {
 } from 'lucide-react';
 import Modal from './Modal';
 
+interface Session {
+    id: string;
+    joinCode: string;
+    teacherName: string;
+    createdAt: string;
+    participantCount: number;
+}
+
+interface Thought {
+    id: string;
+    content: string;
+    authorName: string;
+    sessionId: string;
+}
+
+interface Swap {
+    id: string;
+    fromUser: string;
+    toUser: string;
+    thoughtContent: string;
+    timestamp: string;
+}
+
+interface Log {
+    id: string;
+    timestamp: string;
+    action: string;
+    userId: string;
+    details: string;
+}
+
 interface AdminData {
-    sessions: any[];
-    thoughts: any[];
-    swaps: any[];
-    logs: any[];
+    sessions: Session[];
+    thoughts: Thought[];
+    swaps: Swap[];
+    logs: Log[];
     stats: {
         totalConsented: number;
         totalUsers: number;
@@ -304,7 +335,7 @@ export default function AdminView({ onExit }: { onExit: () => void }) {
                                 Active Classrooms
                             </h2>
                             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                                {data.sessions.map((session: any) => (
+                                {data.sessions.map((session: Session) => (
                                     <div
                                         key={session.id}
                                         className="bg-slate-900 border border-slate-800 rounded-lg p-5 hover:border-indigo-500/50 transition-colors"
@@ -363,7 +394,7 @@ export default function AdminView({ onExit }: { onExit: () => void }) {
                             </div>
 
                             <div className="grid gap-4">
-                                {data.thoughts.map((thought: any) => (
+                                {data.thoughts.map((thought: Thought) => (
                                     <div
                                         key={thought.id}
                                         className="bg-slate-900 border border-slate-800 p-6 rounded-lg hover:border-indigo-500/30 transition-colors"
@@ -416,7 +447,7 @@ export default function AdminView({ onExit }: { onExit: () => void }) {
                             </div>
 
                             <div className="grid gap-4">
-                                {data.swaps.map((swap: any) => (
+                                {data.swaps.map((swap: Swap) => (
                                     <div
                                         key={swap.id}
                                         className="bg-slate-900 border border-slate-800 p-4 rounded-lg hover:border-indigo-500/30 transition-colors"
@@ -480,7 +511,7 @@ export default function AdminView({ onExit }: { onExit: () => void }) {
                                         </tr>
                                     </thead>
                                     <tbody className="divide-y divide-slate-800">
-                                        {data.logs.map((log: any) => (
+                                        {data.logs.map((log: Log) => (
                                             <tr
                                                 key={log.id}
                                                 className="hover:bg-slate-900/50 transition-colors"
diff --git a/packages/client/src/components/StudentView.tsx b/packages/client/src/components/StudentView.tsx
@@ -7,7 +7,7 @@
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { socket } from '../socket';
 import {
     Loader2,
@@ -23,14 +23,47 @@ import Modal from './Modal';
 import type { ModalType } from './Modal';
 import StudentResponseInput from './StudentResponseInput';
 
+interface AuthData {
+    name: string | null;
+    email: string | null;
+    role: string | null;
+}
+
 interface StudentViewProps {
     joinCode: string;
-    auth: any;
+    auth: AuthData;
     onJoin: (code: string) => void;
 }
 
 type Status = 'IDLE' | 'JOINED' | 'ANSWERING' | 'SUBMITTED' | 'DISCUSSING';
 
+interface NewPromptData {
+    content: string;
+    promptUseId: string;
+    type?: 'TEXT' | 'MC' | 'SCALE';
+    options?: string[];
+}
+
+interface ReceiveSwapData {
+    content: string;
+}
+
+interface ThoughtDeletedData {
+    message: string;
+}
+
+interface SessionEndedData {
+    surveyLink?: string;
+}
+
+interface RestoreStateData {
+    prompt: string;
+    promptUseId: string;
+    type?: 'TEXT' | 'MC' | 'SCALE';
+    options?: string[];
+    status: Status;
+}
+
 export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps) {
     const [status, setStatus] = useState<Status>('IDLE');
     const [inputCode, setInputCode] = useState(joinCode);
@@ -55,16 +88,31 @@ export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps
         children?: React.ReactNode;
     }>({ isOpen: false, type: 'info', title: '', message: '' });
 
+    const sendNotification = useCallback(
+        (title: string, body: string) => {
+            if (notificationsEnabled && document.hidden) {
+                new Notification(title, { body, icon: '/vite.svg' });
+            }
+        },
+        [notificationsEnabled]
+    );
+
+    const requestNotificationPermission = () => {
+        if (!('Notification' in window)) return;
+        Notification.requestPermission().then((permission) => {
+            setNotificationsEnabled(permission === 'granted');
+        });
+    };
+
     useEffect(() => {
         const storedJoinCode = localStorage.getItem('thoughtswap_joinCode');
-        if (storedJoinCode && status === 'IDLE') {
-            setInputCode(storedJoinCode);
+        if (storedJoinCode && status === 'IDLE' && inputCode !== storedJoinCode) {
             onJoin(storedJoinCode);
             if (!socket.auth) socket.auth = { name: auth.name, role: auth.role, email: auth.email };
             if (!socket.connected) socket.connect();
             socket.emit('JOIN_ROOM', { joinCode: storedJoinCode });
         }
-    }, [auth, status]);
+    }, [auth, status, onJoin, inputCode]);
 
     useEffect(() => {
         if (auth && !socket.auth)
@@ -84,15 +132,15 @@ export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps
             }
         };
 
-        const handleRestore = (data: any) => {
+        const handleRestore = (data: RestoreStateData) => {
             setPrompt(data.prompt);
             setPromptUseId(data.promptUseId);
             setPromptType(data.type || 'TEXT');
             setPromptOptions(data.options || []);
             setStatus(data.status);
         };
 
-        const handleNewPrompt = (data: any) => {
+        const handleNewPrompt = (data: NewPromptData) => {
             setPrompt(data.content);
             setPromptUseId(data.promptUseId);
             setPromptType(data.type || 'TEXT');
@@ -103,7 +151,7 @@ export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps
             sendNotification('New Prompt!', 'The teacher has sent a new prompt.');
         };
 
-        const handleReceiveSwap = (data: { content: string }) => {
+        const handleReceiveSwap = (data: ReceiveSwapData) => {
             setSwappedThought(data.content);
             setStatus('DISCUSSING');
             sendNotification(
@@ -112,7 +160,7 @@ export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps
             );
         };
 
-        const handleThoughtDeleted = (data: { message: string }) => {
+        const handleThoughtDeleted = (data: ThoughtDeletedData) => {
             setModal({
                 isOpen: true,
                 type: 'warning',
@@ -123,7 +171,7 @@ export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps
             setResponseInput('');
         };
 
-        const handleSessionEnded = (data: { surveyLink?: string }) => {
+        const handleSessionEnded = (data: SessionEndedData) => {
             setStatus('IDLE');
             setInputCode('');
             setPrompt('');
@@ -180,20 +228,7 @@ export default function StudentView({ joinCode, auth, onJoin }: StudentViewProps
             socket.off('SESSION_ENDED', handleSessionEnded);
             socket.off('RESET_CLIENT_STATE', handleResetState);
         };
-    }, [status, auth]);
-
-    const requestNotificationPermission = () => {
-        if (!('Notification' in window)) return;
-        Notification.requestPermission().then((permission) => {
-            setNotificationsEnabled(permission === 'granted');
-        });
-    };
-
-    const sendNotification = (title: string, body: string) => {
-        if (notificationsEnabled && document.hidden) {
-            new Notification(title, { body, icon: '/vite.svg' });
-        }
-    };
+    }, [status, auth, sendNotification]);
 
     const handleJoinClick = () => {
         if (inputCode.length > 0) {
diff --git a/packages/client/src/components/TeacherPromptBank.tsx b/packages/client/src/components/TeacherPromptBank.tsx
@@ -40,13 +40,13 @@ export default function TeacherPromptBank({
     isIdle,
     onSaveNew,
 }: TeacherPromptBankProps) {
-    if (!isOpen) return null;
-
     // Local state for the "Quick Create" form in idle mode
     const [newContent, setNewContent] = useState('');
     const [newType, setNewType] = useState<'TEXT' | 'MC' | 'SCALE'>('TEXT');
     const [newOptions, setNewOptions] = useState(['', '']);
 
+    if (!isOpen) return null;
+
     const handleSave = () => {
         if (!newContent.trim()) return;
         if (onSaveNew) {
diff --git a/packages/client/src/components/TeacherView.tsx b/packages/client/src/components/TeacherView.tsx
