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,20 +82,7 @@ export function TeamProgressPage() {
     }
 
     setTeamMembers(
-      response
+      response.sort((a, b) => {
-        .filter((member) => {
-          // If personal progress only is enabled, only show the current user's progress
-          // and only if the user is a member
-          if (
-            currentTeam?.personalProgressOnly &&
-            currentTeam?.role === 'member'
-          ) {
-            return member.email === user?.email;
-          }
-
-          return true;
-        })
-        .sort((a, b) => {
         if (a.email === user?.email) {
           return -1;
         }
@@ -236,7 +224,17 @@ export function TeamProgressPage() {
         )}
         {selectedGrouping === 'member' && (
           <div className="grid gap-4 sm:grid-cols-2">
-            {teamMembers.map((member) => (
+            {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}
@@ -250,7 +248,8 @@ export function TeamProgressPage() {
                     });
                   }}
                 />
-            ))}
+              );
+            })}
           </div>
         )}
       </div>