feat: completed course, added some types and changed output to dist folderHEADmaster

11 files changed, 208 insertions, 137 deletions

diff --git a/frontend/index.html b/frontend/index.html
index 1b3628c..291902c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -19,4 +19,4 @@
   <script type="module" src="/src/main.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a846104..dfa9ebf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,9 @@
       "name": "event-me-client",
       "version": "0.0.0",
       "devDependencies": {
+        "@tsconfig/recommended": "^1.0.13",
+        "@tsconfig/vite-react": "^7.0.2",
+        "typescript": "^5.9.3",
         "vite": "^7.1.2",
         "vitest": "^3.2.4"
       }
@@ -741,6 +744,20 @@
         "win32"
       ]
     },
+    "node_modules/@tsconfig/recommended": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@tsconfig/recommended/-/recommended-1.0.13.tgz",
+      "integrity": "sha512-sySRuBfMKyKO/j2ZAhR8kSembhjuPEV4Ra3AHtmWLq51+iGaudr45crPSzNC5b7/Ctrh9dfUpBuTlYrH6rM58Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/vite-react": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@tsconfig/vite-react/-/vite-react-7.0.2.tgz",
+      "integrity": "sha512-lEj4y5SPRcH+bjw0tyuxrEnPqQUwfQzBKgd1YamD9xyet9zLwh2gwy5F8w/Nxg5DjdgYVjjKo5aLJUf0BTDz4w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/chai": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.2.tgz",
@@ -1318,6 +1335,20 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/vite": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index bde2683..66fa712 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,9 @@
     "test": "vitest"
   },
   "devDependencies": {
+    "@tsconfig/recommended": "^1.0.13",
+    "@tsconfig/vite-react": "^7.0.2",
+    "typescript": "^5.9.3",
     "vite": "^7.1.2",
     "vitest": "^3.2.4"
   }
diff --git a/frontend/src/components/Events.js b/frontend/src/components/Events.ts
index a84d291..a92cf83 100644
--- a/frontend/src/components/Events.js
+++ b/frontend/src/components/Events.ts
@@ -1,20 +1,39 @@
-import { Calendar } from './Icons.js';
+import { Calendar } from "./Icons";
 
 const API_URL = import.meta.env.VITE_API_URL;
 
-const loadEventsData = async () => {
+interface Event {
+  id: number;
+  title: string;
+  description?: string;
+  date: Date;
+  host_id: number;
+  image_url?: string;
+  host: {
+    id: number;
+    name: string;
+    email: string;
+  };
+  rsvps: {
+    id: number;
+    name: string;
+    email: string;
+  }[];
+}
+
+const loadEventsData = async (): Promise<Event[]> => {
   try {
     const response = await fetch(`${API_URL}/events`);
     return response.json();
   } catch (e) {
     console.error(e);
+    return [];
   }
-}
-
+};
 
-export const EventModal = (event) => {
-  const formId = `rsvp-form-${event.ID}`;
-  const modalId = `modal-event-${event.id}`
+export const EventModal = (event: Event) => {
+  const formId = `rsvp-form-${event.id}`;
+  const modalId = `modal-event-${event.id}`;
   return `<dialog id="${modalId}">
       <article>
         <header>
@@ -49,10 +68,10 @@ export const EventModal = (event) => {
 
         </footer>
       </article>
-    </dialog>`
-}
+    </dialog>`;
+};
 
-export const EventCard = (e) => {
+export const EventCard = (e: Event) => {
   const eventDate = new Date(e.date);
   const isPast = eventDate < new Date();
   return `
@@ -65,41 +84,46 @@ export const EventCard = (e) => {
         <p>${Calendar} ${eventDate.toLocaleDateString()}</p>
         <p>Host: ${e.host?.name || `User ${e.host_id}`}</p>
 
-        ${e.description && `<p>${e.description}</p>`}
+        ${e.description ? `<p>${e.description}</p>` : ""}
     </main>
     <footer>
         <span>
-            ${e.rsvps?.length || 0} ${isPast ? 'went' : 'going'}
+            ${e.rsvps?.length || 0} ${isPast ? "went" : "going"}
         </span>
-        ${!isPast ? `
+        ${
+          !isPast
+            ? `
             <button role="button" data-target="modal-event-${e.id}" class="toggle-modal"
             title="RSVP to ${e.title}"
             >
         RSVP
-        </button>`: ''}
+        </button>`
+            : ""
+        }
     </footer>
     ${EventModal(e)}
 </article>
-    `
-}
+    `;
+};
 
-export const EventsSection = (title, events) => {
+export const EventsSection = (title: string, events: Event[]) => {
   return `
   <section class='events'>
       <h2>${title} events </h2>
           <div role = "group">
-              ${events.map((e) => EventCard(e)).join('') || 'No events'}
+              ${events.map((e) => EventCard(e)).join("") || "No events"}
       </div>
   </section>`;
-}
+};
 
 // IIFE to asynchronously load the Event data before exporting the component
 // https://developer.mozilla.org/en-US/docs/Glossary/IIFE
 export const Events = await (async () => {
   const all = await loadEventsData();
-  const past = all.filter((e) => (new Date(e.date) < new Date()));
-  const upcoming = all.filter((e) => (new Date(e.date) > new Date()));
+  const past = all.filter((e) => new Date(e.date) < new Date());
+  const upcoming = all.filter((e) => new Date(e.date) > new Date());
   return `
-    ${EventsSection('Upcoming', upcoming)}
-    ${EventsSection('Past', past)}
-`})()
\ No newline at end of file
+    ${EventsSection("Upcoming", upcoming)}
+    ${EventsSection("Past", past)}
+`;
+})();
diff --git a/frontend/src/components/Forms.js b/frontend/src/components/Forms.js
deleted file mode 100644
index 8e9160f..0000000
--- a/frontend/src/components/Forms.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const API_URL = import.meta.env.VITE_API_URL;
-
-export const setupForm = (form) => {
-    if (!form) return;
-
-    const eventId = form.id.replace('rsvp-form-', '');
-    const url = `${API_URL}/events/${eventId}/rsvp`;
-    const btn = document.getElementById(`submit-${form.id}`);
-
-    async function sendData(form) {
-        const formData = new FormData(form);
-        const encoded = new URLSearchParams();
-        for (let [key, value] of formData.entries) {
-            encoded.append(key, value);
-        }
-        try {
-            const response = await fetch(url, {
-                method: "POST",
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: encoded,
-            });
-            if (response.status === 201) {
-                form.dataset.submitted = 'success';
-                if (btn) {
-                    btn.textContent = "You're going!";
-                    btn.setAttribute('disabled', '');
-                }
-            } else if (response.status === 200) {
-                form.dataset.submitted = 'duplicate';
-                if (btn) {
-                    btn.textContent = "You're already going!";
-                    btn.setAttribute('disabled', '');
-                }
-            }
-        } catch (e) {
-            form.dataset.submitted = 'error';
-            console.error(e);
-        }
-    }
-
-    form.addEventListener("submit", (event) => {
-        event.preventDefault();
-        sendData(form);
-    });
-
-    if (btn) {
-        const emailInput = form.querySelector('input.rsvp-email');
-        emailInput.addEventListener('input', () => {
-            if (btn.textContent !== 'Submit RSVP') {
-                btn.removeAttribute('disabled');
-                btn.textContent = 'Submit RSVP';
-            }
-        });
-
-    }
-};
-
-export const setupForms = () => {
-    const rsvpForms = document.querySelectorAll('form');
-    if (!rsvpForms) return;
-    for (let form of rsvpForms) {
-        setupForm(form);
-    }
-};
\ No newline at end of file
diff --git a/frontend/src/components/Forms.ts b/frontend/src/components/Forms.ts
new file mode 100644
index 0000000..ff35065
--- /dev/null
+++ b/frontend/src/components/Forms.ts
@@ -0,0 +1,68 @@
+const API_URL = import.meta.env.VITE_API_URL;
+
+export const setupForm = (form: HTMLFormElement) => {
+  if (!form) return;
+
+  const eventId = form.id.replace("rsvp-form-", "");
+  const url = `${API_URL}/events/${eventId}/rsvp`;
+  const btn = document.getElementById(`submit-${form.id}`);
+
+  async function sendData(form: HTMLFormElement) {
+    const formData = new FormData(form);
+    const encoded = new URLSearchParams();
+    for (let [key, value] of formData.entries()) {
+      encoded.append(key, value.toString());
+    }
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: encoded,
+      });
+      if (response.status === 201) {
+        form.dataset.submitted = "success";
+        if (btn) {
+          btn.textContent = "You're going!";
+          btn.setAttribute("disabled", "");
+        }
+      } else if (response.status === 200) {
+        form.dataset.submitted = "duplicate";
+        if (btn) {
+          btn.textContent = "You're already going!";
+          btn.setAttribute("disabled", "");
+        }
+      }
+    } catch (e) {
+      form.dataset.submitted = "error";
+      console.error(e);
+    }
+  }
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    sendData(form);
+  });
+
+  if (btn) {
+    const emailInput = form.querySelector("input.rsvp-email");
+    if (emailInput) {
+      emailInput.addEventListener("input", () => {
+        if (btn.textContent !== "Submit RSVP") {
+          btn.removeAttribute("disabled");
+          btn.textContent = "Submit RSVP";
+        }
+      });
+    }
+  }
+};
+
+export const setupForms = () => {
+  const rsvpForms = document.querySelectorAll("form");
+  if (!rsvpForms) return;
+  for (let form of rsvpForms) {
+    setupForm(form);
+  }
+};
+
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
deleted file mode 100644
index f28f8e5..0000000
--- a/frontend/src/components/Header.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Theme as ThemeIcon } from './Icons';
-
-const themeToggleId = 'theme';
-
-const Header = `
-<header>
-    <hgroup>
-        <h1 class=".parkinsans">event me</h1>
-        <p>All the events you never knew you needed to attend!</p>
-    </hgroup>
-    <a href="#" role="toggle" id="${themeToggleId}"  title="Toggle color scheme" >
-        ${ThemeIcon} 
-    </a>
-</header>
-`;
-
-const toggleDarkMode = () => {
-    const doc = document.documentElement;
-    const currentTheme = doc.getAttribute('data-theme');
-    if (currentTheme === 'dark') {
-        doc.setAttribute('data-theme', 'lite');
-    } else if (currentTheme === 'light') {
-        doc.setAttribute('data-theme', 'dark');
-    }
-}
-export function setupThemeToggle() {
-    const themeToggle = document.getElementById(themeToggleId);
-    themeToggle.addEventListener('click', toggleDarkMode);
-
-}
-
-
-export default Header
diff --git a/frontend/src/components/Header.ts b/frontend/src/components/Header.ts
new file mode 100644
index 0000000..11da46f
--- /dev/null
+++ b/frontend/src/components/Header.ts
@@ -0,0 +1,40 @@
+import { Theme as ThemeIcon } from "./Icons";
+
+const themeToggleId = "theme";
+
+const Header = `
+<header>
+    <hgroup>
+        <h1 class=".parkinsans">event me</h1>
+        <p>All the events you never knew you needed to attend!</p>
+    </hgroup>
+    <a href="#" role="toggle" id="${themeToggleId}"  title="Toggle color scheme" >
+        ${ThemeIcon} 
+    </a>
+</header>
+`;
+
+type Theme = "dark" | "light";
+
+const toggleDarkMode = () => {
+  const doc = document.documentElement;
+  const currentTheme = doc.getAttribute("data-theme");
+  let newTheme: Theme;
+  if (currentTheme === "dark") {
+    newTheme = "light";
+    doc.setAttribute("data-theme", newTheme);
+  } else if (currentTheme === "light") {
+    newTheme = "dark";
+    doc.setAttribute("data-theme", newTheme);
+  }
+};
+export function setupThemeToggle() {
+  const themeToggle = document.getElementById(themeToggleId);
+  if (!themeToggle) {
+    console.error("Missing Toggle");
+    return;
+  }
+  themeToggle.addEventListener("click", toggleDarkMode);
+}
+
+export default Header;
diff --git a/frontend/src/components/Icons.js b/frontend/src/components/Icons.ts
index c2eb993..c2eb993 100644
--- a/frontend/src/components/Icons.js
+++ b/frontend/src/components/Icons.ts
diff --git a/frontend/src/main.js b/frontend/src/main.js
index cf91fa0..7e9d7c6 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,26 +1,21 @@
-import './style.css'
-import Header, { setupThemeToggle } from './components/Header';
-import Main from './components/Main';
-import Footer from './components/Footer';
-import { setupModals } from './components/Modal';
-import { setupForms } from './components/Forms';
-
+import "./style.css";
+import Header, { setupThemeToggle } from "./components/Header";
+import Main from "./components/Main";
+import Footer from "./components/Footer";
+import { setupModals } from "./components/Modal";
+import { setupForms } from "./components/Forms";
 
 // Quick and dirty - not for production!
 const render = (html) => {
-  const app = document.querySelector('#app');
+  const app = document.querySelector("#app");
   app.innerHTML = html;
   setupThemeToggle();
   setupModals();
   setupForms();
-}
-
+};
 
 render(`
   ${Header}
   ${Main}
   ${Footer}
 `);
-
-
-
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..3090677
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": [ "@tsconfig/recommended/tsconfig.json", "@tsconfig/vite-react/tsconfig.json" ],
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    "types": [
+      "vite/client",
+    ]
+  }
+}