📦 NEW: ADD Response Table

src/components/ResponsesTable.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import { withStyles, makeStyles } from '@material-ui/core/styles'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableContainer from '@material-ui/core/TableContainer'
+import TableHead from '@material-ui/core/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+import Paper from '@material-ui/core/Paper'
+
+const StyledTableCell = withStyles((theme) => ({
+	head: {
+		backgroundColor: theme.palette.common.black,
+		color: theme.palette.common.white,
+	},
+	body: {
+		fontSize: 14,
+	},
+}))(TableCell)
+
+const StyledTableRow = withStyles((theme) => ({
+	root: {
+		'&:nth-of-type(odd)': {
+			backgroundColor: theme.palette.action.hover,
+		},
+	},
+}))(TableRow)
+
+function createData({ name, email, score }) {
+	return { name, email, score }
+}
+
+// const rows = [
+// 	createData('Frozen yoghurt', 159, 6.0),
+// 	createData('Ice cream sandwich', 237, 9.0),
+// 	createData('Eclair', 262, 16.0),
+// 	createData('Cupcake', 305, 3.7),
+// 	createData('Gingerbread', 356, 16.0),
+// ]
+
+const useStyles = makeStyles({
+	table: {
+		minWidth: 500,
+	},
+})
+
+export default function ResponsesTable({ responses }) {
+	const classes = useStyles()
+	const rows = responses.map((resp) => createData(resp))
+	return (
+		<TableContainer component={Paper}>
+			<Table className={classes.table} aria-label='customized table'>
+				<TableHead>
+					<TableRow>
+						<StyledTableCell>Name</StyledTableCell>
+						<StyledTableCell align='center'>Email Address</StyledTableCell>
+						<StyledTableCell align='right'>Score</StyledTableCell>
+					</TableRow>
+				</TableHead>
+				<TableBody>
+					{rows.map((row) => (
+						<StyledTableRow key={row.name}>
+							<StyledTableCell component='th' scope='row'>
+								{row.name}
+							</StyledTableCell>
+							<StyledTableCell align='center'>{row.email}</StyledTableCell>
+							<StyledTableCell align='right'>{row.score}</StyledTableCell>
+						</StyledTableRow>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	)
+}

src/screens/Responses.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import firebase from '../firebase/firebase'
+import ResponsesTable from '../components/ResponsesTable'
 
 const Responses = ({ match }) => {
 	const quizId = match.params.quizCode
@@ -28,26 +29,9 @@ const Responses = ({ match }) => {
 	if (loading) return <LoadingScreen />
 	else
 		return (
-			<div className="margin-top">
+			<div className='margin-top'>
 				<h2>Responses</h2>
-				<table className="response-table">
-					<thead>
-						<tr>
-							<th>Name</th>
-							<th>Email Address</th>
-							<th>Score</th>
-						</tr>
-					</thead>
-					<tbody>
-						{responses.map((resp, key) => (
-							<tr key={key}>
-								<td>{resp.name}</td>
-								<td>{resp.email}</td>
-								<td>{resp.score}</td>
-							</tr>
-						))}
-					</tbody>
-				</table>
+				<ResponsesTable responses={responses} />
 			</div>
 		)
 }