khamba
Version:
A cli tool for sharing files through local network.
72 lines (71 loc) • 3.69 kB
JavaScript
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Box, Text } from 'ink';
import { log } from '../../../functions/log.js';
import SingleFileTransfer from '../../../components/Transfer/Receiver/SingleFileTransfer.js';
import { findLongestString, formatBytes } from '../../../functions/helper.js';
import { useStore } from '@nanostores/react';
import { $receiverTotalDownload, $currTransfer, } from '../../../stores/fileHandlerStore.js';
import { fetchUpdateSenderTransferState } from '../../../functions/fetch.js';
const FileTransfer = ({}) => {
const currTransfer = useStore($currTransfer);
const receiverTotalDownload = useStore($receiverTotalDownload);
const [downloadIndex, setDownloadIndex] = useState(-1);
const [isStartedTransferring, setIsStartedTransferring] = useState(false);
const [isTransferComplete, setIsTransferComplete] = useState(false);
const { files } = currTransfer;
const totalFiles = Object.keys(files)?.length;
const endTransfer = async () => {
// ! Notifying Sender: All files have been successfully transferred.
const isUpdatedSenderState = await fetchUpdateSenderTransferState(currTransfer.peerInfo.peerIP, currTransfer.peerInfo.peerHttpPort, 'SUCCESS');
if (!isUpdatedSenderState) {
log("Sender haven't acknowledged transfer completion.");
return;
}
setIsTransferComplete(true);
log('💯 Download Complete 💯');
process.exit(0);
};
const onSingleDownloadComplete = useCallback(() => {
if (downloadIndex >= totalFiles - 1) {
endTransfer();
}
else {
setDownloadIndex(prevIndex => prevIndex + 1);
}
}, [totalFiles, downloadIndex]);
const longestNameLength = useMemo(() => {
const longestLength = findLongestString(Object.values(files).map(file => file.fileName))
?.length ?? Infinity;
return Math.min(longestLength, 30);
}, [files]);
useEffect(() => {
if (!isStartedTransferring && !isTransferComplete) {
setIsStartedTransferring(true);
setDownloadIndex(0);
}
}, [isStartedTransferring, isTransferComplete]);
return (React.createElement(Box, { borderColor: "green", borderStyle: "bold", paddingX: 1, flexDirection: "column", marginTop: 1 },
React.createElement(Box, { flexDirection: "column" },
React.createElement(Text, { backgroundColor: "green", color: "white", bold: true },
' ',
currTransfer.peerInfo.peerName,
' ')),
React.createElement(Text, { dimColor: true },
isTransferComplete
? 'Files Transfer Complete 🎉'
: isStartedTransferring
? 'Receiving Files...'
: 'Files',
"\u2800(",
formatBytes(receiverTotalDownload),
"\u2800/\u2800",
formatBytes(currTransfer.totalFileSize),
")"),
Object.keys(files).map((key, index) => (React.createElement(SingleFileTransfer, { key: key, index: index, downloadIndex: downloadIndex, state: files[key]?.state, error: files[key]?.errorMsg, fileInfo: {
fileId: key,
fileName: files[key]?.fileName,
fileType: files[key]?.fileType,
fileSize: files[key]?.totalSize,
}, peerInfo: currTransfer.peerInfo, isStartedTransferring: isStartedTransferring, isTransferComplete: isTransferComplete, onSingleDownloadComplete: onSingleDownloadComplete, longestNameLength: longestNameLength })))));
};
export default FileTransfer;