Add tabbed conversation and header view

src/components/ItemView/ItemView.js

@@ -1,26 +1,51 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from "prop-types";
-import { Paper, makeStyles, useTheme } from '@material-ui/core';
+import { Paper, AppBar, Tab, makeStyles, useTheme } from '@material-ui/core';
+// Import these tab components from @material-ui/lab instead of @material-ui/core for automatic a11y props
+// See: https://material-ui.com/components/tabs/#experimental-api
+import { TabContext, TabList, TabPanel } from '@material-ui/lab';
 import ItemMetadataView from "../ItemMetadataView/"
 import ItemBodyView from "../ItemBodyView";
+import ItemHeaderView from "../ItemHeaderView";
 
 export default function ItemView({ activeItem }){
+	const [activeTab, setActiveTab] = useState('Conversation');
 
 	const theme = useTheme();
 	const useStyles = makeStyles({
 		"paperPadding": {
 			paddingTop: theme.spacing(1),
 			paddingLeft: theme.spacing(2),
 			paddingRight: theme.spacing(2),
-			border: "none"
+			border: "none",
+		},
+		"tabPanelPadding": {
+			padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
 		}
 	});
 	const classes = useStyles();
 
-return(
+	const handleTabChange = (event, newValue) => {
+		setActiveTab(newValue);
+	};
+
+	return(
 		<Paper variant="outlined" classes={{root: classes.paperPadding}} square>
 			<ItemMetadataView item={activeItem} />
-			<ItemBodyView item={activeItem} />
+			<TabContext value={activeTab}>
+				<AppBar position="relative" color="default" variant="outlined">
+					<TabList onChange={handleTabChange} variant="fullWidth">
+						<Tab label="Conversation" value="Conversation" />
+						<Tab label="Headers" value="Headers" />
+					</TabList>
+				</AppBar>
+				<TabPanel value="Conversation" classes={{ root: classes.tabPanelPadding }}>
+					<ItemBodyView item={activeItem} />
+				</TabPanel>
+				<TabPanel value="Headers" classes={{ root: classes.tabPanelPadding }}>
+					<ItemHeaderView data={activeItem.headers} />
+				</TabPanel>
+			</TabContext>
 		</Paper>
 	);
 };