client/package-lock.json

@@ -2678,9 +2678,9 @@
             }
         },
         "node_modules/@eslint/plugin-kit": {
-            "version": "0.2.4",
+            "version": "0.2.2",
-            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
+            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
-            "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
+            "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
@@ -5695,9 +5695,9 @@
             "license": "MIT"
         },
         "node_modules/cross-spawn": {
-            "version": "7.0.6",
+            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -9126,9 +9126,9 @@
             "license": "MIT"
         },
         "node_modules/nanoid": {
-            "version": "5.0.9",
+            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.9.tgz",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.8.tgz",
-            "integrity": "sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==",
+            "integrity": "sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==",
             "funding": [
                 {
                     "type": "github",
@@ -9511,9 +9511,9 @@
             }
         },
         "node_modules/postcss/node_modules/nanoid": {
-            "version": "3.3.8",
+            "version": "3.3.7",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
             "dev": true,
             "funding": [
                 {

client/src/Types/QuizType.tsx

@@ -2,7 +2,6 @@
 export interface QuizType {
     _id: string;
     folderId: string;
-    folderName: string;
     userId: string;
     title: string;
     content: string[];

client/src/__tests__/Types/QuizType.test.tsx

@@ -9,7 +9,6 @@ describe('isQuizValid function', () => {
         const validQuiz: QuizType = {
             _id: '1',
             folderId: 'test',
-            folderName: 'test',
             userId: 'user',
             created_at: new Date('2021-10-01'),
             updated_at: new Date('2021-10-02'),
@@ -25,7 +24,6 @@ describe('isQuizValid function', () => {
         const invalidQuiz: QuizType = {
             _id: '2',
             folderId: 'test',
-            folderName: 'test',
             userId: 'user',
             title: '',
             created_at: new Date('2021-10-01'),
@@ -41,7 +39,6 @@ describe('isQuizValid function', () => {
         const invalidQuiz: QuizType = {
             _id: '2',
             folderId: 'test',
-            folderName: 'test',
             userId: 'user',
             title: 'sample',
             created_at: new Date('2021-10-01'),

client/src/__tests__/services/QuizService.test.tsx

@@ -31,8 +31,8 @@ Object.defineProperty(window, 'localStorage', {
 // NOTE: this suite seems to be designed around local storage of quizzes (older version, before a database) 
 describe.skip('QuizService', () => {
     const mockQuizzes: QuizType[] = [
-        { folderId: 'test', folderName: 'test', userId: 'user', _id: 'quiz1', title: 'Quiz One', content: ['Q1', 'Q2'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
+        { folderId: 'test', userId: 'user', _id: 'quiz1', title: 'Quiz One', content: ['Q1', 'Q2'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
-        { folderId: 'test', folderName: 'test', userId: 'user', _id: 'quiz2', title: 'Quiz Two', content: ['Q3', 'Q4'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
+        { folderId: 'test', userId: 'user', _id: 'quiz2', title: 'Quiz Two', content: ['Q3', 'Q4'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
     ];
 
     beforeEach(() => {

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -18,11 +18,8 @@ import {
     IconButton,
     InputAdornment,
     Button,
-    Card,
     Tooltip,
-    NativeSelect,
+    NativeSelect
-    CardContent,
-    styled,
 } from '@mui/material';
 import {
     Search,
@@ -37,43 +34,13 @@ import {
     // DriveFileMove
 } from '@mui/icons-material';
 
-// Create a custom-styled Card component
-const CustomCard = styled(Card)({
-    overflow: 'visible', // Override the overflow property
-    position: 'relative',
-    margin: '40px 0 20px 0', // Add top margin to make space for the tab
-    borderRadius: '8px',
-    paddingTop: '20px', // Ensure content inside the card doesn't overlap with the tab
-});
-
 const Dashboard: React.FC = () => {
     const navigate = useNavigate();
     const [quizzes, setQuizzes] = useState<QuizType[]>([]);
     const [searchTerm, setSearchTerm] = useState('');
     const [showImportModal, setShowImportModal] = useState<boolean>(false);
     const [folders, setFolders] = useState<FolderType[]>([]);
-    const [selectedFolderId, setSelectedFolderId] = useState<string>(''); // Selected folder
+    const [selectedFolder, setSelectedFolder] = useState<string>(''); // Selected folder
-
-    // Filter quizzes based on search term
-    // const filteredQuizzes = quizzes.filter(quiz =>
-    //     quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
-    // );
-    const filteredQuizzes = useMemo(() => {
-        return quizzes.filter(
-            (quiz) =>
-                quiz && quiz.title && quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
-        );
-    }, [quizzes, searchTerm]);
-
-
-    // Group quizzes by folder
-    const quizzesByFolder = filteredQuizzes.reduce((acc, quiz) => {
-        if (!acc[quiz.folderName]) {
-            acc[quiz.folderName] = [];
-        }
-        acc[quiz.folderName].push(quiz);
-        return acc;
-    }, {} as Record<string, QuizType[]>);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -92,14 +59,33 @@ const Dashboard: React.FC = () => {
         fetchData();
     }, []);
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        setSelectedFolderId(event.target.value);
+        setSelectedFolder(event.target.value);
     };
 
+
     useEffect(() => {
         const fetchQuizzesForFolder = async () => {
 
-            if (selectedFolderId == '') {
+            if (selectedFolder == '') {
                 const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
                 console.log("show all quizes")
                 var quizzes: QuizType[] = [];
@@ -107,8 +93,6 @@ const Dashboard: React.FC = () => {
                 for (const folder of folders as FolderType[]) {
                     const folderQuizzes = await ApiService.getFolderContent(folder._id);
                     console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
-                    // add the folder.title to the QuizType if the folderQuizzes is an array
-                    addFolderTitleToQuizzes(folderQuizzes, folder.title);
                     quizzes = quizzes.concat(folderQuizzes as QuizType[])
                 }
 
@@ -116,19 +100,17 @@ const Dashboard: React.FC = () => {
             }
             else {
                 console.log("show some quizzes")
-                const folderQuizzes = await ApiService.getFolderContent(selectedFolderId);
+                const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
                 console.log("folderQuizzes: ", folderQuizzes);
-                // get the folder title from its id
-                const folderTitle = folders.find((folder) => folder._id === selectedFolderId)?.title || '';
-                addFolderTitleToQuizzes(folderQuizzes, folderTitle);
                 setQuizzes(folderQuizzes as QuizType[]);
+
             }
 
 
         };
 
         fetchQuizzesForFolder();
-    }, [selectedFolderId]);
+    }, [selectedFolder]);
 
 
     const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -153,7 +135,7 @@ const Dashboard: React.FC = () => {
     const handleDuplicateQuiz = async (quiz: QuizType) => {
         try {
             await ApiService.duplicateQuiz(quiz._id);
-            if (selectedFolderId == '') {
+            if (selectedFolder == '') {
                 const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
                 console.log("show all quizes")
                 var quizzes: QuizType[] = [];
@@ -161,16 +143,14 @@ const Dashboard: React.FC = () => {
                 for (const folder of folders as FolderType[]) {
                     const folderQuizzes = await ApiService.getFolderContent(folder._id);
                     console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
-                    addFolderTitleToQuizzes(folderQuizzes, folder.title);
+                    quizzes = quizzes.concat(folderQuizzes as QuizType[])
-                    quizzes = quizzes.concat(folderQuizzes as QuizType[]);
                 }
 
                 setQuizzes(quizzes as QuizType[]);
             }
             else {
                 console.log("show some quizzes")
-                const folderQuizzes = await ApiService.getFolderContent(selectedFolderId);
+                const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
-                addFolderTitleToQuizzes(folderQuizzes, selectedFolderId);
                 setQuizzes(folderQuizzes as QuizType[]);
 
             }
@@ -179,6 +159,13 @@ const Dashboard: React.FC = () => {
         }
     };
 
+    const filteredQuizzes = useMemo(() => {
+        return quizzes.filter(
+            (quiz) =>
+                quiz && quiz.title && quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+    }, [quizzes, searchTerm]);
+
     const handleOnImport = () => {
         setShowImportModal(true);
 
@@ -204,6 +191,30 @@ const Dashboard: React.FC = () => {
         return true;
     };
 
+    // const handleMoveQuiz = async (quiz: QuizType, newFolderId: string) => {
+    //     try {
+    //         await ApiService.moveQuiz(quiz._id, newFolderId);
+    //         if (selectedFolder == '') {
+    //             const folders = await ApiService.getUserFolders();
+    //             var quizzes: QuizType[] = [];
+
+    //             for (const folder of folders as FolderType[]) {
+    //                 const folderQuizzes = await ApiService.getFolderContent(folder._id);
+    //                 quizzes = quizzes.concat(folderQuizzes as QuizType[])
+    //             }
+
+    //             setQuizzes(quizzes as QuizType[]);
+    //         }
+    //         else {
+    //             const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
+    //             setQuizzes(folderQuizzes as QuizType[]);
+    //         }
+    //     } catch (error) {
+    //         console.error('Error moving quiz:', error);
+    //     }
+    // };
+
+
     const downloadTxtFile = async (quiz: QuizType) => {
 
         try {
@@ -253,7 +264,7 @@ const Dashboard: React.FC = () => {
                 const userFolders = await ApiService.getUserFolders();
                 setFolders(userFolders as FolderType[]);                
                 const newlyCreatedFolder = userFolders[userFolders.length - 1] as FolderType;
-                setSelectedFolderId(newlyCreatedFolder._id);
+                setSelectedFolder(newlyCreatedFolder._id);
                 
             }
         } catch (error) {
@@ -263,16 +274,17 @@ const Dashboard: React.FC = () => {
   
     const handleDeleteFolder = async () => {
 
+
         try {
             const confirmed = window.confirm('Voulez-vous vraiment supprimer ce dossier?');
             if (confirmed) {
-                await ApiService.deleteFolder(selectedFolderId);
+                await ApiService.deleteFolder(selectedFolder);
                 const userFolders = await ApiService.getUserFolders();
                 setFolders(userFolders as FolderType[]);
             }
 
             const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
-            console.log("show all quizzes")
+            console.log("show all quizes")
             var quizzes: QuizType[] = [];
 
             for (const folder of folders as FolderType[]) {
@@ -282,20 +294,19 @@ const Dashboard: React.FC = () => {
             }
 
             setQuizzes(quizzes as QuizType[]);
-            setSelectedFolderId('');
+            setSelectedFolder('');
 
         } catch (error) {
             console.error('Error deleting folder:', error);
         }
     };
-
     const handleRenameFolder = async () => {
         try {
             // folderId: string GET THIS FROM CURRENT FOLDER
             // currentTitle: string GET THIS FROM CURRENT FOLDER
             const newTitle = prompt('Entrée le nouveau nom du fichier', "Nouveau nom de dossier");
             if (newTitle) {
-                await ApiService.renameFolder(selectedFolderId, newTitle);
+                await ApiService.renameFolder(selectedFolder, newTitle);
                 const userFolders = await ApiService.getUserFolders();
                 setFolders(userFolders as FolderType[]);
                 
@@ -304,16 +315,15 @@ const Dashboard: React.FC = () => {
             console.error('Error renaming folder:', error);
         }
     };
-
     const handleDuplicateFolder = async () => {
         try {
             // folderId: string GET THIS FROM CURRENT FOLDER
-            await ApiService.duplicateFolder(selectedFolderId);
+            await ApiService.duplicateFolder(selectedFolder);
             // TODO set the selected folder to be the duplicated folder
             const userFolders = await ApiService.getUserFolders();
             setFolders(userFolders as FolderType[]);
             const newlyCreatedFolder = userFolders[userFolders.length - 1] as FolderType;
-            setSelectedFolderId(newlyCreatedFolder._id);
+            setSelectedFolder(newlyCreatedFolder._id);
         } catch (error) {
             console.error('Error duplicating folder:', error);
         }
@@ -383,7 +393,7 @@ const Dashboard: React.FC = () => {
                     <NativeSelect
                         id="select-folder"
                         color="primary"
-                        value={selectedFolderId}
+                        value={selectedFolder}
                         onChange={handleSelectFolder}
                     >
                         <option value=""> Tous les dossiers... </option>
@@ -406,7 +416,7 @@ const Dashboard: React.FC = () => {
                         <IconButton
                             color="primary"
                             onClick={handleRenameFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolder == ''} // cannot action on all
                         > <Edit /> </IconButton>
                     </Tooltip>
 
@@ -414,7 +424,7 @@ const Dashboard: React.FC = () => {
                         <IconButton
                             color="primary"
                             onClick={handleDuplicateFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolder == ''} // cannot action on all
                         > <FolderCopy /> </IconButton>
                     </Tooltip>
 
@@ -423,7 +433,7 @@ const Dashboard: React.FC = () => {
                             aria-label="delete"
                             color="primary"
                             onClick={handleDeleteFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolder == ''} // cannot action on all
                         > <DeleteOutline /> </IconButton>
                     </Tooltip>
                 </div>
@@ -451,72 +461,74 @@ const Dashboard: React.FC = () => {
 
             </div>
             <div className='list'>
-                {Object.keys(quizzesByFolder).map(folderName => (
-                    <CustomCard key={folderName} className='folder-card'>
-                        <div className='folder-tab'>{folderName}</div>
-                        <CardContent>
-                            {quizzesByFolder[folderName].map((quiz: QuizType) => (
-                                <div className='quiz' key={quiz._id}>
-                                    <div className='title'>
-                                        <Tooltip title="Lancer quiz" placement="top">
-                                            <Button
-                                                variant="outlined"
-                                                onClick={() => handleLancerQuiz(quiz)}
-                                                disabled={!validateQuiz(quiz.content)}
-                                            >
-                                                {`${quiz.title} (${quiz.content.length} question${quiz.content.length > 1 ? 's' : ''})`}
-                                            </Button>
-                                        </Tooltip>
-                                    </div>
 
-                                    <div className='actions'>
+                {filteredQuizzes.map((quiz: QuizType) => (
-                                        <Tooltip title="Télécharger quiz" placement="top">
+                    <div className='quiz'>
-                                            <IconButton
+                        <div className='title'>
-                                                color="primary"
+                            <Tooltip title="Lancer quiz" placement="top">
-                                                onClick={() => downloadTxtFile(quiz)}
+                                <Button
-                                            > <FileDownload /> </IconButton>
+                                    variant="outlined"
-                                        </Tooltip>
+                                    onClick={() => handleLancerQuiz(quiz)}
+                                    disabled={!validateQuiz(quiz.content)}
+                                >
+                                    {quiz.title}
+                                </Button>
+                            </Tooltip>
+                        </div>
 
-                                        <Tooltip title="Modifier quiz" placement="top">
+                        <div className='actions'>
-                                            <IconButton
+                            <Tooltip title="Télécharger quiz" placement="top">
-                                                color="primary"
+                                <IconButton
-                                                onClick={() => handleEditQuiz(quiz)}
+                                    color="primary"
-                                            > <Edit /> </IconButton>
+                                    onClick={() => downloadTxtFile(quiz)}
-                                        </Tooltip>
+                                > <FileDownload /> </IconButton>
+                            </Tooltip>
 
-                                        <Tooltip title="Dupliquer quiz" placement="top">
+                            <Tooltip title="Modifier quiz" placement="top">
-                                            <IconButton
+                                <IconButton
-                                                color="primary"
+                                    color="primary"
-                                                onClick={() => handleDuplicateQuiz(quiz)}
+                                    onClick={() => handleEditQuiz(quiz)}
-                                            > <ContentCopy /> </IconButton>
+                                > <Edit /> </IconButton>
-                                        </Tooltip>
+                            </Tooltip>
 
-                                        <Tooltip title="Supprimer quiz" placement="top">
+                            {/* <Tooltip title="Bouger quiz" placement="top">
-                                            <IconButton
+                                <IconButton
-                                                aria-label="delete"
+                                    color="primary"
-                                                color="primary"
+                                    onClick={() => handleMoveQuiz(quiz)}
-                                                onClick={() => handleRemoveQuiz(quiz)}
+                                > <DriveFileMove /> </IconButton>
-                                            > <DeleteOutline /> </IconButton>
+                            </Tooltip> */}
-                                        </Tooltip>
 
-                                        <Tooltip title="Partager quiz" placement="top">
+                            <Tooltip title="Dupliquer quiz" placement="top">
-                                            <IconButton
+                                <IconButton
-                                                color="primary"
+                                    color="primary"
-                                                onClick={() => handleShareQuiz(quiz)}
+                                    onClick={() => handleDuplicateQuiz(quiz)}
-                                            > <Share /> </IconButton>
+                                > <ContentCopy /> </IconButton>
-                                        </Tooltip>
+                            </Tooltip>
-                                    </div>
+
-                                </div>
+                            <Tooltip title="Supprimer quiz" placement="top">
-                            ))}
+                                <IconButton
-                        </CardContent>
+                                    aria-label="delete"
-                    </CustomCard>
+                                    color="primary"
+                                    onClick={() => handleRemoveQuiz(quiz)}
+                                > <DeleteOutline /> </IconButton>
+                            </Tooltip>
+
+                            <Tooltip title="Partager quiz" placement="top">
+                                <IconButton
+                                    color="primary"
+                                    onClick={() => handleShareQuiz(quiz)}
+                                > <Share /> </IconButton>
+                            </Tooltip>
+                        </div>
+                    </div>
                 ))}
             </div>
+
             <ImportModal
                 open={showImportModal}
                 handleOnClose={() => setShowImportModal(false)}
                 handleOnImport={handleOnImport}
-                selectedFolder={selectedFolderId}
+                selectedFolder={selectedFolder}
             />
 
         </div>
@@ -524,11 +536,3 @@ const Dashboard: React.FC = () => {
 };
 
 export default Dashboard;
-function addFolderTitleToQuizzes(folderQuizzes: string | QuizType[], folderName: string) {
-    if (Array.isArray(folderQuizzes))
-        folderQuizzes.forEach((quiz) => {
-            quiz.folderName = folderName;
-            console.log(`quiz: ${quiz.title} folder: ${quiz.folderName}`);
-        });
-}
-

client/src/pages/Teacher/Dashboard/dashboard.css

@@ -77,43 +77,4 @@ div:has(> #select-folder) {
     display: flex;
     flex-direction: row;
     align-items: center;
-}
+}
-
-.dashboard .list .quiz .actions {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.folder-card {
-    position: relative;
-    /* margin: 40px 0 20px 0; /* Add top margin to make space for the tab */
-    border-radius: 8px;
-    color: #f9f9f9;
-    --outline-color: #e1e1e1;
-    border: 2px solid var(--outline-color);
-}
-
-.folder-tab {
-    position: absolute;
-    top: -33px;
-    left: 9px;
-    padding: 5px 10px;
-    border-radius: 8px 8px 0 0;
-    font-weight: bold;
-    white-space: nowrap; /* Prevent text from wrapping */
-    display: inline-block; /* Ensure the tab width is based on content */
-    border: 2px solid var(--outline-color);
-    border-bottom-style: none;
-    background-color: white; /* Optional: background color to match the card */
-    color: #3f51b5; /* Text color to match the outline */
-}
-
-/* .folder-card:nth-child(odd) {
-    background-color: #f9f9f9;
-}
-
-.folder-card:nth-child(even) {
-    background-color: #e0e0e0;
-} */