Notes

import React, { useState, useEffect } from 'react';
import './styles/UploadingPage.scss';
import FileUploadProgress from './uploadpagecomponents/FileUploadProgress';
import { Button, SelectChangeEvent, Typography } from '@mui/material';
import DropdownSelect from '../../components/dropdown/DropdownSelect';
import FileUploadSection from './uploadpagecomponents/FileUploadSection';
import { useNavigate } from 'react-router-dom';
import { useHandlePostApi } from '../../utils/fetchData';
import { useMsal } from '@azure/msal-react';

const UploadingPage: React.FC = () => {
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [fileSize, setFileSize] = useState<number | null>(null);
const [progress, setProgress] = useState<number>(0);
const [dragging, setDragging] = useState(false);
const [uploadSuccess, setUploadSuccess] = useState<boolean | undefined>(
undefined
);
const [productName, setProductName] = useState('');
const [userEmail, setUserEmail] = useState<string>('test');
const [userName, setUserName] = useState<string>('test');
let appendUrl: string = '';
let params: string = '';
const { instance, accounts } = useMsal();

const navigate = useNavigate();
const { handlePostApi } = useHandlePostApi();
useEffect(() => {
if (accounts.length > 0) {
setUserName(accounts[0].name || 'test');
setUserEmail(accounts[0].username);
}
}, [accounts]);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files ? event.target.files[0] : null;
setSelectedFile(file);
setFileSize(file ? Math.round(file.size / 1024) : null);
setProgress(0);
if (file) {
simulateUpload(file);
}
};

const handleDragOver = (event: React.DragEvent) => {
event.preventDefault();
setDragging(true);
};

const handleDragLeave = (event: React.DragEvent) => {
event.preventDefault();
setDragging(false);
};

const handleDrop = (event: React.DragEvent) => {
event.preventDefault();
const file = event.dataTransfer.files[0];
setSelectedFile(file);
setFileSize(file ? Math.round(file.size / 1024) : null);
setDragging(false);
setProgress(0);
if (file) {
simulateUpload(file);
}
};

const handleUploadClick = async () => {
if (selectedFile) {
try {
const formData = new FormData();
formData.append('file', selectedFile);
appendUrl = 'api/test_trigger';

params = '?name=' + userName + productName;
const data = await handlePostApi(appendUrl, params, formData);
console.log('File uploaded successfully!', data);
setUploadSuccess(true);
navigate('loading-screen');
} catch (error) {
console.error('Error uploading file', error);
setUploadSuccess(false);
}
} else {
alert('Please select a file first!');
}
};

const simulateUpload = (file: File) => {
const totalDuration = 1000;
const intervalDuration = 500;

const interval = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
return 100;
}
return prevProgress + 100 / (totalDuration / intervalDuration);
});
}, intervalDuration);

setTimeout(() => {
clearInterval(interval);
setProgress(100);
console.log(`File ${file.name} uploaded successfully!`);
}, totalDuration);
};

const handleChange = (event: SelectChangeEvent) => {
setProductName(event.target.value);
};

const handleDelete = () => {
setSelectedFile(null);
setFileSize(null);
setSelectedFile(null);
setProgress(0);
setUploadSuccess(undefined);
};

return (
<div className="min-h-screen flex flex-col items-center">
<main className="flex flex-col items-left mt-10 w-full">
<FileUploadSection
dragging={dragging}
selectedFile={selectedFile}
handleFileChange={handleFileChange}
handleDragOver={handleDragOver}
handleDragLeave={handleDragLeave}
handleDrop={handleDrop}
/>
<div className="w-full">
{selectedFile && (
<FileUploadProgress
fileName={selectedFile ? selectedFile.name : ''}
fileSize={fileSize !== null ? fileSize : undefined}
progress={progress}
message={progress === 100 ? 'File uploaded successfully!' : ''}
uploadSuccess={uploadSuccess}
onDelete={handleDelete}
></FileUploadProgress>
)}
</div>

<div className="dropdown-component">
{selectedFile && (
<div className="dropdown-parent">
<div className="step1-parent">
<Typography className="step1">
Please input waiver form product{' '}
</Typography>
<DropdownSelect value={productName} onChange={handleChange} />
</div>
<div className="step2-parent">
<Typography className="step2">Click Process</Typography>
<Button
variant="contained"
className={
productName ? 'process-button' : 'process-button-disabled'
}
onClick={() => (productName ? handleUploadClick() : null)}
>
Confirm and Process
</Button>
</div>
</div>
)}
</div>
</main>
</div>
);
};

export default UploadingPage;