Fix modules

app/auth/login/page.tsx

@@ -1,12 +1,20 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useAuth } from '@/lib/auth';
+import { API_URL } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+
 const LoginPage = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');
     const auth = useAuth();
-    // In a real app, you'd use Next.js's useRouter
     const [isLoggedIn, setIsLoggedIn] = useState(false); 
   
-    const handleSubmit = async (e) => {
+    const handleSubmit = async (e: FormEvent) => {
       e.preventDefault();
       setError('');
       try {
@@ -27,17 +35,15 @@ const LoginPage = () => {
           
           const { id_token, uid } = await response.json();
           
-          // A real app would fetch user details here, but we'll mock it
+          const userDetails = { uid, email, role: 'user' }; 
-          const userDetails = { uid, email, role: 'user' }; // Assume 'user' for now
           auth.login(id_token, userDetails);
-          setIsLoggedIn(true); // Simulate redirect
+          setIsLoggedIn(true);
-      } catch (err) {
+      } catch (err: any) {
         setError(err.message);
       }
     };
     
     if (isLoggedIn || auth.isAuthenticated) {
-        // In a real app, this would be a redirect to '/'
         return <p>Redirecting...</p>;
     }
   
@@ -64,4 +70,6 @@ const LoginPage = () => {
         </Card>
       </div>
     );
-  };
+  };
+
+  export default LoginPage;

app/main/admin/page.tsx

@@ -1,3 +1,11 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/lib/auth';
+import { apiRequest } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
 const AdminPage = () => {
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
@@ -9,12 +17,11 @@ const AdminPage = () => {
         try {
             const data = await apiRequest('/videos/scan', { method: 'POST', token: auth.token });
             setMessage(data.message);
-        } catch (err) {
+        } catch (err: any) {
             setError(err.message);
         }
     };
     
-    // In a real app, you'd fetch users and votes here
     const users = [{email: 'admin@example.com', role: 'admin'}, {email: 'user@example.com', role: 'user'}];
     const votes = [{video_id: 'xyz', decision: 'approve', reason: 'Good clip'}];
 
@@ -38,7 +45,6 @@ const AdminPage = () => {
             <Card>
                 <CardHeader><CardTitle>Users</CardTitle></CardHeader>
                 <CardContent>
-                    {/* User list would be rendered here */}
                     <p>User list functionality would go here.</p>
                 </CardContent>
             </Card>
@@ -46,10 +52,11 @@ const AdminPage = () => {
             <Card>
                 <CardHeader><CardTitle>Votes</CardTitle></CardHeader>
                 <CardContent>
-                    {/* Vote list would be rendered here */}
                     <p>Vote list functionality would go here.</p>
                 </CardContent>
             </Card>
         </div>
     );
-};
+};
+
+export default AdminPage;

app/main/layout.tsx

@@ -1,8 +1,14 @@
-const MainLayout = ({ children }) => {
+'use client';
+
+import React from 'react';
+import { useAuth } from '@/lib/auth';
+import LoginPage from '@/app/auth/login/page';
+import { Button } from '@/components/ui/button';
+
+const MainLayout = ({ children }: { children: React.ReactNode }) => {
     const auth = useAuth();
 
     if (!auth.isAuthenticated) {
-        // This would be a redirect in a real Next.js app
         return <LoginPage />;
     }
 
@@ -13,7 +19,7 @@ const MainLayout = ({ children }) => {
                     <h1 className="text-xl font-bold">Video Voter</h1>
                     <div>
                         {auth.user?.role === 'admin' && (
-                            <a href="#admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
+                            <a href="/main/admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
                         )}
                         <Button onClick={auth.logout}>Logout</Button>
                     </div>
@@ -24,4 +30,6 @@ const MainLayout = ({ children }) => {
             </main>
         </div>
     );
-};
+};
+
+export default MainLayout;

app/main/page.tsx

@@ -1,5 +1,14 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/lib/auth';
+import { apiRequest, API_URL } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Textarea } from '@/components/ui/textarea';
+
 const VotingPage = () => {
-    const [video, setVideo] = useState(null);
+    const [video, setVideo] = useState<any>(null);
     const [reason, setReason] = useState('');
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
@@ -12,17 +21,17 @@ const VotingPage = () => {
         try {
             const data = await apiRequest('/videos/vote-next', { token: auth.token });
             setVideo(data);
-        } catch (err) {
+        } catch (err: any) {
             setError(err.message);
         }
     };
 
-    const submitVote = async (decision) => {
+    const submitVote = async (decision: string) => {
         if (!video) return;
         setError('');
         setMessage('');
         try {
-            const body = { decision, reason, recommended_game: '' }; // Add recommended_game if needed
+            const body = { decision, reason, recommended_game: '' };
             await apiRequest(`/videos/${video.id}/vote`, {
                 method: 'POST',
                 body,
@@ -31,7 +40,7 @@ const VotingPage = () => {
             setMessage(`Vote '${decision}' submitted successfully!`);
             setVideo(null);
             setReason('');
-        } catch (err) {
+        } catch (err: any) {
             setError(err.message);
         }
     };
@@ -60,8 +69,6 @@ const VotingPage = () => {
                                     className="w-full rounded-lg bg-black" 
                                     controls 
                                     src={`${API_URL}/videos/${video.id}/stream?token=${auth.token}`}
-                                    // The token in query param is a simple way for this demo.
-                                    // In a real app, you might handle auth differently for media.
                                 >
                                     Your browser does not support the video tag.
                                 </video>
@@ -84,4 +91,6 @@ const VotingPage = () => {
             </Card>
         </div>
     );
-};
+};
+
+export default VotingPage;

lib/auth.tsx

@@ -1,45 +1,45 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-  
+
-  const AuthContext = createContext(null);
+const AuthContext = createContext<any>(null);
-  
+
-  export const AuthProvider = ({ children }) => {
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
-    const [token, setToken] = useState(null);
+  const [token, setToken] = useState<string | null>(null);
-    const [user, setUser] = useState(null);
+  const [user, setUser] = useState<any | null>(null);
-    const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
-  
+
-    useEffect(() => {
+  useEffect(() => {
-      const storedToken = localStorage.getItem('authToken');
+    const storedToken = localStorage.getItem('authToken');
-      const storedUser = localStorage.getItem('authUser');
+    const storedUser = localStorage.getItem('authUser');
-      if (storedToken && storedUser) {
+    if (storedToken && storedUser) {
-        setToken(storedToken);
+      setToken(storedToken);
-        setUser(JSON.parse(storedUser));
+      setUser(JSON.parse(storedUser));
-      }
+    }
-      setLoading(false);
+    setLoading(false);
-    }, []);
+  }, []);
-  
+
-    const login = (newToken, newUser) => {
+  const login = (newToken: string, newUser: any) => {
-      setToken(newToken);
+    setToken(newToken);
-      setUser(newUser);
+    setUser(newUser);
-      localStorage.setItem('authToken', newToken);
+    localStorage.setItem('authToken', newToken);
-      localStorage.setItem('authUser', JSON.stringify(newUser));
+    localStorage.setItem('authUser', JSON.stringify(newUser));
-    };
-  
-    const logout = () => {
-      setToken(null);
-      setUser(null);
-      localStorage.removeItem('authToken');
-      localStorage.removeItem('authUser');
-    };
-  
-    const value = { token, user, login, logout, isAuthenticated: !!token };
-  
-    return (
-      <AuthContext.Provider value={value}>
-        {!loading && children}
-      </AuthContext.Provider>
-    );
   };
-  
+
-  export const useAuth = () => {
+  const logout = () => {
-    return useContext(AuthContext);
+    setToken(null);
-  };
+    setUser(null);
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('authUser');
+  };
+
+  const value = { token, user, login, logout, isAuthenticated: !!token };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};