Merge pull request #1123 from zydtiger/refractor/ui

Refractor/UI

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/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";