Add functionality to share progress (#4279)

* wip: user progress modal

* wip: modal loading state

* wip: share progress

* chore: best practices share

* chore: prettier

* fix: classname

* Progress button design

* Progress modal

* Update

* Update

* Progress modal refactoring

* Remove event binding for progress

* Update

* UI changes on progress

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

src/components/Activity/ResourceProgress.tsx

@@ -2,6 +2,7 @@ import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 import { getRelativeTimeString } from '../../lib/date';
 import { useToast } from '../../hooks/use-toast';
+import { ProgressShareButton } from '../UserProgress/ProgressShareButton';
 
 type ResourceProgressType = {
   resourceType: 'roadmap' | 'best-practice';
@@ -88,7 +89,7 @@ export function ResourceProgress(props: ResourceProgressType) {
           {getRelativeTimeString(updatedAt)}
         </span>
       </a>
-      <p className="sm:space-between flex flex-row items-start rounded-b-md border border-t-0 px-2 py-2 text-xs text-gray-500">
+      <div className="sm:space-between flex flex-row items-start rounded-b-md border border-t-0 px-2 py-2 text-xs text-gray-500">
         <span className="hidden flex-1 gap-1 sm:flex">
           {doneCount > 0 && (
             <>
@@ -107,6 +108,16 @@ export function ResourceProgress(props: ResourceProgressType) {
           )}
           <span>{totalCount} total</span>
         </span>
+        <div className="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-start">
+          <ProgressShareButton
+            resourceType={resourceType}
+            resourceId={resourceId}
+            className="text-xs font-normal"
+            shareIconClassName="w-2.5 h-2.5 stroke-2"
+            checkIconClassName="w-2.5 h-2.5"
+          />
+          <span className={'hidden sm:block'}>&bull;</span>
+
           {showClearButton && (
             <>
               {!isConfirming && (
@@ -144,7 +155,8 @@ export function ResourceProgress(props: ResourceProgressType) {
               )}
             </>
           )}
-      </p>
+        </div>
+      </div>
     </div>
   );
 }

src/components/BestPracticeHint.astro

@@ -3,8 +3,9 @@ import ResourceProgressStats from './ResourceProgressStats.astro';
 export interface Props {
   bestPracticeId: string;
 }
+const { bestPracticeId } = Astro.props;
 ---
 
 <div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
-  <ResourceProgressStats />
+  <ResourceProgressStats resourceId={bestPracticeId} resourceType='best-practice' />
 </div>

src/components/ReactIcons/ShareIcon.tsx

@@ -0,0 +1,24 @@
+import type { JSX } from "preact/jsx-runtime";
+
+type ShareIconProps = JSX.SVGAttributes<SVGSVGElement>
+
+export function ShareIcon(props: ShareIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+      <polyline points="16 6 12 2 8 6" />
+      <line x1="12" x2="12" y1="2" y2="15" />
+    </svg>
+  );
+}

src/components/ResourceProgressStats.astro

@@ -1,10 +1,14 @@
 ---
+import type { ResourceType } from '../lib/resource-progress';
 import AstroIcon from './AstroIcon.astro';
+import { ProgressShareButton } from './UserProgress/ProgressShareButton';
 export interface Props {
+  resourceId: string;
+  resourceType: ResourceType;
   isSecondaryBanner?: boolean;
 }
 
-const { isSecondaryBanner = false } = Astro.props;
+const { isSecondaryBanner = false, resourceId, resourceType } = Astro.props;
 ---
 
 <div
@@ -27,6 +31,7 @@ const { isSecondaryBanner = false } = Astro.props;
       <span data-progress-percentage>0</span>% Done
     </span>
 
+    <span class='itesm-center hidden md:flex'>
       <span><span data-progress-done>0</span> completed</span><span
         class='mx-1.5 text-gray-400'>&middot;</span
       >
@@ -37,8 +42,21 @@ const { isSecondaryBanner = false } = Astro.props;
         class='mx-1.5 text-gray-400'>&middot;</span
       >
       <span><span data-progress-total>0</span> Total</span>
+    </span>
+    <span class='md:hidden'>
+      <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
+    </span>
   </p>
 
+  <div
+    class='flex items-center gap-3 opacity-0 transition-opacity duration-300'
+    data-progress-nums
+  >
+    <ProgressShareButton
+      resourceId={resourceId}
+      resourceType={resourceType}
+      client:load
+    />
     <button
       data-popup='progress-help'
       class='flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black'
@@ -48,21 +66,27 @@ const { isSecondaryBanner = false } = Astro.props;
       Track Progress
     </button>
   </div>
+</div>
 
-<p
+<div
   data-progress-nums-container
-  class='striped-loader relative -mb-2 flex items-center justify-between rounded-md border bg-white bg-white px-2 py-1.5 text-sm text-sm text-gray-700 sm:hidden'
+  class='striped-loader relative -mb-2 flex items-center justify-between rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 sm:hidden'
+>
+  <span
+    data-progress-nums
+    class='text-gray-500 opacity-0 transition-opacity duration-300'
   >
-  <span data-progress-nums class='opacity-0 transition-opacity duration-300 text-gray-500'>
     <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
   </span>
 
-  <button
+  <div
-    data-popup='progress-help'
+    class='flex items-center gap-2 opacity-0 transition-opacity duration-300'
-    class='flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black'
     data-progress-nums
   >
-    <AstroIcon icon='question' />
+    <ProgressShareButton
-    Track Progress
+      resourceId={resourceId}
-  </button>
+      resourceType={resourceType}
-</p>
+      client:load
+    />
+  </div>
+</div>

src/components/RoadmapHint.astro

@@ -43,5 +43,5 @@ const roadmapTitle =
     )
   }
 
-  <ResourceProgressStats isSecondaryBanner={hasTNSBanner} />
+  <ResourceProgressStats isSecondaryBanner={hasTNSBanner} resourceId={roadmapId} resourceType='roadmap' />
 </div>

src/components/UserProgress/ProgressShareButton.tsx

@@ -0,0 +1,68 @@
+import { useAuth } from '../../hooks/use-auth';
+import { useCopyText } from '../../hooks/use-copy-text';
+import type { ResourceType } from '../../lib/resource-progress';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { ShareIcon } from '../ReactIcons/ShareIcon';
+
+type ProgressShareButtonProps = {
+  resourceId: string;
+  resourceType: ResourceType;
+  className?: string;
+  shareIconClassName?: string;
+  checkIconClassName?: string;
+};
+export function ProgressShareButton(props: ProgressShareButtonProps) {
+  const {
+    resourceId,
+    resourceType,
+    className,
+    shareIconClassName,
+    checkIconClassName,
+  } = props;
+
+  const user = useAuth();
+  const { copyText, isCopied } = useCopyText();
+
+  function handleCopyLink() {
+    const isDev = import.meta.env.DEV;
+    const newUrl = new URL(
+      isDev ? 'http://localhost:3000' : 'https://roadmap.sh'
+    );
+
+    if (resourceType === 'roadmap') {
+      newUrl.pathname = `/${resourceId}`;
+    } else {
+      newUrl.pathname = `/best-practices/${resourceId}`;
+    }
+
+    newUrl.searchParams.set('s', user?.id || '');
+    copyText(newUrl.toString());
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <button
+      className={`flex items-center gap-1 text-sm font-medium ${
+        isCopied ? 'text-green-500' : 'text-gray-500 hover:text-black'
+      } ${className}`}
+      onClick={handleCopyLink}
+    >
+      {isCopied ? (
+        <>
+          <CheckIcon additionalClasses={`h-3.5 w-3.5 ${checkIconClassName}`} />{' '}
+          Link Copied
+        </>
+      ) : (
+        <>
+          <ShareIcon
+            className={`h-3.5 w-3.5 stroke-[2.5px] ${shareIconClassName}`}
+          />{' '}
+          Share Progress
+        </>
+      )}
+    </button>
+  );
+}

src/components/UserProgress/UserProgressModal.tsx

@@ -0,0 +1,294 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { wireframeJSONToSVG } from 'roadmap-renderer';
+import '../FrameRenderer/FrameRenderer.css';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { useKeydown } from '../../hooks/use-keydown';
+import { httpGet } from '../../lib/http';
+import type { ResourceType } from '../../lib/resource-progress';
+import { topicSelectorAll } from '../../lib/resource-progress';
+import CloseIcon from '../../icons/close.svg';
+import { deleteUrlParam, getUrlParams } from '../../lib/browser';
+import { useAuth } from '../../hooks/use-auth';
+import { Spinner } from '../ReactIcons/Spinner';
+import { ErrorIcon } from '../ReactIcons/ErrorIcon';
+
+export type ProgressMapProps = {
+  resourceId: string;
+  resourceType: ResourceType;
+};
+
+type UserProgressResponse = {
+  user: {
+    _id: string;
+    name: string;
+  };
+  progress: {
+    total: number;
+    done: string[];
+    learning: string[];
+    skipped: string[];
+  };
+};
+
+export function UserProgressModal(props: ProgressMapProps) {
+  const { s: userId } = getUrlParams();
+  const { resourceId, resourceType } = props;
+
+  const resourceSvgEl = useRef<HTMLDivElement>(null);
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+
+  const currentUser = useAuth();
+  if (!userId || currentUser?.id === userId) {
+    deleteUrlParam('s');
+    return null;
+  }
+
+  const [showModal, setShowModal] = useState(!!userId);
+  const [resourceSvg, setResourceSvg] = useState<SVGElement | null>(null);
+  const [progressResponse, setProgressResponse] =
+    useState<UserProgressResponse>();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  let resourceJsonUrl = import.meta.env.DEV
+    ? 'http://localhost:3000'
+    : 'https://roadmap.sh';
+  if (resourceType === 'roadmap') {
+    resourceJsonUrl += `/${resourceId}.json`;
+  } else {
+    resourceJsonUrl += `/best-practices/${resourceId}.json`;
+  }
+
+  async function getUserProgress(
+    userId: string,
+    resourceType: string,
+    resourceId: string
+  ): Promise<UserProgressResponse | undefined> {
+    const { error, response } = await httpGet<UserProgressResponse>(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-get-user-progress/${userId}?resourceType=${resourceType}&resourceId=${resourceId}`
+    );
+
+    if (error || !response) {
+      throw error || new Error('Something went wrong. Please try again!');
+    }
+
+    return response;
+  }
+
+  async function getRoadmapSVG(
+    jsonUrl: string
+  ): Promise<SVGElement | undefined> {
+    const { error, response: roadmapJson } = await httpGet(jsonUrl);
+    if (error || !roadmapJson) {
+      throw error || new Error('Something went wrong. Please try again!');
+    }
+
+    return await wireframeJSONToSVG(roadmapJson, {
+      fontURL: '/fonts/balsamiq.woff2',
+    });
+  }
+
+  function onClose() {
+    deleteUrlParam('s');
+    setError('');
+    setShowModal(false);
+  }
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  useEffect(() => {
+    if (!resourceJsonUrl || !resourceId || !resourceType) {
+      return;
+    }
+
+    setIsLoading(true);
+    Promise.all([
+      getRoadmapSVG(resourceJsonUrl),
+      getUserProgress(userId, resourceType, resourceId),
+    ])
+      .then(([svg, user]) => {
+        if (!user || !svg) {
+          return;
+        }
+
+        const { progress } = user;
+        const { done, learning, skipped } = progress || {
+          done: [],
+          learning: [],
+          skipped: [],
+        };
+
+        done?.forEach((topicId: string) => {
+          topicSelectorAll(topicId, svg).forEach((el) => {
+            el.classList.add('done');
+          });
+        });
+
+        learning?.forEach((topicId: string) => {
+          topicSelectorAll(topicId, svg).forEach((el) => {
+            el.classList.add('learning');
+          });
+        });
+
+        skipped?.forEach((topicId: string) => {
+          topicSelectorAll(topicId, svg).forEach((el) => {
+            el.classList.add('skipped');
+          });
+        });
+
+        svg.querySelectorAll('.clickable-group').forEach((el) => {
+          el.classList.remove('clickable-group');
+        });
+
+        svg.querySelectorAll('[data-group-id]').forEach((el) => {
+          el.removeAttribute('data-group-id');
+        });
+
+        setResourceSvg(svg);
+        setProgressResponse(user);
+      })
+      .catch((err) => {
+        setError(err?.message || 'Something went wrong. Please try again!');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [userId]);
+
+  const user = progressResponse?.user;
+  const progress = progressResponse?.progress;
+
+  const userProgressTotal = progress?.total || 0;
+  const userDone = progress?.done?.length || 0;
+  const progressPercentage =
+    Math.round((userDone / userProgressTotal) * 100) || 0;
+  const userLearning = progress?.learning?.length || 0;
+  const userSkipped = progress?.skipped?.length || 0;
+
+  if (!showModal) {
+    return null;
+  }
+
+  if (isLoading || error) {
+    return (
+      <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+        <div class="relative mx-auto flex h-full w-full items-center justify-center">
+          <div className="popup-body relative rounded-lg bg-white p-5 shadow">
+            <div className="flex items-center">
+              {isLoading && (
+                <>
+                  <Spinner className="h-6 w-6" isDualRing={false} />
+                  <span className="ml-3 text-lg font-semibold">
+                    Loading user progress...
+                  </span>
+                </>
+              )}
+
+              {error && (
+                <>
+                  <ErrorIcon additionalClasses="h-6 w-6 text-red-500" />
+                  <span className="ml-3 text-lg font-semibold">{error}</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id={'user-progress-modal'}
+      class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
+    >
+      <div class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
+        <div
+          ref={popupBodyEl}
+          class={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
+        >
+          <div className="p-4">
+            <div className="mb-5 mt-0 min-h-[28px] text-left sm:text-center md:mt-4 md:h-[60px]">
+              <h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
+                {user?.name}'s Progress
+              </h2>
+              <p
+                className={
+                  'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base'
+                }
+              >
+                You can close this popup and start tracking your progress.
+              </p>
+            </div>
+            <p
+              class={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden`}
+            >
+              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+                <span>{progressPercentage}</span>% Done
+              </span>
+
+              <span>
+                <span>{userDone}</span> of <span>{userProgressTotal}</span> done
+              </span>
+            </p>
+            <p
+              class={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
+                isLoading ? 'striped-loader' : ''
+              }`}
+            >
+              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+                <span>{progressPercentage}</span>% Done
+              </span>
+
+              <span>
+                <span>{userDone}</span> completed
+              </span>
+              <span class="mx-1.5 text-gray-400">·</span>
+              <span>
+                <span>{userLearning}</span> in progress
+              </span>
+
+              {userSkipped > 0 && (
+                <>
+                  <span class="mx-1.5 text-gray-400">·</span>
+                  <span>
+                    <span>{userSkipped}</span> skipped
+                  </span>
+                </>
+              )}
+
+              <span class="mx-1.5 text-gray-400">·</span>
+              <span>
+                <span>{userProgressTotal}</span> Total
+              </span>
+            </p>
+          </div>
+
+          <div
+            ref={resourceSvgEl}
+            className="px-4 pb-2"
+            dangerouslySetInnerHTML={{ __html: resourceSvg?.outerHTML || '' }}
+          ></div>
+
+          <button
+            type="button"
+            className={`absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-gray-100 bg-transparent p-1.5 text-sm text-gray-400 hover:text-gray-900 lg:hidden`}
+            onClick={onClose}
+          >
+            <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/resource-progress.ts

@@ -4,7 +4,12 @@ import { TOKEN_COOKIE_NAME } from './jwt';
 import Element = astroHTML.JSX.Element;
 
 export type ResourceType = 'roadmap' | 'best-practice';
-export type ResourceProgressType = 'done' | 'learning' | 'pending' | 'skipped' | 'removed';
+export type ResourceProgressType =
+  | 'done'
+  | 'learning'
+  | 'pending'
+  | 'skipped'
+  | 'removed';
 
 type TopicMeta = {
   topicId: string;
@@ -110,8 +115,8 @@ export async function getResourceProgress(
       detail: {
         resourceType,
         resourceId,
-        isFavorite
+        isFavorite,
-      }
+      },
     })
   );
 
@@ -146,7 +151,7 @@ async function loadFreshProgress(
     resourceId,
     response?.done || [],
     response?.learning || [],
-    response?.skipped || [],
+    response?.skipped || []
   );
 
   // Dispatch event to update favorite status in the MarkFavorite component
@@ -155,8 +160,8 @@ async function loadFreshProgress(
       detail: {
         resourceType,
         resourceId,
-        isFavorite: response.isFavorite
+        isFavorite: response.isFavorite,
-      }
+      },
     })
   );
 
@@ -168,7 +173,7 @@ export function setResourceProgress(
   resourceId: string,
   done: string[],
   learning: string[],
-  skipped: string[],
+  skipped: string[]
 ): void {
   localStorage.setItem(
     `${resourceType}-${resourceId}-progress`,
@@ -181,19 +186,14 @@ export function setResourceProgress(
   );
 }
 
-export function renderTopicProgress(
+export function topicSelectorAll(
   topicId: string,
-  topicProgress: ResourceProgressType
+  parentElement: Document | SVGElement = document
-) {
+): Element[] {
-  const isLearning = topicProgress === 'learning';
-  const isSkipped = topicProgress === 'skipped';
-  const isDone = topicProgress === 'done';
-  const isRemoved = topicProgress === 'removed';
-
   const matchingElements: Element[] = [];
 
   // Elements having sort order in the beginning of the group id
-  document
+  parentElement
     .querySelectorAll(`[data-group-id$="-${topicId}"]`)
     .forEach((element: unknown) => {
       const foundGroupId =
@@ -206,19 +206,33 @@ export function renderTopicProgress(
     });
 
   // Elements with exact match of the topic id
-  document
+  parentElement
     .querySelectorAll(`[data-group-id="${topicId}"]`)
     .forEach((element) => {
       matchingElements.push(element);
     });
 
   // Matching "check:XXXX" box of the topic
-  document
+  parentElement
     .querySelectorAll(`[data-group-id="check:${topicId}"]`)
     .forEach((element) => {
       matchingElements.push(element);
     });
 
+  return matchingElements;
+}
+
+export function renderTopicProgress(
+  topicId: string,
+  topicProgress: ResourceProgressType
+) {
+  const isLearning = topicProgress === 'learning';
+  const isSkipped = topicProgress === 'skipped';
+  const isDone = topicProgress === 'done';
+  const isRemoved = topicProgress === 'removed';
+
+  const matchingElements: Element[] = topicSelectorAll(topicId);
+
   matchingElements.forEach((element) => {
     if (isDone) {
       element.classList.add('done');
@@ -239,7 +253,7 @@ export function renderTopicProgress(
 }
 
 export function clearResourceProgress() {
-  const clickableElements = document.querySelectorAll('.clickable-group')
+  const clickableElements = document.querySelectorAll('.clickable-group');
   for (const clickableElement of clickableElements) {
     clickableElement.classList.remove('done', 'skipped', 'learning', 'removed');
   }
@@ -304,17 +318,21 @@ export function refreshProgressCounters() {
     '.clickable-group.removed'
   ).length;
   const totalItems =
-    totalClickable - externalLinks - roadmapSwitchers - checkBoxes - totalRemoved;
+    totalClickable -
+    externalLinks -
+    roadmapSwitchers -
+    checkBoxes -
+    totalRemoved;
 
   const totalDone =
     document.querySelectorAll('.clickable-group.done').length -
     totalCheckBoxesDone;
-  const totalLearning = document.querySelectorAll(
+  const totalLearning =
-    '.clickable-group.learning'
+    document.querySelectorAll('.clickable-group.learning').length -
-  ).length - totalCheckBoxesLearning;
+    totalCheckBoxesLearning;
-  const totalSkipped = document.querySelectorAll(
+  const totalSkipped =
-    '.clickable-group.skipped'
+    document.querySelectorAll('.clickable-group.skipped').length -
-  ).length - totalCheckBoxesSkipped;
+    totalCheckBoxesSkipped;
 
   const doneCountEls = document.querySelectorAll('[data-progress-done]');
   if (doneCountEls.length > 0) {

src/pages/[roadmapId]/index.astro

@@ -7,6 +7,7 @@ import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
 import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
 import UpcomingForm from '../../components/UpcomingForm.astro';
+import { UserProgressModal } from '../../components/UserProgress/UserProgressModal';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import {
   generateArticleSchema,
@@ -117,6 +118,11 @@ if (roadmapFAQs.length) {
     }
 
     {roadmapData.isUpcoming && <UpcomingForm />}
+    <UserProgressModal
+      resourceId={roadmapId}
+      resourceType='roadmap'
+      client:only
+    />
 
     <FAQs faqs={roadmapFAQs} />
     <RelatedRoadmaps roadmap={roadmapData} />

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -6,6 +6,7 @@ import ShareIcons from '../../../components/ShareIcons/ShareIcons.astro';
 import { TopicDetail } from '../../../components/TopicDetail/TopicDetail';
 import UpcomingForm from '../../../components/UpcomingForm.astro';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
+import { UserProgressModal } from '../../../components/UserProgress/UserProgressModal';
 import {
   BestPracticeFrontmatter,
   getBestPracticeIds,
@@ -90,7 +91,6 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
           <FrameRenderer
             resourceType={'best-practice'}
             resourceId={bestPracticeId}
-            jsonUrl={bestPracticeData.jsonUrl}
             dimensions={bestPracticeData.dimensions}
           />
         </div>
@@ -106,5 +106,11 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
     }
   </div>
 
+  <UserProgressModal
+    resourceId={bestPracticeId}
+    resourceType='best-practice'
+    client:only
+  />
+
   {bestPracticeData.isUpcoming && <UpcomingForm />}
 </BaseLayout>

src/pages/team/index.astro

@@ -1,6 +1,6 @@
 ---
 import AccountSidebar from '../../components/AccountSidebar.astro';
-import { TeamsList } from '../../components/TeamsList.tsx';
+import { TeamsList } from '../../components/TeamsList';
 import { ActivityPage } from '../../components/Activity/ActivityPage';
 import AccountLayout from '../../layouts/AccountLayout.astro';
 ---