Hotfix submission number (#119)

* hotfix iter 1

* routes fix + ui

---------

Co-authored-by: Eren <[email protected]>

README.md

@@ -1,35 +1,47 @@
 # UML_Mentor
 
-
 ### Development guide (OUTDATED)
-Clone the repository 
+
+Clone the repository
+
 ```
 git clone https://github.com/utmgdsc/UML_Mentor.git
 cd UML_Mentor
 ```
-Install the dependencies 
+
+Install the dependencies
+
 ```
 npm install
-cd client 
+cd client
 npm install
 ```
+
 Run the client in dev mode
+
 ```
 npm run dev
 ```
-Go to `server/index.js` and uncomment line `18` 
+
+Go to `server/index.js` and uncomment line `18`
+
 ```js
 await importChallenges();
 ```
+
 Open a new terminal and run the server in dev mode (execute from root directory).
+
 ```
 npm run devStart
 ```
-The challenges are now imported from the `challenges.json` into the SQLite database. You should now uncomment line 18 to avoid import errors in the future runs. Alternatively, you can pass the `true` parameter to tell the function to reimport challenges on every run (not recommended). 
+
+The challenges are now imported from the `challenges.json` into the SQLite database. You should now uncomment line 18 to avoid import errors in the future runs. Alternatively, you can pass the `true` parameter to tell the function to reimport challenges on every run (not recommended).
+
 ```js
 // await importChallenges();
 ```
-Access the app via the client port `3000`. All of the client requests starting with `/api` are redirected to the server `8080`. 
+
+Access the app via the client port `3000`. All of the client requests starting with `/api` are redirected to the server `8080`.
 
 ## Developer's Documentation
 
@@ -60,7 +72,8 @@ Access the app via the client port `3000`. All of the client requests starting w
 #### Middleware
 
 #### AI
-For Eren to do. 
+
+For Eren to do.
 
 ### Authentication
 
@@ -72,25 +85,25 @@ For Eren to do.
 
 #### Production
 
-
 ## Basic user documentation
 
 ### Solving challenges.
 
-### Posting solutions. 
+### Posting solutions.
 
 ### Viewing solutions.
 
 ## Admin documentation
 
 ### Managing challenges
+
 - Add
 - Delete
 - Hide
 - Edit (todo)
 
 ### Managing users
+
 - Delete Solutions
 - Delete comments
 - Admin dashboard
-

client/src/components/ChallengeCard.tsx

@@ -14,6 +14,7 @@ function ChallengeCard({
   isAdmin,
   hidden,
   keyPatterns,
+  solutionCount,
 }: ChallengeDetailsShort) {
   const [deleted, setDeleted] = useState(false);
 
@@ -26,22 +27,28 @@ function ChallengeCard({
   const backgroundColor = completed ? "bg-success-subtle" : "";
 
   function handleDelete() {
-    if (!window.confirm("Are you sure you want to delete the challenge '" + title + "'?")) {
+    if (
+      !window.confirm(
+        "Are you sure you want to delete the challenge '" + title + "'?",
+      )
+    ) {
       return;
     }
 
     fetch("/api/challenges/" + id, {
       method: "DELETE",
-    }).then((response) => {
-      if (response.ok) {
-        console.log("Challenge deleted");
-        setDeleted(true);
-      } else {
-        console.log("Failed to delete challenge");
-      }
-    }).catch((err) => {
-      console.error(err);
-    });
+    })
+      .then((response) => {
+        if (response.ok) {
+          console.log("Challenge deleted");
+          setDeleted(true);
+        } else {
+          console.log("Failed to delete challenge");
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   }
 
   function handleHide(hidden: boolean) {
@@ -51,25 +58,27 @@ function ChallengeCard({
       headers: {
         "Content-Type": "application/json",
       },
-    }).then((response) => {
-      if (response.ok) {
-        console.log("Challenge hidden");
-        setDeleted(true);
-      } else {
-        console.log("Failed to hide challenge");
-      }
-      return response.json();
-    }).catch((err) => {
-      console.error(err);
-    });
+    })
+      .then((response) => {
+        if (response.ok) {
+          console.log("Challenge hidden");
+          setDeleted(true);
+        } else {
+          console.log("Failed to hide challenge");
+        }
+        return response.json();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   }
 
   if (deleted) {
     return null;
   }
 
   // Split pattern names from keyPatterns and render them as tags
-  const patternTags = keyPatterns?.map((pattern, index) => {
+  const patternTags = keyPatterns.map((pattern, index) => {
     const patternName = pattern.split(" ")[0]; // Get only the first word (e.g., "Strategy", "Factory", etc.)
     return (
       <Badge
@@ -92,9 +101,7 @@ function ChallengeCard({
 
   return (
     <Card>
-      <Card.Header className={backgroundColor}>
-        {difficultyStars}
-      </Card.Header>
+      <Card.Header className={backgroundColor}>{difficultyStars}</Card.Header>
       <Card.Body>
         <Card.Title>{title}</Card.Title>
         {/* Render tags in a flexbox container */}
@@ -105,23 +112,54 @@ function ChallengeCard({
           }}
         >
           {patternTags}
+          <Badge
+            pill
+            bg={"secondary"}
+            style={{
+              border: "1px solid #ccc", // Rectangle boundary
+              padding: "5px 10px", // Padding inside the tags
+              marginRight: "5px",
+              marginBottom: "5px",
+              whiteSpace: "nowrap",
+              borderRadius: "5px", // Rounded corners for a cleaner look
+            }}
+          >
+            {`${solutionCount || 0}`}
+          </Badge>
         </div>
         <Card.Text className="mt-3">{generalDescription}</Card.Text>
         <ButtonToolbar className="d-flex justify-content-between">
           <Button href={"/challenge/" + id}>Solve</Button>
           <div>
             {isAdmin && hidden && (
-              <Button variant="dark" className="mx-2" onClick={() => handleHide(false)}>
+              <Button
+                variant="dark"
+                className="mx-2"
+                onClick={() => {
+                  handleHide(false);
+                }}
+              >
                 Unhide
               </Button>
             )}
             {isAdmin && !hidden && (
-              <Button variant="dark" className="mx-2" onClick={() => handleHide(true)}>
+              <Button
+                variant="dark"
+                className="mx-2"
+                onClick={() => {
+                  handleHide(true);
+                }}
+              >
                 Hide
               </Button>
             )}
             {isAdmin && (
-              <Button variant="danger" onClick={() => handleDelete()}>
+              <Button
+                variant="danger"
+                onClick={() => {
+                  handleDelete();
+                }}
+              >
                 Delete
               </Button>
             )}