Finished team page layout and photo fetching for participants

src/views/RecIM/components/Listing/Listing.module.scss

@@ -5,3 +5,9 @@
   padding: 1em;
   border-radius: 0.5em;
 }
+
+.avatar {
+  width: 4rem;
+  height: 4rem;
+  margin: 0 1rem 0 0;
+}

src/views/RecIM/components/Listing/index.js

@@ -1,6 +1,8 @@
-import { Grid } from '@material-ui/core/';
+import { Grid, Avatar, ListItemAvatar, ListItem, ListItemText } from '@material-ui/core/';
 import styles from './Listing.module.css';
 import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import user from 'services/user';
 
 const ActivityListing = ({ activityID }) => {
   return (
@@ -33,14 +35,37 @@ const TeamListing = ({ activityID, teamID }) => {
 
 // We could also use ParticipantID (not student ID) if we have that and prefer it to AD_Username
 const ParticipantListing = ({ username }) => {
+  const [avatar, setAvatar] = useState('');
+
+  // const [name, setName] = useState({
+  //   firstname: '',
+  //   lastname: '',
+  // });
+
+  useEffect(() => {
+    const loadAvatar = async () => {
+      if (username) {
+        const { def: defaultImage, pref: preferredImage } = await user.getImage(username);
+        setAvatar(preferredImage || defaultImage);
+      }
+    };
+    loadAvatar();
+  }, [username]);
   return (
-    <>
-      <Link to={`/profile/${username}`} className="gc360_link">
-        <Grid container className={styles.listing}>
-          <Grid item>Participant Listing</Grid>
-        </Grid>
-      </Link>
-    </>
+    <ListItem key={username} disableGutters={true}>
+      <Grid container alignItems="center" className={styles.listing}>
+        <ListItemAvatar>
+          <Avatar
+            src={`data:image/jpg;base64,${avatar}`}
+            className={styles.avatar}
+            variant="rounded"
+          ></Avatar>
+        </ListItemAvatar>
+        <Link to={`/profile/${username}`} className="gc360_link">
+          <ListItemText primary={username} />
+        </Link>
+      </Grid>
+    </ListItem>
   );
 };
 

src/views/RecIM/views/Match/index.js

@@ -1,11 +1,10 @@
-import { Grid, Typography, Card, CardHeader, CardContent } from '@material-ui/core/';
+import { Grid, Typography, Card, CardHeader, CardContent, List } from '@material-ui/core/';
 import { useParams } from 'react-router';
 import { useUser } from 'hooks';
 import GordonLoader from 'components/Loader';
 import GordonUnauthorized from 'components/GordonUnauthorized';
 import { ParticipantListing } from 'views/RecIM/components/Listing';
 import styles from './Match.module.css';
-import { first } from 'lodash';
 
 // CARD - main
 const MainCard = () => {
@@ -55,12 +54,10 @@ const RosterCard = (teamID) => {
       <CardHeader title="Team Name" className={styles.cardHeader} />
       <CardContent>
         {/* if I am apart of any active teams, map them here */}
-        <div className={styles.listing}>
-          <ParticipantListing username={first.last} />
-        </div>
-        <div className={styles.listing}>
-          <ParticipantListing username={first.last} />
-        </div>
+        <List>
+          <ParticipantListing username={'silas.white'} />
+          <ParticipantListing username={'amos.cha'} />
+        </List>
       </CardContent>
     </Card>
   );

src/views/RecIM/views/Team/Team.module.scss

@@ -0,0 +1,28 @@
+@import '../../../../vars';
+
+.teamHeader {
+  padding-bottom: 0.5em;
+}
+
+// if desired, this should just be a global change and
+// universally applied to all 360 cards
+.cardHeader {
+  background-color: $primary-blue;
+  color: $neutral-white;
+}
+
+.grayText {
+  color: $neutral-gray;
+}
+
+.listing {
+  margin: 0.3em 0;
+}
+
+:global(.MuiCardHeader-root).cardHeader {
+  padding: 0.7em 16px;
+}
+
+.cardHeader :global(.MuiCardHeader-title) {
+  font-size: 1em;
+}

src/views/RecIM/views/Team/index.js

@@ -1,12 +1,80 @@
+import { Grid, Typography, Card, CardHeader, CardContent, List } from '@material-ui/core/';
 import { useParams } from 'react-router';
+import styles from './Team.module.css';
+import { ParticipantListing, MatchListing } from '../../components/Listing';
+import GordonLoader from 'components/Loader';
+import GordonUnauthorized from 'components/GordonUnauthorized';
+import { useUser } from 'hooks';
+
+let rosterCard = (
+  <Card>
+    <CardHeader title="Roster" className={styles.cardHeader} />
+    <CardContent>
+      {/*This is hardcoded data for now, in the future, roster card should
+        be a react component that takes a set of users and maps them here*/}
+      <List>
+        <ParticipantListing username={'silas.white'} />
+        <ParticipantListing username={'amos.cha'} />
+      </List>
+    </CardContent>
+  </Card>
+);
+
+// CARD - schedule
+let scheduleCard = (
+  <Card>
+    <CardHeader title="Schedule" className={styles.cardHeader} />
+    <CardContent>
+      {/* if there are games scheduled, map them here */}
+      <div className={styles.listing}>
+        <MatchListing activityID={123456} matchID={321} />
+      </div>
+      <div className={styles.listing}>
+        <MatchListing activityID={123456} matchID={654} />
+      </div>
+      {/* else "no schedule yet set" */}
+      <Typography variant="body1" paragraph>
+        Games have not yet been scheduled.
+      </Typography>
+    </CardContent>
+  </Card>
+);
 
 const Team = () => {
   const { activityID, teamID } = useParams();
-  return (
-    <p>
-      Here with activity id {activityID} team id {teamID}
-    </p>
-  );
+  const { profile, loading } = useUser();
+
+  if (loading) {
+    return <GordonLoader />;
+  } else if (!profile) {
+    // The user is not logged in
+    return <GordonUnauthorized feature={'the Rec-IM page'} />;
+  } else {
+    return (
+      <>
+        <Grid container alignItems="center" className={styles.activityHeader}>
+          <Grid item>
+            <img src={''} alt="Team Icon" width="85em"></img>
+          </Grid>
+          &nbsp;&nbsp;&nbsp;&nbsp;
+          <Grid item>
+            <Typography variant="h5">Team Name</Typography>
+          </Grid>
+        </Grid>
+        <Grid container justifyContent="center" spacing={2}>
+          <Grid item xs={12} md={6}>
+            {scheduleCard}
+          </Grid>
+          <Grid item xs={12} md={6}>
+            {rosterCard}
+          </Grid>
+        </Grid>
+        <p>
+          Activity ID: {activityID} Team ID: {teamID} (for testing purposes only)
+        </p>
+      </>
+    );
+  }
 };
 
 export default Team;