migrate to typescript

Author: Sam-Cordry

backend/Cargo.lock

@@ -3,21 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "babel-plugin-macros": "^3.1.0",
     "cors": "^2.8.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
     "rsuite": "^5.64.0",
+    "typescript": "^5.5.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/package-lock.json

@@ -0,0 +1,27 @@
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Index from "./pages/index";
+import Generate from "./pages/generate";
+import Browse from "./pages/browse";
+import Search from "./pages/search";
+import Header from './components/header';
+import Footer from './components/footer';
+import React from "react";
+
+function App() {
+  return (
+    <Router>
+      <div id="superContainer">
+        <Header />
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="/generate" element={<Generate />} />
+          <Route path="/browse" element={<Browse />} />
+          <Route path="/search" element={<Search />} />
+        </Routes>
+        <Footer />
+      </div>
+    </Router>
+  );
+}
+
+export default App;

frontend/package.json

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
 import React, { useState } from "react";
 
-const Alert = (props) => {
+const Alert = (props: any) => {
   const [hidden, setHidden] = useState(false);
   return (
     <div className="alert alert-info" hidden={hidden}>

frontend/src/App.js renamed to frontend/src/App.js.old

@@ -1,8 +1,8 @@
-const getCourseChildren = async (searchData, setLoading) => {
+const getCourseChildren = async (searchData: any, setLoading: any) => {
     setLoading(true);
     return await fetch("/api/generate/getCourseOpts", {
         method: "POST",
-        headers: {'Content-Type':'application/json'},
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(searchData),
     }).then((res) => {
         if (res.status === 200) {
@@ -20,4 +20,4 @@ const getCourseChildren = async (searchData, setLoading) => {
     });
 }
 
-export default getCourseChildren;
+export default getCourseChildren;

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from "react";
 
 const CourseCart = () => {
   return (
@@ -19,7 +20,7 @@ const CourseCart = () => {
                 <button
                   type="button"
                   className="btn btn-danger pull-right"
-                  disabled="disabled"
+                  disabled={true}
                 >
                   <FontAwesomeIcon icon={icon({ name: "minus" })} />
                   <FontAwesomeIcon icon={icon({ name: "shopping-cart" })} /> All
@@ -33,16 +34,13 @@ const CourseCart = () => {
               type="button"
               className="btn btn-xs btn-primary hidden-md hidden-lg pull-right"
             >
-              <FontAwesomeIcon icon={icon({ name: "angle-down" })} style={null} />
+              <FontAwesomeIcon icon={icon({ name: "angle-down" })} />
             </button>
           </h2>
         </div>
-        <div
-          className="panel-body course-cart-window hidden-xs hidden-sm"
-          style={null}
-        >
+        <div className="panel-body course-cart-window hidden-xs hidden-sm">
           <div className="animate-show-hide">
-            <div className="alert" style={null}>
+            <div className="alert">
               Add courses to your cart and make a schedule with them. They will
               show up here.
             </div>

frontend/src/components/alert.js renamed to frontend/src/components/alert.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import React from 'react';
 
 const Footer = () => {
   return (

frontend/src/components/courseChildren.js renamed to frontend/src/components/courseChildren.tsx

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom'
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from 'react';
 
 const Header = () => {
   return (
@@ -29,17 +30,17 @@ const Header = () => {
           <ul className="nav navbar-nav">
             <li ui-sref-active="active">
               <Link to="/generate">
-                <FontAwesomeIcon icon={icon({name: "calendar", style: 'regular'})}/> Make a Schedule
+                <FontAwesomeIcon icon={icon({ name: "calendar", style: 'regular' })} /> Make a Schedule
               </Link>
             </li>
             <li ui-sref-active="active">
               <Link to="/browse">
-                <FontAwesomeIcon icon={icon({name: "list"})}/> Browse Courses
+                <FontAwesomeIcon icon={icon({ name: "list" })} /> Browse Courses
               </Link>
             </li>
             <li ui-sref-active="active">
               <Link to="/search">
-                <FontAwesomeIcon icon={icon({name: "search"})}/> Search Courses
+                <FontAwesomeIcon icon={icon({ name: "search" })} /> Search Courses
               </Link>
             </li>
           </ul>
@@ -49,4 +50,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Header;

frontend/src/components/coursecart.js renamed to frontend/src/components/coursecart.tsx

@@ -1,9 +1,10 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from "react";
 
-function minutesToTime(mins) {
-  var h = Math.floor(mins / 60);
-  var m = mins % 60;
+function minutesToTime(mins: number) {
+  var h: number = Math.floor(mins / 60);
+  var m: string = `${mins % 60}`;
   var ampm = "am";
   if (h === 24) {
     h = 12;
@@ -14,14 +15,14 @@ function minutesToTime(mins) {
   if (h === 0) {
     h = 12;
   }
-  if (m < 10) {
+  if (mins % 60 < 10) {
     m = "0" + m;
   }
   return `${h}:${m} ${ampm}`;
 }
 
 const NoCourse = () => {
-  let times = [];
+  let times: Array<React.JSX.Element> = [];
   for (let min = 0; min <= 1440; min += 30) {
     times.push(
       <option label={minutesToTime(min)} value={`number:${min}`}>
@@ -37,7 +38,7 @@ const NoCourse = () => {
           <div className="col-xs-12">
             <div className="form-group inline-sm">
               <select id="options-startTime" className="form-control">
-                <option value="" className="" disabled selected="selected">
+                <option value="" className="" disabled selected={true}>
                   Start
                 </option>
                 {times}
@@ -46,7 +47,7 @@ const NoCourse = () => {
             <div className="form-group inline-sm">&nbsp;to&nbsp;</div>
             <div className="form-group inline-sm">
               <select id="options-endTime" className="form-control">
-                <option value="" className="" disabled selected="selected">
+                <option value="" className="" disabled selected={true}>
                   End
                 </option>
                 {times}

frontend/src/components/footer.js renamed to frontend/src/components/footer.tsx

@@ -1,9 +1,10 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from "react";
 
-function minutesToTime(mins) {
-  var h = Math.floor(mins / 60);
-  var m = mins % 60;
+function minutesToTime(mins: number) {
+  var h: number = Math.floor(mins / 60);
+  var m: string = `${mins % 60}`;
   var ampm = "am";
   if (h === 24) {
     h = 12;
@@ -14,14 +15,14 @@ function minutesToTime(mins) {
   if (h === 0) {
     h = 12;
   }
-  if (m < 10) {
+  if (mins % 60 < 10) {
     m = "0" + m;
   }
   return `${h}:${m} ${ampm}`;
 }
 
 const NonCourse = () => {
-  let times = [];
+  let times: Array<React.JSX.Element> = [];
   for (let min = 0; min <= 1440; min += 30) {
     times.push(
       <option label={minutesToTime(min)} value={`number:${min}`}>
@@ -34,7 +35,7 @@ const NonCourse = () => {
       <div className="col-lg-2 col-md-12">
         <div className="container-fluid">
           <input
-            autocomplete="off"
+            autoComplete="off"
             id="nonCourses0"
             className="form-control"
             type="text"
@@ -49,7 +50,7 @@ const NonCourse = () => {
           <div className="col-xs-12">
             <div className="form-group inline-sm">
               <select id="options-startTime" className="form-control">
-                <option value="" className="" disabled selected="selected">
+                <option value="" className="" disabled selected={true}>
                   Start
                 </option>
                 {times}
@@ -58,7 +59,7 @@ const NonCourse = () => {
             <div className="form-group inline-sm">&nbsp;to&nbsp;</div>
             <div className="form-group inline-sm">
               <select id="options-endTime" className="form-control">
-                <option value="" className="" disabled selected="selected">
+                <option value="" className="" disabled selected={true}>
                   End
                 </option>
                 {times}

frontend/src/components/header.js renamed to frontend/src/components/header.tsx

@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from "react";
 
 const Reset = () => {
     return (

frontend/src/components/noCourse.js renamed to frontend/src/components/noCourse.tsx

@@ -3,13 +3,14 @@ import getCourseChildren from "../components/courseChildren";
 import SectionOptions from "../components/sectionOptions";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from "react";
 
 const EnterCourse = (
   <button
     title="Shortcut: Ctrl + Alt + Down"
     type="button"
     className="btn btn-primary btn-block"
-    disabled="disabled"
+    disabled={true}
   >
     Please enter a course
   </button>
@@ -19,7 +20,7 @@ const NoMatches = (
   <button className="btn btn-block course-error alert alert-danger alert-sm">No Courses Match</button>
 )
 
-const CourseResults = (props) => {
+const CourseResults = (props: any) => {
   let action = props.opened ? "Hide" : "Show";
   let openedIcon = props.opened ? icon({ name: "angle-up" }) : icon({ name: "angle-down" })
   return (
@@ -33,14 +34,14 @@ const CourseResults = (props) => {
   );
 };
 
-const ScheduleCourse = (props) => {
+const ScheduleCourse = (props: any) => {
   const [courseData, setCourseData] = useState("");
   const [courseStatus, setCourseStatus] = useState(EnterCourse);
   const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [loadIcon, setLoadIcon] = useState(<FontAwesomeIcon icon={icon({ name: "times" })} />);
 
-  const updateCourse = (e) => {
+  const updateCourse = (e: any) => {
     setCourseData(e.target.value);
   };
 
@@ -91,7 +92,7 @@ const ScheduleCourse = (props) => {
                 <input
                   autoCapitalize="off"
                   autoCorrect="off"
-                  spellCheck="off"
+                  spellCheck="false"
                   autoComplete="off"
                   id="courses1"
                   className="form-control searchField mousetrap"

frontend/src/components/nonCourse.js renamed to frontend/src/components/nonCourse.tsx

@@ -1,19 +1,20 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import React from "react";
 
-const numToDay = {
-  0: "Sun",
-  1: "Mon",
-  2: "Tue",
-  3: "Wed",
-  4: "Thu",
-  5: "Fri",
-  6: "Sat",
-};
+const numToDay = [
+  "Sun",
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat",
+];
 
-function minutesToTime(mins) {
+function minutesToTime(mins: number) {
   var h = Math.floor(mins / 60);
-  var m = mins % 60;
+  var m: string = `${mins % 60}`;
   var ampm = "am";
   if (h === 24) {
     h = 12;
@@ -24,16 +25,16 @@ function minutesToTime(mins) {
   if (h === 0) {
     h = 12;
   }
-  if (m < 10) {
+  if (mins % 60 < 10) {
     m = "0" + m;
   }
   return `${h}:${m}${ampm}`;
 }
 
-const sectionOptions = (props) => {
-  let out = [];
+const sectionOptions = (props: any) => {
+  let out: Array<React.JSX.Element> = [];
   for (let i = 0; i < props.options.length; i++) {
-    let days = props.options[i].times.map((time) => numToDay[time.day]).toString();
+    let days = props.options[i].times.map((time: { day: number }) => numToDay[time.day]).toString();
     let start = days.length > 0 ? minutesToTime(props.options[i].times[0].start) : "N/A";
     let end = days.length > 0 ? minutesToTime(props.options[i].times[0].end) : "N/A";
     out.push(
@@ -71,11 +72,11 @@ const sectionOptions = (props) => {
                 <div ng-init="parsedTimes = (section.times | parseSectionTimes)">
                   <div
                     ng-repeat="time in parsedTimes"
-                    style={{ "font-size": "small" }}
+                    style={{ fontSize: "small" }}
                     className="ng-binding ng-scope"
                   >
                     {days}{" "}
-                    <span style={{ "white-space": "nowrap" }} className="ng-binding">
+                    <span style={{ whiteSpace: "nowrap" }} className="ng-binding">
                       {days.length > 0 ? `${start} - ${end}` : ""}
                     </span>
                   </div>