Perform front-end dependency update (#1312)

assets/src/components/GoogleAnalyticsTracking.js

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react'
 import GoogleAnalytics from 'react-ga'
-import { withRouter } from 'react-router-dom'
 
 function GoogleAnalyticsTracking (props) {
   const {
@@ -26,4 +25,4 @@ function GoogleAnalyticsTracking (props) {
   return null
 }
 
-export default withRouter(GoogleAnalyticsTracking)
+export default GoogleAnalyticsTracking

assets/src/components/IconLabel.js

@@ -1,15 +1,30 @@
 import React from 'react'
-import '@fortawesome/fontawesome-free'
+import { Typography, withStyles } from '@material-ui/core'
+
+const styles = () => ({
+  typography: {
+    marginLeft: '5px',
+    marginRight: '5px'
+  },
+  icon: {
+    fontSize: '16px',
+    paddingRight: '10px'
+  }
+})
+
 
 function IconLabel (props) {
   const {
-    icon,
+    classes,
+    icon, // font-awesome class name
     label
   } = props
 
   return (
-    <p><i style={{ fontSize: '14px', padding: '5px 10px 5px 5px' }} className={icon} />{label}</p>
+    <Typography className={classes.typography}>
+      <i className={`${icon} ${classes.icon}`} />{label}
+    </Typography>
   )
 }
 
-export default IconLabel
+export default withStyles(styles)(IconLabel)

assets/src/components/TableAssignment.js

@@ -125,8 +125,8 @@ function CustomAssignmentTable (props) {
       return row
     })
 
-  const tableRow = (row, i) => (
-    <TableRow key={i}>
+  const tableRow = (row, i, isCurrentWeek) => (
+    <TableRow key={i} {...(isCurrentWeek ? { ref: currentWeekRow } : {})}>
       {
         row.map((prop, j) => {
           let displayProp = true
@@ -218,34 +218,26 @@ function CustomAssignmentTable (props) {
 
   return (
     <div className={classes.tableResponsive}>
-      <RootRef rootRef={tableRef}>
-        <Table ref={tableRef}>
-          {tableHead !== undefined ? (
-            <TableHead>
-              <TableRow>
-                {tableHead.map((prop, key) => {
-                  return (
-                    <TableCell
-                      className={classes.tableCell + ' ' + classes.tableHeadCell}
-                      key={key}
-                    >
-                      {prop}
-                    </TableCell>)
-                })}
-              </TableRow>
-            </TableHead>
-          ) : null}
-          <TableBody>
-            {
-              data.map((row, i) => {
-                return isItFirstCurrentWeekIndicator(i)
-                  ? <RootRef rootRef={currentWeekRow} key={i}>{tableRow(row, i)}</RootRef>
-                  : tableRow(row, i)
-              })
-            }
-          </TableBody>
-        </Table>
-      </RootRef>
+      <Table ref={tableRef}>
+        {tableHead !== undefined ? (
+          <TableHead>
+            <TableRow>
+              {tableHead.map((prop, key) => {
+                return (
+                  <TableCell
+                    className={classes.tableCell + ' ' + classes.tableHeadCell}
+                    key={key}
+                  >
+                    {prop}
+                  </TableCell>)
+              })}
+            </TableRow>
+          </TableHead>
+        ) : null}
+        <TableBody>
+          {data.map((row, i) => tableRow(row, i, isItFirstCurrentWeekIndicator(i)))}
+        </TableBody>
+      </Table>
     </div>
   )
 }

assets/src/components/d3/createHistogram.js

@@ -55,7 +55,7 @@ function createHistogram ({ data, width, height, domElement, xAxisLabel, yAxisLa
   main.append('div')
     .attr('aria-live', 'polite')
     .attr('id', 'grade-view-narrative')
-    .attr('class', 'screenreader-only sr-only')
+    .attr('class', 'fa-sr-only')
     .text(d => narrativeTextGrades)
 
   const svg = main.append('svg')

assets/src/components/d3/createResourceAccessChart.js

@@ -3,7 +3,6 @@ import { adjustViewport } from '../../util/chart'
 import { createResourcesText } from './d3ViewsNarrative'
 import d3tip from 'd3-tip'
 import './createResourceAccessChart.css'
-import '@fortawesome/fontawesome-free'
 import { siteTheme } from '../../globals'
 
 /*
@@ -166,7 +165,7 @@ function createResourceAccessChart ({ data, weekRange, gradeSelection, resourceT
   main.append('div')
     .attr('aria-live', 'polite')
     .attr('id', 'resource-view-narrative')
-    .attr('class', 'screenreader-only sr-only')
+    .attr('class', 'fa-sr-only')
     .text(d => narrativeTextResources)
 
   const svg = main.append('svg')

assets/src/containers/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Route, withRouter } from 'react-router-dom'
+import { Route, Switch, useLocation } from 'react-router-dom'
 import { matchPath } from 'react-router'
 import GoogleAnalyticsTracking from '../components/GoogleAnalyticsTracking'
 import CourseList from './CourseList'
@@ -8,7 +8,8 @@ import WarningBanner from '../components/WarningBanner'
 import { Helmet } from 'react-helmet'
 
 function App (props) {
-  const { location, user, gaId } = props
+  const location = useLocation()
+  const { user, gaId } = props
 
   if (!user.isLoggedIn) {
     if (user.loginURL === '') {
@@ -23,11 +24,19 @@ function App (props) {
     <>
       <Helmet titleTemplate='%s | My Learning Analytics' title='Courses' />
       <GoogleAnalyticsTracking gaId={gaId} />
-      <Route path='/' exact render={props => <CourseList {...props} user={user} />} />
-      <Route path='/courses' exact render={props => <CourseList {...props} user={user} />} />
-      {courseId ? <Course user={user} courseId={Number(courseId)} {...props} /> : null}
+      <Switch>
+        <Route path='/' exact>
+          <CourseList user={user} />
+        </Route>
+        <Route path='/courses' exact>
+          <CourseList user={user} />
+        </Route>
+        <Route>
+          {courseId ? <Course user={user} courseId={Number(courseId)} {...props} /> : null}
+        </Route>
+      </Switch>
     </>
   )
 }
 
-export default withRouter(App)
+export default App

assets/src/containers/AssignmentPlanningV2.js

@@ -43,10 +43,6 @@ const styles = theme => ({
     paddingBottom: 10,
     paddingTop: 10
   },
-  clearButton: {
-    float: 'right',
-    margin: '30px'
-  },
   mainProgressBar: {
     marginBottom: '2.5rem'
   },

assets/src/containers/Course.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom' // eslint-disable-line
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import DashboardAppBar from './DashboardAppBar'
 import SideDrawer from './SideDrawer'
 import GradeDistribution from './GradeDistribution'
@@ -83,66 +83,50 @@ function Course (props) {
                   />
                 </Card>
               ) : (
-                <>
-                  <Route
-                    path='/courses/:courseId/'
-                    exact
-                    render={props =>
-                      <IndexPage
-                        {...props}
-                        courseInfo={courseInfo}
-                        courseId={courseId}
-                        enrollmentTypes={enrollmentTypes}
-                        isAdmin={user.admin}
-                      />}
-                  />
-                  <Route
-                    path='/courses/:courseId/grades'
-                    render={props =>
-                      <GradeDistribution
-                        {...props}
-                        disabled={!courseInfo.course_view_options.gd}
-                        courseId={courseId}
-                        user={user}
-                        enrollmentTypes={enrollmentTypes}
-                        isAdmin={user.admin}
-                      />}
-                  />
-                  <Route
-                    path='/courses/:courseId/assignmentsv1'
-                    render={props =>
-                      <AssignmentPlanning
-                        {...props}
-                        disabled={!courseInfo.course_view_options.apv1}
-                        courseId={courseId}
-                        enrollmentTypes={enrollmentTypes}
-                        isAdmin={user.admin}
-                      />}
-                  />
-                  <Route
-                    path='/courses/:courseId/assignments'
-                    render={props =>
-                      <AssignmentPlanningV2
-                        {...props}
-                        disabled={!courseInfo.course_view_options.ap}
-                        courseId={courseId}
-                        enrollmentTypes={enrollmentTypes}
-                        isAdmin={user.admin}
-                      />}
-                  />
-                  <Route
-                    path='/courses/:courseId/resources'
-                    render={props =>
-                      <ResourcesAccessed
-                        {...props}
-                        disabled={!courseInfo.course_view_options.ra}
-                        courseInfo={courseInfo}
-                        courseId={courseId}
-                        enrollmentTypes={enrollmentTypes}
-                        isAdmin={user.admin}
-                      />}
-                  />
-                </>
+                <Switch>
+                  <Route path='/courses/:courseId/' exact>
+                    <IndexPage
+                      courseInfo={courseInfo}
+                      courseId={courseId}
+                      enrollmentTypes={enrollmentTypes}
+                      isAdmin={user.admin}
+                    />
+                  </Route>
+                  <Route path='/courses/:courseId/grades'>
+                    <GradeDistribution
+                      user={user}
+                      disabled={!courseInfo.course_view_options.gd}
+                      courseId={courseId}
+                      enrollmentTypes={enrollmentTypes}
+                      isAdmin={user.admin}
+                    />
+                  </Route>
+                  <Route path='/courses/:courseId/assignmentsv1'>
+                    <AssignmentPlanning
+                      disabled={!courseInfo.course_view_options.apv1}
+                      courseId={courseId}
+                      enrollmentTypes={enrollmentTypes}
+                      isAdmin={user.admin}
+                    />
+                  </Route>
+                  <Route path='/courses/:courseId/assignments'>
+                    <AssignmentPlanningV2
+                      disabled={!courseInfo.course_view_options.ap}
+                      courseId={courseId}
+                      enrollmentTypes={enrollmentTypes}
+                      isAdmin={user.admin}
+                    />
+                  </Route>
+                  <Route path='/courses/:courseId/resources'>
+                    <ResourcesAccessed
+                      disabled={!courseInfo.course_view_options.ra}
+                      courseInfo={courseInfo}
+                      courseId={courseId}
+                      enrollmentTypes={enrollmentTypes}
+                      isAdmin={user.admin}
+                    />
+                  </Route>
+                </Switch>
               )}
           </>
         ) : <Spinner />}

assets/src/containers/ResourcesAccessed.js

@@ -40,11 +40,7 @@ const styles = theme => ({
     marginTop: theme.spacing(2)
   },
   controlText: {
-    paddingLeft: 8,
-    paddingRight: 8
-  },
-  checkBox: {
-    marginLeft: 20
+    marginRight: 16
   }
 })
 
@@ -100,7 +96,7 @@ function ResourcesAccessed (props) {
     if (resourceAccessData) {
       if (resourceTypes.length > 1) {
         return (
-          <div style={{ textAlign: 'center' }}>
+          <div style={{ textAlign: 'center', verticalAlign: 'middle' }}>
             <FormControl>
               <FormGroup row>
                 <p className={classes.controlText}>Select resource types to be viewed:</p>

assets/src/hooks/useAssignmentData.js

@@ -1,9 +1,8 @@
-import { gql } from 'apollo-boost'
-import { useQuery } from '@apollo/react-hooks'
+import { gql, useQuery } from '@apollo/client'
 
-const GET_ASSIGNMENT_PLANNING_DATA = courseId => gql`
-query Assignment{
-  course(canvasId: ${courseId}) {
+const GET_ASSIGNMENT_PLANNING_DATA = gql`
+query Assignment($courseId: ID!) {
+  course(canvasId: $courseId) {
     assignments {
       id
       name
@@ -38,7 +37,7 @@ query Assignment{
 `
 
 const useAssignmentData = courseId => {
-  return useQuery(GET_ASSIGNMENT_PLANNING_DATA(courseId), { variables: { courseId }, fetchPolicy: 'network-only' })
+  return useQuery(GET_ASSIGNMENT_PLANNING_DATA, { variables: { courseId }, fetchPolicy: 'network-only' })
 }
 
 export default useAssignmentData

assets/src/hooks/useSetUserSettingGQL.js

@@ -1,5 +1,4 @@
-import { gql } from 'apollo-boost'
-import { useMutation } from '@apollo/react-hooks'
+import { gql, useMutation } from '@apollo/client'
 
 const UPDATE_USER_SETTING = gql`
   mutation setUserDefaultSelection($input: UserDefaultSelectionInput!) {

assets/src/index.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@material-ui/core/styles'
 import './index.css'
 import App from './containers/App'
 import client from './service/client'
-import { ApolloProvider } from '@apollo/react-hooks'
+import { ApolloProvider } from '@apollo/client'
 import { user, siteTheme, gaId } from './globals'
 // import * as serviceWorker from './serviceWorker'
 

assets/src/service/client.js

@@ -1,7 +1,9 @@
-import ApolloClient from 'apollo-boost'
+import { ApolloClient, InMemoryCache } from '@apollo/client'
 import Cookie from 'js-cookie'
 
 export default new ApolloClient({
+  uri: '/graphql',
+  cache: new InMemoryCache(),
   headers: {
     Accept: 'application/json',
     'X-Requested-With': 'XMLHttpRequest',