refactor(frontend): integrate reusable components across all pages
Phase 1 refactoring - eliminate code duplication and improve maintainability Changes: - LoginPage: Integrate FormInput and LoadingButton components (-9 lines) - RegisterPage: Replace inline forms with FormInput/LoadingButton/Alert (-62 lines) - EventChatPage: Integrate ChatMessageList/ChatInput and Modal components (-100 lines) - MatchChatPage: Integrate ChatMessageList/ChatInput components (-50 lines) - ProfilePage: Already using reusable components (no changes) Total reduction: 221 lines (-11.6%) Benefits: - Eliminated ~40% code duplication in chat UI - Unified form inputs across authentication pages - Consistent modal dialogs with ConfirmationModal - Improved maintainability - changes propagate to all uses - Faster feature development with component library Components used: - Alert, FormInput, FormSelect, LoadingButton, LoadingSpinner - ChatMessageList, ChatMessage, ChatInput - Modal, ConfirmationModal
This commit is contained in:
Radosław Gierwiało
@@ -7,6 +7,10 @@ import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
|
||||
import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
|
||||
import HeatsBanner from '../components/heats/HeatsBanner';
|
||||
import Avatar from '../components/common/Avatar';
|
||||
import ChatMessageList from '../components/chat/ChatMessageList';
|
||||
import ChatInput from '../components/chat/ChatInput';
|
||||
import ConfirmationModal from '../components/modals/ConfirmationModal';
|
||||
import Modal from '../components/modals/Modal';
|
||||
|
||||
const EventChatPage = () => {
|
||||
const { slug } = useParams();
|
||||
@@ -590,79 +594,24 @@ const EventChatPage = () => {
|
||||
|
||||
{/* Chat Area */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Messages */}
|
||||
<div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{/* Loading older messages indicator */}
|
||||
{loadingOlder && (
|
||||
<div className="flex justify-center py-2">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-primary-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.length === 0 && (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
No messages yet. Start the conversation!
|
||||
</div>
|
||||
)}
|
||||
{messages.map((message) => {
|
||||
const isOwnMessage = (message.userId ?? message.user_id) === user.id;
|
||||
return (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
|
||||
>
|
||||
<div className={`flex items-start space-x-2 max-w-md ${isOwnMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
|
||||
<Avatar
|
||||
src={message.avatar}
|
||||
username={message.username}
|
||||
size={32}
|
||||
title={message.username}
|
||||
/>
|
||||
<div>
|
||||
<div className="flex items-baseline space-x-2 mb-1">
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{message.username}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{new Date(message.createdAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-lg px-4 py-2 ${
|
||||
isOwnMessage
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'bg-gray-100 text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{message.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
<ChatMessageList
|
||||
messages={messages}
|
||||
currentUserId={user.id}
|
||||
messagesEndRef={messagesEndRef}
|
||||
messagesContainerRef={messagesContainerRef}
|
||||
loadingOlder={loadingOlder}
|
||||
hasMore={hasMore}
|
||||
/>
|
||||
|
||||
{/* Message Input */}
|
||||
<div className="border-t p-4">
|
||||
<form onSubmit={handleSendMessage} className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newMessage}
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
placeholder="Write a message..."
|
||||
disabled={!isConnected}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isConnected}
|
||||
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
</button>
|
||||
</form>
|
||||
<ChatInput
|
||||
value={newMessage}
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
onSubmit={handleSendMessage}
|
||||
disabled={!isConnected}
|
||||
placeholder="Write a message..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -679,79 +628,31 @@ const EventChatPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leave Confirmation Modal */}
|
||||
{showLeaveModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
|
||||
<AlertTriangle className="text-red-600" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Leave Event?</h3>
|
||||
<p className="text-sm text-gray-600">This action cannot be undone</p>
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
isOpen={showLeaveModal}
|
||||
onClose={() => setShowLeaveModal(false)}
|
||||
onConfirm={handleLeaveEvent}
|
||||
title="Leave Event?"
|
||||
description="This action cannot be undone"
|
||||
message={`Are you sure you want to leave ${event?.name || 'this event'}? You will need to scan the QR code again to rejoin.`}
|
||||
confirmText="Leave Event"
|
||||
isLoading={isLeaving}
|
||||
loadingText="Leaving..."
|
||||
icon={AlertTriangle}
|
||||
/>
|
||||
|
||||
<p className="text-gray-700 mb-6">
|
||||
Are you sure you want to leave <strong>{event.name}</strong>?
|
||||
You will need to scan the QR code again to rejoin.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowLeaveModal(false)}
|
||||
disabled={isLeaving}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLeaveEvent}
|
||||
disabled={isLeaving}
|
||||
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLeaving ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" size={16} />
|
||||
Leaving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogOut size={16} />
|
||||
Leave Event
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Heats Modal */}
|
||||
{showHeatsModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Edit Your Competition Heats</h3>
|
||||
<button
|
||||
onClick={() => setShowHeatsModal(false)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<HeatsBanner
|
||||
slug={slug}
|
||||
onSave={handleHeatsSave}
|
||||
onDismiss={() => setShowHeatsModal(false)}
|
||||
existingHeats={myHeats}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Modal
|
||||
isOpen={showHeatsModal}
|
||||
onClose={() => setShowHeatsModal(false)}
|
||||
title="Edit Your Competition Heats"
|
||||
>
|
||||
<HeatsBanner
|
||||
slug={slug}
|
||||
onSave={handleHeatsSave}
|
||||
onDismiss={() => setShowHeatsModal(false)}
|
||||
existingHeats={myHeats}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user