Updated dependencies and started fixing breaking changes before TS conversion

package.json

@@ -4,19 +4,19 @@
   "homepage": "./",
   "private": true,
   "dependencies": {
-    "array-sort": "^0.1.4",
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
     "classnames": "^2.2.5",
+    "jss": "^9.8.7",
     "mapbox-gl": "^0.49.0",
-    "material-ui": "1.0.0-beta.25",
-    "material-ui-icons": "1.0.0-alpha.19",
     "phone-formatter": "^0.0.2",
     "promise": "7.1.1",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
+    "react": "^16.8.1",
     "react-autosuggest": "^9.3.2",
     "react-classnames": "^0.1.2",
-    "react-dom": "^15.6.1",
-    "react-mapbox-gl": "^3.9.2",
+    "react-dom": "^16.8.1",
+    "react-mapbox-gl": "^4.2.0",
     "react-piwik": "^1.6.0",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.2",
@@ -46,7 +46,6 @@
     "node-sass": "^4.9.0",
     "optimize-css-assets-webpack-plugin": "^4.0.2",
     "postcss-loader": "2.0.6",
-    "react-addons-perf": "^15.4.2",
     "sass-loader": "^7.0.2",
     "style-loader": "^0.18.2",
     "sw-precache-webpack-plugin": "0.11.3",

src/components/Alert.js

 import React from 'react';
 import classNames from 'classnames';
 import {findLink} from '../utils/nameUtils';
-import Chip from 'material-ui/Chip';
+import Chip from '@material-ui/core/Chip';
 
 const Alert = ({alert}) => {
     const getUrgencyClass = () => {

src/components/AppBar.js

 import React from 'react';
-import AppBar from 'material-ui/AppBar';
-import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
-import Button from 'material-ui/Button';
-import IconButton from 'material-ui/IconButton';
-import MenuIcon from 'material-ui-icons/Menu';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
 import SearchBar from '../containers/SearchBar';
 import classNames from 'classnames';
 import AlertContainer from '../containers/AlertContainer';
@@ -35,7 +35,7 @@ class CustomAppBar extends React.Component {
                     <Toolbar className={'app-bar-tool-bar'}>
                         <div className={'app-bar-logo-name'}>
                             <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
-                            <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
+                            <Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
                                 What's Open
                             </Typography>
                         </div>

src/components/CardContainer.js

 import React from 'react';
 import FacilityCard from '../containers/FacilityCard';
-import Grid from 'material-ui/Grid';
+import Grid from '@material-ui/core/Grid';
 
 class CardContainer extends React.Component {
     constructor(props) {

src/components/FacilitiesMap.js

 import React from 'react';
 import ReactMapboxGl, {Marker, Popup} from 'react-mapbox-gl';
-import {MenuItem} from 'material-ui/Menu';
-import Select from 'material-ui/Select';
-import {FormControl} from 'material-ui/Form';
+import {MenuItem} from '@material-ui/core/Menu';
+import Select from '@material-ui/core/Select';
+import {FormControl} from '@material-ui/core/FormControl';
 import {getMaxBounds, getCenterOfCampusRegion} from '../utils/mapboxUtils';
 import mapboxgl from 'mapbox-gl';
-import {Typography} from 'material-ui';
+import {Typography} from '@material-ui/core/Typography';
 import {removeBrackets} from '../utils/nameUtils';
 
 const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
@@ -189,7 +189,7 @@ class FacilitiesMap extends React.Component {
                 {selectedLocation && (
                     <Popup coordinates={selectedLocation.location.coordinate_location.coordinates} anchor="top">
                         <div>
-                            <Typography type="subheading" align={'center'}>
+                            <Typography variant="subtitle1" align={'center'}>
                                 {selectedLocation.location.building}
                             </Typography>
                         </div>
@@ -198,7 +198,7 @@ class FacilitiesMap extends React.Component {
                                 {selectedLocation.facilities.map((facility) => {
                                     return (
                                         <li key={facility.slug}>
-                                            <Typography type="caption">{removeBrackets(facility.facility_name)}</Typography>
+                                            <Typography variant="caption">{removeBrackets(facility.facility_name)}</Typography>
                                         </li>
                                     );
                                 })}

src/components/FacilityCategory.js

 import React from 'react';
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
 
 const FacilityCategory = ({category}) => {
     return (
         <div className={'facility-category-wrapper'}>
-            <Typography type={'body1'} noWrap>
+            <Typography variant={'body1'} noWrap>
                 {category.name}
             </Typography>
         </div>

src/components/FacilityDialog.js

 import React from 'react';
-import Dialog from 'material-ui/Dialog';
-import Grid from 'material-ui/Grid';
+import Dialog from '@material-ui/core/Dialog';
+import Grid from '@material-ui/core/Grid';
 import FacilityLabels from './FacilityLabels';
 import WeekHours from './WeekHours';
-import Button from 'material-ui/Button';
-import Avatar from 'material-ui/Avatar';
-import Typography from 'material-ui/Typography';
+import Button from '@material-ui/core/Button';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
 import MapDialog from './MapDialog';
-import CloseIcon from 'material-ui-icons/Close';
-import IconButton from 'material-ui/IconButton';
-import LocationOnIcon from 'material-ui-icons/LocationOn';
+import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
 import {removeBrackets} from '../utils/nameUtils';
 
 class FacilityDialog extends React.Component {
@@ -48,7 +48,7 @@ class FacilityDialog extends React.Component {
                                 <Avatar className={'fd-avatar'} src={facility.logo} />
                             </Grid>
                             <Grid item className={'fd-header-text-container'}>
-                                <Typography className={'fd-header-text'} type={'headline'}>
+                                <Typography className={'fd-header-text'} variant={'h5'}>
                                     {removeBrackets(facility.facility_name)}
                                 </Typography>
                             </Grid>
@@ -56,10 +56,10 @@ class FacilityDialog extends React.Component {
                     </Grid>
 
                     <Grid item className={'fd-location-wrapper'}>
-                        <Typography type={'caption'}>
+                        <Typography variant={'caption'}>
                             <LocationOnIcon />
                         </Typography>
-                        <Typography title={facility.facility_location.building} type={'caption'} align={'center'}>
+                        <Typography title={facility.facility_location.building} variant={'caption'} align={'center'}>
                             {facility.facility_location.building}
                         </Typography>
                     </Grid>

src/components/FacilityLabels.js

 import React from 'react';
-import Chip from 'material-ui/Chip';
+import Chip from '@material-ui/core/Chip';
 
 const FacilityLabels = ({facility}) => {
     return (

src/components/FacilityStatus.js

 import React from 'react';
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
 import FacilityUtils from '../utils/facilityUtils';
 import classNames from 'classnames';
 
@@ -31,7 +31,7 @@ const FacilityStatus = ({facility}) => {
     const statusInfo = generateStatusInfo();
 
     return (
-        <Typography type={'caption'}
+        <Typography variant={'caption'}
                     className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
             {statusInfo.label}
         </Typography>

src/components/FavoriteButton.js

 import React from 'react';
-import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
-import FavoriteIcon from 'material-ui-icons/Favorite';
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import FavoriteIcon from '@material-ui/icons/Favorite';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ReactPiwik from 'react-piwik';

src/components/MapDialog.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import Dialog from 'material-ui/Dialog';
+import Dialog from '@material-ui/core/Dialog';
 import FacilitiesMap from './FacilitiesMap';
-import IconButton from 'material-ui/IconButton';
-import CloseIcon from 'material-ui-icons/Close';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
 
 class MapDialog extends React.Component {
     handleRequestClose = () => {

src/components/Sidebar.js

 import React from 'react';
-import Paper from 'material-ui/Paper';
-import Avatar from 'material-ui/Avatar';
-import Typography from 'material-ui/Typography';
-import Divider from 'material-ui/Divider';
+import Paper from '@material-ui/core/Paper';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
 import TextwTitle from '../components/TextwTitle';
 import FacilitiesMap from '../components/FacilitiesMap';
 import MapDialog from '../components/MapDialog';
 import classNames from 'classnames';
 import WeekHours from './WeekHours';
-import FacilityLabels from './FacilityLabels';
-import CloseIcon from 'material-ui-icons/Close';
-import IconButton from 'material-ui/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton';
 import {removeBrackets} from '../utils/nameUtils';
 import phoneFormatter from 'phone-formatter';
 import ReactPiwik from 'react-piwik';
@@ -53,13 +52,13 @@ class Sidebar extends React.Component {
                 <meta></meta>
                 <Paper
                     className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
-                    <IconButton className={'sidebar-close-btn'} onClick={this.handleSidebarClose}>
+                    <IconButton className={'sidebar-close-btn'} size="small" onClick={this.handleSidebarClose}>
                         <CloseIcon />
                     </IconButton>
                     <div className={'sidebar-row1'}>
                         <Avatar className={'sidebar-avatar'} src={facility.logo} />
                         <div className={'sidebar-title'}>
-                            <Typography type="display1">{removeBrackets(facility.facility_name)}</Typography>
+                            <Typography variant="h4">{removeBrackets(facility.facility_name)}</Typography>
                         </div>
                     </div>
                     <Divider className={'sidebar-divider'} />

src/components/WeekHours.js

 import React from 'react';
-import Grid from 'material-ui/Grid';
+import Grid from '@material-ui/core/Grid';
 import facilityUtils from '../utils/facilityUtils';
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
 
 const WeekHours = ({facility}) => {
     const weekDays = [
@@ -23,10 +23,10 @@ const WeekHours = ({facility}) => {
                 output[index] = (
                     <Grid container spacing={0} key={facility.slug + index} className="week-hours-row">
                         <Grid item xs={2}>
-                            <Typography type={'body1'}>{weekDays[dayOfWeek]}</Typography>
+                            <Typography variant={'body1'}>{weekDays[dayOfWeek]}</Typography>
                         </Grid>
                         <Grid item>
-                            <Typography type={'body1'}>{todaysHours[i].text}</Typography>
+                            <Typography variant={'body1'}>{todaysHours[i].text}</Typography>
                         </Grid>
                     </Grid>
                 );

src/containers/AlertContainer.js

 import React from 'react';
 import {findDOMNode} from 'react-dom';
-import IconButton from 'material-ui/IconButton';
-import Popover from 'material-ui/Popover';
+import IconButton from '@material-ui/core/IconButton';
+import Popover from '@material-ui/core/Popover';
 import Alert from '../components/Alert';
-import NotificationsIcon from 'material-ui-icons/Notifications';
-import CloseIcon from 'material-ui-icons/Close';
-import Typography from 'material-ui/Typography';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
 import {connect} from 'react-redux';
 import {viewAlert} from '../actions/api';
 
@@ -56,7 +56,7 @@ class AlertContainer extends React.Component {
                 }} ref={this.handleBtnRef} onClick={this.handleOpen}>
                     {activeAlerts.filter((alert) => !alert.viewed).length !== 0 &&
                     <span className={'alert-container-number'}>
-                        <Typography type={'caption'} className={'alert-container-number-text'}>
+                        <Typography variant={'caption'} className={'alert-container-number-text'}>
                             {activeAlerts.length}
                         </Typography>
                     </span>}
@@ -78,7 +78,7 @@ class AlertContainer extends React.Component {
                     onClose={this.handleClose}>
                     <div className={'alert-container-popover'}>
                         <div className={'alert-container-header'}>
-                            <Typography type={'title'} className={'alert-container-title'}>
+                            <Typography variant={'h6'} className={'alert-container-title'}>
                                 Alerts
                             </Typography>
                             <IconButton className={'alert-container-close-btn'} onClick={this.handleClose}>

src/containers/FacilityCard.js

 import React from 'react';
-import Card, {CardContent} from 'material-ui/Card';
-import Typography from 'material-ui/Typography';
-import Grid from 'material-ui/Grid';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
 import FacilityStatus from '../components/FacilityStatus';
 import FavoriteButton from '../components/FavoriteButton';
 import FacilityCategory from '../components/FacilityCategory';
 import {connect} from 'react-redux';
 import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility, setSidebar} from '../actions/ui';
-import LocationOnIcon from 'material-ui-icons/LocationOn';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
 import {removeBrackets} from '../utils/nameUtils';
 import classNames from 'classnames';
 import FacilityDialog from '../components/FacilityDialog';
 import FacilityUtils from '../utils/facilityUtils';
 import ReactPiwik from 'react-piwik';
-import Perf from 'react-addons-perf';
 
 class FacilityCard extends React.Component {
 
     constructor(props) {
         super(props);
         this.state = {
-            modified: null,
+            modified: null
         };
     }
 
@@ -97,11 +97,10 @@ class FacilityCard extends React.Component {
                                 removeFavoriteFacility={removeFavoriteFacility} />
 
                 <CardContent className={'fc-card-content'}>
-                    <Grid container alignItems={'center'} direction={'column'}
-                          className={'fc-small-grid-container-spacing'}>
+                    <Grid container alignItems={'center'} direction={'column'}>
                         <Grid item
                               className={classNames('fc-small-grid-item-spacing', 'fc-ellipsis-container', 'fc-title-container')}>
-                            <Typography type={'subheading'} align={'center'}
+                            <Typography variant={'subtitle1'} align={'center'}
                                         className={classNames('fc-title', 'fc-one-line-ellipsis')}>
                                 {removeBrackets(facility.facility_name)}
                             </Typography>
@@ -109,23 +108,23 @@ class FacilityCard extends React.Component {
                         <Grid item className={'fc-small-grid-item-spacing'}>
                             <FacilityCategory category={facility.facility_category} />
                         </Grid>
-                        <Grid item className={'fc-small-grid-item-spacing'}>
-                            <Typography type={'body1'}>
+                        <Grid item className={'fc-small-grid-item-spacing fc-display-hours'}>
+                            <Typography variant={'body1'}>
                                 {`Today: ${getDisplayHours()}`}
                             </Typography>
                         </Grid>
                     </Grid>
 
-                    <Grid container justify={'space-around'} className={'fc-extra-info-wrapper'}>
+                    <Grid container justify={'space-around'}>
                         <Grid item className={'fc-extra-info'}>
                             <FacilityStatus facility={facility} />
                         </Grid>
 
                         <Grid item className={'fc-extra-info'}>
-                            <Typography type={'caption'}>
+                            <Typography variant={'caption'}>
                                 <LocationOnIcon className={'fc-card-map-marker-icon'} />
                             </Typography>
-                            <Typography title={buildingName} type={'caption'} align={'center'}
+                            <Typography title={buildingName} variant={'caption'} align={'center'}
                                         className={'fc-two-line-ellipsis'}>
                                 {buildingName}
                             </Typography>

src/containers/SearchBar.js

@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {setCampusRegion, setSearchTerm} from '../actions/ui';
-import SearchIcon from 'material-ui-icons/Search';
-import CloseIcon from 'material-ui-icons/Close';
-import ArrowBackIcon from 'material-ui-icons/ArrowBack';
-import IconButton from 'material-ui/IconButton';
-import Input from 'material-ui/Input';
-import Paper from 'material-ui/Paper';
-import {MenuItem} from 'material-ui/Menu';
-import Select from 'material-ui/Select';
-import {FormControl} from 'material-ui/Form';
+import SearchIcon from '@material-ui/icons/Search';
+import CloseIcon from '@material-ui/icons/Close';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import IconButton from '@material-ui/core/IconButton';
+import Input from '@material-ui/core/Input';
+import Paper from '@material-ui/core/Paper';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
 import classNames from 'classnames';
 import ReactPiwik from 'react-piwik';
 
@@ -92,10 +92,10 @@ class SearchBar extends React.Component {
         return (
             <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
                 this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open')}>
-                <IconButton onClick={this.handleMobileExpand} disableRipple className={'search-bar-search-btn'}>
+                <IconButton onClick={this.handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
                     <SearchIcon className={'search-bar-search-icon'}/>
                 </IconButton>
-                <IconButton onClick={this.handleMobileCollapse} disableRipple className={'search-bar-back-btn'}>
+                <IconButton onClick={this.handleMobileCollapse} disableRipple={true} className={'search-bar-back-btn'}>
                     <ArrowBackIcon className={'search-bar-back-icon'}/>
                 </IconButton>
                 <Input
@@ -113,7 +113,7 @@ class SearchBar extends React.Component {
                     inputRef={(el) => this.inputElement = el}
                     value={this.state.value}
                 />
-                <IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
+                <IconButton onClick={this.clear} disableRipple={true} className={'search-bar-close-btn'}>
                     <CloseIcon/>
                 </IconButton>
                 <FormControl className={'search-bar-campus-control'}>

src/index.js

@@ -10,7 +10,7 @@ import {ConnectedRouter, routerMiddleware} from 'react-router-redux';
 import {Provider} from 'react-redux';
 import ReduxThunk from 'redux-thunk';
 import reducers from './reducers/index';
-import {MuiThemeProvider} from 'material-ui/styles';
+import {MuiThemeProvider} from '@material-ui/core/styles';
 import theme from './theme';
 import './styles/whatsOpen.scss';
 import 'typeface-roboto';

src/styles/containers/facilityCard.scss

@@ -17,17 +17,18 @@
   }
 
 .fc-card-content {
-  padding: 8px 4px !important;
+  padding: 8px 4px 0 !important;
 }
 
-.fc-small-grid-container-spacing {
-  margin: -2px -8px !important;
-}
 
 .fc-small-grid-item-spacing {
   padding: 3px 8px !important;
 }
 
+.fc-display-hours {
+  white-space: nowrap;
+}
+
 .fc-ellipsis-container {
   width: 100%;
 }
@@ -56,20 +57,14 @@
 
 .fc-title {
   font-weight: bold !important;
-  margin-right: 6px!important;
 }
 
-
 .fc-extra-info {
   display: flex;
   align-items: center;
   max-width: 50%;
 }
 
-.fc-extra-info-wrapper {
-  padding-top: 8px;
-}
-
 .fc-one-line-ellipsis {
   white-space: nowrap;
   text-overflow: ellipsis;

src/theme.js

-import {createMuiTheme} from 'material-ui/styles';
+import {createMuiTheme} from '@material-ui/core/styles';
 
 const theme = createMuiTheme({
     direction: 'ltr',
@@ -177,6 +177,7 @@ const theme = createMuiTheme({
         fontWeightLight: 300,
         fontWeightRegular: 400,
         fontWeightMedium: 500,
+        useNextVariants: true,
         display4: {
             fontSize: 112,
             fontWeight: 300,
@@ -221,7 +222,7 @@ const theme = createMuiTheme({
             lineHeight: 1,
             color: 'rgba(0, 0, 0, 0.87)'
         },
-        subheading: {
+        subtitle1: {
             fontSize: 16,
             fontWeight: 400,
             fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
@@ -342,6 +343,13 @@ const theme = createMuiTheme({
         popover: 2100,
         snackbar: 2900,
         tooltip: 3000
+    },
+    overrides: {
+        MuiButtonBase: {
+            root: {
+                backgroundColor: 'transparent !important' // Removes hover affects on buttons - Maybe add this back at some point
+            }
+        }
     }
 });
 export default theme;
\ No newline at end of file