From 01c0f792484f8f52606eae0e58abe528acef3086 Mon Sep 17 00:00:00 2001 From: Leo Goetz Date: Thu, 22 Jan 2026 09:10:15 +0100 Subject: feat: completed course, added some types and changed output to dist folder --- frontend/index.html | 2 +- frontend/package-lock.json | 31 +++++++++ frontend/package.json | 3 + frontend/src/components/Events.js | 105 ------------------------------- frontend/src/components/Events.ts | 129 ++++++++++++++++++++++++++++++++++++++ frontend/src/components/Forms.js | 66 ------------------- frontend/src/components/Forms.ts | 68 ++++++++++++++++++++ frontend/src/components/Header.js | 33 ---------- frontend/src/components/Header.ts | 40 ++++++++++++ frontend/src/components/Icons.js | 19 ------ frontend/src/components/Icons.ts | 19 ++++++ frontend/src/main.js | 21 +++---- frontend/tsconfig.json | 9 +++ 13 files changed, 308 insertions(+), 237 deletions(-) delete mode 100644 frontend/src/components/Events.js create mode 100644 frontend/src/components/Events.ts delete mode 100644 frontend/src/components/Forms.js create mode 100644 frontend/src/components/Forms.ts delete mode 100644 frontend/src/components/Header.js create mode 100644 frontend/src/components/Header.ts delete mode 100644 frontend/src/components/Icons.js create mode 100644 frontend/src/components/Icons.ts create mode 100644 frontend/tsconfig.json (limited to 'frontend') 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 @@ - \ No newline at end of file + 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.js deleted file mode 100644 index a84d291..0000000 --- a/frontend/src/components/Events.js +++ /dev/null @@ -1,105 +0,0 @@ -import { Calendar } from './Icons.js'; - -const API_URL = import.meta.env.VITE_API_URL; - -const loadEventsData = async () => { - try { - const response = await fetch(`${API_URL}/events`); - return response.json(); - } catch (e) { - console.error(e); - } -} - - -export const EventModal = (event) => { - const formId = `rsvp-form-${event.ID}`; - const modalId = `modal-event-${event.id}` - return ` -
-
- -

RSVP to ${event.title}

-
-
- - - -
-
- - - - -
-
- ` -} - -export const EventCard = (e) => { - const eventDate = new Date(e.date); - const isPast = eventDate < new Date(); - return ` -
-
- ${e.image_url && `${e.title} thumbnail`} -
-
-

${e.title}

-

${Calendar} ${eventDate.toLocaleDateString()}

-

Host: ${e.host?.name || `User ${e.host_id}`}

- - ${e.description && `

${e.description}

`} -
-
- - ${e.rsvps?.length || 0} ${isPast ? 'went' : 'going'} - - ${!isPast ? ` - `: ''} -
- ${EventModal(e)} -
- ` -} - -export const EventsSection = (title, events) => { - return ` -
-

${title} events

-
- ${events.map((e) => EventCard(e)).join('') || 'No events'} -
-
`; -} - -// 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())); - return ` - ${EventsSection('Upcoming', upcoming)} - ${EventsSection('Past', past)} -`})() \ No newline at end of file diff --git a/frontend/src/components/Events.ts b/frontend/src/components/Events.ts new file mode 100644 index 0000000..a92cf83 --- /dev/null +++ b/frontend/src/components/Events.ts @@ -0,0 +1,129 @@ +import { Calendar } from "./Icons"; + +const API_URL = import.meta.env.VITE_API_URL; + +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 => { + try { + const response = await fetch(`${API_URL}/events`); + return response.json(); + } catch (e) { + console.error(e); + return []; + } +}; + +export const EventModal = (event: Event) => { + const formId = `rsvp-form-${event.id}`; + const modalId = `modal-event-${event.id}`; + return ` +
+
+ +

RSVP to ${event.title}

+
+
+ + + +
+
+ + + + +
+
+ `; +}; + +export const EventCard = (e: Event) => { + const eventDate = new Date(e.date); + const isPast = eventDate < new Date(); + return ` +
+
+ ${e.image_url && `${e.title} thumbnail`} +
+
+

${e.title}

+

${Calendar} ${eventDate.toLocaleDateString()}

+

Host: ${e.host?.name || `User ${e.host_id}`}

+ + ${e.description ? `

${e.description}

` : ""} +
+
+ + ${e.rsvps?.length || 0} ${isPast ? "went" : "going"} + + ${ + !isPast + ? ` + ` + : "" + } +
+ ${EventModal(e)} +
+ `; +}; + +export const EventsSection = (title: string, events: Event[]) => { + return ` +
+

${title} events

+
+ ${events.map((e) => EventCard(e)).join("") || "No events"} +
+
`; +}; + +// 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()); + return ` + ${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 = ` -
-
-

event me

-

All the events you never knew you needed to attend!

-
- - ${ThemeIcon} - -
-`; - -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 = ` +
+
+

event me

+

All the events you never knew you needed to attend!

+
+ + ${ThemeIcon} + +
+`; + +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.js deleted file mode 100644 index c2eb993..0000000 --- a/frontend/src/components/Icons.js +++ /dev/null @@ -1,19 +0,0 @@ -import heart from '../icons/heart.svg?raw'; -import sunMoon from '../icons/sun-moon.svg?raw'; -import typescript from '../icons/typescript.svg?raw'; -import vite from '../icons/vite.svg?raw'; -import pico from '../icons/pico.svg?raw'; -import calendar from '../icons/calendar.svg?raw'; - -// Export the raw SVG strings -export const Heart = heart; -export const Theme = sunMoon; -export const TypeScript = typescript; -export const Vite = vite; -export const Pico = pico; -export const Calendar = calendar; - - - - - diff --git a/frontend/src/components/Icons.ts b/frontend/src/components/Icons.ts new file mode 100644 index 0000000..c2eb993 --- /dev/null +++ b/frontend/src/components/Icons.ts @@ -0,0 +1,19 @@ +import heart from '../icons/heart.svg?raw'; +import sunMoon from '../icons/sun-moon.svg?raw'; +import typescript from '../icons/typescript.svg?raw'; +import vite from '../icons/vite.svg?raw'; +import pico from '../icons/pico.svg?raw'; +import calendar from '../icons/calendar.svg?raw'; + +// Export the raw SVG strings +export const Heart = heart; +export const Theme = sunMoon; +export const TypeScript = typescript; +export const Vite = vite; +export const Pico = pico; +export const Calendar = calendar; + + + + + 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", + ] + } +} -- cgit v1.3