add eslint / prettier config

776d7b99 · charlescirco · e5fc58a8 · 776d7b99 · 776d7b99 · 776d7b99
Commit 776d7b99 authored 1 year ago by charlescirco
--- a/.editorconfig
+++ b/.editorconfig
+[*.css,*.js,*.json]
+indent_size = 2
+indent_style = space
+end_of_line = lf
\ No newline at end of file
--- a/.eslintrc.json
+++ b/.eslintrc.json
+{
+  "extends": ["react-app", "react-app/jest", "plugin:prettier/recommended"],
+  "rules": {
+    "prettier/prettier": "warn"
+  },
+  "ignorePatterns": ["build/"]
+}
--- a/.prettierrc
+++ b/.prettierrc
+{
+  "singleQuote": true
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,12 @@
        "react-router-dom": "^6.10.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "eslint": "^8.38.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.32.2",
+        "prettier": "2.8.7"
      }
    },
    "node_modules/@adobe/css-tools": {
@@ -2314,13 +2320,13 @@
      }
    },
    "node_modules/@eslint/eslintrc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.1.tgz",
-      "integrity": "sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.2.tgz",
+      "integrity": "sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==",
      "dependencies": {
        "ajv": "^6.12.4",
        "debug": "^4.3.2",
-        "espree": "^9.5.0",
+        "espree": "^9.5.1",
        "globals": "^13.19.0",
        "ignore": "^5.2.0",
        "import-fresh": "^3.2.1",
@@ -2377,9 +2383,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "8.36.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.36.0.tgz",
-      "integrity": "sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
+      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
@@ -7596,14 +7602,14 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.36.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.36.0.tgz",
-      "integrity": "sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
+      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.1",
-        "@eslint/js": "8.36.0",
+        "@eslint/eslintrc": "^2.0.2",
+        "@eslint/js": "8.38.0",
        "@humanwhocodes/config-array": "^0.11.8",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@nodelib/fs.walk": "^1.2.8",
@@ -7614,8 +7620,8 @@
        "doctrine": "^3.0.0",
        "escape-string-regexp": "^4.0.0",
        "eslint-scope": "^7.1.1",
-        "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.5.0",
+        "eslint-visitor-keys": "^3.4.0",
+        "espree": "^9.5.1",
        "esquery": "^1.4.2",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
@@ -7852,6 +7858,27 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.28.0",
+        "prettier": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/eslint-plugin-react": {
      "version": "7.32.2",
      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
@@ -7954,11 +7981,14 @@
      }
    },
    "node_modules/eslint-visitor-keys": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+      "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==",
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
      }
    },
    "node_modules/eslint-webpack-plugin": {
@@ -8185,13 +8215,13 @@
      }
    },
    "node_modules/espree": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.0.tgz",
-      "integrity": "sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw==",
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.1.tgz",
+      "integrity": "sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==",
      "dependencies": {
        "acorn": "^8.8.0",
        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.0"
      },
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -8384,6 +8414,12 @@
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
+    "node_modules/fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
    "node_modules/fast-glob": {
      "version": "3.2.12",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -14450,6 +14486,33 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/pretty-bytes": {
      "version": "5.6.0",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

--- a/package.json
+++ b/package.json
@@ -42,5 +42,11 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "eslint": "^8.38.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "2.8.7"
  }
 }
--- a/src/App.js
+++ b/src/App.js
-import Home from './components/pages/Home.js'
+import Home from './components/pages/Home.js';
 import Assessments from './components/pages/Assessments';
-import {CssBaseline} from "@mui/material";
-import Navbar from "./components/Navbar";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
-
+import { CssBaseline } from '@mui/material';
+import Navbar from './components/Navbar';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';

 function App() {
-    return (
-        <BrowserRouter>
-            <CssBaseline/>
-            <Navbar/>
-            <Routes>
-                <Route path='/' element={<Home/>}/>
-                <Route path="/assessments" element={<Assessments/>}/>
-            </Routes>
-        </BrowserRouter>
-    );
+  return (
+    <BrowserRouter>
+      <CssBaseline />
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/assessments" element={<Assessments />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }

 export default App;
--- a/src/components/BasicStatistics.js
+++ b/src/components/BasicStatistics.js
-import {Grid, Paper, Typography} from "@mui/material";
+import { Grid, Paper, Typography } from '@mui/material';

 function BasicStatistics() {
-    //make json object here with fake info
-    let stats = [
-        {
-            id: 1,
-            name: "Total Enrollment",
-            value: "50"
-        }, {
-            id: 2,
-            name: "Percentage Passing",
-            value: "88%"
-        }, {
-            id: 3,
-            name: "Percentage Active Users",
-            value: "90%"
-        }
-    ];
+  //make json object here with fake info
+  let stats = [
+    {
+      id: 1,
+      name: 'Total Enrollment',
+      value: '50',
+    },
+    {
+      id: 2,
+      name: 'Percentage Passing',
+      value: '88%',
+    },
+    {
+      id: 3,
+      name: 'Percentage Active Users',
+      value: '90%',
+    },
+  ];

-    return (
-        <Grid sx={{ flexGrow: 1, padding: 40 + 'px'}} container spacing={2}>
-            <Grid item xs={12}>
-                <Grid container justifyContent="center" spacing={5}>
-                    { stats.map((stat) => (
-                        <Grid key={stat.id} item>
-                            <Paper
-                                sx={{
-                                    height: 140,
-                                    width: 200,
-                                    display: "flex",
-                                    flexDirection:"column",
-                                    alignItems: "center",
-                                    justifyContent:"center"
-                                }}
-                            >
-                                <Typography variant="h3">{stat.value}</Typography>
-                                {stat.name}
-                                </Paper>
-                        </Grid>
-                    ))}
-                </Grid>
+  return (
+    <Grid sx={{ flexGrow: 1, padding: 40 + 'px' }} container spacing={2}>
+      <Grid item xs={12}>
+        <Grid container justifyContent="center" spacing={5}>
+          {stats.map((stat) => (
+            <Grid key={stat.id} item>
+              <Paper
+                sx={{
+                  height: 140,
+                  width: 200,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Typography variant="h3">{stat.value}</Typography>
+                {stat.name}
+              </Paper>
            </Grid>
+          ))}
        </Grid>
-    )
-
+      </Grid>
+    </Grid>
+  );
 }
-export default BasicStatistics;
\ No newline at end of file
+export default BasicStatistics;
--- a/src/components/CourseTitle.js
+++ b/src/components/CourseTitle.js
-import {Box, Typography} from "@mui/material";
+import { Box, Typography } from '@mui/material';

 function CourseTitle() {
-    return (
-        <Box padding="25px">
-            <Typography variant="h2">
-                Calhoun Transdisciplinary Fusion Studio 1
-            </Typography>
-        </Box>);
-
+  return (
+    <Box padding="25px">
+      <Typography variant="h2">
+        Calhoun Transdisciplinary Fusion Studio 1
+      </Typography>
+    </Box>
+  );
 }
-export default CourseTitle;
\ No newline at end of file
+export default CourseTitle;
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
-import {AppBar, Toolbar, Typography} from "@mui/material";
-import {Link} from "react-router-dom";
+import { AppBar, Toolbar, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
 import '../css/NavbarStyles.css';

-
 function Navbar() {
-
-    return (
-        <div>
-            <AppBar>
-                <Toolbar>
-                    <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
-                        Open edX Data Visualization
-                    </Typography>
-                    <div>
-                        <Link to='/' className='buttonLink'>
-                            Home
-                        </Link>
-                        <Link to="/assessments" className='buttonLink'>
-                            Assessments
-                        </Link>
-                    </div>
-                </Toolbar>
-            </AppBar>
-            <Toolbar id="anchor"/>
-        </div>
-    );
+  return (
+    <div>
+      <AppBar>
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Open edX Data Visualization
+          </Typography>
+          <div>
+            <Link to="/" className="buttonLink">
+              Home
+            </Link>
+            <Link to="/assessments" className="buttonLink">
+              Assessments
+            </Link>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <Toolbar id="anchor" />
+    </div>
+  );
 }

-export default Navbar;
\ No newline at end of file
+export default Navbar;
--- a/src/components/charts/AssessmentDistributionChart.js
+++ b/src/components/charts/AssessmentDistributionChart.js
-import {FakeData} from "../../utils/Data";
-import {Chart, registerables} from 'chart.js';
-import {Bar} from "react-chartjs-2";
+import { FakeData } from '../../utils/Data';
+import { Chart, registerables } from 'chart.js';
+import { Bar } from 'react-chartjs-2';

 Chart.register(...registerables);

 function AssessmentDistributionChart() {
-    /*TODO this is repeated code... need to make an actual quiz grade distribution chart.
-    *  I just did this to get the layout correct on the assessments page.*/
+  /*TODO this is repeated code... need to make an actual quiz grade distribution chart.
+   *  I just did this to get the layout correct on the assessments page.*/

-    const chartData = {
-        labels: FakeData.map((data) => data.grade),
-        datasets: [{
-            label: "Problem Distribution Dataset",
-            data: FakeData.map((data) => data.count),
-            //add customization options here
-            backgroundColor: [
-                "#ADD8E6",
-                "#3CB371"
-            ],
-        }]
-    };
+  const chartData = {
+    labels: FakeData.map((data) => data.grade),
+    datasets: [
+      {
+        label: 'Problem Distribution Dataset',
+        data: FakeData.map((data) => data.count),
+        //add customization options here
+        backgroundColor: ['#ADD8E6', '#3CB371'],
+      },
+    ],
+  };

-    return (
-        <div className="chart-container" style={{width: 40 + 'vw', padding: 50 + 'px'}}>
-            <h2 style={{textAlign: "center"}}>Quiz Distribution</h2>
-            <Bar
-                data={chartData}
-                options={{
-                    scales: {
-                        y: {
-                            title: {
-                                display: true,
-                                text: "Count",
-                            },
-                            beginAtZero: true
-                        },
-                        x: {
-                            title: {
-                                display: true,
-                                text: "Grade",
-                            },
-                        }
-                    },
-                    plugins: {
-                        legend: {display: false}
-                    }
-                }}
-            />
-        </div>
-    );
+  return (
+    <div
+      className="chart-container"
+      style={{ width: 40 + 'vw', padding: 50 + 'px' }}
+    >
+      <h2 style={{ textAlign: 'center' }}>Quiz Distribution</h2>
+      <Bar
+        data={chartData}
+        options={{
+          scales: {
+            y: {
+              title: {
+                display: true,
+                text: 'Count',
+              },
+              beginAtZero: true,
+            },
+            x: {
+              title: {
+                display: true,
+                text: 'Grade',
+              },
+            },
+          },
+          plugins: {
+            legend: { display: false },
+          },
+        }}
+      />
+    </div>
+  );
 }

-export default AssessmentDistributionChart;
\ No newline at end of file
+export default AssessmentDistributionChart;
--- a/src/components/charts/GradeDistributionChart.js
+++ b/src/components/charts/GradeDistributionChart.js
-import {FakeData} from "../../utils/Data";
-import {Chart, registerables} from 'chart.js';
-import {Bar} from "react-chartjs-2";
+import { FakeData } from '../../utils/Data';
+import { Chart, registerables } from 'chart.js';
+import { Bar } from 'react-chartjs-2';

 Chart.register(...registerables);

 function GradeDistributionChart() {
+  const chartData = {
+    labels: FakeData.map((data) => data.grade),
+    datasets: [
+      {
+        label: 'Grade Distribution Dataset',
+        data: FakeData.map((data) => data.count),
+        //add customization options here
+        backgroundColor: ['#ADD8E6', '#3CB371'],
+      },
+    ],
+  };

-    const chartData = {
-        labels: FakeData.map((data) => data.grade),
-        datasets: [{
-            label: "Grade Distribution Dataset",
-            data: FakeData.map((data) => data.count),
-            //add customization options here
-            backgroundColor: [
-                "#ADD8E6",
-                "#3CB371"
-            ],
-        }]
-    };
-
-    return (
-        <div className="chart-container" style={{width: 50 + 'vw', padding: 50 + 'px'}}>
-            <h2 style={{textAlign: "center"}}>Grade Distribution</h2>
-            <Bar
-                data={chartData}
-                options={{
-                    scales: {
-                        y: {
-                            title: {
-                                display: true,
-                                text: "Count",
-                            },
-                            beginAtZero: true
-                        },
-                        x: {
-                            title: {
-                                display: true,
-                                text: "Grade",
-                            },
-                        }
-                    },
-                    plugins: {
-                        legend: {display: false}
-                    }
-                }}
-            />
-        </div>
-    );
+  return (
+    <div
+      className="chart-container"
+      style={{ width: 50 + 'vw', padding: 50 + 'px' }}
+    >
+      <h2 style={{ textAlign: 'center' }}>Grade Distribution</h2>
+      <Bar
+        data={chartData}
+        options={{
+          scales: {
+            y: {
+              title: {
+                display: true,
+                text: 'Count',
+              },
+              beginAtZero: true,
+            },
+            x: {
+              title: {
+                display: true,
+                text: 'Grade',
+              },
+            },
+          },
+          plugins: {
+            legend: { display: false },
+          },
+        }}
+      />
+    </div>
+  );
 }

-export default GradeDistributionChart;
\ No newline at end of file
+export default GradeDistributionChart;
--- a/src/components/pages/Assessments.js
+++ b/src/components/pages/Assessments.js
-import AssessmentDistributionChart from "../charts/AssessmentDistributionChart.js";
-import {Grid, Typography} from "@mui/material";
+import AssessmentDistributionChart from '../charts/AssessmentDistributionChart.js';
+import { Grid, Typography } from '@mui/material';

 function Assessments() {
-    return (
-        <div>
-            <Typography variant='h2' sx={{textAlign: "center", padding: 20 + "px"}}>
-                Grade Distribution by Assessment
-            </Typography>
-            <Grid container justifyContent="center">
-                <Grid container xs={6} justifyContent="center"><AssessmentDistributionChart/></Grid>
-                <Grid container xs={6} justifyContent="center"><AssessmentDistributionChart/></Grid>
-                <Grid container xs={6} justifyContent="center"><AssessmentDistributionChart/></Grid>
-                <Grid container xs={6} justifyContent="center"><AssessmentDistributionChart/></Grid>
-            </Grid>
-
-        </div>
-
-    );
+  return (
+    <div>
+      <Typography variant="h2" sx={{ textAlign: 'center', padding: 20 + 'px' }}>
+        Grade Distribution by Assessment
+      </Typography>
+      <Grid container justifyContent="center">
+        <Grid container xs={6} justifyContent="center">
+          <AssessmentDistributionChart />
+        </Grid>
+        <Grid container xs={6} justifyContent="center">
+          <AssessmentDistributionChart />
+        </Grid>
+        <Grid container xs={6} justifyContent="center">
+          <AssessmentDistributionChart />
+        </Grid>
+        <Grid container xs={6} justifyContent="center">
+          <AssessmentDistributionChart />
+        </Grid>
+      </Grid>
+    </div>
+  );
 }

-export default Assessments;
\ No newline at end of file
+export default Assessments;
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
-import CourseTitle from "../CourseTitle";
-import BasicStatistics from "../BasicStatistics";
-import GradeDistributionChart from "../charts/GradeDistributionChart";
-import {Box} from "@mui/material";
+import CourseTitle from '../CourseTitle';
+import BasicStatistics from '../BasicStatistics';
+import GradeDistributionChart from '../charts/GradeDistributionChart';
+import { Box } from '@mui/material';

 function Home() {
-    return (
-        <Box display="flex"
-             justifyContent="center"
-             alignItems="center"
-             flexDirection="column">
-            <CourseTitle/>
-            <BasicStatistics/>
-            <GradeDistributionChart/>
-        </Box>
-    );
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+    >
+      <CourseTitle />
+      <BasicStatistics />
+      <GradeDistributionChart />
+    </Box>
+  );
 }

-export default Home;
\ No newline at end of file
+export default Home;
--- a/src/css/NavbarStyles.css
+++ b/src/css/NavbarStyles.css
-.buttonLink:link, .buttonLink:visited, .buttonLink:hover, .buttonLink:active {
-    color: white;
-    text-decoration: none;
-    padding: 10px 20px;
-    border-radius: 5px;
+.buttonLink:link,
+.buttonLink:visited,
+.buttonLink:hover,
+.buttonLink:active {
+  color: white;
+  text-decoration: none;
+  padding: 10px 20px;
+  border-radius: 5px;
 }

 .buttonLink:hover {
-    background-color: #0000000A;
-    text-decoration: solid underline white 1px;
-}
\ No newline at end of file
+  background-color: #0000000a;
+  text-decoration: solid underline white 1px;
+}
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);

--- a/src/utils/Data.js
+++ b/src/utils/Data.js
 //looks like json file that is returned from grade distribution GET request
 //from open edx API
 //will have to change this to a function & use hook later b/c it won't be constant
-export const FakeData =
-    [
-        {
-            "module_id": "i4x://edX/DemoX/Demo_Course/problem/97fd93e33a18495488578e9e74fa4cae",
-            "course_id": "edX/DemoX/Demo_Course",
-            "grade": 1,
-            "max_grade": 2,
-            "count": 5,
-            "created": "2014-09-12T114957"
-        },
-        {
-            "module_id": "i4x://edX/DemoX/Demo_Course/problem/97fd93e33a18495488578e9e74fa4cae",
-            "course_id": "edX/DemoX/Demo_Course",
-            "grade": 2,
-            "max_grade": 2,
-            "count": 256,
-            "created": "2014-09-12T114957"
-        }
-    ];
\ No newline at end of file
+export const FakeData = [
+  {
+    module_id:
+      'i4x://edX/DemoX/Demo_Course/problem/97fd93e33a18495488578e9e74fa4cae',
+    course_id: 'edX/DemoX/Demo_Course',
+    grade: 1,
+    max_grade: 2,
+    count: 5,
+    created: '2014-09-12T114957',
+  },
+  {
+    module_id:
+      'i4x://edX/DemoX/Demo_Course/problem/97fd93e33a18495488578e9e74fa4cae',
+    course_id: 'edX/DemoX/Demo_Course',
+    grade: 2,
+    max_grade: 2,
+    count: 256,
+    created: '2014-09-12T114957',
+  },
+];
--- a/src/utils/csvToPy.json
+++ b/src/utils/csvToPy.json