Commit d3970aa1 authored by Zac Wood's avatar Zac Wood

Rewrote search + schedule pages with React

parent 080037ca
Pipeline #4235 failed with stage
in 3 minutes and 32 seconds
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
[
"env",
{
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}
],
"react"
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
[
"transform-class-properties",
{
"spec": true
}
]
]
}
......@@ -14,3 +14,4 @@ RUN export SECRET_KEY_BASE=$(rails secret)
RUN rails assets:precompile
RUN rails db:migrate
RUN rails db:seed
RUN rails runner db/load_course_ratings.rb
......@@ -21,6 +21,9 @@ gem 'uglifier'
gem 'webpacker', '~> 3.5'
# Access Ruby data from JavaScript
gem 'gon'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
......@@ -74,7 +77,3 @@ gem 'apipie-rails'
# Markdown for API docs
gem 'maruku'
# gem 'jquery-rails'
# gem 'font-awesome-sass', '~> 5.3.1'
......@@ -64,6 +64,10 @@ GEM
ffi (1.9.25)
globalid (0.4.1)
activesupport (>= 4.2.0)
gon (6.2.1)
actionpack (>= 3.0)
multi_json
request_store (>= 1.0)
httparty (0.16.3)
mime-types (~> 3.0)
multi_xml (>= 0.5.2)
......@@ -144,6 +148,8 @@ GEM
rb-fsevent (0.10.3)
rb-inotify (0.9.10)
ffi (>= 0.5.0, < 2)
request_store (1.4.1)
rack (>= 1.4)
rubocop (0.58.2)
jaro_winkler (~> 1.5.1)
parallel (~> 1.10)
......@@ -216,6 +222,7 @@ DEPENDENCIES
apipie-rails
byebug
capybara (~> 2.13)
gon
httparty
icalendar
jbuilder (~> 2.5)
......
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
// Place all the styles related to the about controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
class AboutController < ApplicationController
def index; end
end
......@@ -28,7 +28,6 @@ class API::CourseSectionsController < ApplicationController
@sections = @sections.where('UPPER(instructors.name) LIKE UPPER(?)', "%#{params[:instructor]}%")
end
# @sections = CourseSection.fetch(params).all
res = @sections.map do |s|
{
id: s.id,
......@@ -38,6 +37,9 @@ class API::CourseSectionsController < ApplicationController
crn: s.crn,
title: s.title,
instructor_name: s.instructor_name,
instructor_url: instructor_url(s.instructor),
teaching_rating: s.instructor.rating,
course_rating: s.course_rating,
section_type: s.section_type,
start_date: s.start_date,
end_date: s.end_date,
......
# Configures the application.
class ApplicationController < ActionController::Base
include BySemester
# On each request, set the semester and cart.
before_action :set_cart
# The user's cart is stored as a JSON-encoded list of CRNs.
# set_cart sets the @cart variable, which is a list of the sections represented by the CRNs.
def set_cart
# set the cart cookie to be empty if it doesn't already exist
cookies.permanent[:cart] = "[]" if cookies.permanent[:cart].nil?
# decode the JSON list into an array
@cart = JSON.parse(cookies.permanent[:cart])
# get rid of any invalid CRNs
@cart = @cart.reject { |crn| CourseSection.find_by_crn(crn).nil? }
# set the cookie to the JSON-encoded list of valid sections
cookies.permanent[:cart] = @cart.to_json
end
end
# BySemester contains logic for setting the current request's
# Semester. This is not needed by every page as it used to be, so it
# now lives in this concern instead of ApplicationController.
module BySemester
extend ActiveSupport::Concern
included do
before_action :set_semester
end
# This page needs to know what semester it should load data from.
# set_semester checks both the semester_id query parameter and the user's cookies
# to look for a semester id and loads whatever it finds into @semester.
#
# By default, load the most recent semester.
def set_semester
if params.key?(:semester_id)
@semester = Semester.find_by_id params[:semester_id]
cookies[:semester_id] = @semester.id
elsif cookies[:semester_id].nil?
@semester = Semester.first
cookies[:semester_id] = @semester.id
else
@semester = Semester.find_by_id cookies[:semester_id]
end
end
end
......@@ -2,29 +2,32 @@
class SchedulesController < ApplicationController
include SchedulesHelper
def show
valid_crns = @cart.reject { |crn|
s = CourseSection.find_by_crn(crn)
s.nil?
}
def show; end
@all = valid_crns.map { |crn|
def view
@all = params[:crns].split(',').map { |crn|
CourseSection.latest_by_crn(crn)
}
@all.reject!(&:nil?)
@without_online = @all.reject { |s|
s.start_time == "TBA" || s.end_time == "TBA"
}
@events = generate_fullcalender_events(@without_online)
end
def view
@all = params[:crns].split(',').map { |crn|
CourseSection.latest_by_crn(crn)
}
@all.reject!(&:nil?)
@without_online = @all.reject { |s|
def events
@cart = params[:crns].split(',')
.map { |crn| CourseSection.latest_by_crn(crn) }
.reject(&:nil?)
@without_online = @cart.reject { |s|
s.start_time == "TBA" || s.end_time == "TBA"
}
@events = generate_fullcalender_events(@without_online)
sections = @cart.map do |s|
s.serializable_hash.merge(instructor_name: s.instructor.name, instructor_url: instructor_url(s.instructor))
end
render json: { events: @events, sections: sections }
end
end
......@@ -13,43 +13,45 @@ class SearchController < ApplicationController
/[[:alpha:]]{2,4} \d{3}/.match(params[:query]) do |m|
subj, num = m[0].split(' ')
course = Course.find_by(subject: subj.upcase, course_number: num)
redirect_to(course_url course) unless course.nil?
redirect_to(course_url(course)) unless course.nil?
end
/[[:alpha:]]{2,4}/i.match(params[:query]) do |m|
@courses = Course.where(subject: m[0].upcase)
.joins(:course_sections)
.merge(CourseSection.in_semester(@semester))
.uniq
.joins(:course_sections)
.merge(CourseSection.in_semester(@semester))
.uniq
if @courses.empty?
@courses = Course.where("(courses.title LIKE ?)", "%#{params[:query]}%")
.joins(:course_sections)
.merge(CourseSection.in_semester(@semester))
.uniq
.joins(:course_sections)
.merge(CourseSection.in_semester(@semester))
.uniq
other = Course.where("(courses.description LIKE ?)", "%#{params[:query]}%")
.joins(:course_sections)
.merge(CourseSection.in_semester(@semester))
.uniq
.joins(:course_sections)
.merge(CourseSection.in_semester(@semester))
.uniq
@courses = [*@courses, *other].uniq
@instructors = Instructor.named(params[:query])
end
@courses.map! do |c|
c.serializable_hash.merge(url: course_url(c))
end
gon.courses = @courses
gon.courses.map!
end
/[0-9]{5}/.match(params[:query]) do |m|
redirect_to(course_url CourseSection.latest_by_crn(m[0]).course)
redirect_to(course_url(CourseSection.latest_by_crn(m[0]).course))
end
# results = SearchHelper::GenericItem.fetchall(String.new(params[:query]), semester: @semester).group_by(&:type)
# @instructors = results[:instructor]&.map(&:data)
# @courses = results[:course]&.map(&:data)
if @courses&.count == 1 && @instructors&.count == 0
redirect_to course_url(@courses.first)
elsif @courses&.count == 0 && @instructors&.count == 1
if @courses&.count == 1 && @instructors&.count&.zero?
redirect_to course_url(@courses.first["id"])
elsif @courses&.count&.zero? && @instructors&.count == 1
redirect_to instructor_url(@instructors.first)
end
end
......
......@@ -19,7 +19,9 @@ module SchedulesHelper
{
title: s.name,
start: "#{formatted_date}T#{time}",
end: "#{formatted_date}T#{endtime}"
end: "#{formatted_date}T#{endtime}",
crn: s.crn,
active: true
}
end
end.flatten
......
module SearchHelper
def in_cart?(crn)
@cart.include? crn.to_s
end
class GenericQueryData
attr_reader :semester
attr_reader :sort_mode
......
......@@ -10,6 +10,9 @@
import '@babel/polyfill';
import 'url-polyfill';
import React from 'react';
import Cart from 'src/Cart';
const elementFromString = string => {
const html = new DOMParser().parseFromString(string, 'text/html');
return html.body.firstChild;
......
import React from 'react';
import ReactDOM from 'react-dom';
import Cart from 'src/Cart';
import QuickAdd from 'src/QuickAdd';
document.addEventListener('DOMContentLoaded', () => {
const calendarUrl = `${window.location.protocol}//${window.location.hostname}${window.location.port == 3000 ? ':3000' : ''}/schedule`;
ReactDOM.render(
<QuickAdd
loadCalendar={() => {
window.location.href = calendarUrl;
}}
/>,
document.getElementById('quick-add')
);
});
// /**
// * Either adds or removes a section from the cart depending on
// * if it is currently in the cart.
// */
import $ from 'jquery';
import Cart from 'src/Cart';
const addOrRemoveFromCart = async (event, sectionNode) => {
event && event.stopPropagation();
if (event.target.tagName === 'A') return;
const section = { ...sectionNode.dataset };
Cart.toggleCrn(section.crn);
const icon = $(sectionNode.querySelector('.add-remove-btn #icon'));
const text = sectionNode.querySelector('.add-remove-btn .text');
if (Cart.includesCrn(section.crn)) {
icon.addClass('fa-minus').removeClass('fa-plus');
text.innerText = 'Remove';
} else {
icon.addClass('fa-plus').removeClass('fa-minus');
text.innerText = 'Add';
}
};
const initSearchListeners = () => {
const sectionItems = Array.from(document.querySelectorAll('.section-item'));
sectionItems.forEach(item => {
item.onclick = event => addOrRemoveFromCart(event, item);
});
setTimeout(() => {
sectionItems.forEach(item => {
const icon = $(item.querySelector('.add-remove-btn #icon'));
const text = item.querySelector('.add-remove-btn .text');
console.log(item.dataset.crn);
if (Cart.includesCrn(item.dataset.crn)) {
icon.addClass('fa-minus').removeClass('fa-plus');
text.innerText = 'Remove';
} else {
icon.addClass('fa-plus').removeClass('fa-minus');
text.innerText = 'Add';
}
});
}, 100);
};
document.addEventListener('DOMContentLoaded', initSearchListeners);
import Cart from 'src/cart';
import React from 'react';
import ReactDOM from 'react-dom';
import Cart from 'src/Cart';
import { saveAs } from 'file-saver';
import html2canvas from 'html2canvas';
import $ from 'jquery';
import 'fullcalendar';
import 'moment';
import CalendarPage from 'src/CalendarPage';
document.addEventListener('DOMContentLoaded', () => {
const eventsTemplate = document.querySelector('#events');
if (eventsTemplate) {
const eventsJSON = eventsTemplate.dataset.events;
const events = JSON.parse(eventsJSON);
window.events = events;
$('#calendar').fullCalendar({
defaultDate: new Date(2019, 0, 14),
defaultView: 'agendaWeek',
header: false,
events: renderEvents,
columnHeaderFormat: 'dddd',
allDaySlot: false,
});
}
initListeners();
ReactDOM.render(<CalendarPage />, document.getElementById('root'));
});
const renderEvents = (start, end, timezone, callback) => {
callback(window.events);
};
const remove = async item => {
await Cart.toggleSection({ ...item.dataset });
location.reload(true);
};
/**
* Generates a URL for the current sections in the schedule
* and sets the link in the modal to it.
*/
const setUrlInModal = () => {
document.getElementById('calendar-link').innerText = `${window.location.protocol}//${window.location.hostname}/api/schedules?crns=${Cart._courses.join(',')}`;
};
const downloadIcs = async () => {
const response = await fetch(`${window.location.protocol}//${window.location.hostname}/api/schedules?crns=${Cart._courses.join(',')}`);
const text = await response.text();
......@@ -69,7 +39,7 @@ const initListeners = () => {
document.getElementById('save-image').onclick = saveImage;
document.getElementById('share-url').innerText = `${window.location.protocol}//${window.location.hostname}/schedule/view?crns=${Cart._courses.join(',')}`;
document.getElementById('share-url').href= `${window.location.protocol}//${window.location.hostname}/schedule/view?crns=${Cart._courses.join(',')}`;
document.getElementById('share-url').href = `${window.location.protocol}//${window.location.hostname}/schedule/view?crns=${Cart._courses.join(',')}`;
};
if (!HTMLCanvasElement.prototype.toBlob) {
......
import Cart from 'src/cart';
import Cart from 'src/Cart';
import { saveAs } from 'file-saver';
import html2canvas from 'html2canvas';
import $ from 'jquery';
......
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
import Cart from 'src/cart';
// import Cart from 'src/cart';
/**
* Either adds or removes a section from the cart depending on
* if it is currently in the cart.
*/
const addOrRemoveFromCart = async (event, sectionNode) => {
event && event.stopPropagation();
const section = { ...sectionNode.dataset };
// /**
// * Toggles the display of the schedule
// */
// const toggleSections = course => {
// const sections = course.querySelector('.sections');
// const chev = $(course.querySelector('#course-chevron'));
// const label = course.querySelector('#chevron-label');
await Cart.toggleSection(section);
const icon = $(sectionNode.querySelector('.add-remove-btn #icon'));
const text = sectionNode.querySelector('.add-remove-btn .text');
if (Cart.includesSection(section)) {
icon.addClass('fa-minus').removeClass('fa-plus');
text.innerText = 'Remove';
} else {
icon.addClass('fa-plus').removeClass('fa-minus');
text.innerText = 'Add';
}
};
// if (sections.style.display === 'flex') {
// sections.style.display = 'none';
// chev.addClass('fa-chevron-down').removeClass('fa-chevron-up');
// label.innerText = 'Expand';
// } else {
// sections.style.display = 'flex';
// chev.addClass('fa-chevron-up').removeClass('fa-chevron-down');
// label.innerText = 'Minimize';
// }
// };
/**
* Toggles the display of the schedule
*/
const toggleSections = course => {
const sections = course.querySelector('.sections');
const chev = $(course.querySelector('#course-chevron'));
const label = course.querySelector('#chevron-label');
import React from 'react';
import ReactDOM from 'react-dom';
import CourseList from 'src/CourseList';
if (sections.style.display === 'flex') {
sections.style.display = 'none';
chev.addClass('fa-chevron-down').removeClass('fa-chevron-up');
label.innerText = 'Expand';
} else {
sections.style.display = 'flex';
chev.addClass('fa-chevron-up').removeClass('fa-chevron-down');
label.innerText = 'Minimize';
}
};
const initSearchListeners = () => {
const courseCards = Array.from(document.querySelectorAll('.course-card'));
courseCards.forEach(card => {
card.onclick = () => toggleSections(card);
});
const sectionItems = Array.from(document.querySelectorAll('.section-item'));
sectionItems.forEach(item => (item.onclick = event => addOrRemoveFromCart(event, item)));
};
document.addEventListener('DOMContentLoaded', initSearchListeners);
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<CourseList courses={gon.courses} />, document.getElementById('root'));
});
import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import '!style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css';
const localizer = BigCalendar.momentLocalizer(moment);
const Calendar = props => (
<div style={{ backgroundColor: 'white', padding: '24px' }}>
<BigCalendar
localizer={localizer}
events={props.events}
title=""
defaultView="week"
views={['week', 'day']}
startAccessor="start"
endAccessor="end"
defaultDate={moment('2019-01-14').toDate()}
formats={{
dayFormat: (date, culture, localizer) => localizer.format(date, 'ddd', culture),
dayRangeHeaderFormat: () => '',
}}
style={{ height: '75vh' }}
/>
</div>
);
export default Calendar;
import React from 'react';
import Calendar from 'src/Calendar';
import Cart from 'src/Cart';
import SectionList from 'src/SectionList';
import QuickAdd from 'src/QuickAdd';
import moment from 'moment';
export default class CalendarPage extends React.Component {
state = { events: [], sections: [] };
constructor(props) {
super(props);
this.loadEvents();
}
loadEvents = async () => {
const response = await fetch(`/schedule/events?crns=${Cart.crns.join(',')}`);
const json = await response.json();
this.setState({ ...json });
Cart.crns = json.sections.map(s => s.crn);
};
events = () => {
return this.state.events.filter(e => e.active).map(e => ({ ...e, start: moment(e.start).toDate(), end: moment(e.end).toDate() }));
};
toggleSection = crn => {
const events = this.state.events.map(e => ({ ...e, active: e.crn == crn ? !e.active : e.active }));
this.setState({ events });
};
removeAll = () => {
Cart.crns = [];
location.reload();
};
render() {
return (
<div>
<Calendar events={this.events()} />
{this.state.sections.length > 0 ? (
<div className="d-flex justify-content-between align-items-end">
<h2 className="mt-4">Your Schedule</h2>{' '}
<button type="button" onClick={this.removeAll} className="btn btn-danger mb-8">
Remove all sections
</button>
</div>
) : null}
<SectionList onClick={this.toggleSection} sections={this.state.sections} expanded={true} />
<QuickAdd loadCalendar={this.loadEvents} />
</div>
);
}
}
import React from 'react';
export default class Chevron extends React.Component {
constructor(props) {
super(props);
}
render() {
const base = { display: 'block', textAlign: 'center' };
return (
<div>
<div style={this.props.open ? { ...base } : { display: 'none' }}>
<p id="chevron-label" style={{ marginBottom: '4px', fontSize: '10px' }}>
Minimize
</p>
<i id="course-chevron" className="fas fa-chevron-up" />
</div>
<div style={this.props.open ? { display: 'none' } : { ...base }}>
<p id="chevron-label" style={{ marginBottom: '4px', fontSize: '10px' }}>
Expand
</p>
<i id="course-chevron" className="fas fa-chevron-down" />
</div>
</div>
);
}
}
import React from 'react';
import SectionList from 'src/SectionList';
export default class Course extends React.Component {
constructor(props) {
super(props);
this.state = { expanded: false, sections: [] };
}
async onClick() {
if (this.state.sections.length === 0) {
const resp = await fetch(`/api/course_sections?course_id=${this.props.id}`);
const json = await resp.json();
this.setState({ sections: json });
}
this.setState({ expanded: !this.state.expanded });
}
prereqs = () => {
if (this.props.prereqs) {
const [first, rest] = this.props.prereqs.split(':');
const [reqs, note] = rest.split('.');
return (
<p>
<strong>{first}</strong>
{reqs}
<sub>{note}</sub>
</p>
);
}
return <div />;
};
// <% first, rest = course.prereqs.split(':') %>
// <% prereqs, note = rest.split('.') %>
// <p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p>
render() {
const { id, subject, course_number, title, credits, description, url } = this.props;
return (