Polishing Calendar features

.prettierrc

+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "useTabs": false,
+    "jsxBracketSameLine": true,
+    "trailingComma": "es5"
+}

schedules/app/javascript/src/Calendar.jsx

 import React from 'react';
 import BigCalendar from 'react-big-calendar';
+import Toolbar from 'src/Toolbar';
 import moment from 'moment';
 import '!style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css';
+import withSizes from 'react-sizes';
 
 const localizer = BigCalendar.momentLocalizer(moment);
 
@@ -11,6 +13,7 @@ const Calendar = props => (
             localizer={localizer}
             events={props.events}
             title=""
+            components={{ toolbar: Toolbar }}
             defaultView="week"
             views={['week', 'day']}
             startAccessor="start"
@@ -18,6 +21,7 @@ const Calendar = props => (
             defaultDate={moment('2019-01-14').toDate()}
             formats={{
                 dayFormat: (date, culture, localizer) => localizer.format(date, 'ddd', culture),
+                dayHeaderFormat: (date, culture, localizer) => localizer.format(date, 'ddd', culture),
                 dayRangeHeaderFormat: () => '',
             }}
             style={{ height: '75vh' }}

schedules/app/javascript/src/InstructorCard.jsx

+import React from 'react';
+
+export default class InstructorCard extends React.Component {
+    render() {
+        const inst = this.props.instructor;
+        return (
+            <div className="card p-3">
+                <span>
+                    <i className="fas fa-chalkboard-teacher mr-2" />
+                    <a href={`/instructors/${inst.id}`}>{this.props.instructor.name}</a>
+                </span>
+            </div>
+        );
+    }
+}

schedules/app/javascript/src/InstructorList.jsx

+import React from 'react';
+import InstructorCard from 'src/InstructorCard';
+
+export default class InstructorList extends React.Component {
+    render() {
+        return <div>{this.props.instructors && this.props.instructors.map(i => <InstructorCard instructor={i} />)}</div>;
+    }
+}

schedules/app/javascript/src/SearchList.jsx

+import React from 'react';
+import CourseList from 'src/CourseList';
+import InstructorList from 'src/InstructorList';
+
+export default class SearchList extends React.Component {
+    render() {
+        return (
+            <div>
+                <InstructorList instructors={this.props.instructors} />
+                <CourseList courses={this.props.courses} />
+            </div>
+        );
+    }
+}

schedules/app/javascript/src/Toolbar.jsx

+import React from 'react';
+import BigCalendar from 'react-big-calendar';
+import Toolbar from 'react-big-calendar/lib/Toolbar';
+import '!style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css';
+import withSizes from 'react-sizes';
+
+class CustomToolbar extends Toolbar {
+    render() {
+        const { label, isMobile } = this.props;
+        if (isMobile && label === '') {
+            this.view('day');
+        }
+        return (
+            <div className="rbc-toolbar d-flex justify-content-between">
+                {!isMobile && (
+                    <span className="rbc-btn-group">
+                        <button type="button" onClick={() => this.view('day')}>
+                            Day
+                        </button>
+                        <button type="button" onClick={() => this.view('week')}>
+                            Week
+                        </button>
+                    </span>
+                )}
+
+                <span className="rbc-toolbar-label">{this.props.label}</span>
+
+                {this.props.view === 'day' && (
+                    <span className="rbc-btn-group">
+                        {this.props.label !== 'Sun' && (
+                            <button type="button" onClick={() => this.navigate('PREV')}>
+                                Back
+                            </button>
+                        )}
+                        {this.props.label !== 'Sat' && (
+                            <button type="button" onClick={() => this.navigate('NEXT')}>
+                                Next
+                            </button>
+                        )}
+                    </span>
+                )}
+            </div>
+        );
+    }
+
+    navigate = action => {
+        console.log(action);
+
+        this.props.onNavigate(action);
+    };
+
+    view = action => {
+        this.props.onView(action);
+    };
+}
+
+const mapSizesToProps = ({ width }) => ({
+    isMobile: width < 1000,
+});
+
+export default withSizes(mapSizesToProps)(CustomToolbar);

schedules/app/views/about/index.html.erb

+<div class="jumbotron text-center">
+    <h1><i class="fas fa-calendar-alt"></i>&nbsp;SRCT Schedules</h1>
+    <p class="lead">Version 3.0</p>
+    <hr />
+    Last updated: 2:00am, 4/14/19
+</div>
+
+<h3>Thank you to our contributors who make Schedules possible!</h3>
+
+Zac Wood, David Haynes, Zach Perkins, Gilberto Barrientos, Michael Bailey, Nic Anderson
+
+<br /><br/>
+
+<h3>Questions?</h3>
+All data in Schedules is sourced from data made publicly avaiable by GMU.
+<ul>
+    <li>Course and section data can be found on <a href="https://patriotweb.gmu.edu/pls/prod/bwckschd.p_disp_dyn_sched">Patriot Web</a></li>
+    <li>Course review data can be found <a href="https://crserating.gmu.edu/ReportOnline/">here</a></li>
+</ul>
+
+Please contact SRCT at <a href="mailto:srct@gmu.edu">srct@gmu.edu</a> with any other questions.

schedules/db/seeds.rb

@@ -8,6 +8,7 @@ require 'httparty'
 require 'nokogiri'
 require 'json'
 require 'set'
+require 'yaml/store'
 
 def parse_courses(subjects)
   courses = []

schedules/package.json

@@ -14,6 +14,7 @@
     "react": "^16.8.6",
     "react-big-calendar": "^0.20.4",
     "react-dom": "^16.8.6",
+    "react-sizes": "^2.0.0",
     "url-polyfill": "^1.1.3"
   },
   "devDependencies": {

schedules/yarn.lock

@@ -3276,6 +3276,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -4615,7 +4620,7 @@ prop-types-extra@^1.0.1, prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^3.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4801,6 +4806,14 @@ react-overlays@^0.8.3:
     react-transition-group "^2.2.0"
     warning "^3.0.0"
 
+react-sizes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-sizes/-/react-sizes-2.0.0.tgz#c2100daf3bf74077fb410f09204340c1af5c1d4f"
+  integrity sha512-YNGPQGJTxNMD4wdFRmVmqlLZlwhETVW06H7dVbOjj+OV1ckz/gkH3/5MfRuSO8t99nMOmi+Uj14jkvG+zlP57w==
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.6.0"
+
 react-transition-group@^2.2.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.8.0.tgz#d6d8f635d81a0955b67348be5d017cff77d6c75f"