|
| 1 | + |
| 2 | +import React, { useState, useCallback, useRef, useEffect } from 'react'; |
| 3 | +import type { LogMessage, TransferProgress } from '../types'; |
| 4 | +import { TransferStatus } from '../types'; |
| 5 | +import { LogView } from './LogView'; |
| 6 | +import { TransferDisplay } from './TransferDisplay'; |
| 7 | +import { SIMULATION_CHUNK_SIZE, SIMULATION_INTERVAL } from '../constants'; |
| 8 | + |
| 9 | +// Mock file data for receiver simulation |
| 10 | +const MOCK_FILES: File[] = [ |
| 11 | + new File(["data"], "project-alpha.zip", { type: "application/zip" }), |
| 12 | + new File(["data"], "meeting-notes.docx", { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }), |
| 13 | + new File(["data"], "design-mockup-v3.png", { type: "image/png" }), |
| 14 | +]; |
| 15 | +// Manually setting sizes as File constructor doesn't allow it directly |
| 16 | +Object.defineProperty(MOCK_FILES[0], 'size', { value: 157286400 }); // 150 MB |
| 17 | +Object.defineProperty(MOCK_FILES[1], 'size', { value: 2097152 }); // 2 MB |
| 18 | +Object.defineProperty(MOCK_FILES[2], 'size', { value: 5242880 }); // 5 MB |
| 19 | + |
| 20 | +export const ReceiverView: React.FC = () => { |
| 21 | + const [transferCode, setTransferCode] = useState(''); |
| 22 | + const [status, setStatus] = useState<TransferStatus>(TransferStatus.IDLE); |
| 23 | + const [logs, setLogs] = useState<LogMessage[]>([]); |
| 24 | + const [progress, setProgress] = useState<TransferProgress>({ |
| 25 | + percentage: 0, speed: 0, sentBytes: 0, totalBytes: 0, eta: 0 |
| 26 | + }); |
| 27 | + |
| 28 | + const transferIntervalRef = useRef<number | null>(null); |
| 29 | + |
| 30 | + const addLog = useCallback((message: string, type: 'info' | 'success' | 'error' = 'info') => { |
| 31 | + setLogs(prev => [ |
| 32 | + ...prev, |
| 33 | + { id: Date.now(), type, message, timestamp: new Date().toLocaleTimeString() } |
| 34 | + ]); |
| 35 | + }, []); |
| 36 | + |
| 37 | + useEffect(() => { |
| 38 | + return () => { |
| 39 | + if (transferIntervalRef.current) { |
| 40 | + clearInterval(transferIntervalRef.current); |
| 41 | + } |
| 42 | + }; |
| 43 | + }, []); |
| 44 | + |
| 45 | + const handleConnect = () => { |
| 46 | + if (!/^[A-Z0-9]{6}$/.test(transferCode)) { |
| 47 | + addLog('Invalid transfer code. Must be 6 uppercase letters/numbers.', 'error'); |
| 48 | + return; |
| 49 | + } |
| 50 | + addLog(`Attempting to connect with code: ${transferCode}...`); |
| 51 | + setStatus(TransferStatus.CONNECTING); |
| 52 | + |
| 53 | + setTimeout(() => { |
| 54 | + addLog('Connection established. Preparing to receive files.'); |
| 55 | + startReceiving(); |
| 56 | + }, 1500); |
| 57 | + }; |
| 58 | + |
| 59 | + const startReceiving = () => { |
| 60 | + setStatus(TransferStatus.TRANSFERRING); |
| 61 | + const totalBytes = MOCK_FILES.reduce((acc, file) => acc + file.size, 0); |
| 62 | + setProgress({ percentage: 0, speed: 0, sentBytes: 0, totalBytes, eta: Infinity }); |
| 63 | + addLog(`Receiving ${MOCK_FILES.length} files (${(totalBytes / (1024 * 1024)).toFixed(2)} MB)...`); |
| 64 | + |
| 65 | + let receivedBytes = 0; |
| 66 | + const startTime = Date.now(); |
| 67 | + |
| 68 | + transferIntervalRef.current = window.setInterval(() => { |
| 69 | + const elapsedSeconds = (Date.now() - startTime) / 1000; |
| 70 | + receivedBytes += SIMULATION_CHUNK_SIZE * (0.8 + Math.random() * 0.4); |
| 71 | + receivedBytes = Math.min(receivedBytes, totalBytes); |
| 72 | + |
| 73 | + const percentage = (receivedBytes / totalBytes) * 100; |
| 74 | + const speed = elapsedSeconds > 0 ? (receivedBytes / elapsedSeconds) / (1024 * 1024) : 0; |
| 75 | + const remainingBytes = totalBytes - receivedBytes; |
| 76 | + const eta = speed > 0 ? remainingBytes / (speed * 1024 * 1024) : Infinity; |
| 77 | + |
| 78 | + setProgress({ percentage, speed, sentBytes: receivedBytes, totalBytes, eta }); |
| 79 | + |
| 80 | + if (receivedBytes >= totalBytes) { |
| 81 | + if (transferIntervalRef.current) clearInterval(transferIntervalRef.current); |
| 82 | + setStatus(TransferStatus.COMPLETE); |
| 83 | + addLog('File reception complete!', 'success'); |
| 84 | + } |
| 85 | + }, SIMULATION_INTERVAL); |
| 86 | + }; |
| 87 | + |
| 88 | + const handleStopTransfer = () => { |
| 89 | + if (transferIntervalRef.current) { |
| 90 | + clearInterval(transferIntervalRef.current); |
| 91 | + transferIntervalRef.current = null; |
| 92 | + } |
| 93 | + setStatus(TransferStatus.STOPPED); |
| 94 | + addLog('Reception stopped by user.', 'error'); |
| 95 | + }; |
| 96 | + |
| 97 | + const resetState = () => { |
| 98 | + setTransferCode(''); |
| 99 | + setStatus(TransferStatus.IDLE); |
| 100 | + setLogs([]); |
| 101 | + setProgress({ percentage: 0, speed: 0, sentBytes: 0, totalBytes: 0, eta: 0 }); |
| 102 | + }; |
| 103 | + |
| 104 | + const isTransmitting = status === TransferStatus.TRANSFERRING || status === TransferStatus.CONNECTING; |
| 105 | + const isFinished = status === TransferStatus.COMPLETE || status === TransferStatus.FAILED || status === TransferStatus.STOPPED; |
| 106 | + |
| 107 | + return ( |
| 108 | + <div> |
| 109 | + <h2 className="text-2xl font-bold text-gray-200 mb-6">Receive Files</h2> |
| 110 | + |
| 111 | + {!isTransmitting && !isFinished && ( |
| 112 | + <div className="flex flex-col sm:flex-row items-center gap-4"> |
| 113 | + <input |
| 114 | + type="text" |
| 115 | + value={transferCode} |
| 116 | + onChange={(e) => setTransferCode(e.target.value.toUpperCase())} |
| 117 | + placeholder="Enter 6-digit code" |
| 118 | + maxLength={6} |
| 119 | + className="w-full sm:w-auto flex-grow text-center font-mono text-2xl tracking-widest bg-gray-900 border-2 border-gray-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" |
| 120 | + /> |
| 121 | + <button |
| 122 | + onClick={handleConnect} |
| 123 | + disabled={transferCode.length !== 6} |
| 124 | + className="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg disabled:bg-gray-500 disabled:cursor-not-allowed transition-colors text-lg" |
| 125 | + > |
| 126 | + Connect |
| 127 | + </button> |
| 128 | + </div> |
| 129 | + )} |
| 130 | + |
| 131 | + {(isTransmitting || isFinished) && ( |
| 132 | + <TransferDisplay |
| 133 | + status={status} |
| 134 | + progress={progress} |
| 135 | + transferCode={transferCode} |
| 136 | + files={MOCK_FILES} |
| 137 | + isSender={false} |
| 138 | + /> |
| 139 | + )} |
| 140 | + |
| 141 | + {isTransmitting && !isFinished && status !== TransferStatus.CONNECTING && ( |
| 142 | + <div className="mt-8 flex justify-center"> |
| 143 | + <button |
| 144 | + onClick={handleStopTransfer} |
| 145 | + className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition-colors text-lg" |
| 146 | + > |
| 147 | + Stop Transfer |
| 148 | + </button> |
| 149 | + </div> |
| 150 | + )} |
| 151 | + |
| 152 | + {isFinished && ( |
| 153 | + <div className="mt-8 flex justify-center"> |
| 154 | + <button |
| 155 | + onClick={resetState} |
| 156 | + className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition-colors text-lg" |
| 157 | + > |
| 158 | + Receive New Files |
| 159 | + </button> |
| 160 | + </div> |
| 161 | + )} |
| 162 | + |
| 163 | + <LogView logs={logs} /> |
| 164 | + </div> |
| 165 | + ); |
| 166 | +}; |
0 commit comments