From fd6888a61d74a8a7ac06df809b7f995815d6afde Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 17 Jun 2023 05:28:46 +0100
Subject: [PATCH] Add progress loading on roadmap pages

---
 .gitignore                                    |  2 +
 src/components/RoadmapHint.astro              | 31 +++++-----
 .../TopicDetail/TopicProgressButton.tsx       |  2 +
 src/lib/resource-progress.ts                  | 57 +++++++++++++++++++
 src/styles/global.css                         | 18 ++++++
 5 files changed, 93 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 593879c2d..c3fd092b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
+.idea
+
 # build output
 dist/
 .output/
diff --git a/src/components/RoadmapHint.astro b/src/components/RoadmapHint.astro
index fa22ef1c7..eca421903 100644
--- a/src/components/RoadmapHint.astro
+++ b/src/components/RoadmapHint.astro
@@ -1,4 +1,6 @@
 ---
+import { ClearProgress } from './Activity/ClearProgress';
+import AstroIcon from './AstroIcon.astro';
 import Icon from './AstroIcon.astro';
 
 export interface Props {
@@ -42,30 +44,25 @@ const roadmapTitle =
   }
 
   <!-- Desktop: Roadmap Resources - Alert -->
-  <div
+  <div id="progress-nums-container"
     class:list={[
-      'hidden sm:flex justify-between px-2 bg-white items-center',
+      'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
       {
         'rounded-bl-md rounded-br-md': hasTNSBanner,
         'rounded-md': !hasTNSBanner,
       },
     ]}
   >
-    <p class='text-sm'>
-      <span
-        class='mr-0.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
-        >New</span
-      >
-      Track your progress and learn by clicking roadmap items.
-    </p>
+    <p class='text-sm flex opacity-0 transition-opacity duration-300' id="progress-nums">
+      <span class="font-medium py-0.5 rounded-sm text-xs uppercase bg-yellow-200 px-1 text-yellow-900 mr-2.5">
+        <span class="progress-percentage">0</span>% Done
+      </span>
 
-    <a
-      href={`/${roadmapId}/topics`}
-      class='inline-flex items-center justify-center rounded-md px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-black'
-    >
-      <Icon icon='search' />
-      <span class='ml-2'>Search Topics</span>
-    </a>
+      <span><span class="progress-done">0</span> completed</span><span class="mx-1.5 text-gray-400">&middot;</span>
+      <span><span class="progress-learning">0</span> learning</span><span class="mx-1.5 text-gray-400">&middot;</span>
+      <span><span class="progress-skipped">0</span> skipped</span><span class="mx-1.5 text-gray-400">&middot;</span>
+      <span><span class="progress-total">0</span> Total</span>
+    </p>
   </div>
 
   <!-- Mobile - Roadmap resources alert -->
@@ -74,4 +71,4 @@ const roadmapTitle =
   >
     Track your progress and learn about the topics by clicking the roadmap items.
   </p>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/components/TopicDetail/TopicProgressButton.tsx b/src/components/TopicDetail/TopicProgressButton.tsx
index 65237df59..80844d736 100644
--- a/src/components/TopicDetail/TopicProgressButton.tsx
+++ b/src/components/TopicDetail/TopicProgressButton.tsx
@@ -8,6 +8,7 @@ import {
   ResourceProgressType,
   ResourceType,
   getTopicStatus,
+  refreshProgressCounters,
   renderTopicProgress,
   updateResourceProgress,
 } from '../../lib/resource-progress';
@@ -135,6 +136,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         setProgress(progress);
         onClose();
         renderTopicProgress(topicId, progress);
+        refreshProgressCounters();
       })
       .catch((err) => {
         alert(err.message);
diff --git a/src/lib/resource-progress.ts b/src/lib/resource-progress.ts
index fccd508f1..fe6c616f2 100644
--- a/src/lib/resource-progress.ts
+++ b/src/lib/resource-progress.ts
@@ -223,4 +223,61 @@ export async function renderResourceProgress(
   skipped.forEach((topicId) => {
     renderTopicProgress(topicId, 'skipped');
   });
+
+  refreshProgressCounters();
+}
+
+export function refreshProgressCounters() {
+  const progressNumsContainer = document.getElementById('progress-nums-container');
+  const progressNums = document.getElementById('progress-nums');
+  if (!progressNumsContainer || !progressNums) {
+    return;
+  }
+
+  const totalClickable = document.querySelectorAll('.clickable-group').length;
+  const externalLinks = document.querySelectorAll(
+    '[data-group-id^="ext_link:"]'
+  ).length;
+  const roadmapSwitchers = document.querySelectorAll(
+    '[data-group-id^="json:"]'
+  ).length;
+
+  const totalItems = totalClickable - externalLinks - roadmapSwitchers;
+  const totalDone = document.querySelectorAll('.clickable-group.done').length;
+  const totalLearning = document.querySelectorAll(
+    '.clickable-group.learning'
+  ).length;
+  const totalSkipped = document.querySelectorAll(
+    '.clickable-group.skipped'
+  ).length;
+
+  const doneCountEl = document.querySelector('.progress-done');
+  if (doneCountEl) {
+    doneCountEl.innerHTML = `${totalDone}`;
+  }
+
+  const learningCountEl = document.querySelector('.progress-learning');
+  if (learningCountEl) {
+    learningCountEl.innerHTML = `${totalLearning}`;
+  }
+
+  const skippedCountEl = document.querySelector('.progress-skipped');
+  if (skippedCountEl) {
+    skippedCountEl.innerHTML = `${totalSkipped}`;
+  }
+
+  const totalCountEl = document.querySelector('.progress-total');
+  if (totalCountEl) {
+    totalCountEl.innerHTML = `${totalItems}`;
+  }
+
+  const progressPercentage = Math.round(((totalDone + totalSkipped) / totalItems) * 100);
+  const progressPercentageEl = document.querySelector('.progress-percentage');
+  if (progressPercentageEl) {
+    progressPercentageEl.innerHTML = `${progressPercentage}`;
+  }
+
+  progressNumsContainer.classList.remove('striped-loader')
+  progressNums.classList.remove('opacity-0');
+  progressNums.classList.remove('opacity-100');
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index ba9c6535c..12bce1559 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -63,3 +63,21 @@ a > code:before {
     )
     hsla(203, 11%, 95%, 0.4);
 }
+
+.striped-loader {
+  background-image: repeating-linear-gradient(
+          -45deg,
+          transparent,
+          transparent 5px,
+          hsla(0, 0%, 0%, 0.025) 5px,
+          hsla(0, 0%, 0%, 0.025) 10px
+  );
+  background-size: 200% 200%;
+  animation: barberpole 15s linear infinite;
+}
+
+@keyframes barberpole {
+  100% {
+    background-position: 100% 100%;
+  }
+}
\ No newline at end of file