Issue 3: Prep Messaging UI for Backend Integration

[AbdulAlharbi]

Feature Request

Refactor messaging frontend to make it ready for backend integration. This includes separating data, adding prop types/interfaces, and preparing for future API/sockets.

Is your feature request related to a problem?

Frontend is currently running on mock state. For backend to hook in cleanly, we need message/user/convo data structures clearly defined and logic isolated.

Describe the solution you'd like

✅ Refactor component logic:

• Extract mock data into separate file/hooks
• Define TypeScript types (or PropTypes) for User, Message, Conversation
• Add placeholders (useEffect, TODO) for future WebSocket/API hooks
• Structure the ChatInput payload to match expected backend schema
• Modularize state logic so it can be replaced with backend sync later

Describe alternatives you've considered

💡 Waited to refactor until backend was live, but this can cause rework. We'd rather design for clean plug-in from the start.

Additional Context

• Example message type:
  type Message = {
  id: string;
  senderId: string;
  receiverId: string;
  content: string;
  timestamp: string;
  read: boolean;
  }
• Targeting frontend branch: messaging-frontend

Tasks Breakdown (if applicable)

📋

• Create types.ts or prop types for key objects
• Refactor mock data to external file
• Add TODOs where sockets/API will hook in
• Restructure ChatInput to emit message object
• Prepare for real-time state updates

Resources

🔗

• Messaging Feature Discussion: 💬 Messaging System – Team Discussion Thread #119

Priority & Impact

⚡ High (unblocks backend integration)

[AbdulAlharbi]

closed by #121. Great work.