From 84bcc84a6c14555c14031478d82cab59f9ccc7ae Mon Sep 17 00:00:00 2001
From: Sean Prashad <S.Prashad@outlook.com>
Date: Fri, 25 Dec 2020 19:09:54 -0500
Subject: [PATCH] Show detailed breakdown of problem completion

Users will now see four counts in the first column broken down by:

- Total number of questions completed
- Total number of easy questions completed
- Total number of medium questions completed
- Total number of hard questions completed
---
 src/components/Table/index.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 8b394d82..dd46632a 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -87,25 +87,40 @@ const Table = () => {
             Header: () => {
               return (
                 <span>
+                  <Badge className="" pill>
+                    <span
+                      data-tip={`You've completed ${difficultyCount.Easy +
+                        difficultyCount.Medium +
+                        difficultyCount.Hard}/${totalDifficultyCount.Easy +
+                        totalDifficultyCount.Medium +
+                        totalDifficultyCount.Hard} questions`}
+                    >
+                      Total: {difficultyCount.Easy}/
+                      {totalDifficultyCount.Easy +
+                        totalDifficultyCount.Medium +
+                        totalDifficultyCount.Hard}
+                    </span>
+                  </Badge>
                   <Badge className="easy" pill>
                     <span
                       data-tip={`You've completed ${difficultyCount.Easy}/${totalDifficultyCount.Easy} easy questions`}
                     >
-                      {difficultyCount.Easy}/{totalDifficultyCount.Easy}
+                      Easy: {difficultyCount.Easy}/{totalDifficultyCount.Easy}
                     </span>
                   </Badge>
                   <Badge className="medium" pill>
                     <span
                       data-tip={`You've completed ${difficultyCount.Medium}/${totalDifficultyCount.Medium} medium questions`}
                     >
-                      {difficultyCount.Medium}/{totalDifficultyCount.Medium}
+                      Medium: {difficultyCount.Medium}/
+                      {totalDifficultyCount.Medium}
                     </span>
                   </Badge>
                   <Badge className="hard" pill>
                     <span
                       data-tip={`You've completed ${difficultyCount.Hard}/${totalDifficultyCount.Hard} hard questions`}
                     >
-                      {difficultyCount.Hard}/{totalDifficultyCount.Hard}
+                      Hard: {difficultyCount.Hard}/{totalDifficultyCount.Hard}
                     </span>
                   </Badge>
                 </span>