feat: display countries passed by

MarcoEscaleira · Mar 24, 2024 · ad1d209 · ad1d209
1 parent 4eb1b1a
commit ad1d209
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/src/pages/Game/CountryQuizList.tsx b/src/pages/Game/CountryQuizList.tsx
@@ -33,7 +33,7 @@ export const CountryQuizList = ({ quizList, isLoadingCountryQuizList }: CountryQ
   const goToQuizForm = () => navigate(`/game/quiz/add?country=${countryDetails.name}`);
 
   const headerContent = (
-    <div className="mb-4 mt-12 flex w-full items-center justify-between gap-3 border-b-2 pb-4 sm:justify-center sm:gap-14 md:mt-10 md:px-0 md:pb-6">
+    <div className="mb-4 mt-20 flex w-full items-center justify-between gap-3 border-b-2 pb-4 sm:justify-center sm:gap-14 md:mt-10 md:px-0 md:pb-6">
       <Typography variant="h2" className="flex items-center gap-2 text-2xl">
         <img src={countryDetails.flags.svg} alt={countryDetails.name} className="h-5 w-5 rounded-full object-cover" />
 

diff --git a/src/pages/Game/MapChart.tsx b/src/pages/Game/MapChart.tsx
@@ -6,7 +6,7 @@ import { useSearchParams } from "react-router-dom";
 import { ZoomableGroup, ComposableMap, Geographies, Geography, Marker } from "react-simple-maps";
 import useBreakpoint from "use-breakpoint";
 import { BREAKPOINTS } from "@utils/constants.ts";
-import { useCountriesColors } from "@utils/hooks/useCountriesColors.ts";
+import { useCountryInformation } from "@utils/hooks/useCountryInformation";
 
 interface Position {
   coordinates: Array<number>;
@@ -18,7 +18,7 @@ export const MapChart: FC = () => {
   const [position, setPosition] = useState<Position>({ coordinates: [5, 46], zoom: 1 });
   const { breakpoint } = useBreakpoint(BREAKPOINTS);
 
-  const mappedCountries = useCountriesColors();
+  const { countriesPassedBy, countryColours } = useCountryInformation();
 
   function handleZoomIn() {
     if (position.zoom >= 10) return;
@@ -60,8 +60,8 @@ export const MapChart: FC = () => {
               {({ geographies }) =>
                 geographies.map(geo => {
                   const provinceCenter = geoCentroid(geo);
-                  const isCountrySelected = searchParams.get("country") === geo.properties.name;
-                  const countryColor = mappedCountries[geo.properties.name] || "fill-blue-gray-200";
+                  // const isCountrySelected = searchParams.get("country") === geo.properties.name;
+                  const countryColor = countryColours[geo.properties.name] || "fill-blue-gray-200";
 
                   const handleOnCountryClick = (event: React.MouseEvent<SVGPathElement, MouseEvent>) => {
                     event.stopPropagation();
@@ -86,7 +86,7 @@ export const MapChart: FC = () => {
                           geography={geo}
                           data-tooltip-id="country-tooltip"
                           onClick={handleOnCountryClick}
-                          className={`${isCountrySelected ? "fill-purple-300" : countryColor} cursor-pointer outline-none hover:fill-purple-200`}
+                          className={`${countryColor} cursor-pointer outline-none hover:fill-blue-200`}
                         />
                       </Tooltip>
                       <Marker key={`name-${geo.rsmKey}`} coordinates={provinceCenter} onClick={handleOnCountryClick}>
@@ -122,18 +122,18 @@ export const MapChart: FC = () => {
         </Tooltip>
       </div>
 
-      <div className="absolute -bottom-7 left-2 mt-3 flex items-center gap-3 sm:gap-6 md:right-4 ">
+      <div className="absolute -bottom-7 left-0 flex items-center gap-3 sm:gap-6 md:left-4 ">
         <Tooltip content="Completed all quizzes">
           <div className="flex gap-2">
-            <span className="size-5 rounded-full bg-green-200" />
+            <span className="size-5 rounded-full bg-green-400" />
             <Typography variant="small" className="font-medium">
               Completed
             </Typography>
           </div>
         </Tooltip>
         <Tooltip content="Completed some quizzes">
           <div className="flex gap-2">
-            <span className="size-5 rounded-full bg-blue-200" />
+            <span className="size-5 rounded-full bg-yellow-200" />
             <Typography variant="small" className="font-medium">
               In Progress
             </Typography>
@@ -147,11 +147,13 @@ export const MapChart: FC = () => {
             </Typography>
           </div>
         </Tooltip>
+      </div>
+
+      <div className="absolute -bottom-14 left-0 flex items-center md:left-4">
         <Tooltip content="Current selected country">
           <div className="flex gap-2">
-            <span className="size-5 rounded-full bg-purple-300" />
             <Typography variant="small" className="font-medium">
-              Selected
+              {countriesPassedBy} countries completed out of 202
             </Typography>
           </div>
         </Tooltip>

diff --git a/src/utils/hooks/useCountriesColors.ts → src/utils/hooks/useCountryInformation.ts b/src/utils/hooks/useCountriesColors.ts → src/utils/hooks/useCountryInformation.ts
@@ -8,13 +8,29 @@ interface CountryColors {
   [country: string]: string;
 }
 
-export const useCountriesColors = (): CountryColors => {
+interface UseCountryInformation {
+  countryColours: CountryColors;
+  countriesPassedBy: number;
+}
+
+export const useCountryInformation = (): UseCountryInformation => {
   const {
     user: { userId },
   } = useUserStore();
   const { data: quizzesData } = useQuery(GET_QUIZZES);
   const { data: attemptsData } = useQuery(GET_USER_ATTEMPTS, { variables: { userId }, fetchPolicy: "network-only" });
 
+  const countriesPassedBy = useMemo(() => {
+    const list = quizzesData?.quizList?.reduce<{ [country: string]: string[] }>((acc, { id, country }) => {
+      return {
+        ...acc,
+        [country]: acc[country]?.length > 0 ? [...acc[country], id] : [id],
+      };
+    }, {});
+
+    return Object.keys(list || {}).length;
+  }, [quizzesData?.quizList]);
+
   const countryColours = useMemo(() => {
     const quizzes = quizzesData?.quizList;
     const attempts = attemptsData?.attempts;
@@ -48,12 +64,12 @@ export const useCountriesColors = (): CountryColors => {
         let color = "fill-blue-gray-200";
 
         if (totalCountryQuizzes === quizzesAttempted && quizzesAttempted !== 0) {
-          color = "fill-green-200";
+          color = "fill-green-400";
         }
 
         // User only did some of the country quizzes
         if (quizzesAttempted > 0 && quizzesAttempted < totalCountryQuizzes) {
-          color = "fill-blue-200";
+          color = "fill-yellow-200";
         }
 
         return {
@@ -66,5 +82,8 @@ export const useCountriesColors = (): CountryColors => {
     return {};
   }, [quizzesData?.quizList, attemptsData?.attempts]);
 
-  return countryColours;
+  return {
+    countryColours,
+    countriesPassedBy,
+  };
 };