add typescript

src/api.js

@@ -1,16 +0,0 @@
-import axios from 'axios'
-export const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:5000'
-const TOKEN = import.meta.env.VITE_TOKEN ?? ''
-
-// ajuste o path caso sua API seja /api/workshops
-const WORKSHOPS_PATH = '/workshops'
-
-const getHeaders = () => {
-    return {
-        Authorization: `Bearer ${TOKEN}`
-    }
-}
-export async function searchWorkshops(q) {
-  const { data } = await axios.get(`${API_BASE}${WORKSHOPS_PATH}`, { params: { q }, headers: getHeaders() })
-  return data // espera-se um array
-}

src/api.ts

@@ -0,0 +1,52 @@
+import axios from 'axios'
+export const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:5000'
+const TOKEN = import.meta.env.VITE_TOKEN ?? ''
+
+// ajuste o path caso sua API seja /api/workshops
+const WORKSHOPS_PATH = '/workshops'
+
+// src/api.ts
+export type Workshop = {
+  id: string;
+  title: string;
+  startAt: string;   // ISO string
+  endAt: string;     // ISO string
+  isOnline: boolean;
+  location?: string | null;
+  capacity?: number;
+};
+
+export type WorkshopList = Workshop[];
+
+export type NewWorkshop = {
+  title: string;
+  startAt: string;   // ISO
+  description: string;
+  endAt: string;     // ISO
+  isOnline: boolean;
+  location?: string | null;
+  capacity?: number; // >= 1 (opcional)
+};
+
+const getHeaders = () => {
+  console.log(TOKEN)
+    return {
+        Authorization: `Bearer ${TOKEN}`
+    }
+}
+export async function searchWorkshops(q: string): Promise<WorkshopList> {
+  const { data } = await axios.get<WorkshopList>(
+    `${API_BASE}${WORKSHOPS_PATH}`,
+    { params: { q }, headers: getHeaders() }
+  );
+  return data;
+}
+
+export async function createWorkshop(payload: NewWorkshop): Promise<Workshop> {
+  // POST de criação; backend retorna o Workshop criado (com id)
+  const { data } = await axios.post<Workshop>(
+    `${API_BASE}${WORKSHOPS_PATH}`,
+    payload, { headers: getHeaders() }
+  );
+  return data;
+}

src/dom.ts

@@ -1,4 +1,7 @@
-export function renderList(container, items = []) {
+import type { Workshop } from './api';
+
+export function renderList(container: HTMLElement, items: Workshop[] = []): void {
+  
   container.innerHTML = ''
   if (!Array.isArray(items) || items.length === 0) {
     container.insertAdjacentHTML('beforeend', `<p class="text-slate-400">Nenhum resultado.</p>`)
@@ -8,20 +11,20 @@ export function renderList(container, items = []) {
   container.insertAdjacentHTML('beforeend', html)
 }
 
-export function updateMeta(el, text = '') { el.textContent = text }
+export function updateMeta(el: HTMLElement, text = ''): void { el.textContent = text }
 
-export function renderLoading(container) {
+export function renderLoading(container: HTMLElement) {
   const skeleton = Array.from({ length: 6 }).map(() =>
     `<div class="h-28 rounded-2xl bg-white/5 ring-1 ring-white/10 animate-pulse"></div>`
   ).join('')
   container.innerHTML = `<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">${skeleton}</div>`
 }
 
-export function debounce(fn, ms = 350) {
-  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms) }
+export function debounce(fn: (...args: any[]) => Promise<void>, ms = 350) {
+  let t: number | undefined; return (...args: any[]) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms) }
 }
 
-function toCardHtml(w) {
+function toCardHtml(w: Workshop) {
   const title = escapeHtml(w?.title ?? 'Sem título')
   const where = w?.isOnline ? 'Online' : escapeHtml(w?.location ?? 'Presencial')
   const dt = formatDateRange(w?.startAt, w?.endAt)
@@ -38,7 +41,7 @@ function toCardHtml(w) {
   `
 }
 
-function formatDateRange(a, b) {
+function formatDateRange(a: string | number | Date, b: string | number | Date) {
   try { return `${new Date(a).toLocaleString()} — ${new Date(b).toLocaleString()}` } catch { return '' }
 }
 function escapeHtml(s = '') { const d = document.createElement('div'); d.textContent = s; return d.innerHTML }

src/main.js

@@ -1,47 +0,0 @@
-import Toastify from 'toastify-js'
-import 'toastify-js/src/toastify.css'
-
-import { searchWorkshops } from './api.js'
-import { renderList, updateMeta, renderLoading, debounce } from './dom.js'
-
-const form = document.getElementById('search-form')
-const input = document.getElementById('q')
-const results = document.getElementById('results')
-const meta = document.getElementById('meta')
-
-function toast(text, kind = 'info') {
-  const bg = { info: '#3b82f6', ok: '#10b981', warn: '#f59e0b', err: '#ef4444' }[kind] ?? '#3b82f6'
-  Toastify({ text, gravity: 'top', position: 'right', backgroundColor: bg, duration: 2400 }).showToast()
-}
-
-async function runSearch(term) {
-  const q = term.trim()
-  if (!q) {
-    updateMeta(meta, 'Digite um termo para buscar.')
-    renderList(results, [])
-    toast('Campo de busca vazio.', 'warn')
-    return
-  }
-
-  updateMeta(meta, 'Carregando…')
-  renderLoading(results)
-
-  try {
-    const items = await searchWorkshops(q)
-    renderList(results, items)
-    updateMeta(meta, `Encontrados ${items?.length ?? 0} resultado(s) para “${q}”.`)
-    toast('Busca concluída.', 'ok')
-  } catch (err) {
-    console.error(err)
-    renderList(results, [])
-    updateMeta(meta, '')
-    toast('Erro ao buscar. Confira console/Network.', 'err')
-  }
-}
-
-// Submit on-demand
-form.addEventListener('submit', (e) => { e.preventDefault(); runSearch(input.value) })
-
-// Busca reativa com debounce
-const debounced = debounce(() => runSearch(input.value), 500)
-input.addEventListener('input', debounced)

src/main.ts

@@ -0,0 +1,148 @@
+import Toastify from 'toastify-js';
+import 'toastify-js/src/toastify.css';
+
+import { searchWorkshops, createWorkshop } from './api';
+import type { NewWorkshop, Workshop, WorkshopList } from './api';
+import { renderList, updateMeta, renderLoading } from './dom';
+
+// ===== Seletores da área de busca
+const form = document.getElementById('search-form') as HTMLFormElement;
+const input = document.getElementById('q') as HTMLInputElement;
+const results = document.getElementById('results') as HTMLElement;
+const meta = document.getElementById('meta') as HTMLElement;
+
+// ===== Seletores da área de inserção
+const addForm = document.getElementById('add-form') as HTMLFormElement | null;
+const titleEl = document.getElementById('title') as HTMLInputElement | null;
+const capacityEl = document.getElementById('capacity') as HTMLInputElement | null;
+const isOnlineEl = document.getElementById('isOnline') as HTMLInputElement | null;
+const locationEl = document.getElementById('location') as HTMLInputElement | null;
+const startAtEl = document.getElementById('startAt') as HTMLInputElement | null;
+const endAtEl = document.getElementById('endAt') as HTMLInputElement | null;
+const descriptionEl = document.getElementById('description') as HTMLInputElement;
+
+// ===== Toast helper
+function toast(text: string, kind: 'info' | 'ok' | 'warn' | 'err' = 'info') {
+  const bg: Record<string, string> = {
+    info: '#3b82f6', ok: '#10b981', warn: '#f59e0b', err: '#ef4444'
+  };
+  Toastify({ text, gravity: 'top', position: 'right', backgroundColor: bg[kind], duration: 2400 }).showToast();
+}
+
+// ===== BUSCA
+form.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const q = input.value.trim();
+  if (!q) {
+    updateMeta(meta, 'Digite um termo para buscar.');
+    renderList(results, []);
+    return;
+  }
+
+  updateMeta(meta, 'Carregando…');
+  renderLoading(results);
+
+  try {
+    const items = await searchWorkshops(q);
+    renderList(results, items);
+    updateMeta(meta, `Encontrados ${items?.length ?? 0} resultado(s) para “${q}”.`);
+  } catch (err) {
+    console.error(err);
+    renderList(results, []);
+    updateMeta(meta, 'Erro ao buscar. Verifique console/Network.');
+  }
+});
+
+// ===== Inserção (TypeScript)
+if (addForm) {
+  addForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      const payload = parseNewWorkshopFromForm(); // monta e valida
+      const created = await createWorkshop(payload);
+      resetCreateForm();
+      toast('Workshop inserido com sucesso!', 'ok');
+
+      // (Opcional) Atualizar a lista atual, se estiver filtrada:
+      const term = input.value.trim();
+      if (term) {
+        // reexecuta a busca atual para “enxergar” o item novo
+        form.requestSubmit();
+      }
+      // Caso contrário, deixamos a UI como está (ou você pode decidir listar tudo aqui)
+    } catch (err) {
+      console.error(err);
+      const msg = err instanceof Error ? err.message : 'Erro ao inserir';
+      toast(msg, 'err');
+    }
+  });
+}
+
+// ===== Helpers: montar payload e validar
+
+// Converte 'YYYY-MM-DDTHH:mm' local para ISO (UTC)
+// IMPORTANTE: isso converte assumindo horário local do navegador
+function toIsoFromLocal(input: string): string {
+  if (!input) throw new Error('Data/hora inválida.');
+  const d = new Date(input);
+  if (isNaN(d.getTime())) throw new Error('Formato de data/hora inválido.');
+  return d.toISOString();
+}
+
+// Lê e valida o formulário; retorna NewWorkshop ou lança Error
+function parseNewWorkshopFromForm(): NewWorkshop {
+  // elementos obrigatórios
+  if (!titleEl || !isOnlineEl || !startAtEl || !endAtEl) {
+    throw new Error('Formulário não inicializado corretamente.');
+  }
+  const title = (titleEl.value ?? '').trim();
+  if (title.length < 5) throw new Error('Título deve ter pelo menos 5 caracteres.');
+
+  const isOnline = !!isOnlineEl.checked;
+
+  const startAtISO = toIsoFromLocal(startAtEl.value);
+  const endAtISO = toIsoFromLocal(endAtEl.value);
+
+  const startMs = new Date(startAtISO).getTime();
+  const endMs = new Date(endAtISO).getTime();
+  if (endMs <= startMs) throw new Error('EndAt deve ser depois de StartAt.');
+
+  let location: string | null | undefined = null;
+  if (!isOnline) {
+    if (!locationEl) throw new Error('Campo de local não encontrado.');
+    const loc = (locationEl.value ?? '').trim();
+    if (!loc) throw new Error('Local é obrigatório para workshops presenciais.');
+    location = loc;
+  }
+
+  let capacity: number | undefined;
+  if (capacityEl) {
+    const raw = capacityEl.value?.trim();
+    if (raw) {
+      const n = Number(raw);
+      if (!Number.isFinite(n) || n < 1) throw new Error('Capacidade deve ser um número >= 1.');
+      capacity = n;
+    }
+  }
+
+  const description = (descriptionEl.value ?? '').trim();
+  if (title.length < 5) throw new Error('Descrição deve ter pelo menos 5 caracteres.');
+
+
+  const payload: NewWorkshop = {
+    title,
+    startAt: startAtISO,
+    endAt: endAtISO,
+    description,
+    isOnline,
+    location,
+    capacity
+  };
+  return payload;
+}
+
+function resetCreateForm(): void {
+  if (!addForm) return;
+  addForm.reset();
+  titleEl?.focus();
+}