Added integration of jobs to quizzes

Author: Lina0Elman

nextstep-frontend/src/components/LinkedInIntegration.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Box, Typography, Button, Grid, CircularProgress, IconButton, TextField, MenuItem, Select, FormControl, InputLabel, Dialog, DialogTitle, DialogContent, DialogActions, Chip, Stack } from '@mui/material';
 import { ExpandLess, LinkedIn, Settings } from '@mui/icons-material';
+import { useNavigate } from 'react-router-dom';
 
 interface Job {
   position: string;
@@ -68,6 +69,12 @@ const LinkedInIntegration: React.FC<LinkedInIntegrationProps> = ({
     setJobDetails(null);
   };
 
+  const handleGenerateQuiz = (job: Job) => {
+    const subject = `${job.position} at ${job.company}`;
+    const quizUrl = `/quiz?subject=${encodeURIComponent(subject)}`;
+    window.open(quizUrl, '_blank');
+  };
+
   return (
     <Box sx={{ bgcolor: 'background.paper', p: 3, borderRadius: 2, boxShadow: 1, mt: 4 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
@@ -281,14 +288,22 @@ const LinkedInIntegration: React.FC<LinkedInIntegrationProps> = ({
                 Close
               </Button>
               {selectedJob?.jobUrl && (
-                <Button
-                  href={selectedJob.jobUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  color="primary"
-                >
-                  Open in LinkedIn
-                </Button>
+                <div>
+                  <Button
+                    onClick={() => handleGenerateQuiz(selectedJob)}
+                    color="primary"
+                  >
+                    Generate a quiz
+                  </Button>
+                  <Button
+                    href={selectedJob.jobUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    color="primary"
+                  >
+                    Open in LinkedIn
+                  </Button>
+                </div>
               )}
             </DialogActions>
           </Dialog>

nextstep-frontend/src/pages/Quiz.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import {
   Container,
   Box,
@@ -102,7 +103,8 @@ interface QuizState {
 }
 
 const Quiz: React.FC = () => {
-  const [subject, setSubject] = useState<string>('');
+  const [searchParams] = useSearchParams();
+  const [subject, setSubject] = useState<string>(searchParams.get('subject') || '');
   const [quiz, setQuiz] = useState<QuizState | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [showAnswer, setShowAnswer] = useState<{ [key: number]: boolean }>({});
@@ -218,6 +220,11 @@ const Quiz: React.FC = () => {
     }
   };
 
+  const handleEditSubject = (newSubject: string) => {
+    setSubject(newSubject);
+    setQuiz(null); // Reset the quiz to allow generating a new one with the updated subject
+  };
+
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
       <Typography variant="h4" component="h1" gutterBottom align="center">
@@ -254,7 +261,14 @@ const Quiz: React.FC = () => {
       {quiz && (
         <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
           <Typography variant="h5" gutterBottom align="center" sx={{ mb: 3 }}>
-            Quiz on: {quiz.subject}
+            Quiz on: 
+            <TextField
+              value={subject}
+              onChange={(e) => handleEditSubject(e.target.value)}
+              variant="outlined"
+              size="small"
+              sx={{ ml: 2, width: '50%' }}
+            />
           </Typography>
 
           {/* --- Enhanced Display of Quiz Metadata --- */}