Community Discussions

Join conversations about local topics

\n \n setShowCreateForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n disabled={!currentUser}\n >\n Start Discussion\n \n

\n\n {/* Filters */}\n

\n Category\n setFilters(prev => ({ ...prev, category: e.target.value as any || undefined }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n \n \n \n \n \n \n

\n \n

\n Location\n setFilters(prev => ({ ...prev, location: e.target.value || undefined }))}\n placeholder=\"Search location...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n setFilters({})}\n className=\"w-full px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors\"\n >\n Clear Filters\n \n

\n\n {/* Discussions List */}\n {discussions.length === 0 ? (\n

No discussions found

Start the first conversation in your community!

\n ) : (\n

\n {discussions.map((discussion) => (\n

\n {/* Header */}\n

\n \n {discussion.category.replace('_', ' ')}\n \n 📍 {discussion.location}\n

{discussion.title}

\n\n {/* Content */}\n

{discussion.content}

\n\n {/* Tags */}\n {discussion.tags && discussion.tags.length > 0 && (\n

\n {discussion.tags.slice(0, 5).map((tag, index) => (\n \n #{tag}\n \n ))}\n {discussion.tags.length > 5 && (\n \n +{discussion.tags.length - 5} more\n \n )}\n

\n )}\n\n {/* Footer */}\n

\n 👤 {discussion.authorName}\n 💬 {discussion.replyCount} replies\n 👍 {discussion.likeCount} likes\n

\n {formatDate(discussion.createdAt || '')}\n

\n ))}\n

\n )}\n\n {/* Create Discussion Modal */}\n {showCreateForm && (\n

Start New Discussion

\n setShowCreateForm(false)} />\n

\n )}\n

\n );\n}\n\n// Discussion creation form\nfunction DiscussionForm({ onSubmit, onCancel }: { \n onSubmit: (discussion: Partial) => void; \n onCancel: () => void; \n}) {\n const [formData, setFormData] = useState({\n title: '',\n content: '',\n category: 'general' as Discussion['category'],\n tags: [] as string[]\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!formData.title || !formData.content) {\n alert('Please fill in all required fields');\n return;\n }\n \n onSubmit(formData);\n };\n\n const handleTagAdd = (tag: string) => {\n if (tag && !formData.tags.includes(tag)) {\n setFormData(prev => ({ ...prev, tags: [...prev.tags, tag] }));\n }\n };\n\n const handleTagRemove = (tag: string) => {\n setFormData(prev => ({ ...prev, tags: prev.tags.filter(t => t !== tag) }));\n };\n\n return (\n

\n \n Title *\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n placeholder=\"What would you like to discuss?\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n\n

\n \n Category *\n \n setFormData(prev => ({ ...prev, category: e.target.value as any }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n \n \n \n \n \n \n \n \n \n

\n\n

\n \n Content *\n \n setFormData(prev => ({ ...prev, content: e.target.value }))}\n rows={6}\n placeholder=\"Share your thoughts, ask questions, or start a conversation...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n\n

\n \n Tags\n \n

\n {formData.tags.map(tag => (\n \n {tag}\n handleTagRemove(tag)}\n className=\"ml-1 text-blue-600 hover:text-blue-800\"\n >\n ×\n \n \n ))}\n

\n {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleTagAdd(e.currentTarget.value);\n e.currentTarget.value = '';\n }\n }}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n

\n \n Start Discussion\n \n \n Cancel\n \n

\n );\n}","deleted","label",[168,169,150],"frontend","pages","permalink","https://www.val.town/x/Omosola_1/Create/code/frontend/pages/Discussions.tsx","extension","actionData","errors"]