Merge pull request #13 from asusoda/Migrate-to-TypeScript

⚠️ Migrated Codebase to TypeScript ⚠️
asusoda · Aug 2, 2024 · d788e7d · d788e7d
2 parents 7d6077c + 87eb22b
commit d788e7d
Show file tree

Hide file tree

Showing 30 changed files with 149 additions and 124 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/soda-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SoDA</title>
+    <title>SoDA - The Software Developer Association at ASU</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -24,8 +24,8 @@
     "tsparticles": "^3.5.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "daisyui": "^4.11.1",
     "eslint": "^8.57.0",
@@ -34,6 +34,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
+    "typescript": "^5.5.4",
     "vite": "^5.2.0"
   }
 }
diff --git a/src/App.jsx → src/App.tsx b/src/App.jsx → src/App.tsx
@@ -1,12 +1,11 @@
-import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
+import Footer from "./components/Footer";
 
 function App() {
   return (
     <>
       <Navbar />
-      {/* Edit Home at /pages/Home.jsx */}
       <Home />
       <Footer />
     </>

diff --git a/src/components/AllRightsReserved.jsx → src/components/AllRightsReserved.tsx b/src/components/AllRightsReserved.jsx → src/components/AllRightsReserved.tsx
diff --git a/src/components/AnimatedBackGround.jsx → src/components/AnimatedBackGround.tsx b/src/components/AnimatedBackGround.jsx → src/components/AnimatedBackGround.tsx
diff --git a/src/components/Button/RegularButton.jsx → src/components/Button/RegularButton.tsx b/src/components/Button/RegularButton.jsx → src/components/Button/RegularButton.tsx
@@ -1,6 +1,10 @@
 import PropTypes from "prop-types";
 
-function RegularButton({ name }) {
+type RegularButtonTypes = {
+  name: string;
+};
+
+function RegularButton({ name }: RegularButtonTypes) {
   return (
     <button type="button" className="regular-btn">
       <span className="btn-text">{name}</span>
@@ -9,7 +13,3 @@ function RegularButton({ name }) {
 }
 
 export default RegularButton;
-
-RegularButton.propTypes = {
-  name: PropTypes.string.isRequired,
-};
diff --git a/src/components/Button/RoundedButton.jsx → src/components/Button/RoundedButton.tsx b/src/components/Button/RoundedButton.jsx → src/components/Button/RoundedButton.tsx
@@ -1,6 +1,10 @@
 import PropTypes from "prop-types";
 
-function RoundedButton({ name }) {
+type RoundedButtonTypes = {
+  name: string;
+};
+
+function RoundedButton({ name }: RoundedButtonTypes) {
   return (
     <button type="button" className="rounded-btn">
       <span className="btn-text">{name}</span>

diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
diff --git a/src/components/EventsPhotoCarousel.jsx → src/components/EventsPhotoCarousel.tsx b/src/components/EventsPhotoCarousel.jsx → src/components/EventsPhotoCarousel.tsx
diff --git a/src/components/Footer.jsx → src/components/Footer.tsx b/src/components/Footer.jsx → src/components/Footer.tsx
@@ -1,5 +1,5 @@
-import AllRightsReserved from "../components/AllRightsReserved.jsx";
-import HorizontalLine from "../components/HorizontalLine.jsx";
+import AllRightsReserved from "./AllRightsReserved.js";
+import HorizontalLine from "./HorizontalLine.js";
 
 export default function Footer() {
   return (

diff --git a/src/components/Hero.jsx → src/components/Hero.tsx b/src/components/Hero.jsx → src/components/Hero.tsx
diff --git a/src/components/HorizontalLine.jsx → src/components/HorizontalLine.tsx b/src/components/HorizontalLine.jsx → src/components/HorizontalLine.tsx
diff --git a/src/components/Info/InfoCards.jsx → src/components/Info/InfoCards.tsx b/src/components/Info/InfoCards.jsx → src/components/Info/InfoCards.tsx
diff --git a/src/components/Info/InfoList.jsx → src/components/Info/InfoList.tsx b/src/components/Info/InfoList.jsx → src/components/Info/InfoList.tsx
@@ -1,3 +1,12 @@
+import { ReactNode } from "react";
+
+type ContentItemTypes = {
+  id: number;
+  title: string;
+  content: ReactNode;
+  button: string;
+};
+
 const content = [
   {
     id: 1,

diff --git a/src/components/Mobile/MobileNav.jsx → src/components/Mobile/MobileNav.tsx b/src/components/Mobile/MobileNav.jsx → src/components/Mobile/MobileNav.tsx
@@ -1,8 +1,12 @@
-import PropTypes from "prop-types";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { LiaTimesSolid } from "react-icons/lia";
 
-export default function MobileNav({ setIsOpen, isOpen }) {
+type setIsOpenTypes = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function MobileNav({ setIsOpen, isOpen }: setIsOpenTypes) {
   return (
     <nav className="w-full sm:hidden flex justify-between py-5 px-5 z-99999">
       <button onClick={() => setIsOpen(!isOpen)}>
@@ -18,8 +22,3 @@ export default function MobileNav({ setIsOpen, isOpen }) {
     </nav>
   );
 }
-
-MobileNav.propTypes = {
-  setIsOpen: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-};
diff --git a/src/components/Mobile/OpenedMobileNav.jsx → src/components/Mobile/OpenedMobileNav.tsx b/src/components/Mobile/OpenedMobileNav.jsx → src/components/Mobile/OpenedMobileNav.tsx
@@ -1,7 +1,10 @@
-import PropTypes from "prop-types";
 import { LiaTimesSolid } from "react-icons/lia";
 
-export default function OpenedMobileNav({ setIsOpen }) {
+type setIsOpenTypes = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function OpenedMobileNav({ setIsOpen }: setIsOpenTypes) {
   return (
     <section
       className="fixed inset-0 bg-opacity-50"
@@ -36,7 +39,3 @@ export default function OpenedMobileNav({ setIsOpen }) {
     </section>
   );
 }
-
-OpenedMobileNav.propTypes = {
-  setIsOpen: PropTypes.node.isRequired,
-};
diff --git a/src/components/Navbar.jsx → src/components/Navbar.tsx b/src/components/Navbar.jsx → src/components/Navbar.tsx
@@ -4,7 +4,7 @@ import MobileNav from "./Mobile/MobileNav";
 import RoundedButton from "./Button/RoundedButton";
 
 function Navbar() {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   return (
     <header className="navigation">
       {/* Primary Navigation - Hidden on mobile */}

diff --git a/src/components/NavigationBar.jsx → src/components/NavigationBar.tsx b/src/components/NavigationBar.jsx → src/components/NavigationBar.tsx
diff --git a/src/components/SocialMediaLinks.jsx → src/components/SocialMediaLinks.tsx b/src/components/SocialMediaLinks.jsx → src/components/SocialMediaLinks.tsx
diff --git a/src/components/Sponsors/SponsorsMarquee.jsx → src/components/Sponsors/SponsorsMarquee.tsx b/src/components/Sponsors/SponsorsMarquee.jsx → src/components/Sponsors/SponsorsMarquee.tsx
@@ -13,8 +13,23 @@ import workiva from "./logo/workiva.png";
 import generalmotors from "./logo/generalmotors.png";
 import americanexpress from "./logo/americanexpress.png";
 
+type SponsorLogo =
+  | "amazon"
+  | "statefarm"
+  | "drivetime"
+  | "deloitte"
+  | "goldmansachs"
+  | "garmin"
+  | "starbucks"
+  | "paypal"
+  | "godaddy"
+  | "americanexpress"
+  | "axosoft"
+  | "workiva"
+  | "generalmotors";
+
 function SponsorsMarquee() {
-  const logoMap = {
+  const logoMap: Record<SponsorLogo, string> = {
     amazon,
     statefarm,
     drivetime,
@@ -29,6 +44,7 @@ function SponsorsMarquee() {
     workiva,
     generalmotors,
   };
+
   return (
     <section id="sponsors">
       <h1 className="text-white font-bold text-2xl md:text-4xl text-center p-5">
@@ -39,21 +55,20 @@ function SponsorsMarquee() {
           {sponsors.map((element, index) => (
             <img
               key={index}
-              src={logoMap[element.name]}
+              src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
               className="w-[10vw] object-contain"
             />
           ))}
           {sponsors.map((element, index) => (
             <img
               key={index}
-              src={logoMap[element.name]}
+              src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
               className="w-[12vw] object-contain"
             />
           ))}
         </div>
-        {/* <div className="animate-marquee2 flex flex-row gap-8"></div> */}
       </section>
     </section>
   );

diff --git a/src/components/Stats/Statistics.jsx → src/components/Stats/Statistics.tsx b/src/components/Stats/Statistics.jsx → src/components/Stats/Statistics.tsx
@@ -16,21 +16,21 @@ const statistics = [
     label: "worth of pizza served",
     value: 22500,
     steps: 1000,
-    formatter: (x) => dollarFormatter.format(x),
+    formatter: (x: number) => <>{dollarFormatter.format(x)}</>,
   },
   {
     key: "sponsors",
     label: "Sponsors",
     value: 12,
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
   {
     key: "teams",
     label: "Committees",
     value: Object.keys(teams).length,
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
   {
     key: "officers",
@@ -39,14 +39,14 @@ const statistics = [
       return total + team.length;
     }, 0),
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
   {
     key: "advisors",
     label: "Advisors",
     value: Object.keys(advisors).length,
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
 ];