[GV-46] Remove Page Headers (#9)

* feat: remove page headers

* style: clean up styling

Author: Connor-Bernard

api/v2/index.js

@@ -1,7 +1,7 @@
 import { Router } from 'express';
 
 import BinsRouter from './Routes/bins/index.js';
-import StudentsRouter from './Routes/students/index.js'; 
+import StudentsRouter from './Routes/students/index.js';
 import VerifyAccessRouter from './Routes/verifyaccess/index.js';
 import IsAdminRouter from './Routes/isadmin/index.js';
 import LoginRouter from "./Routes/login/index.js";

docker-compose.yml

@@ -51,7 +51,7 @@ services:
       - concept_map_integration
     ports:
       - 8080:${PROGRESS_REPORT_PORT}
-    restart: unless-stopped 
+    restart: unless-stopped
   redis:
     image: redis:latest
     networks:

website/server/index.js

@@ -17,7 +17,7 @@ app.use('/api', proxy);
 app.use(limit(10));
 
 // Serve static files from the React app
-app.get('/*', (req, res) => {
+app.get('/*', (_, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
 

website/server/middleware.js

@@ -8,8 +8,8 @@ exports.proxy = createProxyMiddleware({ target: process.env.REACT_APP_PROXY_SERV
 
 /**
  * Use to exclude a route from being verified with middleware.
- * @param {String} path 
- * @param {Function} middleware 
+ * @param {String} path
+ * @param {Function} middleware
  * @returns Function
  */
 exports.unless = (path, middleware) => {
@@ -25,7 +25,7 @@ exports.unless = (path, middleware) => {
 
 /**
  * Use to limit the number of requests made per minute.
- * @param {int} requests 
+ * @param {int} requests
  * @returns {RateLimit} rate limiter middleware
  */
 exports.limit = (requests) => {

website/src/components/GradeAccordion.js

@@ -23,8 +23,8 @@ export default function GradeAccordion({ category, assignments }) {
 
     /**
      * Returns the formatting for the font-weight.
-     * @param {Float} student 
-     * @param {Float} max 
+     * @param {Float} student
+     * @param {Float} max
      * @returns {String} 'bold' or 'normal'
      */
     function isBold(student, max) {

website/src/components/GradeTable.js

@@ -5,8 +5,8 @@ export default function GradeTable({ assignments, headerLeft, headerRight }) {
 
     /**
      * Gets the formatting for the font-weight.
-     * @param {Float} student 
-     * @param {Float} max 
+     * @param {Float} student
+     * @param {Float} max
      * @returns {String} 'bold' or 'normal'
      */
     function isBold(student, max) {

website/src/components/NavBar.js

@@ -12,14 +12,16 @@ import {
     MenuItem,
     IconButton,
     useMediaQuery,
-    FormControl, InputLabel, Select
+    FormControl,
+    InputLabel,
+    Select,
 } from '@mui/material'
 import {
     LoginOutlined,
     StorageOutlined,
     AccountCircleOutlined,
     AccountTree,
-    Logout
+    Logout,
 } from '@mui/icons-material';
 import MenuIcon from '@mui/icons-material/Menu';
 import apiv2 from '../utils/apiv2';

website/src/setupProxy.js

@@ -6,6 +6,6 @@ module.exports = function(app) {
         createProxyMiddleware({
             target: process.env.REACT_APP_PROXY_SERVER || 'http://localhost:8000',
             changeOrigin: true,
-        })
+        }),
     );
-};
+};

website/src/views/buckets.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Box, Typography, useMediaQuery } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
 import apiv2 from '../utils/apiv2';
 import BinTable from '../components/BinTable';
 import Loader from '../components/Loader';
@@ -52,7 +52,6 @@ export default function Buckets() {
         <>
             {loadCount > 0 ? (<Loader />) : (
                 <>
-                    <Typography variant='h5' component='div' sx={{ m: 2, fontWeight: 500 }}>Buckets</Typography>
                     <Box sx={minMedia ?
                         { mt: 4, display: 'flex', flexBasis: 'min-content', justifyContent: 'center', gap: '10%' } :
                         { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }

website/src/views/conceptMap.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import Loader from '../components/Loader';
-import PageHeader from '../components/PageHeader';
 import './css/conceptMap.css';
 import jwtDecode from 'jwt-decode';
 import { StudentSelectionContext } from "../components/StudentSelectionWrapper";
@@ -15,7 +14,7 @@ import apiv2 from "../utils/apiv2";
  * and displays the concept map within an iframe.
  * 2. The concept map iframe src takes in a string of numbers to display a concept map,
  *    a. This makes an API call to the Python Flask application to create the concept map.
- *    b. Each number represents a student's mastery level for a particular concept. 
+ *    b. Each number represents a student's mastery level for a particular concept.
  * 3. The concept nodes are arranged vertically from top to bottom.
  * 4. The list of numerical strings associated with each node is sorted horizontally from left to right.
  *    a. This numerical string is calculated through the Google Sheets data in the JavaScript API call.
@@ -26,8 +25,8 @@ export default function ConceptMap() {
     const [loading, setLoading] = useState(false);
     const [studentMastery, setStudentMastery] = useState('000000');
 
-    /** The iframeRef is initially set to null. Once the HTML webpage is loaded 
-     * for the concept map, the iframeRef is dynamically set to the fetched 
+    /** The iframeRef is initially set to null. Once the HTML webpage is loaded
+     * for the concept map, the iframeRef is dynamically set to the fetched
      * progress report query string iframe for the selected student.
     */
     const iframeRef = useRef(null);
@@ -46,7 +45,7 @@ export default function ConceptMap() {
 
     /**
      * Fetch the logged-in student's mastery data on component mount (student view).
-     * This effect fetches data based on the JWT token stored 
+     * This effect fetches data based on the JWT token stored
      * in localStorage and updates the component's state.
      */
     useEffect(() => {
@@ -89,12 +88,12 @@ export default function ConceptMap() {
 
     /**
      * Render the concept map iframe with the fetched mastery data.
-     * This iframe src takes in a string of numbers 
+     * This iframe src takes in a string of numbers
      * (progressQueryString) to display a concept map.
      */
     return (
         <>
-            <PageHeader>Concept Map</PageHeader>
+            {/* <PageHeader>Concept Map</PageHeader> */}
             <div style={{ textAlign: 'center', height:"100%" }} overflow="hidden">
                 <iframe
                     ref={iframeRef}