From eb0ab87d34563bbcfb84aaa9c5ea8de66b827a93 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Mon, 16 Sep 2024 17:19:30 +0600
Subject: [PATCH] fix: progress nudge count

---
 .../AuthenticationFlow/EmailLoginForm.tsx           | 13 ++++++++-----
 src/components/FrameRenderer/ProgressNudge.tsx      |  7 +++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/AuthenticationFlow/EmailLoginForm.tsx b/src/components/AuthenticationFlow/EmailLoginForm.tsx
index f01b96d53..ca99e837b 100644
--- a/src/components/AuthenticationFlow/EmailLoginForm.tsx
+++ b/src/components/AuthenticationFlow/EmailLoginForm.tsx
@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie';
 import type { FormEvent } from 'react';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 
@@ -53,13 +53,16 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
     setError(error?.message || 'Something went wrong. Please try again later.');
   };
 
+  const emailFieldId = `form:${useId()}`;
+  const passwordFieldId = `form:${useId()}`;
+
   return (
     <form className="w-full" onSubmit={handleFormSubmit}>
-      <label htmlFor="email" className="sr-only">
+      <label htmlFor={emailFieldId} className="sr-only">
         Email address
       </label>
       <input
-        id="email"
+        id={emailFieldId}
         name="email"
         type="email"
         autoComplete="email"
@@ -69,11 +72,11 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
         value={email}
         onInput={(e) => setEmail(String((e.target as any).value))}
       />
-      <label htmlFor="password" className="sr-only">
+      <label htmlFor={passwordFieldId} className="sr-only">
         Password
       </label>
       <input
-        id="password"
+        id={passwordFieldId}
         name="password"
         type="password"
         autoComplete="current-password"
diff --git a/src/components/FrameRenderer/ProgressNudge.tsx b/src/components/FrameRenderer/ProgressNudge.tsx
index c90e0cd52..bbe893050 100644
--- a/src/components/FrameRenderer/ProgressNudge.tsx
+++ b/src/components/FrameRenderer/ProgressNudge.tsx
@@ -11,7 +11,9 @@ export function ProgressNudge(props: ProgressNudgeProps) {
   const $totalRoadmapNodes = useStore(totalRoadmapNodes);
   const $roadmapProgress = useStore(roadmapProgress);
 
-  const done = $roadmapProgress?.done?.length || 0;
+  const done =
+    ($roadmapProgress?.done?.length || 0) +
+    ($roadmapProgress?.skipped?.length || 0);
 
   const hasProgress = done > 0;
 
@@ -51,7 +53,8 @@ export function ProgressNudge(props: ProgressNudgeProps) {
         <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
           Progress
         </span>
-        <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span> of <span>{$totalRoadmapNodes}</span> Done
+        <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span> of{' '}
+        <span>{$totalRoadmapNodes}</span> Done
       </span>
 
       <span