From 56a038363e3c02c19e94fd5f3e289823501de953 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 24 Sep 2024 23:14:12 +0600
Subject: [PATCH] feat: separate team dashboard page

---
 .../CreateTeam/SelectRoadmapModal.tsx         |  4 -
 src/components/Dashboard/DashboardPage.tsx    | 29 ++++---
 .../Dashboard/DashboardTeamRoadmaps.tsx       |  4 +-
 src/components/Dashboard/TeamDashboard.tsx    | 20 ++---
 src/pages/team/index.astro                    | 77 ++++++++++++++++---
 5 files changed, 90 insertions(+), 44 deletions(-)

diff --git a/src/components/CreateTeam/SelectRoadmapModal.tsx b/src/components/CreateTeam/SelectRoadmapModal.tsx
index f009cb2fe..4642f9a40 100644
--- a/src/components/CreateTeam/SelectRoadmapModal.tsx
+++ b/src/components/CreateTeam/SelectRoadmapModal.tsx
@@ -26,10 +26,6 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
   const popupBodyEl = useRef<HTMLDivElement>(null);
   const searchInputEl = useRef<HTMLInputElement>(null);
 
-  console.log('-'.repeat(20));
-  console.log(allRoadmaps);
-  console.log('-'.repeat(20));
-
   const [searchResults, setSearchResults] = useState<PageType[]>(allRoadmaps);
   const [searchText, setSearchText] = useState('');
 
diff --git a/src/components/Dashboard/DashboardPage.tsx b/src/components/Dashboard/DashboardPage.tsx
index 67f6c0775..b7d832983 100644
--- a/src/components/Dashboard/DashboardPage.tsx
+++ b/src/components/Dashboard/DashboardPage.tsx
@@ -8,18 +8,22 @@ import { DashboardTab } from './DashboardTab';
 import { PersonalDashboard, type BuiltInRoadmap } from './PersonalDashboard';
 import { TeamDashboard } from './TeamDashboard';
 import { getUser } from '../../lib/jwt';
-import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';
 import { useParams } from '../../hooks/use-params';
 
 type DashboardPageProps = {
   builtInRoleRoadmaps?: BuiltInRoadmap[];
   builtInSkillRoadmaps?: BuiltInRoadmap[];
   builtInBestPractices?: BuiltInRoadmap[];
+  isTeamPage?: boolean;
 };
 
 export function DashboardPage(props: DashboardPageProps) {
-  const { builtInRoleRoadmaps, builtInBestPractices, builtInSkillRoadmaps } =
-    props;
+  const {
+    builtInRoleRoadmaps,
+    builtInBestPractices,
+    builtInSkillRoadmaps,
+    isTeamPage = false,
+  } = props;
 
   const currentUser = getUser();
   const toast = useToast();
@@ -67,11 +71,8 @@ export function DashboardPage(props: DashboardPageProps) {
         <div className="mb-6 flex flex-wrap items-center gap-1.5 sm:mb-8">
           <DashboardTab
             label="Personal"
-            isActive={!selectedTeamId}
-            onClick={() => {
-              setSelectedTeamId(undefined);
-              deleteUrlParam('t');
-            }}
+            isActive={!selectedTeamId && !isTeamPage}
+            href="/dashboard"
             avatar={userAvatar}
           />
 
@@ -99,10 +100,7 @@ export function DashboardPage(props: DashboardPageProps) {
                           href: `/respond-invite?i=${team.memberId}`,
                         }
                       : {
-                          onClick: () => {
-                            setSelectedTeamId(team._id);
-                            setUrlParams({ t: team._id });
-                          },
+                          href: `/team?t=${team._id}`,
                         })}
                     avatar={avatarUrl}
                   />
@@ -118,18 +116,19 @@ export function DashboardPage(props: DashboardPageProps) {
           )}
         </div>
 
-        {!selectedTeamId && (
+        {!selectedTeamId && !isTeamPage && (
           <PersonalDashboard
             builtInRoleRoadmaps={builtInRoleRoadmaps}
             builtInSkillRoadmaps={builtInSkillRoadmaps}
             builtInBestPractices={builtInBestPractices}
           />
         )}
-        {selectedTeamId && (
+
+        {(selectedTeamId || isTeamPage) && (
           <TeamDashboard
             builtInRoleRoadmaps={builtInRoleRoadmaps!}
             builtInSkillRoadmaps={builtInSkillRoadmaps!}
-            teamId={selectedTeamId}
+            teamId={selectedTeamId!}
           />
         )}
       </div>
diff --git a/src/components/Dashboard/DashboardTeamRoadmaps.tsx b/src/components/Dashboard/DashboardTeamRoadmaps.tsx
index 4597d9e47..735782c98 100644
--- a/src/components/Dashboard/DashboardTeamRoadmaps.tsx
+++ b/src/components/Dashboard/DashboardTeamRoadmaps.tsx
@@ -60,8 +60,6 @@ export function DashboardTeamRoadmaps(props: DashboardTeamRoadmapsProps) {
     [builtInRoleRoadmaps, builtInSkillRoadmaps],
   );
 
-  console.log(allRoadmaps);
-
   async function onAdd(roadmapId: string, shouldCopyContent = false) {
     if (!teamId) {
       return;
@@ -272,7 +270,7 @@ export function DashboardTeamRoadmaps(props: DashboardTeamRoadmapsProps) {
 
           {canManageCurrentTeam && (
             <button
-              onClick={() => setIsAddingRoadmap(true)}
+              onClick={() => setIsPickingOptions(true)}
               className="group relative flex w-full items-center justify-center overflow-hidden rounded-md border border-dashed border-gray-300 bg-white px-3 py-2 text-center text-sm text-gray-500 transition-all hover:border-gray-400 hover:text-black"
             >
               + Add Roadmap
diff --git a/src/components/Dashboard/TeamDashboard.tsx b/src/components/Dashboard/TeamDashboard.tsx
index cc3fb63ef..3f502b9ce 100644
--- a/src/components/Dashboard/TeamDashboard.tsx
+++ b/src/components/Dashboard/TeamDashboard.tsx
@@ -62,12 +62,8 @@ export function TeamDashboard(props: TeamDashboardProps) {
     getTeamProgress().finally(() => setIsLoading(false));
   }, [teamId]);
 
-  if (!currentUser) {
-    return null;
-  }
-
   const currentMember = teamMembers.find(
-    (member) => member.email === currentUser.email,
+    (member) => member.email === currentUser?.email,
   );
   const learningRoadmapsToShow =
     currentMember?.progress?.filter(
@@ -75,11 +71,11 @@ export function TeamDashboard(props: TeamDashboardProps) {
     ) || [];
 
   const allMembersWithoutCurrentUser = teamMembers.sort((a, b) => {
-    if (a.email === currentUser.email) {
+    if (a.email === currentUser?.email) {
       return -1;
     }
 
-    if (b.email === currentUser.email) {
+    if (b.email === currentUser?.email) {
       return 1;
     }
 
@@ -126,7 +122,11 @@ export function TeamDashboard(props: TeamDashboardProps) {
               ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${member.avatar}`
               : '/images/default-avatar.png';
             return (
-              <span className="group relative" key={member.email}>
+              <a
+                className="group relative"
+                key={member.email}
+                href={`/team/member?t=${teamId}&m=${member._id}`}
+              >
                 <figure className="relative aspect-square size-8 overflow-hidden rounded-md bg-gray-100">
                   <img
                     src={avatar}
@@ -137,7 +137,7 @@ export function TeamDashboard(props: TeamDashboardProps) {
                 <Tooltip position="top-center" additionalClass="text-sm">
                   {member.name}
                 </Tooltip>
-              </span>
+              </a>
             );
           })}
 
@@ -157,7 +157,7 @@ export function TeamDashboard(props: TeamDashboardProps) {
         </div>
       )}
 
-      <TeamActivityPage teamId={teamId} />
+      {!isLoading && <TeamActivityPage teamId={teamId} />}
     </section>
   );
 }
diff --git a/src/pages/team/index.astro b/src/pages/team/index.astro
index 18c2b659e..18367de27 100644
--- a/src/pages/team/index.astro
+++ b/src/pages/team/index.astro
@@ -1,15 +1,68 @@
 ---
-import AccountSidebar from '../../components/AccountSidebar.astro';
-import { TeamsList } from '../../components/TeamsList';
-import AccountLayout from '../../layouts/AccountLayout.astro';
+import { DashboardPage } from '../../components/Dashboard/DashboardPage';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getAllBestPractices } from '../../lib/best-practice';
+import { getRoadmapsByTag } from '../../lib/roadmap';
+
+const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
+const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
+const bestPractices = await getAllBestPractices();
+
+const enrichedRoleRoadmaps = roleRoadmaps
+  .filter((roadmapItem) => !roadmapItem.frontmatter.isHidden)
+  .map((roadmap) => {
+    const { frontmatter } = roadmap;
+
+    return {
+      id: roadmap.id,
+      url: `/${roadmap.id}`,
+      title: frontmatter.briefTitle,
+      description: frontmatter.briefDescription,
+      relatedRoadmapIds: frontmatter.relatedRoadmaps,
+      renderer: frontmatter.renderer,
+      metadata: {
+        tags: frontmatter.tags,
+      },
+    };
+  });
+const enrichedSkillRoadmaps = skillRoadmaps
+  .filter((roadmapItem) => !roadmapItem.frontmatter.isHidden)
+  .map((roadmap) => {
+    const { frontmatter } = roadmap;
+
+    return {
+      id: roadmap.id,
+      url: `/${roadmap.id}`,
+      title:
+        frontmatter.briefTitle === 'Go' ? 'Go Roadmap' : frontmatter.briefTitle,
+      description: frontmatter.briefDescription,
+      relatedRoadmapIds: frontmatter.relatedRoadmaps,
+      renderer: frontmatter.renderer,
+      metadata: {
+        tags: frontmatter.tags,
+      },
+    };
+  });
+
+const enrichedBestPractices = bestPractices.map((bestPractice) => {
+  const { frontmatter } = bestPractice;
+
+  return {
+    id: bestPractice.id,
+    url: `/best-practices/${bestPractice.id}`,
+    title: frontmatter.briefTitle,
+    description: frontmatter.briefDescription,
+  };
+});
 ---
 
-<AccountLayout
-  title='Update Profile'
-  noIndex={true}
-  initialLoadingMessage={'Loading teams'}
->
-  <AccountSidebar hasDesktopSidebar={false} activePageId='team' activePageTitle='Teams'>
-    <TeamsList client:only="react" />
-  </AccountSidebar>
-</AccountLayout>
+<BaseLayout title='Dashboard' noIndex={true}>
+  <DashboardPage
+    builtInRoleRoadmaps={enrichedRoleRoadmaps}
+    builtInSkillRoadmaps={enrichedSkillRoadmaps}
+    builtInBestPractices={enrichedBestPractices}
+    isTeamPage={true}
+    client:load
+  />
+  <div slot='open-source-banner'></div>
+</BaseLayout>