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 frontend/src/App.js.oldfrontend/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 frontend/src/components/alert.tsxfrontend/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 …ontend/src/components/courseChildren.tsxfrontend/src/components/courseChildren.js renamed to frontend/src/components/courseChildren.tsx 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;