7 - Added historical attempts to user reports - fa

allenf3 · Feb 16, 2022 · bcae202 · bcae202
1 parent bfb3533
commit bcae202
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 6 deletions.
diff --git a/web/src/components/Reports/UserReport.css b/web/src/components/Reports/UserReport.css
@@ -0,0 +1,7 @@
+.statistics {
+  width: 250px;
+}
+
+.history {
+  width: 800px;
+}
diff --git a/web/src/components/Reports/UserReport.jsx b/web/src/components/Reports/UserReport.jsx
@@ -6,13 +6,18 @@ import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
 import Paper from '@mui/material/Paper';
+import './UserReport.css';
 
 function UserReport() {
   const [myResults, setMyResults] = useState([]);
   const [error, setError] = useState(null);
   const { user } = useAuth0();
   const userId = user.sub;
+  const totalAttempts = myResults.length;
+  const correctAnswers = myResults.filter((r) => r.correct === true).length;
+  const incorrectAnswers = myResults.filter((r) => r.correct === false).length;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -29,29 +34,89 @@ function UserReport() {
 
   if (error) {
     return (
-      <div>There was an error retrieving your results</div>
+      error.message === 'Request failed with status code 404'
+        ? <div>No attempts found. Try out some Hamming code exercices!</div>
+        : <div>There was an error retrieving your results</div>
     );
   }
 
   return (
     <>
       <div>
         <h2>Your Personal Statistics</h2>
-      </div>
-      <div>
-        <TableContainer component={Paper}>
+        <TableContainer className="statistics" component={Paper}>
           <Table>
             <TableBody>
               <TableRow>
                 <TableCell>Attempts</TableCell>
-                <TableCell>{myResults.length}</TableCell>
+                <TableCell>{totalAttempts}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Correct Answers</TableCell>
+                <TableCell>{correctAnswers}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Incorrect Answers</TableCell>
+                <TableCell>{incorrectAnswers}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Percent Correct</TableCell>
+                <TableCell>
+                  {totalAttempts > 0 ? ((correctAnswers / totalAttempts) * 100).toFixed(1) : 'Zero'}
+                  %
+                </TableCell>
               </TableRow>
             </TableBody>
           </Table>
         </TableContainer>
       </div>
       <div>
-        <h2>Attempt History</h2>
+        <h3>Attempt History</h3>
+        <TableContainer className="history" component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Attempt</TableCell>
+                <TableCell>Your Answer</TableCell>
+                <TableCell>Correct Answer</TableCell>
+                <TableCell>Result</TableCell>
+                <TableCell>Submitted on</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {myResults.map((row, index) => (
+                <TableRow
+                  key={row.attemptId}
+                >
+                  <TableCell>
+                    {index + 1}
+                  </TableCell>
+                  <TableCell>
+                    {row.bitSelected
+                      ? row.bitSelected
+                      : 'Other' }
+                    {/* // : row.noErrorsSelected
+                    //   ? 'No Errors'
+                    //   : 'Two Errors' */}
+                  </TableCell>
+                  <TableCell>
+                    {row.actualBit
+                      ? row.actualBit
+                      : 'Other' }
+                  </TableCell>
+                  <TableCell>
+                    {row.correct
+                      ? 'Correct'
+                      : 'Incorrect' }
+                  </TableCell>
+                  <TableCell>
+                    {row.submittedOn}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
     </>
   );

diff --git a/web/src/components/Reports/UserReport.test.jsx b/web/src/components/Reports/UserReport.test.jsx
@@ -10,7 +10,12 @@ const user = {
   sub: 'auth0|558',
 };
 
+const noAttemptsUser = {
+  sub: 'auth0|8345',
+};
+
 const userId = user.sub;
+const noAttemptsUserId = noAttemptsUser.sub;
 
 jest.mock('@auth0/auth0-react', () => ({
   ...jest.requireActual('@auth0/auth0-react'),
@@ -36,6 +41,24 @@ const testSetupAndRender = () => {
 test('user report page renders correctly', async () => {
   testSetupAndRender();
   expect(await screen.findByText('Your Personal Statistics'));
+  expect(await screen.findByText('Attempts'));
   expect(await screen.findByText('6'));
+  expect(await screen.findByText('Correct Answers'));
+  expect(await screen.findByText('4'));
+  expect(await screen.findByText('Incorrect Answers'));
+  expect(await screen.findByText('2'));
+  expect(await screen.findByText('Percent Correct'));
+  expect(await screen.findByText('66.7%'));
   expect(await screen.findByText('Attempt History')).toBeInTheDocument();
 });
+
+test('user with zero attempts sees appropriate message', async () => {
+  const mockApi = new MockAdapter(axios);
+  mockApi.onGet(`${process.env.REACT_APP_BASE_API}/api/Attempts/${noAttemptsUserId}`).reply(404, testUserExerciseResults);
+  render(
+    <BrowserRouter>
+      <UserReport />
+    </BrowserRouter>,
+  );
+  expect(await screen.findByText('No attempts found. Try out some Hamming code exercices!')).toBeInTheDocument();
+});