Merge pull request #20 from bharatari/dev

v1.3.1

README.md

@@ -1,6 +1,8 @@
 # UTD Grades
 
 ![Deploy to Production](https://github.com/bharatari/utd-grades/workflows/Deploy%20to%20Production/badge.svg?branch=master)
+![Deploy to Development](https://github.com/bharatari/utd-grades/workflows/Deploy%20to%20Development/badge.svg)
+![Test](https://github.com/bharatari/utd-grades/workflows/Test/badge.svg)
 
 UTD Grades is a tool to view grade distributions at UT Dallas. 
 

client/components/Graph/index.js

@@ -1,32 +1,28 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Chart from 'chart.js';
 
-export default class Graph extends React.Component {
-  componentDidMount() {
-    this.initializeChart(this.props);
-  }
-  componentWillUnmount() {
-    this.destroyChart();
-  }
-  getChart = () => {
-    return this.chart;
-  };
-  destroyChart = () => {
-    this.chart && this.chart.destroy();
-  };
-  initializeChart = (props) => {
-    const { data, options, type } = props;
-    const ctx = this.refs['canvas'].getContext('2d');
+export default function Graph({ type, data, options }) {
+  const ref = useRef();
+  const chartInstanceRef = useRef();
 
-    this.chart = new Chart(ctx, {
+  useEffect(() => {
+    const ctx = ref.current.getContext('2d');
+
+    chartInstanceRef.current = new Chart(ctx, {
       type: type,
       data: data,
       options: options
     });
-  };
-  render() {
-    return (
-      <canvas ref='canvas' />
-    );
-  }
+
+    return () => {
+      chartInstanceRef
+        && chartInstanceRef.current
+        && chartInstanceRef.current.destroy();
+    };
+  }, [data])
+
+  console.log('rerender')
+  return (
+    <canvas ref={ref} />
+  );
 }

client/components/Results/components/Content/SectionContent.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Graph } from '../../../';
 import { Row, Spin } from 'antd';
@@ -87,6 +87,7 @@ const SectionsContainer = styled.div`
   flex-flow: row nowrap;
   align-content: flex-start;
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   padding: 10px;
   margin-left: -10px;
@@ -114,7 +115,7 @@ export default function SectionContent({ relatedSections, section, handleRelated
       mode: 'single',
       callbacks: {
         label: (tooltipItems, data) => {
-          const { keys, values } = general.splitData(general.convertAssociatedArrayToObjectArray(section.grades));
+          const { values } = general.splitData(general.convertAssociatedArrayToObjectArray(section.grades));
           const total = _.sum(values);
 
           let text = [`Students: ${tooltipItems.yLabel}`];
@@ -129,14 +130,19 @@ export default function SectionContent({ relatedSections, section, handleRelated
     },
   });
 
-  function transformData(grades) {
+  const [data, setData] = useState({});
+  const [totalStudents, setTotalStudents] = useState();
+
+  useEffect(() => {
+    const grades = section.grades;
     const objectArray = general.convertAssociatedArrayToObjectArray(grades);
     const sortedGrades = general.sortByGrades(objectArray);
     const { keys, values } = general.splitData(sortedGrades);
     const colors = general.getColors(keys);
 
-    return { keys, values, colors };
-  }
+    setTotalStudents(_.sum(values));
+    setData({ labels: keys, datasets: [{ backgroundColor: colors, data: values }]});
+  }, [section]);
 
   const renderRelatedSections = () => {
     if (relatedSections) {
@@ -148,19 +154,18 @@ export default function SectionContent({ relatedSections, section, handleRelated
     return <Spin />;
   };
 
-  const { keys, values, colors } = transformData(section.grades);
 
   return (
     <Container>
       <Stack>
         <Header>{section.course.prefix} {section.course.number}<Section>.{section.number}</Section></Header>
         <SubHeader>{section.professor.lastName}, {section.professor.firstName} - {section.course.semester.name}</SubHeader>
-        <Total>Total Students <span style={{ color: '#333333' }}>{_.sum(values)}</span></Total>
+        <Total>Total Students <span style={{ color: '#333333' }}>{totalStudents}</span></Total>
       </Stack>
 
       <Row>
         <GraphContainer>
-          <Graph type="bar" data={{ labels: keys, datasets: [{ backgroundColor: colors, data: values }]}} options={options} />
+          <Graph type="bar" data={data} options={options} />
         </GraphContainer>
       </Row>
 

client/components/index.js

@@ -1,4 +1,3 @@
-import AutoComplete from './AutoComplete';
 import Graph from './Graph';
 import Form from './Form';
 import Results from './Results';
@@ -7,7 +6,6 @@ import Header from './Header';
 import Animations from './Animations';
 
 export {
-  AutoComplete,
   Core,
   Graph,
   Form,

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "utd-grades-client",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

client/pages/index.js

@@ -16,6 +16,7 @@ const Content = styled.div`
 
 const Main = styled.div`
   width: 100%;
+  margin-top: 100px;
 `;
 
 const Header = styled.h2`