List active shifts on the volunteer page

Author: beverloo

src/components/VolunteerListItem.tsx

@@ -4,12 +4,14 @@
 
 import React from 'react';
 import bind from 'bind-decorator';
+import clsx from 'clsx';
 
 import AccessCodeDialogButton from './AccessCodeDialogButton';
 import AvatarDialogButton from './AvatarDialogButton';
 import ConditionalLink from './ConditionalLink';
 import ConditionalListItem from './ConditionalListItem';
 import { Volunteer } from '../app/Volunteer';
+import { VolunteerActivityInfo } from '../app/Event';
 import slug from '../app/util/Slug';
 
 import IconButton from '@material-ui/core/IconButton';
@@ -24,18 +26,38 @@ const styles = (theme: Theme) =>
         link: {
             textDecoration: 'none',
             color: 'inherit',
-        }
+        },
+
+        active: {
+            ...theme.activeSessionStyle,
+            borderBottomWidth: 0,
+        },
+        unavailable: {
+            ...theme.pastSessionStyle,
+            borderBottomWidth: 0,
+            filter: 'grayscale(80%)',
+        },
     });
 
 /**
  * Properties accepted by the <Volunteer> element.
  */
 interface Properties {
+    /**
+     * Indicates that the volunteer is active. 
+     */
+    active?: boolean;
+
     /**
      * The volunteer for whom this element is being rendered.
      */
     volunteer: Volunteer;
 
+    /**
+     * Optional activity information that will be displayed for status-based list items.
+     */
+    volunteerActivityInfo?: VolunteerActivityInfo;
+
     /**
      * Type of list item that should be rendered. The contents of the list item will automatically
      * be compiled based on the |volunteer| property.
@@ -46,6 +68,11 @@ interface Properties {
      */
     type: "header" | "status";
 
+    /**
+     * Indicates that the volunteer is unavailable.
+     */
+    unavailable?: boolean;
+
     /**
      * An event that is to be invoked if the photo of the |volunteer| has been updated. The ability
      * to change the photo will be enabled based on whether this property has been set.
@@ -58,6 +85,29 @@ interface Properties {
  * property can be used to influence which subset of information should be presented.
  */
 class VolunteerListItem extends React.PureComponent<Properties & WithStyles<typeof styles>> {
+    /**
+     * Compiles the status line for the volunteer based on the available information.
+     */
+    compileVolunteerStatusLine(): string {
+        const { volunteer, volunteerActivityInfo } = this.props;
+
+        let status = volunteer.title;
+
+        if (volunteerActivityInfo && volunteerActivityInfo.currentShift) {
+            const { currentShift } = volunteerActivityInfo;
+            
+            const until = ' until ' + currentShift.endTime.format('HH:mm');
+
+            if (currentShift.isUnavailable()) {
+                status += ' • unavailable' + until;
+            } else if (currentShift.isEvent()) {
+                status += ' • ' + currentShift.event.sessions[0].name + until;
+            }
+        }
+
+        return status;
+    }
+
     /**
      * Opens the dialer on the device (if any) to make a phone call to this volunteer. Should only
      * be called when the volunteer has a known telephone number.
@@ -75,7 +125,7 @@ class VolunteerListItem extends React.PureComponent<Properties & WithStyles<type
     }
 
     render() {
-        const { classes, onPictureUpdated, type, volunteer } = this.props;
+        const { active, classes, onPictureUpdated, type, unavailable, volunteer } = this.props;
 
         let location: string | undefined = '/volunteers/' + slug(volunteer.name);
 
@@ -97,20 +147,21 @@ class VolunteerListItem extends React.PureComponent<Properties & WithStyles<type
                 );
                 break;
             case 'status':
-                // TODO: Include the volunteer's current shift.
-                secondary = volunteer.title;
+                secondary = this.compileVolunteerStatusLine();
                 break;
             default:
                 throw new Error('Invalid type value: ' + type);
         }
 
         return (
             <ConditionalLink className={classes.link} to={location}>
-                <ConditionalListItem button={!!location}>
+                <ConditionalListItem button={!!location} className={clsx(active && classes.active, unavailable && classes.unavailable)}>
                     <AvatarDialogButton volunteer={volunteer} onPictureUpdated={onPictureUpdated} />
                     <ListItemText
                         primary={primary}
-                        secondary={secondary} />
+                        primaryTypographyProps={{ noWrap: true }}
+                        secondary={secondary}
+                        secondaryTypographyProps={{ noWrap: true }} />
                     {actions}
                 </ConditionalListItem>
             </ConditionalLink>

src/views/VolunteerListPage.tsx

@@ -13,6 +13,16 @@ import { VolunteerGroupTabs, VolunteerGroupTabInfo } from '../components/Volunte
 import VolunteerListItem from '../components/VolunteerListItem';
 
 import List from '@material-ui/core/List';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
+
+const styles = (theme: Theme) =>
+    createStyles({
+        fullWidth: {
+            ...theme.fullWidthPaperMixin,
+        }
+    });
 
 /**
  * Properties available to the controller through the router.
@@ -51,7 +61,7 @@ interface State {
  * name and an avatar, as well as their title and, if any, their current activity. When there are
  * multiple groups of volunteers, a tab switcher will be shown as well.
  */
-export class VolunteerListPage extends React.Component<Properties, State> {
+class VolunteerListPage extends React.Component<Properties & WithStyles<typeof styles>, State> {
     state: State = {
         activeTabIndex: 0,
         tabs: [],
@@ -110,20 +120,29 @@ export class VolunteerListPage extends React.Component<Properties, State> {
 
     render() {
         const { activeTabIndex, tabs, volunteers } = this.state;
+        const { classes } = this.props;
 
         return (
             <>
                 <VolunteerGroupTabs activeTabChange={this.onVolunteerGroupChange}
                                     activeTabIndex={activeTabIndex}
                                     tabs={tabs} />
 
-                <List>
+                <List className={classes.fullWidth}>
                     {volunteers.map(volunteer =>
                         <VolunteerListItem key={volunteer.volunteer.userToken}
                                            type="status"
-                                           volunteer={volunteer.volunteer} /> )}
+                                           active={volunteer.currentShift &&
+                                                       volunteer.currentShift.isEvent()}
+                                           unavailable={volunteer.currentShift &&
+                                                            volunteer.currentShift.isUnavailable()}
+                                           volunteer={volunteer.volunteer}
+                                           volunteerActivityInfo={volunteer} /> )}
                 </List>
             </>
         );
     }
 }
+
+const StyledVolunteerListPage = withStyles(styles)(VolunteerListPage);
+export { StyledVolunteerListPage as VolunteerListPage };