Will-PR

package.json

@@ -59,6 +59,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@eslint/js": "^9.17.0",
     "@svgr/webpack": "^6.2.1",
+    "@types/react-dom": "^19.1.3",
     "daisyui": "^5.0.28",
     "eslint-config-react-app": "^7.0.1",
     "eslint-define-config": "^2.1.0",

src/declarations.d.ts

@@ -0,0 +1,43 @@
+// Declarations file for fixing certain type errors
+
+declare module "*.webp" {
+    const value: string;
+    export default value;
+}
+
+declare type PagesState = {
+    pages: string[];
+    activePage: string;
+}
+
+// FOr about section idk what this is tbh
+declare interface AboutItem {
+    title: string;
+    description: string;
+}
+
+// This the result returned from 'packageOpportunityCard' in opportunity_routes.py in backend
+declare interface OpportunityCardData {
+    "id": string,
+    "title": string,
+    "professor": string,
+    "season": stringr,
+    "location": string,
+    "year": string,
+}
+
+// This the result returned from 'packageIndividualOpportunity' in opportunity_routes.py in backend
+declare interface OpportunityData {
+    "id": string;
+    "name": string;
+    "description": string;
+    "recommended_experience": string;
+    "author": string;
+    "authorProfile": string;
+    "department": string;
+    "pay": string;
+    "credits"?: string;
+    "semester": string
+    "application_due": string;
+    "recommended_class_years": string;
+}

src/opportunities/components/AboutSection.js → src/opportunities/components/AboutSection.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import AboutSectionElement from "./AboutSectionElement";
 
-const AboutSection = ({ aboutSection }) => {
+interface AboutSectionProps {
+  aboutSection: AboutItem[];
+}
+
+const AboutSection = ({ aboutSection }: AboutSectionProps) => {
   let i = 0;
 
   return (

src/opportunities/components/AboutSectionElement.js → src/opportunities/components/AboutSectionElement.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const AboutSectionElement = ({ title, description }) => {
+const AboutSectionElement = ({ title, description }: { title: string, description: string }) => {
   return (
     <div className="about-head">
       <h5 className="about-title">{title}</h5>

src/opportunities/components/HorizontalIconButton.tsx

@@ -1,7 +1,13 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-const HorizontalIconButton = ({ children, onClick, icon, special }) => {
+interface HorizontalIconButtonProps {
+  children?: React.ReactNode;
+  onClick: (arg?: React.ReactNode) => void;
+  icon: React.ReactNode;
+  special: boolean;
+}
+
+const HorizontalIconButton = ({ children, onClick, icon, special }: HorizontalIconButtonProps) => {
   return (
     <div
       className={`${special && "font-medium"} ${
@@ -21,11 +27,4 @@ const HorizontalIconButton = ({ children, onClick, icon, special }) => {
   );
 };
 
-HorizontalIconButton.propTypes = {
-  children: PropTypes.node,
-  onClick: PropTypes.func.isRequired,
-  icon: PropTypes.node,
-  special: PropTypes.bool,
-}
-
 export default HorizontalIconButton;

src/opportunities/components/JobDescription.js → src/opportunities/components/JobDescription.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const JobDescription = ({ title, description }) => {
+const JobDescription = ({ title, description }: { title?: string, description: string }) => {
   return (
     <article className="job-desc-header">
       <div className="job-desc-title">{title || "Role Description"}</div>

src/opportunities/components/JobDetails.js → src/opportunities/components/JobDetails.tsx

@@ -3,6 +3,16 @@ import AboutSection from "./AboutSection";
 import JobHeader from "./JobHeader";
 import JobDescription from "./JobDescription";
 
+interface JobDetailsProps {
+  name: string;
+  author: string;
+  department: string;
+  description: string;
+  authorProfile: string;
+  aboutSection: AboutItem[];
+  recommended_experience: string;
+}
+
 const JobDetails = ({
   name,
   author,
@@ -11,7 +21,7 @@ const JobDetails = ({
   authorProfile,
   aboutSection,
   recommended_experience,
-}) => {
+}: JobDetailsProps) => {
   return (
     <article className="job-details-header">
       <JobHeader

src/opportunities/components/JobHeader.js → src/opportunities/components/JobHeader.tsx

@@ -1,7 +1,14 @@
 import React from "react";
 import Avatar from "../../shared/components/UIElements/Avatar.tsx";
 
-const JobHeader = ({ title, img, author, department }) => {
+interface JobHeaderProps {
+  title: string;
+  img: string;
+  author: string;
+  department: string;
+}
+
+const JobHeader = ({ title, img, author, department }: JobHeaderProps) => {
   return (
     <section className="job-header-header">
       <h2 className="job-header-title">{title}</h2>

src/opportunities/components/JobInteractionButton.js → src/opportunities/components/JobInteractionButton.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 
-const JobInteractionButton = ({ className, special, onClick, children }) => {
+interface JobInteractionButtonProps {
+  className: string;
+  special: string;
+  onClick: () => void
+  children: React.ReactNode
+}
+
+const JobInteractionButton = ({ className, special, onClick, children }: JobInteractionButtonProps) => {
   return (
     <div className={`${className}`}>
       <button

src/opportunities/components/JobPost.js → src/opportunities/components/JobPost.tsx

@@ -1,5 +1,16 @@
 import React from "react";
 
+interface JobPostProps {
+  title: string;
+  professor: string;
+  id: string;
+  location: string;
+  season: string;
+  year: string;
+  onClick: (id: string) => void;
+  active: boolean;
+}
+
 const JobPost = ({
   title,
   professor,
@@ -9,7 +20,7 @@ const JobPost = ({
   year,
   onClick,
   active,
-}) => {
+}: JobPostProps) => {
   return (
     <div className="job-post-header">
       <div className={`${active && "border-l-2 border-l-purple-600"}`} />

src/opportunities/components/JobsNavigation.js → src/opportunities/components/JobsNavigation.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import { useLocation } from "react-router";
 
-const JobsNavigation = ({ jobPage, switchPage }) => {
+interface JobsNavigationProps {
+  jobPage: boolean;
+  switchPage: () => void;
+}
+
+const JobsNavigation = ({ jobPage, switchPage }: JobsNavigationProps) => {
   const path = useLocation().pathname;
 
   const activeLink = "active-link";
   const normalLink = "normal-link hover:border-b-2 hover:text-black";

src/opportunities/components/Posts.tsx

@@ -117,7 +117,7 @@ const Posts = () => {
   }, []);
 
 
-  const fetchOpportunities = async () => {
+  const fetchOpportunities = useCallback(async () => {
     const queryParams = new URLSearchParams(
       Object.entries(opportunityState.filters.filterMap)
         .filter(([, value]) => {
@@ -152,11 +152,11 @@ const Posts = () => {
       console.error("Error fetching opportunities:", error);
       dispatch({ type: "SET_OPPORTUNITIES", opportunities: [] });
     }
-  };
+  }, [opportunityState.filters.filterMap, dispatch]);
 
   useEffect(() => {
     fetchOpportunities();
-  }, [opportunityState.filters.filterMap]);
+  }, [fetchOpportunities]);
 
   return (
     <section>

src/opportunities/components/SmallTextButton.tsx

@@ -1,7 +1,13 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-const SmallTextButton = ({ children, onClick, special, className }) => {
+interface SmallTextButtonProps {
+  children: React.ReactNode;
+  onClick: () => void;
+  special: boolean;
+  className: string;
+}
+
+const SmallTextButton = ({ children, onClick, special, className }: SmallTextButtonProps) => {
   return (
     <div className={`${className}`}>
       <button
@@ -16,11 +22,4 @@ const SmallTextButton = ({ children, onClick, special, className }) => {
   );
 };
 
-SmallTextButton.propTypes = {
-  children: PropTypes.node,
-  onClick: PropTypes.func.isRequired,
-  special: PropTypes.bool,
-  className: PropTypes.string,
-}
-
 export default SmallTextButton;

src/opportunities/pages/IndividualPost.tsx

@@ -6,7 +6,7 @@ import { useEffect } from "react";
 const IndividualPost = () => {
   const { postID } = useParams();
 
-  const [details, setDetails] = useState("Searching");
+  const [details, setDetails] = useState<string | OpportunityData>("Searching");
 
   const fetchOpportunities = async () => {
     // Consider moving the base URL to a configuration
@@ -31,7 +31,7 @@ const IndividualPost = () => {
 
   useEffect(() => {
     findDetails();
-  }, []);
+  });
 
   return (
     <div>
@@ -40,7 +40,7 @@ const IndividualPost = () => {
       ) : details === "Nothing found" ? (
         <p>No post found</p>
       ) : (
-        <JobDetails {...details} />
+        <JobDetails {...details as OpportunityData} />
       )}
     </div>
   );

src/shared/components/Checkbox.tsx

@@ -53,7 +53,7 @@ export default function CheckBox({
                       {...formHook}
                       id={item}
                       className={type === "radio" ? "radio" : "checkbox"}
-                      defaultChecked={(name === "semesters" && filters?.semesters?.includes(item)) || (name === "years" && filters?.years?.includes(item)) || (name === "credits" && filters?.credits?.includes(item) ? true : false)}
+                      defaultChecked={(name === "semesters" && filters?.semesters?.includes(item)) || (name === "years" && filters?.years?.includes(Number(item))) || (name === "credits" && filters?.credits?.includes(item) ? true : false)}
                     />
                   </label>
                 </div>

src/shared/components/Profile/EditInformation.js → src/shared/components/Profile/EditInformation.tsx

@@ -1,11 +1,31 @@
 import React from "react";
-import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { useEffect } from "react";
 import Input from "../../../staff/components/Input";
 
-const EditInformation = ({className, id, name, department, researchCenter, description, email, role, image }) => {
-  const submitHandler = (data) => {
+interface EditInformationProps {
+  className?: string;
+  id: string;
+  name: string;
+  department: string;
+  researchCenter: string;
+  description: string;
+  email: string;
+  role: string;
+  image: string;
+}
+
+interface FormType {
+  id: string,
+  name: string,
+  email: string,
+  role: string,
+  description: string;
+  department: string;
+  researchCenter: string;
+}
+
+const EditInformation = ({className, id, name, department, researchCenter, description, email, role, image }: EditInformationProps) => {
+  const submitHandler = (data: FormType) => {
     console.log(data);
   };
 
@@ -25,7 +45,7 @@
     },
   });
 
-  var forms = (
+  const forms = (
     <form
       onSubmit={handleSubmit((data) => {
         submitHandler(data);

src/shared/components/Profile/OpportunityActionCard.js → src/shared/components/Profile/OpportunityActionCard.tsx

@@ -1,6 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
+interface OpportunityActionCardProps {
+  editPath: string;
+  title: string;
+  body: React.ReactNode;
+  id: string;
+  activeStatus: string;
+  changeActiveStatus: (id: string, activeStatus: string) => void;
+  deleteOpp: (id: string) => void;
+}
+
 const OpportunityActionCard = ({
   editPath,
   title,
@@ -9,7 +19,7 @@ const OpportunityActionCard = ({
   activeStatus,
   changeActiveStatus,
   deleteOpp,
-}) => {
+}: OpportunityActionCardProps) => {
   if (title.length > 100) {
     title = title.slice(0, 150) + " ...";
   }