Community Chat

\n {allMessages.length} message{allMessages.length !== 1 ? 's' : ''}\n

\n Discuss job opportunities, share tips, and connect with the community\n

\n\n {/* Messages */}\n

\n {Object.entries(groupedMessages).map(([date, dayMessages]) => (\n

\n {/* Date separator */}\n

\n {formatDate(dayMessages[0].timestamp)}\n

\n \n {/* Messages for this date */}\n {dayMessages.map((message) => (\n

\n {message.username.charAt(0).toUpperCase()}\n

\n \n {message.username}\n \n \n {formatTime(message.timestamp)}\n \n

\n {message.message}\n

\n ))}\n

\n ))}\n \n {allMessages.length === 0 && (\n

💬

No messages yet

Be the first to start the conversation!

\n )}\n \n

\n\n {/* Message input */}\n

\n {error && (\n

\n {error}\n

\n )}\n \n

\n {!username && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your username...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm\"\n maxLength={50}\n />\n

\n )}\n \n

\n setNewMessage(e.target.value)}\n placeholder={username ? \"Type your message...\" : \"Enter username first...\"}\n disabled={!username || isSubmitting}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm disabled:bg-gray-50\"\n maxLength={500}\n />\n

\n \n {isSubmitting ? '⏳' : '📤'}\n \n

\n \n {username && (\n

\n Chatting as: {username}\n {newMessage.length}/500\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Hussein/App/code/frontend/components/ChatRoom.tsx","extension","actionData","errors"]