\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();","deleted","label",[170,153],"frontend","permalink","https://www.val.town/x/Renee/untitled-5977/code/frontend/index.tsx","extension","actionData","errors"]