Show students' profile pictures on help/demonstrate tables

src/components/demonstrateGoal/demonstrateTable/DemonstrateTableStudent.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Skeleton6row3column } from "../../../constantTemplates/SkeletonTable";
 import { AchievementsResponse } from "../../../models/AchievementsResponse";
 import { User } from "../../../models/User";
-import ClaimedBy from "../../claimedBy";
+import UserProfile from "../../userProfile";
 import GenericTable from "../../genericTable/GenericTable";
 import PassedTime from "../../passedTime";
 import { withUser } from "../../userContext";
@@ -75,7 +75,7 @@ function DemonstrateTableStudent(props: DemonstrateTableProps & EContextValue) {
               <PassedTime date={row.time} />
             </TableCell>
             <TableCell align="left">
-              {row.examiner ? <ClaimedBy examiner={row.examiner} /> : <p></p>}
+              {row.examiner ? <UserProfile user={row.examiner} /> : <p></p>}
             </TableCell>
           </TableRow>
         );

src/components/demonstrateGoal/demonstrateTable/DemonstrateTableTeacher.tsx

@@ -16,7 +16,7 @@ import { DemonstrateRequest } from "../../../models/DemonstrateRequest";
 import { User } from "../../../models/User";
 import axios from "../../../utils/axios";
 import AchievementHoverLabel from "../../achievementHoverLabel";
-import ClaimedBy from "../../claimedBy";
+import UserProfile from "../../userProfile";
 import GenericTable from "../../genericTable";
 import GradeStudent, { SelectedDemonstration } from "../../gradeStudent/GradeStudent";
 import PassedTime from "../../passedTime";
@@ -141,16 +141,19 @@ function DemonstrateTableTeacher(props: DemonstrateTableProps & EContextValue) {
         return (
           <TableRow key={row.id} style={highlight}>
             <TableCell align="left" className={classes.cell}>
-              {row.submitters
-                .map((user) => user.firstName + " " + user.lastName)
-                .join(", ")}
+              {row.submitters.map((submitter, index) => (
+                <span key={index} style={{ display: "inline-block", marginRight: "5px" }}>
+                  <UserProfile user={submitter} />
+                  {index !== row.submitters.length - 1 && ", "}
+                </span>
+              ))}
             </TableCell>
             <TableCell align="left" className={classes.timeCell}>
               <PassedTime date={row.time} />
             </TableCell>
             <TableCell className={classes.optionalColumn} align="left">
               {row.examiner ? (
-                <ClaimedBy examiner={row.examiner} />
+                <UserProfile user={row.examiner} />
               ) : (
                   <p></p>
                 )}

src/components/help/helpTable/HelpTableStudent.tsx

@@ -4,7 +4,7 @@ import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Skeleton6row3column } from "../../../constantTemplates/SkeletonTable";
-import ClaimedBy from "../../claimedBy";
+import UserProfile from "../../userProfile";
 import GenericTable from "../../genericTable";
 import { withUser } from "../../userContext";
 import { EContextValue } from "../../userContext/UserContext";
@@ -63,7 +63,7 @@ function HelpTableStudent(props: HelpTableProps & EContextValue) {
             <PassedTime date={row.requestTime}/>
             </TableCell>
             <TableCell align="left">
-              {row.helper ? <ClaimedBy examiner={row.helper} /> : <p></p>}
+              {row.helper ? <UserProfile user={row.helper} /> : <p></p>}
             </TableCell>
           </TableRow>
         );

src/components/help/helpTable/HelpTableTeacher.tsx

@@ -14,7 +14,7 @@ import { Skeleton6row7column } from "../../../constantTemplates/SkeletonTable";
 import { HelpRequest } from "../../../models/HelpRequest";
 import axios from "../../../utils/axios";
 import LinkifyText from "../../../utils/linkify";
-import ClaimedBy from "../../claimedBy";
+import UserProfile from "../../userProfile";
 import GenericTable from "../../genericTable";
 import PassedTime from "../../passedTime";
 import { SafeButton } from "../../safeButton/SafeButton";
@@ -120,9 +120,12 @@ function HelpTableTeacher(props: HelpTableProps & EContextValue) {
         return (
           <TableRow key={row.id} style={highlight}>
             <TableCell align="left" className={classes.cell}>
-              {row.submitters
-                .map((user) => user.firstName + " " + user.lastName)
-                .join(", ")}
+              {row.submitters.map((submitter, index) => (
+                <span key={index} style={{ display: "inline-block", marginRight: "5px" }}>
+                  <UserProfile user={submitter} />
+                  {index !== row.submitters.length - 1 && ", "}
+                </span>
+              ))}
             </TableCell>
             <TableCell align="left" className={classes.cell}>
               <LinkifyText>{row.message}</LinkifyText>
@@ -133,7 +136,7 @@ function HelpTableTeacher(props: HelpTableProps & EContextValue) {
             <TableCell className={classes.optionalColumn} align="left">
 
               {row.helper ? (
-                <ClaimedBy examiner={row.helper} />
+                <UserProfile user={row.helper} />
               ) : (
                   <p></p>
                 )}

src/components/claimedBy/ClaimedBy.tsx → src/components/userProfile/UserProfile.tsx

@@ -5,27 +5,27 @@ import { fullName } from "../../utils/fullName";
 import ProfilePicture from "../profilePicture";
 
 interface Props {
-  examiner: User;
+  user: User;
 }
-const ClaimedBy = (props: Props) => {
+const UserProfile = (props: Props) => {
   return (
     <>
       <Tooltip
         title={
-          props.examiner.needsProfilePic ? (
+          props.user.needsProfilePic ? (
             ""
           ) : (
               <div style={{ margin: "10px", textAlign: "center" }}>
-                <ProfilePicture customUser={props.examiner} disableInitials />
+                <ProfilePicture customUser={props.user} disableInitials />
               </div>
             )
         }
       >
         <span style={{ display: "inline-block" }}>
-          {fullName(props.examiner)}
+          {fullName(props.user)}
         </span>
       </Tooltip>
     </>
   );
 };
-export default ClaimedBy;
+export default UserProfile;

src/components/userProfile/index.ts

@@ -0,0 +1,2 @@
+import UserProfile from "./UserProfile";
+export default UserProfile;