From cf5301030f3d215e008125522206ac3d29c0bbb1 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 11 Sep 2024 20:44:11 +0600
Subject: [PATCH] fix: hide the team member progress (#7077)

* fix: hide the team member progress

* Refactor member progress

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
---
 src/components/TeamMembers/TeamMemberItem.tsx |  4 +-
 .../TeamMembers/TeamMembersPage.tsx           | 27 ++++++++----
 .../TeamProgress/TeamProgressPage.tsx         | 44 ++++++++++++-------
 3 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/components/TeamMembers/TeamMemberItem.tsx b/src/components/TeamMembers/TeamMemberItem.tsx
index 4442d3da2..7282aadf8 100644
--- a/src/components/TeamMembers/TeamMemberItem.tsx
+++ b/src/components/TeamMembers/TeamMemberItem.tsx
@@ -12,6 +12,7 @@ type TeamMemberProps = {
   userId: string;
   index: number;
   teamId: string;
+  canViewProgress: boolean;
   canManageCurrentTeam: boolean;
   onDeleteMember: () => void;
   onUpdateMember: () => void;
@@ -29,11 +30,12 @@ export function TeamMemberItem(props: TeamMemberProps) {
     userId,
     onDeleteMember,
     onSendProgressReminder,
+    canViewProgress = true,
   } = props;
 
   const currentTeam = useStore($currentTeam);
   const canManageTeam = useStore($canManageCurrentTeam);
-  const showNoProgressBadge = !member.hasProgress && member.status === 'joined';
+  const showNoProgressBadge = canViewProgress && !member.hasProgress && member.status === 'joined';
   const allowProgressReminder =
     canManageTeam &&
     !member.hasProgress &&
diff --git a/src/components/TeamMembers/TeamMembersPage.tsx b/src/components/TeamMembers/TeamMembersPage.tsx
index 33b4c621e..a568170bd 100644
--- a/src/components/TeamMembers/TeamMembersPage.tsx
+++ b/src/components/TeamMembers/TeamMembersPage.tsx
@@ -61,7 +61,7 @@ export function TeamMembersPage() {
 
   async function loadTeam() {
     const { response, error } = await httpGet<TeamDocument>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamId}`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamId}`,
     );
     if (error || !response) {
       toast.error(error?.message || 'Something went wrong');
@@ -75,7 +75,7 @@ export function TeamMembersPage() {
 
   async function getTeamMemberList() {
     const { response, error } = await httpGet<TeamMemberItem[]>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-team-member-list/${teamId}`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-team-member-list/${teamId}`,
     );
     if (error || !response) {
       toast.error(error?.message || 'Failed to load team member list');
@@ -100,7 +100,7 @@ export function TeamMembersPage() {
       `${
         import.meta.env.PUBLIC_API_URL
       }/v1-delete-member/${teamId}/${memberId}`,
-      {}
+      {},
     );
 
     if (error || !response) {
@@ -118,7 +118,7 @@ export function TeamMembersPage() {
       `${
         import.meta.env.PUBLIC_API_URL
       }/v1-resend-invite/${teamId}/${memberId}`,
-      {}
+      {},
     );
 
     if (error || !response) {
@@ -135,7 +135,7 @@ export function TeamMembersPage() {
       `${
         import.meta.env.PUBLIC_API_URL
       }/v1-send-progress-reminder/${teamId}/${memberId}`,
-      {}
+      {},
     );
 
     if (error || !response) {
@@ -147,13 +147,13 @@ export function TeamMembersPage() {
   }
 
   const joinedMembers = teamMembers.filter(
-    (member) => member.status === 'joined'
+    (member) => member.status === 'joined',
   );
   const invitedMembers = teamMembers.filter(
-    (member) => member.status === 'invited'
+    (member) => member.status === 'invited',
   );
   const rejectedMembers = teamMembers.filter(
-    (member) => member.status === 'rejected'
+    (member) => member.status === 'rejected',
   );
 
   return (
@@ -205,6 +205,11 @@ export function TeamMembersPage() {
                 index={index}
                 teamId={teamId}
                 userId={user?.id!}
+                canViewProgress={
+                  canManageCurrentTeam ||
+                  !team?.personalProgressOnly ||
+                  String(member.userId) === user?.id
+                }
                 onResendInvite={() => {
                   resendInvite(teamId, member._id!).finally(() => {
                     pageProgressMessage.set('');
@@ -241,6 +246,7 @@ export function TeamMembersPage() {
                     index={index}
                     teamId={teamId}
                     userId={user?.id!}
+                    canViewProgress={false}
                     onResendInvite={() => {
                       resendInvite(teamId, member._id!).finally(() => {
                         pageProgressMessage.set('');
@@ -269,7 +275,9 @@ export function TeamMembersPage() {
 
         {rejectedMembers.length > 0 && (
           <div className="mt-6">
-            <h3 className="text-xs uppercase text-gray-400">Rejected Invites</h3>
+            <h3 className="text-xs uppercase text-gray-400">
+              Rejected Invites
+            </h3>
             <div className="mt-2 rounded-b-sm rounded-t-md border">
               {rejectedMembers.map((member, index) => {
                 return (
@@ -278,6 +286,7 @@ export function TeamMembersPage() {
                     member={member}
                     index={index}
                     teamId={teamId}
+                    canViewProgress={false}
                     userId={user?.id!}
                     onResendInvite={() => {
                       resendInvite(teamId, member._id!).finally(() => {
diff --git a/src/components/TeamProgress/TeamProgressPage.tsx b/src/components/TeamProgress/TeamProgressPage.tsx
index 6f386d55e..747465465 100644
--- a/src/components/TeamProgress/TeamProgressPage.tsx
+++ b/src/components/TeamProgress/TeamProgressPage.tsx
@@ -10,6 +10,7 @@ import { getUrlParams, setUrlParams } from '../../lib/browser';
 import { useAuth } from '../../hooks/use-auth';
 import { MemberProgressModal } from './MemberProgressModal';
 import { MemberCustomProgressModal } from './MemberCustomProgressModal';
+import { canManageCurrentRoadmap } from '../../stores/roadmap.ts';
 
 export type UserProgress = {
   resourceTitle: string;
@@ -191,7 +192,7 @@ export function TeamProgressPage() {
             key={grouping.value}
             className={`rounded-md border p-1 px-2 text-sm ${
               selectedGrouping === grouping.value
-                ? ' border-gray-400 bg-gray-200 '
+                ? 'border-gray-400 bg-gray-200'
                 : ''
             }`}
             onClick={() => setSelectedGrouping(grouping.value)}
@@ -223,21 +224,32 @@ export function TeamProgressPage() {
         )}
         {selectedGrouping === 'member' && (
           <div className="grid gap-4 sm:grid-cols-2">
-            {teamMembers.map((member) => (
-              <MemberProgressItem
-                key={member._id}
-                member={member}
-                teamId={teamId}
-                isMyProgress={member?.email === user?.email}
-                onShowResourceProgress={(resourceId, isCustomResource) => {
-                  setShowMemberProgress({
-                    resourceId,
-                    member,
-                    isCustomResource,
-                  });
-                }}
-              />
-            ))}
+            {teamMembers.map((member) => {
+              const canViewMemberProgress =
+                currentTeam?.role !== 'member' ||
+                !currentTeam?.personalProgressOnly ||
+                member.email === user?.email;
+
+              if (!canViewMemberProgress) {
+                return null;
+              }
+
+              return (
+                <MemberProgressItem
+                  key={member._id}
+                  member={member}
+                  teamId={teamId}
+                  isMyProgress={member?.email === user?.email}
+                  onShowResourceProgress={(resourceId, isCustomResource) => {
+                    setShowMemberProgress({
+                      resourceId,
+                      member,
+                      isCustomResource,
+                    });
+                  }}
+                />
+              );
+            })}
           </div>
         )}
       </div>