Refactor member progress

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 &&

src/components/TeamMembers/TeamMembersPage.tsx

@@ -146,25 +146,13 @@ export function TeamMembersPage() {
     toast.success('Reminder has been sent');
   }
 
-  const enrichedMembers = teamMembers.map((member) => {
+  const joinedMembers = teamMembers.filter(
-    const shouldNotShowProgressWarning =
-      team?.personalProgressOnly &&
-      !canManageCurrentTeam &&
-      member.userId !== user?.id;
-
-    return {
-      ...member,
-      ...(shouldNotShowProgressWarning ? { hasProgress: true } : {}),
-    };
-  });
-
-  const joinedMembers = enrichedMembers.filter(
     (member) => member.status === 'joined',
   );
-  const invitedMembers = enrichedMembers.filter(
+  const invitedMembers = teamMembers.filter(
     (member) => member.status === 'invited',
   );
-  const rejectedMembers = enrichedMembers.filter(
+  const rejectedMembers = teamMembers.filter(
     (member) => member.status === 'rejected',
   );
 
@@ -217,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('');
@@ -253,6 +246,7 @@ export function TeamMembersPage() {
                     index={index}
                     teamId={teamId}
                     userId={user?.id!}
+                    canViewProgress={false}
                     onResendInvite={() => {
                       resendInvite(teamId, member._id!).finally(() => {
                         pageProgressMessage.set('');
@@ -292,6 +286,7 @@ export function TeamMembersPage() {
                     member={member}
                     index={index}
                     teamId={teamId}
+                    canViewProgress={false}
                     userId={user?.id!}
                     onResendInvite={() => {
                       resendInvite(teamId, member._id!).finally(() => {

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;
@@ -81,28 +82,15 @@ export function TeamProgressPage() {
     }
 
     setTeamMembers(
-      response
+      response.sort((a, b) => {
-        .filter((member) => {
+        if (a.email === user?.email) {
-          // If personal progress only is enabled, only show the current user's progress
+          return -1;
-          // and only if the user is a member
+        }
-          if (
+        if (b.email === user?.email) {
-            currentTeam?.personalProgressOnly &&
+          return 1;
-            currentTeam?.role === 'member'
+        }
-          ) {
+        return 0;
-            return member.email === user?.email;
+      }),
-          }
-
-          return true;
-        })
-        .sort((a, b) => {
-          if (a.email === user?.email) {
-            return -1;
-          }
-          if (b.email === user?.email) {
-            return 1;
-          }
-          return 0;
-        }),
     );
   }
 
@@ -236,21 +224,32 @@ export function TeamProgressPage() {
         )}
         {selectedGrouping === 'member' && (
           <div className="grid gap-4 sm:grid-cols-2">
-            {teamMembers.map((member) => (
+            {teamMembers.map((member) => {
-              <MemberProgressItem
+              const canViewMemberProgress =
-                key={member._id}
+                currentTeam?.role !== 'member' ||
-                member={member}
+                !currentTeam?.personalProgressOnly ||
-                teamId={teamId}
+                member.email === user?.email;
-                isMyProgress={member?.email === user?.email}
+
-                onShowResourceProgress={(resourceId, isCustomResource) => {
+              if (!canViewMemberProgress) {
-                  setShowMemberProgress({
+                return null;
-                    resourceId,
+              }
-                    member,
+
-                    isCustomResource,
+              return (
-                  });
+                <MemberProgressItem
-                }}
+                  key={member._id}
-              />
+                  member={member}
-            ))}
+                  teamId={teamId}
+                  isMyProgress={member?.email === user?.email}
+                  onShowResourceProgress={(resourceId, isCustomResource) => {
+                    setShowMemberProgress({
+                      resourceId,
+                      member,
+                      isCustomResource,
+                    });
+                  }}
+                />
+              );
+            })}
           </div>
         )}
       </div>