Create ItemMetadataView

src/ItemMetadataView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { makeStyles, Grid, Paper } from '@material-ui/core';
+import { Alert } from '@material-ui/lab'
+
+
+export default function ItemMetadataView({item}){
+	const LockedAlert = () => {
+		return (
+			<Alert severity="warning">
+				{item.isLocked}
+			</Alert>
+		);
+	}
+	const useStyles = makeStyles({
+		"gridContainer": {
+			paddingTop: ".75em",
+		}
+	});
+
+	const classes = useStyles();
+
+	const metadataFields = ["userEmail", "userAlias", "subject", "dateReceived",
+							"assignedTo", "status", "priority", "department", "building"];
+
+	return(
+		<>
+			{item.isLocked ? LockedAlert() : ""}
+			<Grid container spacing={2} classes={{root: classes.gridContainer}}>
+				{metadataFields.map((field) => {
+					const title = field.toUpperCase();
+					const subtitle = item[field] === undefined ? "Unknown" : item[field];
+					return (
+						<Grid item xs={12} md={4} xl={6}>
+							<Paper>
+								<b>{title}</b>: {subtitle}
+							</Paper>
+						</Grid>
+					);
+				})}
+			</Grid>
+		</>
+	);
+}

src/ItemView.js

@@ -1,10 +1,6 @@
 import React from 'react';
-import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider, makeStyles } from '@material-ui/core';
-import PersonIcon from '@material-ui/icons/Person';
-import CalendarIcon from '@material-ui/icons/CalendarToday';
-import AssignmentdIcon from '@material-ui/icons/AssignmentInd';
-import InfoIcon from '@material-ui/icons/Info';
-import ClockIcon from '@material-ui/icons/QueryBuilder';
+import { Paper, Typography, Divider, makeStyles } from '@material-ui/core';
+import ItemMetadataView from "./ItemMetadataView"
 
 function ItemView(props){
 
@@ -18,46 +14,8 @@ function ItemView(props){
 
 return(
 		<Paper classes={{root: classes.paperMargin}}>
-			<ListItem>
-				<Typography variant="h5">
-					{props.activeItem["subject"]}
-				</Typography>
-			</ListItem>
-
-			<ListItem alignItems="flex-start">
-				<ListItemIcon>
-					<PersonIcon />
-				</ListItemIcon>
-				<ListItemText primary={"From: " + props.activeItem["userName"]} secondary={props.activeItem["userEmail"]} />
-			</ListItem>
-
-			<ListItem>
-				<ListItemIcon>
-					<CalendarIcon />
-				</ListItemIcon>
-				<ListItemText secondary={props.activeItem["dateReceived"]} />
-			</ListItem>
-
-			<ListItem alignItems="flex-start">
-				<ListItemIcon>
-					<AssignmentdIcon />
-				</ListItemIcon>
-				<ListItemText primary={"Assigned To:"} secondary={props.activeItem["assignedTo"]}  />
-			</ListItem>
-
-			<ListItem alignItems="flex-start">
-				<ListItemIcon>
-					<InfoIcon />
-				</ListItemIcon>
-				<ListItemText primary={"Status:"} secondary={props.activeItem["status"]}  />
-			</ListItem>
-
-			<ListItem alignItems="flex-start">
-				<ListItemIcon>
-					<ClockIcon />
-				</ListItemIcon>
-				<ListItemText primary={"Last Updated:"} secondary={props.activeItem["lastUpdated"]}  />
-			</ListItem>
+
+			<ItemMetadataView item={props.activeItem} />
 
 			<Divider style={{marginBottom: "1em"}}/>