From 0b914ea72f2b0763395b65b3a49ae19edc51f75a Mon Sep 17 00:00:00 2001
From: Dario <darionuberu@gmail.com>
Date: Wed, 1 May 2024 13:21:21 +0200
Subject: [PATCH 1/3] feat: questions loading

---
 webapp/src/pages/Game.jsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx
index cac11836..7aeb2f5f 100644
--- a/webapp/src/pages/Game.jsx
+++ b/webapp/src/pages/Game.jsx
@@ -19,6 +19,7 @@ import { HttpStatusCode } from "axios";
 export default function Game() {
     const navigate = useRef(useNavigate()).current;
     const [loading, setLoading] = useState(true);
+    const [questionLoading, setQuestionLoading] = useState(true);
     const [gameId, setGameId] = useState(null); 
     const [question, setQuestion] = useState(null);
     const [answer, setAnswer] = useState({});
@@ -57,6 +58,7 @@ export default function Game() {
                 if (result.data.image) {
                     setHasImage(true);
                 }
+                setQuestionLoading(false);
             } else {
                 navigate("/dashboard");
             }
@@ -106,12 +108,13 @@ export default function Game() {
             let gameDetails = (await getGameDetails(gameId)).data;
             navigate("/dashboard/game/results", { state: { correctAnswers: gameDetails.correctly_answered_questions } });
         } else {
+            setQuestionLoading(true);
             setAnswer({});
             setHasImage(false);
             setNextDisabled(true);
             await startNewRound(gameId);
         }
-    }, [navigate, setAnswer, setNextDisabled, startNewRound,
+    }, [navigate, setAnswer, setNextDisabled, startNewRound, setQuestionLoading,
         gameId, maxRoundNumber, roundNumber]);
 
     const nextButtonClick = async () => {
@@ -208,15 +211,17 @@ export default function Game() {
                 </Flex>
             }
             <Box bg="white" p={"4 0.5"} borderRadius="md" boxShadow="md" mt={4} mb={4} w={["80%", "60%"]} shadow="2xl" rounded="1rem" alignItems="center">
-                {(question === null) ? (
-                    <Spinner
-                        thickness='4px'
-                        speed='0.65s'
-                        emptyColor='gray.200'
-                        color='green.500'
-                        size='xl'
-                        data-testid={"spinner"}
-                    />
+                {(question === null || questionLoading) ? (
+                    <Flex flexWrap={"wrap"} gap={4} mb={4} justify={"center"}>
+                        <Spinner
+                            thickness='9px'
+                            speed='0.65s'
+                            emptyColor='gray.200'
+                            color='green.500'
+                            size='xl'
+                            data-testid={"spinner"}
+                        />
+                    </Flex>
                 ) : <> 
                         <Text fontWeight='extrabold' fontSize="2xl" color={"forest_green.400"} id={"question"} textAlign={"center"}>{question.content}</Text>
                         <Flex flexWrap={"wrap"} gap={4} mb={4} justify={"center"}>

From 10154557a86c1707b3078e8ce6d8163076f33c32 Mon Sep 17 00:00:00 2001
From: Dario <darionuberu@gmail.com>
Date: Wed, 1 May 2024 13:22:07 +0200
Subject: [PATCH 2/3] feat: user statistics adjustments

---
 .../src/components/statistics/UserStatistics.jsx  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/statistics/UserStatistics.jsx b/webapp/src/components/statistics/UserStatistics.jsx
index b4922379..828d7795 100644
--- a/webapp/src/components/statistics/UserStatistics.jsx
+++ b/webapp/src/components/statistics/UserStatistics.jsx
@@ -65,7 +65,7 @@ export default function UserStatistics() {
                         {t("common.statistics.personal")}
                     </Heading>
                     <Stack width="100%" direction={"row"} justifyContent={"space-between"} alignItems={"flex-start"}>
-                        <Stack paddingLeft={"6rem"}>
+                        <Stack >
                             <Box>
                                 <Heading mt={2} mb={2} display={"flex"} justifyContent={"center"} alignItems={"center"} as="h3" fontSize={"1.25em"}>
                                     {t("statistics.rightAnswers")}
@@ -75,10 +75,10 @@ export default function UserStatistics() {
                                 </Text>
                             </Box>
                             <Box>
-                                <Heading mt={2} mb={2} display={"flex"} justifyContent={"center"} alignItems={"center"} as="h3" fontSize={"1.25em"}>
+                                <Heading mt={2} mb={2} display={"flex"} justifyContent={"center"} alignItems={"center"} as="h3" fontSize={"1.25em"} color={"#955e42"}>
                                     {t("statistics.wrongAnswers")}
                                 </Heading>
-                                <Text display={"flex"} justifyContent={"center"} alignItems={"center"}>
+                                <Text display={"flex"} justifyContent={"center"} alignItems={"center"} >
                                     {t("statistics.texts.personalWrong", { wrong: userData.raw[1].value })}
                                 </Text>
                             </Box>
@@ -92,10 +92,11 @@ export default function UserStatistics() {
                             </Box>
                         </Stack>
                         <Box width={"50%"} height={"50%"} paddingLeft={"2rem"}>
-                            <PieChart width={200} height={200} data-testid={"chart"}>
-                                <Pie data={userData.raw} dataKey="value" innerRadius={48} outerRadius={65} fill="#82ca9d" paddingAngle={5}>
-                                    <Cell key={"cell-right"} fill={"green"} />
-                                    <Cell key={"cell-right"} fill={"red"} />
+                            <PieChart width={140} height={140} data-testid={"chart"}>
+                                <Pie data={userData.raw} dataKey="value" innerRadius={48} outerRadius={65} fill="#82ca9d" paddingAngle={5}
+                                     cx={65} cy={65} labelLine={false} >
+                                    <Cell key={"cell-right"} fill={"green"}/>
+                                    <Cell key={"cell-right"} fill={"#955e42"}/>
                                 </Pie>
                             </PieChart>
                         </Box>

From f41e19c83596f0aeab3d6f7b979c79e980de4548 Mon Sep 17 00:00:00 2001
From: Dario <darionuberu@gmail.com>
Date: Wed, 1 May 2024 13:23:18 +0200
Subject: [PATCH 3/3] fix: removed unused var

---
 webapp/src/pages/Signup.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/src/pages/Signup.jsx b/webapp/src/pages/Signup.jsx
index 3fc8ed40..f9d865fd 100644
--- a/webapp/src/pages/Signup.jsx
+++ b/webapp/src/pages/Signup.jsx
@@ -19,7 +19,6 @@ export default function Signup() {
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
     const [errorMessage, setErrorMessage] = useState(null);
-    const [isSubmitting, setIsSubmitting] = useState(false); 
 
     const navigate = useNavigate();
     const { t, i18n } = useTranslation();
@@ -35,7 +34,6 @@ export default function Signup() {
     }
 
     const sendRegistration = async () => {
-        setIsSubmitting(true); 
         if (confirmPassword.trim() === "") {
             setErrorMessage({ type: t("error.conflict.type"), message: t("error.empty_password") });
             return;