Release v5.8.1

package.json

@@ -9,6 +9,7 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
+    "@twemoji/api": "^15.1.0",
     "@types/lodash": "^4.14.178",
     "@types/twemoji": "^13.1.2",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
@@ -58,7 +59,7 @@
     "lodash": "^4.17.21",
     "loose-envify": "^1.4.0",
     "moment": "^2.29.4",
-    "node-sass": "^7.0.0",
+    "node-sass": "^9.0.0",
     "normalizr": "^3.6.1",
     "postcss-loader": "^2.1.6",
     "prop-types": "^15.8.1",
@@ -98,7 +99,6 @@
     "streamify": "^0.2.9",
     "style-loader": "^0.17.0",
     "tinycolor2": "^1.4.2",
-    "twemoji": "^14.0.2",
     "ua-parser-js": "^1.0.33",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^0.5.8",
@@ -159,7 +159,6 @@
     "jest": "^27.2.5",
     "jest-environment-jsdom": "^27.4.4",
     "nock": "^13.2.1",
-    "node-sass": "^7.0.0",
     "prettier": "^2.5.1",
     "regenerator-runtime": "^0.10.5",
     "sass-loader": "^6.0.7",

semesterly/templates/about.html

@@ -136,22 +136,11 @@ <h2>Our Current Team</h2>
 					</div>
 				</div>
 				<div class="grid cf">
+
 					<div class="col-1-3 member">
-						<div class="circular" style="background-image: url(/static/img/jackywang.jpeg)"></div>
-						<h4 class="name">Jacky Wang</h4>
-						<h3>Team Lead</h3>
-						<h3>JHU '25</h3>
-						<div class="social">
-							<a href="https://www.jackywang.us/"><i class="fa fa-fw fa-link fa-2x"></i></a>
-							<a href="https://github.com/JiaqiWang18"><i class="fab fa-github fa-2x"></i></a>
-							<a href="https://www.linkedin.com/in/jiaqi-jacky-wang-y/"><i
-									class="fab fa-linkedin fa-2x"></i></a>
-						</div>
-					</div>
-					<div class="col-1-3 member">
-						<div class="circular" style="background-image: url(/static/img/spencerhuang.png)"></div>
+						<div class="circular" style="background-image: url(/static/img/shuang126_pfp.jpg)"></div>
 						<h4 class="name">Spencer Huang</h4>
-						<h3>Software Engineer - FullStack</h3>
+						<h3>Team Lead</h3>
 						<h3>JHU '26</h3>
 						<div class="social">
 							<a href="https://github.com/spencerckhuang"><i class="fab fa-github fa-2x"></i></a>
@@ -181,7 +170,7 @@ <h3>JHU '26</h3>
 									class="fab fa-linkedin fa-2x"></i></a>
 						</div>
 					</div>
-          <div class="col-1-3 member">
+					<div class="col-1-3 member">
 						<div class="circular" style="background-image: url(/static/img/tiger.jpg)"></div>
 						<h4 class="name">Tiger Ding</h4>
 						<h3>Software Engineer - FullStack</h3>
@@ -192,6 +181,17 @@ <h3>JHU '27</h3>
 									class="fab fa-linkedin fa-2x"></i></a>
 						</div>
 					</div>
+					<div class="col-1-3 member">
+						<div class="circular" style="background-image: url(/static/img/ericzhao.jpg)"></div>
+						<h4 class="name">Eric Zhao</h4>
+						<h3>Software Engineer - FullStack</h3>
+						<h3>JHU '26</h3>
+						<div class="social">
+							<a href="https://github.com/ericzhy0815"><i class="fab fa-github fa-2x"></i></a>
+							<a href="https://www.linkedin.com/in/hongyu-zhao815/"><i 
+									class="fab fa-linkedin fa-2x"></i></a>
+						</div>
+					</div>
 				</div>
 				<div class="grid cf">
 					<div class="col-1-1">
@@ -229,6 +229,18 @@ <h3>Sr. Software Engineer - IT@JH</h3>
 					<div class="col-1-1">
 						<h2>Our Former Team Members</h2>
 					</div>
+					<div class="col-1-3 member">
+						<div class="circular" style="background-image: url(/static/img/jackywang.jpeg)"></div>
+						<h4 class="name">Jacky Wang</h4>
+						<h3>Former Team Lead</h3>
+						<h3>JHU '25</h3>
+						<div class="social">
+							<a href="https://www.jackywang.us/"><i class="fa fa-fw fa-link fa-2x"></i></a>
+							<a href="https://github.com/JiaqiWang18"><i class="fab fa-github fa-2x"></i></a>
+							<a href="https://www.linkedin.com/in/jiaqi-jacky-wang-y/"><i
+									class="fab fa-linkedin fa-2x"></i></a>
+						</div>
+					</div>
 					<div class="col-1-4 member">
 						<div class="circular" style="background-image: url(/static/img/jamesswang.jpg)"></div>
 						<h4 class="name">James Wang</h4>

static/js/redux/__tests__/modals/__snapshots__/course_modal_body.test.jsx.snap

@@ -177,7 +177,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="🔥"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f525.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f525.png"
                 />
               </div>
               <div
@@ -223,7 +223,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="😍"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f60d.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f60d.png"
                 />
               </div>
               <div
@@ -269,7 +269,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="💩"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f4a9.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f4a9.png"
                 />
               </div>
               <div
@@ -315,7 +315,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="😐"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f610.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f610.png"
                 />
               </div>
               <div
@@ -361,7 +361,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="😴"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f634.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f634.png"
                 />
               </div>
               <div
@@ -407,7 +407,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="😩"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f629.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f629.png"
                 />
               </div>
               <div
@@ -453,7 +453,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="💯"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f4af.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f4af.png"
                 />
               </div>
               <div
@@ -499,7 +499,7 @@ exports[`CourseModalBody correctly renders 1`] = `
                   alt="🤓"
                   class="emoji"
                   draggable="false"
-                  src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f913.png"
+                  src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/72x72/1f913.png"
                 />
               </div>
               <div

static/js/redux/constants/endpoints.jsx → static/js/redux/constants/endpoints.ts

@@ -12,59 +12,81 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 */
 
+import { FriendRequest, User } from "../ui/modals/PeerModalComponents/Types";
+import { Course, Semester, Slot, Timetable } from "./commonTypes";
+
 /* server endpoints */
 export const getLogiCalEndpoint = () => "/user/log_ical/";
-export const getCourseInfoEndpoint = (courseId, semester) =>
+export const getCourseInfoEndpoint = (courseId: Course["id"], semester: string) =>
   `/courses/${semester}/id/${courseId}/`;
-export const getCourseSearchEndpoint = (query, semester, page = 1, limit = 6) =>
-  `/search/${semester}/${query}/?page=${page}&limit=${limit}`;
+export const getCourseSearchEndpoint = (
+  query: string,
+  semester: string,
+  page = 1,
+  limit = 6
+) => `/search/${semester}/${query}/?page=${page}&limit=${limit}`;
 export const getTimetablesEndpoint = () => "/timetables/";
-export const getLoadSavedTimetablesEndpoint = (semester) =>
+export const getLoadSavedTimetablesEndpoint = (semester: Semester) =>
   `/user/timetables/${semester.name}/${semester.year}/`;
 export const getSaveTimetableEndpoint = () => "/user/timetables/";
 export const getPersonalEventEndpoint = () => "/user/events/";
-export const getDeleteTimetableEndpoint = (semester, name) =>
+export const getDeleteTimetableEndpoint = (semester: Semester, name: string) =>
   `/user/timetables/${semester.name}/${semester.year}/${name}/`;
-export const getTimetablePreferencesEndpoint = (id) =>
+export const getTimetablePreferencesEndpoint = (id: Timetable["id"]) =>
   `/user/timetables/${id}/preferences/`;
 export const getSaveSettingsEndpoint = () => "/user/settings/";
-export const getClassmatesEndpoint = (semester, courses) =>
+export const getClassmatesEndpoint = (
+  semester: Semester,
+  courses: Array<Slot["course"]>
+) =>
   `/user/classmates/${semester.name}/${semester.year}?${$.param({
     course_ids: courses,
   })}`;
-export const getClassmatesInCourseEndpoint = (school, semester, courseId) =>
-  `/course_classmates/${school}/${semester}/id/${courseId}/`;
-export const getMostClassmatesCountEndpoint = (semester, courses) =>
+export const getClassmatesInCourseEndpoint = (
+  school: string,
+  semester: string,
+  courseId: Course["id"]
+) => `/course_classmates/${school}/${semester}/id/${courseId}/`;
+export const getMostClassmatesCountEndpoint = (
+  semester: Semester,
+  courses: Array<Slot["course"]>
+) =>
   `/user/classmates/${semester.name}/${semester.year}?${$.param({
     course_ids: courses,
     count: true,
   })}`;
-export const getFriendsEndpoint = (semester) =>
+export const getFriendsEndpoint = (semester: Semester) =>
   `/user/classmates/${semester.name}/${semester.year}/`;
 
 // Friends endpoints
 export const getFetchFriendsEndpointEndpoint = () => `/friends/`;
-export const getRemoveFriendEndpoint = (userId) => `/friends/remove/${userId}`;
-export const getSearchFriendsEndpoint = (query) => `/friends/search/${query}`;
-export const getSendFriendRequestEndpoint = (userId) =>
+export const getRemoveFriendEndpoint = (userId: User["userId"]) =>
+  `/friends/remove/${userId}`;
+export const getSearchFriendsEndpoint = (query: string) => `/friends/search/${query}`;
+export const getSendFriendRequestEndpoint = (userId: User["userId"]) =>
   `/friends/send_request/${userId}`;
 export const getFriendRequestsSentEndpoint = () => `/friends/requests_sent`;
 export const getFriendRequestsReceivedEndpoint = () => `friends/requests_received`;
-export const getAcceptFriendRequestEndpoint = (friendRequestId) =>
-  `/friends/accept_request/${friendRequestId}`;
-export const getRejectFriendRequestEndpoint = (friendRequestId) =>
-  `/friends/reject_request/${friendRequestId}`;
+export const getAcceptFriendRequestEndpoint = (
+  friendRequestId: FriendRequest["friendRequestId"]
+) => `/friends/accept_request/${friendRequestId}`;
+export const getRejectFriendRequestEndpoint = (
+  friendRequestId: FriendRequest["friendRequestId"] | string
+) => `/friends/reject_request/${friendRequestId}`;
 
-export const getSchoolInfoEndpoint = (school) => `/school/${school}/`;
+export const getSchoolInfoEndpoint = (school: string) => `/school/${school}/`;
 export const getReactToCourseEndpoint = () => "/user/reactions/";
 export const getRequestShareTimetableLinkEndpoint = () => "/timetables/links/";
 export const acceptTOSEndpoint = () => "/tos/accept/";
-export function getCourseShareLinkFromModal(code, semester) {
+export function getCourseShareLinkFromModal(
+  code: Course["code"] | number,
+  semester: Semester
+) {
   return `/course/${encodeURIComponent(code)}/${semester.name}/${semester.year}`;
 }
 // TODO: ${window.location.href.split('/')[2]} insert above ^
 
-export function getCourseShareLink(code, semester) {
+export function getCourseShareLink(code: Course["code"] | number, semester: Semester) {
   return `/course/${encodeURIComponent(code)}/${semester.name}/${semester.year}`;
 }
 

static/js/redux/constants/schools.jsx → static/js/redux/constants/schools.ts

@@ -25,7 +25,7 @@ export const VALID_SCHOOLS = [
   "salisbury",
 ];
 
-export const getSchoolSpecificInfo = (school) => {
+export const getSchoolSpecificInfo = (school: string) => {
   switch (school) {
     case "uoft":
       return {

static/js/redux/ui/Calendar.tsx

@@ -258,7 +258,7 @@ const Calendar = (props: CalendarProps) => {
 
   const screenShotButton = props.registrarSupported ? (
     <div className="cal-btn-wrapper">
-      <Tooltip title={<Typography fontSize={12}>Screeshot</Typography>}>
+      <Tooltip title={<Typography fontSize={12}>Screenshot</Typography>}>
         <button
           type="submit"
           form="form1"

static/js/redux/ui/SearchResult.tsx

@@ -141,16 +141,24 @@ const SearchResult = (props: SearchResultProps) => {
 };
 
 type AreaBubbleProps = { areas: string[] };
-export const AreaBubble = ({ areas }: AreaBubbleProps) =>
-  areas.length > 0 ? (
+export const AreaBubble = ({ areas }: AreaBubbleProps) => {
+  const isValidArea = (rawAreaSingle: string): boolean => {
+    const validAreas = ["H", "S", "N", "E", "Q", "writing"];
+    return validAreas.includes(rawAreaSingle);
+  };
+
+  const validAreas = areas.filter((areaCandidate) => isValidArea(areaCandidate));
+
+  return validAreas.length > 0 ? (
     <div className="areas">
-      {areas.map((area) => (
+      {validAreas.map((area) => (
         <div className={`bubble ${area}`} key={area}>
           {area}
         </div>
       ))}
     </div>
   ) : null;
+};
 
 type WritingIntensiveProps = { isWritingIntensive: string };
 export const WritingIntensive = ({ isWritingIntensive }: WritingIntensiveProps) =>

static/js/redux/ui/SideScroller.tsx

@@ -0,0 +1,47 @@
+/*
+Copyright (C) 2017 Semester.ly Technologies, LLC
+
+Semester.ly is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Semester.ly is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+*/
+
+import React, { useState } from "react";
+
+interface SideScrollerProps {
+  content: JSX.Element[];
+  navItems: JSX.Element[];
+}
+
+function SideScroller(props: SideScrollerProps) {
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  let navItems = null;
+  if (props.navItems) {
+    const navs = [];
+
+    for (let i = 0; i < props.navItems.length; i++) {
+      const cls = activeSlide === i ? " nav-item-active" : "";
+      navs.push(
+        <span key={i} className={`nav-item${cls}`} onClick={() => setActiveSlide(i)}>
+          {props.navItems[i]}
+        </span>
+      );
+    }
+    navItems = <div className="scroll-nav">{navs}</div>;
+  }
+  return (
+    <div>
+      {navItems}
+      {props.content[activeSlide]}
+    </div>
+  );
+}
+
+export default SideScroller;

static/js/redux/ui/evaluation_list.jsx

@@ -15,7 +15,7 @@ GNU General Public License for more details.
 import PropTypes from "prop-types";
 import React from "react";
 import Evaluation from "./evaluation";
-import SideScroller from "./side_scroller";
+import SideScroller from "./SideScroller";
 import { SEMESTER_RANKS } from "../constants/constants";
 import * as SemesterlyPropTypes from "../constants/semesterlyPropTypes";
 

static/js/redux/ui/modals/SignupModal.tsx

@@ -13,7 +13,7 @@ GNU General Public License for more details.
 */
 
 import React from "react";
-import twemoji from "twemoji";
+import twemoji from "@twemoji/api";
 // @ts-ignore
 import renderHTML from "react-render-html";
 import { useAppDispatch, useAppSelector } from "../../hooks";