Untitled

explain the below code:


import React, { useRef, useState, useEffect } from 'react';
import { AppContext, useAppState } from '@d-lift/core';
import {
    SimpleFileUpload,
    Label,
    Button,
    Group,
    Section,
    ListItem,
    List,
    Modal,
    Para,
    LineBreak,
    Grid,
    Row,
    Column,
} from '@d-lift/uxcomponents';

const ExcelUpload = () => {
    // const [file, setFile] = useState(null);
    const [status, setStatus] = useState('initial');
    const [uploadedFiles, setUploadedFiles] = useState([]);
    const fileInputRef = useRef(null);
    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
    const [selectedFile, setSelectedFile] = useState([]);

    const handleFileChange = (e) => {
        if (Array.isArray(e)) {
            if (e.length > 0) {
                const newFile = e[0];
                setSelectedFile(newFile);
                console.log('File selected:', newFile.name, selectedFile);
                setShowConfirmDialog(true); // Show the modal on file selection
            } else {
                console.log('No file selected');
            }
        }
    };
    useEffect(() => {
        if (selectedFile) {
            console.log('Selected file state updated:', selectedFile.name);
            console.log('file 2', selectedFile);
        }
    }, [selectedFile]);

    const confirmUpload = async () => {
        if (selectedFile) {
            await handleUpload(selectedFile);
            setSelectedFile(null); // Reset selected file after upload
            setShowConfirmDialog(false); // Close modal after upload
        }
    };

    const handleUpload = async () => {
        try {
            console.log('l', selectedFile);
            if (!selectedFile) {
                console.error('No file selected');
                setStatus('fail');
                return;
            }

            console.log('Processing file:', selectedFile);

            setUploadedFiles((prevFiles) => [
                ...prevFiles,
                {
                    id: Math.random() * 100 + 1,
                    name: selectedFile.name,
                    size: selectedFile.size,
                },
            ]);

            document.getElementById('root').scrollIntoView();

            setStatus('success');
        } catch (error) {
            console.error(error);
            setStatus('fail');
        }
    };

    return (
        <>
            <Modal className="bg-gradient-yellow" isOpen={showConfirmDialog} showIf={selectedFile}>
                <div>
                    <header className="pt-3 ux-rfi-font-header">
                        <h4>Add Selected Attachment</h4>
                    </header>
                </div>
                <Section className="ux-rfi-green-border-round">
                    {selectedFile && (
                        <Para>
                            {selectedFile.name} - {selectedFile.size} bytes
                        </Para>
                    )}
                </Section>
                <LineBreak size={1} />
                <Grid>
                    <Row className="mt-5 mb-2">
                        <Column className="col-md-4">
                            <Button
                                className="ux-rfi-white-button-bold button-alignment"
                                click={() => setShowConfirmDialog(false)}>
                                CANCEL
                            </Button>
                        </Column>
                        <Column className="col-md-8 d-flex justify-content-end">
                            <Button
                                className="ux-rfi-green-button button-alignment"
                                click={confirmUpload}>
                                ADD ATTACHMENT
                            </Button>
                        </Column>
                    </Row>
                </Grid>
            </Modal>
            {/* <Section className="confirmation-dialog" showIf={selectedFile}>
                <p>Do you want to upload the document?</p>
                <Button click={confirmUpload} className="ux-rfi-green-button">
                    Yes
                </Button>
                <Button click={() => setConfirmationDialog(false)} className="ux-rfi-white-button">
                    No
                </Button>
            </Section> */}
            <div className="ux-rfi-attachment-container ux-rfi-green-border">
                <Label className="mb-0" model="AddAttachments.fileList">
                    Attachments:
                </Label>
                <Section className="pt-4">
                    <List>
                        {uploadedFiles.length > 0 ? (
                            uploadedFiles.map((file) => (
                                <ListItem key={file.id} iconKey={null}>
                                    {file.name} - {file.size} bytes
                                </ListItem>
                            ))
                        ) : (
                            <ListItem iconKey={null}>No Files Uploaded</ListItem>
                        )}
                    </List>
                    <SimpleFileUpload
                        model="AddAttachments.uploadedFiles"
                        allowDragAndDrop={false}
                        inputDisplayType="custom"
                        ref={fileInputRef}
                        style={{ display: 'none' }}
                        onDropAccepted={handleFileChange}
                        accept=".pdf,.PDF,.doc,.DOC,.ppt">
                        <Button
                            size="small"
                            click={() => fileInputRef.current && fileInputRef.current.click()}
                            className="ux-rfi-green-button">
                            <Group width="1,10">
                                <i className="fa fa-plus" aria-hidden="true"></i>Add Attachment
                            </Group>
                        </Button>
                    </SimpleFileUpload>
                </Section>
            </div>
        </>
    );
};

export default ExcelUpload;