\n {/* Search and Filters Component */}\n \n\n {/* Artists Grid */}\n \n\n {/* Modal */}\n {state.showModal && (\n \n )}\n\n {/* Event Listeners Setup */}\n \n

\n );\n}\n\nfunction SearchFilters({ danceStyles, specialties, onFilterChange, onClearFilters }: {\n danceStyles: DanceStyle[];\n specialties: Specialty[];\n onFilterChange: (key: string, value: string) => void;\n onClearFilters: () => void;\n}) {\n React.useEffect(() => {\n // Populate filter dropdowns\n const danceStyleSelect = document.getElementById('dance-style-filter') as HTMLSelectElement;\n const specialtySelect = document.getElementById('specialty-filter') as HTMLSelectElement;\n\n // Clear existing options (except first)\n danceStyleSelect.innerHTML = '';\n specialtySelect.innerHTML = '';\n\n // Add dance styles\n danceStyles.forEach(style => {\n const option = document.createElement('option');\n option.value = style.name;\n option.textContent = style.name;\n danceStyleSelect.appendChild(option);\n });\n\n // Add specialties\n specialties.forEach(specialty => {\n const option = document.createElement('option');\n option.value = specialty.name;\n option.textContent = specialty.name;\n specialtySelect.appendChild(option);\n });\n\n // Add event listeners\n const searchInput = document.getElementById('search-input') as HTMLInputElement;\n const locationInput = document.getElementById('location-filter') as HTMLInputElement;\n const clearButton = document.getElementById('clear-filters') as HTMLButtonElement;\n\n const handleSearchChange = () => onFilterChange('search', searchInput.value);\n const handleDanceStyleChange = () => onFilterChange('danceStyle', danceStyleSelect.value);\n const handleSpecialtyChange = () => onFilterChange('specialty', specialtySelect.value);\n const handleLocationChange = () => onFilterChange('location', locationInput.value);\n\n searchInput.addEventListener('input', handleSearchChange);\n danceStyleSelect.addEventListener('change', handleDanceStyleChange);\n specialtySelect.addEventListener('change', handleSpecialtyChange);\n locationInput.addEventListener('input', handleLocationChange);\n clearButton.addEventListener('click', onClearFilters);\n\n return () => {\n searchInput.removeEventListener('input', handleSearchChange);\n danceStyleSelect.removeEventListener('change', handleDanceStyleChange);\n specialtySelect.removeEventListener('change', handleSpecialtyChange);\n locationInput.removeEventListener('input', handleLocationChange);\n clearButton.removeEventListener('click', onClearFilters);\n };\n }, [danceStyles, specialties, onFilterChange, onClearFilters]);\n\n return null;\n}\n\nfunction ArtistsGrid({ artists, loading, onEditArtist }: {\n artists: Artist[];\n loading: boolean;\n onEditArtist: (artist: Artist) => void;\n}) {\n React.useEffect(() => {\n const grid = document.getElementById('artists-grid');\n const loadingEl = document.getElementById('loading');\n const emptyState = document.getElementById('empty-state');\n\n if (!grid || !loadingEl || !emptyState) return;\n\n if (loading) {\n loadingEl.classList.remove('hidden');\n emptyState.classList.add('hidden');\n grid.innerHTML = '';\n return;\n }\n\n loadingEl.classList.add('hidden');\n\n if (artists.length === 0) {\n emptyState.classList.remove('hidden');\n grid.innerHTML = '';\n return;\n }\n\n emptyState.classList.add('hidden');\n\n // Render artist cards\n grid.innerHTML = artists.map(artist => `\n

${artist.name}

📍 ${artist.location}

🎯 ${artist.experience}

\n \n

${artist.bio}

\n \n

🕺 Dance Styles

\n ${artist.danceStyles.map(style => `\n ${style.name}\n `).join('')}\n

\n \n

⭐ Specialties

\n ${artist.specialties.map(specialty => `\n ${specialty.name}\n `).join('')}\n

\n \n ${artist.socialMedia && Object.values(artist.socialMedia).some(v => v) ? `\n

\n ${artist.socialMedia.instagram ? `📷` : ''}\n ${artist.socialMedia.youtube ? `📺` : ''}\n ${artist.socialMedia.tiktok ? `🎵` : ''}\n ${artist.socialMedia.website ? `🌐` : ''}\n

\n ` : ''}\n

\n `).join('');\n\n // Add click handlers for edit buttons\n grid.querySelectorAll('.edit-artist-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const artistId = parseInt((e.target as HTMLElement).dataset.artistId!);\n const artist = artists.find(a => a.id === artistId);\n if (artist) onEditArtist(artist);\n });\n });\n\n }, [artists, loading, onEditArtist]);\n\n return null;\n}\n\nfunction ArtistModal({ artist, danceStyles, specialties, onSubmit, onClose }: {\n artist: Artist | null;\n danceStyles: DanceStyle[];\n specialties: Specialty[];\n onSubmit: (data: CreateArtistRequest) => void;\n onClose: () => void;\n}) {\n React.useEffect(() => {\n const modal = document.getElementById('artist-modal');\n const form = document.getElementById('artist-form') as HTMLFormElement;\n const closeBtn = document.getElementById('close-modal');\n const cancelBtn = document.getElementById('cancel-btn');\n const modalTitle = document.getElementById('modal-title');\n\n if (!modal || !form) return;\n\n // Show modal\n modal.classList.remove('hidden');\n \n // Set title\n if (modalTitle) {\n modalTitle.textContent = artist ? 'Edit Artist Profile' : 'Add Your Artist Profile';\n }\n\n // Populate form if editing\n if (artist) {\n (document.getElementById('artist-name') as HTMLInputElement).value = artist.name;\n (document.getElementById('artist-email') as HTMLInputElement).value = artist.email;\n (document.getElementById('artist-bio') as HTMLTextAreaElement).value = artist.bio;\n (document.getElementById('artist-location') as HTMLInputElement).value = artist.location;\n (document.getElementById('artist-experience') as HTMLSelectElement).value = artist.experience;\n \n if (artist.socialMedia) {\n (document.getElementById('artist-instagram') as HTMLInputElement).value = artist.socialMedia.instagram || '';\n (document.getElementById('artist-youtube') as HTMLInputElement).value = artist.socialMedia.youtube || '';\n (document.getElementById('artist-tiktok') as HTMLInputElement).value = artist.socialMedia.tiktok || '';\n (document.getElementById('artist-website') as HTMLInputElement).value = artist.socialMedia.website || '';\n }\n }\n\n // Populate checkboxes\n const danceStylesContainer = document.getElementById('dance-styles-checkboxes');\n const specialtiesContainer = document.getElementById('specialties-checkboxes');\n\n if (danceStylesContainer) {\n danceStylesContainer.innerHTML = danceStyles.map(style => `\n \n s.id === style.id) ? 'checked' : ''} \n class=\"dance-style-checkbox rounded border-gray-300 text-purple-600 focus:ring-purple-500\">\n ${style.name}\n \n `).join('');\n }\n\n if (specialtiesContainer) {\n specialtiesContainer.innerHTML = specialties.map(specialty => `\n \n s.id === specialty.id) ? 'checked' : ''}\n class=\"specialty-checkbox rounded border-gray-300 text-purple-600 focus:ring-purple-500\">\n ${specialty.name}\n \n `).join('');\n }\n\n // Event handlers\n const handleClose = () => {\n modal.classList.add('hidden');\n form.reset();\n onClose();\n };\n\n const handleSubmit = (e: Event) => {\n e.preventDefault();\n \n const formData = new FormData(form);\n const selectedDanceStyles = Array.from(document.querySelectorAll('.dance-style-checkbox:checked'))\n .map(cb => parseInt((cb as HTMLInputElement).value));\n const selectedSpecialties = Array.from(document.querySelectorAll('.specialty-checkbox:checked'))\n .map(cb => parseInt((cb as HTMLInputElement).value));\n\n if (selectedDanceStyles.length === 0) {\n alert('Please select at least one dance style');\n return;\n }\n\n if (selectedSpecialties.length === 0) {\n alert('Please select at least one specialty');\n return;\n }\n\n const artistData: CreateArtistRequest = {\n name: (document.getElementById('artist-name') as HTMLInputElement).value,\n email: (document.getElementById('artist-email') as HTMLInputElement).value,\n bio: (document.getElementById('artist-bio') as HTMLTextAreaElement).value,\n location: (document.getElementById('artist-location') as HTMLInputElement).value,\n experience: (document.getElementById('artist-experience') as HTMLSelectElement).value,\n danceStyleIds: selectedDanceStyles,\n specialtyIds: selectedSpecialties,\n socialMedia: {\n instagram: (document.getElementById('artist-instagram') as HTMLInputElement).value || undefined,\n youtube: (document.getElementById('artist-youtube') as HTMLInputElement).value || undefined,\n tiktok: (document.getElementById('artist-tiktok') as HTMLInputElement).value || undefined,\n website: (document.getElementById('artist-website') as HTMLInputElement).value || undefined,\n }\n };\n\n onSubmit(artistData);\n };\n\n closeBtn?.addEventListener('click', handleClose);\n cancelBtn?.addEventListener('click', handleClose);\n form.addEventListener('submit', handleSubmit);\n\n // Close on backdrop click\n const handleBackdropClick = (e: Event) => {\n if (e.target === modal) handleClose();\n };\n modal.addEventListener('click', handleBackdropClick);\n\n return () => {\n closeBtn?.removeEventListener('click', handleClose);\n cancelBtn?.removeEventListener('click', handleClose);\n form.removeEventListener('submit', handleSubmit);\n modal.removeEventListener('click', handleBackdropClick);\n };\n }, [artist, danceStyles, specialties, onSubmit, onClose]);\n\n return null;\n}\n\nfunction EventListeners({ onOpenModal }: { onOpenModal: (artist?: Artist) => void }) {\n React.useEffect(() => {\n const addArtistBtn = document.getElementById('add-artist-btn');\n const addFirstArtistBtn = document.getElementById('add-first-artist');\n\n const handleAddArtist = () => onOpenModal();\n\n addArtistBtn?.addEventListener('click', handleAddArtist);\n addFirstArtistBtn?.addEventListener('click', handleAddArtist);\n\n return () => {\n addArtistBtn?.removeEventListener('click', handleAddArtist);\n addFirstArtistBtn?.removeEventListener('click', handleAddArtist);\n };\n }, [onOpenModal]);\n\n return null;\n}\n\n// Mount the app\nconst container = document.createElement('div');\ncontainer.id = 'react-root';\ndocument.body.appendChild(container);\n\nconst root = createRoot(container);\nroot.render();",[],[230,222],"frontend","36b3c9cc-3fb2-11f0-a4ed-76b3cceeab13","index.html","36b3ca94-3fb2-11f0-a4ed-76b3cceeab13",10,["D",1748869510155],"\n\n\n \n \n Afrolatin Dance Artists Directory\n \n \n \n\n\n \n

🕺💃 Afrolatin Dance Artists

Discover and connect with talented dancers in our community

\n \n

\n\n \n

🔍 Find Artists

\n Search\n \n

\n Dance Style\n \n

\n Specialty\n \n

\n Location\n \n

\n \n

\n\n \n

\n \n

\n \n \n

Loading artists...

\n \n \n

🕺

No artists found

Try adjusting your search filters or be the first to add your profile!

\n \n

\n\n \n \n\n \n\n",[],[230,232],"36b3e164-3fb2-11f0-a4ed-76b3cceeab13",["D",1748869510155],[193,194],[230],"6b7ab86e-3fb2-11f0-bc8d-76b3cceeab13","index.ts",["D",1748869598831],2,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport artistsRoutes from \"./routes/artists.ts\";\nimport staticRoutes from \"./routes/static.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Run database migrations on startup\nawait runMigrations();\n\n// API routes\napp.route(\"/api/artists\", artistsRoutes);\n\n// Static file serving and main page\napp.route(\"/\", staticRoutes);\n\n// Health check\napp.get(\"/health\", (c) => {\n return c.json({ status: \"healthy\", timestamp: new Date().toISOString() });\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[161,244],"199b4d7e-3fb2-11f0-b26a-76b3cceeab13","static.ts","199b4e14-3fb2-11f0-b26a-76b3cceeab13","80106b0e-26e5-4eae-8aba-4ae76f62e8ef",8,["D",1748869461476],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { getArtists, getAllDanceStyles, getAllSpecialties } from \"../database/queries.ts\";\n\nconst staticRoutes = new Hono();\n\n// Serve frontend files\nstaticRoutes.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\nstaticRoutes.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve main page with initial data\nstaticRoutes.get(\"/\", async (c) => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Fetch initial data to avoid extra round-trips\n const [artists, danceStyles, specialties] = await Promise.all([\n getArtists(),\n getAllDanceStyles(),\n getAllSpecialties()\n ]);\n\n const initialData = {\n artists,\n danceStyles,\n specialties\n };\n\n // Inject initial data into the HTML\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.text(\"Error loading page\", 500);\n }\n});\n\nexport default staticRoutes;",[],[161,260,252],"routes","12fe95fc-3fb2-11f0-b01e-76b3cceeab13","artists.ts","12fe96c4-3fb2-11f0-b01e-76b3cceeab13",7,["D",1748869450380],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { \n createArtist, \n getArtists, \n getArtistById, \n updateArtist, \n deleteArtist,\n getAllDanceStyles,\n getAllSpecialties\n} from \"../database/queries.ts\";\nimport type { CreateArtistRequest, UpdateArtistRequest, SearchFilters } from \"../../shared/types.ts\";\n\nconst artists = new Hono();\n\n// Get all dance styles\nartists.get(\"/dance-styles\", async (c) => {\n try {\n const danceStyles = await getAllDanceStyles();\n return c.json(danceStyles);\n } catch (error) {\n console.error(\"Error fetching dance styles:\", error);\n return c.json({ error: \"Failed to fetch dance styles\" }, 500);\n }\n});\n\n// Get all specialties\nartists.get(\"/specialties\", async (c) => {\n try {\n const specialties = await getAllSpecialties();\n return c.json(specialties);\n } catch (error) {\n console.error(\"Error fetching specialties:\", error);\n return c.json({ error: \"Failed to fetch specialties\" }, 500);\n }\n});\n\n// Get all artists with optional filters\nartists.get(\"/\", async (c) => {\n try {\n const filters: SearchFilters = {\n danceStyle: c.req.query(\"danceStyle\"),\n specialty: c.req.query(\"specialty\"),\n location: c.req.query(\"location\"),\n experience: c.req.query(\"experience\"),\n search: c.req.query(\"search\"),\n };\n\n // Remove undefined values\n Object.keys(filters).forEach(key => {\n if (filters[key as keyof SearchFilters] === undefined) {\n delete filters[key as keyof SearchFilters];\n }\n });\n\n const artistsList = await getArtists(filters);\n return c.json(artistsList);\n } catch (error) {\n console.error(\"Error fetching artists:\", error);\n return c.json({ error: \"Failed to fetch artists\" }, 500);\n }\n});\n\n// Get artist by ID\nartists.get(\"/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid artist ID\" }, 400);\n }\n\n const artist = await getArtistById(id);\n return c.json(artist);\n } catch (error) {\n console.error(\"Error fetching artist:\", error);\n if (error.message === \"Artist not found\") {\n return c.json({ error: \"Artist not found\" }, 404);\n }\n return c.json({ error: \"Failed to fetch artist\" }, 500);\n }\n});\n\n// Create new artist\nartists.post(\"/\", async (c) => {\n try {\n const body = await c.req.json() as CreateArtistRequest;\n \n // Basic validation\n if (!body.name || !body.email || !body.bio || !body.location || !body.experience) {\n return c.json({ error: \"Missing required fields\" }, 400);\n }\n\n if (!body.danceStyleIds || body.danceStyleIds.length === 0) {\n return c.json({ error: \"At least one dance style is required\" }, 400);\n }\n\n if (!body.specialtyIds || body.specialtyIds.length === 0) {\n return c.json({ error: \"At least one specialty is required\" }, 400);\n }\n\n const artist = await createArtist(body);\n return c.json(artist, 201);\n } catch (error) {\n console.error(\"Error creating artist:\", error);\n if (error.message?.includes(\"UNIQUE constraint failed\")) {\n return c.json({ error: \"Email already exists\" }, 409);\n }\n return c.json({ error: \"Failed to create artist\" }, 500);\n }\n});\n\n// Update artist\nartists.put(\"/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid artist ID\" }, 400);\n }\n\n const body = await c.req.json() as Partial;\n const updateData: UpdateArtistRequest = { ...body, id };\n\n const artist = await updateArtist(updateData);\n return c.json(artist);\n } catch (error) {\n console.error(\"Error updating artist:\", error);\n if (error.message === \"Artist not found\") {\n return c.json({ error: \"Artist not found\" }, 404);\n }\n if (error.message?.includes(\"UNIQUE constraint failed\")) {\n return c.json({ error: \"Email already exists\" }, 409);\n }\n return c.json({ error: \"Failed to update artist\" }, 500);\n }\n});\n\n// Delete artist\nartists.delete(\"/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid artist ID\" }, 400);\n }\n\n await deleteArtist(id);\n return c.json({ message: \"Artist deleted successfully\" });\n } catch (error) {\n console.error(\"Error deleting artist:\", error);\n return c.json({ error: \"Failed to delete artist\" }, 500);\n }\n});\n\nexport default artists;",[],[161,260,262],"12fea3b2-3fb2-11f0-b01e-76b3cceeab13",["D",1748869450380],[189,190],[161,260],["D",1748869429860],[],[161,82,80],["D",1748869396340],[],[161,82,65],["D",1748869396340],[186,187],[161,82],"f2ca6ee6-3fb1-11f0-a27e-76b3cceeab13",["D",1748869396340],[185,188,191],[161],["D",1748868975217],{"_11":12,"_132":71},{"_11":12,"_128":-5,"_70":71,"_31":69,"_129":130,"_131":30},{"_40":119,"_13":16,"_34":37,"_120":85,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":14,"_127":12},"ctx",{"_53":-5,"_151":323,"_324":325,"_326":327,"_328":30,"_329":30,"_330":30,"_331":24,"_332":-5,"_333":-7,"_334":-7,"_335":26,"_336":30,"_337":30,"_338":-5,"_339":30,"_340":30,"_341":30,"_342":-5},"ENV",{"_294":295,"_296":297,"_298":16,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

${artist.name}

🕺 Dance Styles

⭐ Specialties

🔍 Find Artists

No artists found

Add Your Artist Profile

Social Media (Optional)

History · database