Generate flashcard collection frontend

QuizAppApi/QuizAppApi/Controllers/FlashcardCollectionController.cs

@@ -26,7 +26,7 @@ public async Task<ActionResult<FlashcardCollectionDto>> Create([FromBody] Flashc
     public async Task<ActionResult<FlashcardCollectionDto>> CreateFromQuizzes(int quizId)
     {
         var createdCollection = await _collectionService.CreateFromQuizAsync(quizId);
-        return CreatedAtAction(nameof(GetById), createdCollection);
+        return CreatedAtAction(nameof(GetById), new { createdCollection.Id }, createdCollection);
     }
 
     [HttpGet("{id}")]

QuizAppApi/QuizAppApi/Services/FlashcardCollectionService.cs

@@ -71,7 +71,7 @@ public async Task<FlashcardCollectionDto> CreateFromQuizAsync(int quizId)
                 Answer = answer
             });
         }
-        return await GetByIdAsync(quizId);
+        return await GetByIdAsync(result.Id);
     }
 
     public async Task<FlashcardCollectionDto?> GetByIdAsync(int id)

better-frontend/src/api/flashcardCollections.ts

@@ -13,6 +13,11 @@ export async function createFlashcardCollection(
   return response.data;
 }
 
+export async function createFromQuizFlashcardCollection(quizId: number) {
+  const response = await axios.post<FlashcardCollectionDto>(`${BASE_URL}create-from-quiz/${quizId}`);
+  return response.data;
+}
+
 export async function getFlashcardCollections() {
   const response = await axios.get<FlashcardCollectionDto[]>(BASE_URL);
   return response.data;
@@ -42,7 +47,7 @@ export async function createFlashcard(id: number, flashcard: FlashcardDto) {
   return response.data;
 }
 
-export async function udpateFlashcard(id: number, flashcard: FlashcardDto) {
+export async function updateFlashcard(id: number, flashcard: FlashcardDto) {
   const response = await axios.put<FlashcardDto>(
     `/api/flashcards/${id}`,
     flashcard

better-frontend/src/components/QuizDiscussionBlock.tsx

@@ -6,6 +6,7 @@ import {
   Input,
   List,
   ListItem,
+  Text,
 } from "@chakra-ui/react";
 import useDiscussion from "../hooks/useDiscussion";
 import { DiscussionComment } from "../types/quiz";
@@ -60,7 +61,7 @@ function CommentArea({ comments }: { comments: DiscussionComment[] }) {
     (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
   );
 
-  const messagesEnd = useRef(null);
+  const messagesEnd = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
     messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
@@ -71,11 +72,14 @@ function CommentArea({ comments }: { comments: DiscussionComment[] }) {
   }, [comments]);
 
   return (
-    <List height="80vh" overflow="scroll">
+    <List height="83vh" overflowX="hidden" overflowY="scroll">
       {sortedComments.map((c, i) => {
         return (
           <ListItem key={i}>
-            {c.username == null ? "Guest" : c.username}: {c.content}
+            <Text as="span" fontWeight="bold" color="purple.300">
+              {c.username == null ? "Guest" : c.username}
+            </Text>
+            : {c.content}
           </ListItem>
         );
       })}

better-frontend/src/pages/FlashcardCollectionView.tsx

@@ -6,7 +6,7 @@ import {
   getFlashcardCollection,
   getFlashcards,
   deleteFlashcard,
-  udpateFlashcard,
+  updateFlashcard,
 } from "../api/flashcardCollections";
 import {
   Card,
@@ -142,7 +142,7 @@ function FlashcardInPreview({
   async function handleEdit(newFlashcard: FlashcardDto) {
     setEditing(false);
     if (flashcard.id === undefined) return;
-    await udpateFlashcard(flashcard.id, newFlashcard);
+    await updateFlashcard(flashcard.id, newFlashcard);
     queryClient.invalidateQueries({
       queryKey: ["flashcards"],
     });

better-frontend/src/pages/QuizPreview.tsx

@@ -5,16 +5,22 @@ import { getQuestions } from "../api/questions";
 import {
   Button,
   HStack,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
   Spinner,
   useDisclosure,
   useToast,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
 } from "@chakra-ui/react";
+import { ChatIcon } from "@chakra-ui/icons";
 import {
   QuestionResponseDto,
   QuizManipulationRequestDto,
@@ -25,6 +31,7 @@ import { useContext, useState } from "react";
 import SoloGame from "../components/SoloGame";
 import QuizDiscussionBlock from "../components/QuizDiscussionBlock";
 import { AuthContext } from "../contexts/AuthContext";
+import { createFromQuizFlashcardCollection } from "../api/flashcardCollections";
 
 function generateQuiz(
   quizResponse: QuizResponseDto,
@@ -93,6 +100,7 @@ function QuizPreview() {
   const questionsData = questionsQuery.data;
   const questionsIsLoading = questionsQuery.isLoading;
   const questionsIsError = questionsQuery.isError;
+  const [generateButtonIsLoading, setGenerateButtonIsLoading] = useState(false);
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -129,44 +137,95 @@ function QuizPreview() {
         previewBody={
           <HStack>
             {quiz.questions.length > 0 && (
-              <Button onClick={() => setInGame(true)}>Solo game</Button>
+              <Button colorScheme="green" onClick={() => setInGame(true)}>
+                Start
+              </Button>
             )}
             {(quiz.owner === undefined ||
               quiz.owner === authInfo?.username) && (
               <>
-                <Button
-                  colorScheme="purple"
-                  onClick={() => setQuizForEdit(quiz)}
-                >
-                  Edit quiz
-                </Button>
-                <Button
-                  colorScheme="red"
-                  onClick={async () => {
-                    await deleteQuiz(id);
-                    navigate("/");
-                  }}
-                >
-                  Delete
-                </Button>
+                <Menu>
+                  <MenuButton as={Button} colorScheme="purple">
+                    Actions
+                  </MenuButton>
+                  <MenuList>
+                    {quiz.questions.length > 0 && (
+                      <MenuItem
+                        as={Button}
+                        onClick={async () => {
+                          if (generateButtonIsLoading) {
+                            return;
+                          }
+
+                          setGenerateButtonIsLoading(true);
+
+                          try {
+                            const newCollection =
+                              await createFromQuizFlashcardCollection(id);
+                            navigate(
+                              `/flashcard-collections/${newCollection.id}`
+                            );
+                          } catch (error) {
+                            toast({
+                              title: "Flashcard generation failed",
+                              description: `Whoops! ${
+                                (error as Error).message
+                              }`,
+                              status: "error",
+                              duration: 5000,
+                              isClosable: true,
+                            });
+                          }
+
+                          setGenerateButtonIsLoading(false);
+                        }}
+                        isDisabled={generateButtonIsLoading}
+                      >
+                        {generateButtonIsLoading
+                          ? "Generating..."
+                          : "Generate flashcards"}
+                      </MenuItem>
+                    )}
+                    <MenuItem
+                      as={Button}
+                      textAlign="center"
+                      onClick={() => setQuizForEdit(quiz)}
+                    >
+                      Edit
+                    </MenuItem>
+                    <MenuItem
+                      as={Button}
+                      colorScheme="red"
+                      onClick={async () => {
+                        await deleteQuiz(id);
+                        navigate("/");
+                      }}
+                    >
+                      Delete
+                    </MenuItem>
+                  </MenuList>
+                </Menu>
               </>
             )}
-            <Button variant="outline" onClick={onOpen}>
-              Discussion
-            </Button>
+            <IconButton
+              variant="outline"
+              aria-label="Discussion"
+              icon={<ChatIcon />}
+              onClick={onOpen}
+            />
           </HStack>
         }
       />
-      <Modal isOpen={isOpen} onClose={onClose} isCentered size="full">
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Quiz discussion</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody display="flex" alignItems="stretch">
+      <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader fontSize="2xl" fontWeight="bold">Quiz discussion</DrawerHeader>
+          <DrawerCloseButton />
+          <DrawerBody display="flex" alignItems="stretch">
             <QuizDiscussionBlock id={quiz.id} />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </>
   );
 }