feat: Add user type selection to Login component and update useAuth hook to manage user type

src/components/Auth/Login.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
-import { Button, TextField, Box, Typography, Paper, CircularProgress } from '@mui/material';
+import { Button, TextField, Box, Typography, Paper, CircularProgress, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import styled from '@emotion/styled';
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
@@ -16,7 +16,8 @@ const Login = () => {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const { login } = useAuth();
+  const { login, setUserType } = useAuth();
+  const [selectedUserType, setSelectedUserType] = useState('Enthusiast');
   const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
@@ -38,6 +39,12 @@ const Login = () => {
     }
   };
 
+  useEffect(() => {
+    if (!loading && !error && selectedUserType) {
+      setUserType(selectedUserType);
+    }
+  }, [loading, error, selectedUserType, setUserType]);
+
   return (
     <StyledPaper elevation={3}>
       <Typography variant="h4" gutterBottom align="center" sx={{ fontWeight: 'bold' }}>
@@ -73,6 +80,21 @@ const Login = () => {
           onChange={(e) => setPassword(e.target.value)}
           required
         />
+        {/* User type selector */}
+        <Box sx={{ mt: 2 }}>
+          <FormControl fullWidth>
+            <InputLabel id="user-type-label">User Type</InputLabel>
+            <Select
+              labelId="user-type-label"
+              value={selectedUserType}
+              label="User Type"
+              onChange={(e) => setSelectedUserType(e.target.value)}
+            >
+              <MenuItem value="Enthusiast">Enthusiast</MenuItem>
+              <MenuItem value="Ustaz">Ustaz</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
         <Button
           fullWidth
           type="submit"

src/components/Search/FeedbackForm.jsx

@@ -24,7 +24,7 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 }));
 
 const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
-  const { user, authTokens } = useAuth();
+  const { user, authTokens, userType } = useAuth();
   const [reaction, setReaction] = useState('');
   const [confidence, setConfidence] = useState(5);
   const [rating, setRating] = useState(3);
@@ -46,8 +46,8 @@ const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
     try {
       // Extract only the needed properties for the backend
       const feedbackData = {
-        user_type: 'user',
-        username: user || 'anonymous',
+        user_type: userType,
+        username: user,
         query: query || '',
         retrieved_text: searchResult.content || searchResult.text || JSON.stringify(searchResult),
         model_type: searchResult.model_type || 'unknown',
@@ -99,9 +99,9 @@ const FeedbackForm = ({ searchResult, query, onFeedbackSubmitted }) => {
               value={reaction}
               onChange={(e) => setReaction(e.target.value)}
             >
-              <FormControlLabel value="relevant" control={<Radio />} label="Relevant" />
-              <FormControlLabel value="somewhat_relevant" control={<Radio />} label="Somewhat Relevant" />
-              <FormControlLabel value="not_relevant" control={<Radio />} label="Not Relevant" />
+              <FormControlLabel value="👍" control={<Radio />} label="👍" />
+              <FormControlLabel value="🤷‍♂️" control={<Radio />} label="🤷‍♂️" />
+              <FormControlLabel value="👎" control={<Radio />} label="👎" />
             </RadioGroup>
           </FormControl>
 

src/hooks/useAuth.js

@@ -9,6 +9,7 @@ const AuthContext = createContext();
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
   const [authTokens, setAuthTokens] = useLocalStorage('authTokens', null);
+  const [userType, setUserType] = useLocalStorage('userType', 'Enthusiast');
   const [isRefreshing, setIsRefreshing] = useState(false);
   const navigate = useNavigate();
 
@@ -100,6 +101,8 @@ export const AuthProvider = ({ children }) => {
   const value = {
     user,
     authTokens,
+    userType,
+    setUserType,
     isAuthenticated: !!authTokens?.access,
     isRefreshing,
     login,