How springboot20/chat-application works
This is a React chat client whose main workflow is signing in, opening a chat, composing a message, and sending it in real time or queuing it offline for later delivery. The repository separates routed screens and chat UI from message/state coordination, API and socket integrations, and local persistence. The README documents queue behavior and major chat capabilities; sampled source confirms routing, IndexedDB hydration, API request handling, and selected UI features. Unverified connections between unsampled modules are omitted.
Main entry points: App.tsx App routes · useMessageQueue.ts Queue processor · ChatLayout.tsx Chat layout · ChatRoom.tsx Chat room
Components 24
Access and navigation
- App routes
src/App.tsx - Auth screens
src/pages/login/Login.tsx - Chat layout
src/layouts/ChatLayout.tsx
Chat experience
- Chat index
src/pages/Chat/ChatIndex.tsx - Chat room
src/pages/Chat/ChatRoom.tsx - Message and chat UI
src/components/chat/MessageItem.tsx - Message input
src/components/input/MessageInput.tsx
Messaging runtime
- Message coordination
src/context/MessageContext.tsx - Send message hook
src/hooks/useSendMessage.ts - Queue processor
src/hooks/useMessageQueue.ts - Offline queue
src/utils/messageQueue.ts - Network status
src/hooks/useNetwork.ts - Socket context
src/context/SocketContext.tsx
Services and state
- Socket server
- REST API client
src/api/index.ts - Chat backend
- Redux state
src/app/store.ts - Chat state
src/features/chats/chat.slice.ts - IndexedDB storage
src/utils/index.ts
Status and media
- Status experience
src/context/StatusContext.tsx - Status UI
src/components/status/StatusUpdates.tsx - Voice recording
src/hooks/useVoiceRecorder.ts - Attachment preview
src/components/file/DocumentPreview.tsx
Other components
- User
Connections 21
- User → App routes: opens
- App routes → Auth screens: routes unauthenticated users
- App routes → Chat layout: routes authenticated users
- Chat layout → Chat index: renders index route
- Chat layout → Chat room: renders chat route
- Chat room → Message and chat UI: displays messages
- Chat room → Message input: provides compose UI
- Message input → Message coordination: submits message
- Message coordination → Send message hook: sends online message
- Message coordination → Offline queue: queues offline message
- Queue processor → Network status: checks connectivity
- Queue processor → Offline queue: reads and removes
- Queue processor → Send message hook: sends queued messages
- App routes → IndexedDB storage: reads cached chat data
- App routes → Chat state: dispatches hydration
- Chat state → Redux state: updates state
- REST API client → Chat backend: sends REST requests
- Socket context → Socket server: exchanges events
- Status UI → Status experience: uses status context
- Voice recording → Message input: provides voice recording
- Attachment preview → Message and chat UI: renders attachments