front/src/pages/Inference/Inference.tsx

import {
  Box,
  LinearProgress,
  Modal,
  Typography
} from "@mui/material";
import { useCallback, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import MainContainer from "../../components/Container/MainContainer";
import AudioUploader from "../../requests/upload";

const Inference = () => {
  
  
  useEffect(() => {
    // Retrieve values from localStorage
    const storedFilePath = localStorage.getItem('file_path');
    const storedCsvFilePath = localStorage.getItem('csv_file_path');
    const storedOutputFilePath = localStorage.getItem('output_file_path');

    // Check if values are stored and delete them
    if (storedFilePath || storedCsvFilePath || storedOutputFilePath) {
      localStorage.removeItem('file_path');
      localStorage.removeItem('csv_file_path');
      localStorage.removeItem('output_file_path');
    }
  }, []);

  
  const location = useLocation();
  const [selectedIndex, setSelectedIndex] = useState(
    location.pathname.replace("/", "")
  );

  const [isVisible, setIsVisible] = useState(false);
  const [files, setFile] = useState<File | null>(null);
  const [filename, setFileName] = useState<string>("null");
  const [NextCard, setNextCard] = useState(false);

  const handleListItemClick = (index: string) => {
    setSelectedIndex(index);
  };
  
  useEffect(() => {
    setSelectedIndex(location.pathname.replace("/", ""));
  }, [location.pathname]);


  const uploadNow = () => {
    //start upload function and pass the file selected as argument
  };


  const onDragEnter = useCallback(
    (e: { stopPropagation: () => void; preventDefault: () => void }) => {
      setIsVisible(true);
      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    []
  );
  const onDragOver = useCallback(
    (e: { preventDefault: () => void; stopPropagation: () => void }) => {
      e.preventDefault();
      e.stopPropagation();
      return false;
    },
    []
  );
  const onDragLeave = useCallback(
    (e: { stopPropagation: () => void; preventDefault: () => void }) => {
      setIsVisible(false);
      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    []
  );
  const onDrop = useCallback(
    (e: { preventDefault: () => void; dataTransfer: any }) => {
      e.preventDefault();
      const files = e.dataTransfer.files;
      setFile(e.dataTransfer.files[0]);
      setFileName(e.dataTransfer.files[0].name);
      console.log("Files dropped: ", filename);
      // Upload files
      //check file type
      setNextCard(true);
      setIsVisible(false);
      return false;
    },
    []
  );

  useEffect(() => {
    window.addEventListener("mouseup", onDragLeave);
    window.addEventListener("dragenter", onDragEnter);
    window.addEventListener("dragover", onDragOver);
    window.addEventListener("drop", onDrop);
    return () => {
      window.removeEventListener("mouseup", onDragLeave);
      window.removeEventListener("dragenter", onDragEnter);
      window.removeEventListener("dragover", onDragOver);
      window.removeEventListener("drop", onDrop);
    };
  }, [onDragEnter, onDragLeave, onDragOver, onDrop]);


  //Modal OpenClose
  const [openModal, setOpenModal] = useState(false);
  const handleOpen = () => setOpenModal(true);
  const handleClose = () => setOpenModal(false);

  return (
    <>
      <MainContainer>
        <Box
          onDragEnter={onDragEnter}
          onDragOver={onDragEnter}
          onDragLeave={onDragLeave}
          sx={{
            justifyContent: "center",
            display: "flex",
            height: "99%",
            alignItems: "center",
          }}
        >
          <AudioUploader handleClose={handleClose} handleOpen={handleOpen}/>
          </Box>
        <GenerationModal GenerationStatus="It's working for sure" handleClose={handleClose} handleOpen={openModal}/>
      </MainContainer>
    </>
  );
};

export default Inference;

interface GenerationModalProps {
  GenerationStatus: string; // Replace "string" with the actual type of GenerationStatus
  handleOpen : boolean;
  handleClose: React.Dispatch<React.SetStateAction<boolean>>;
}

export function GenerationModal({
  GenerationStatus,
  handleOpen,
  handleClose
}: GenerationModalProps): any {


  const [statusText, setStatusText] = useState(GenerationStatus);

  useEffect(() => {
    // Update the displayText whenever the prop 'text' changes
    setStatusText(GenerationStatus);
  }, [GenerationStatus]);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        marginBottom: "10px",
      }}
    >
      <Modal
        open={handleOpen}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style_modal}>
          <Typography variant="h4">Model Running</Typography>
          <div style={{ paddingTop: "10px" }}>
            <Typography fontSize={"20px"}>{GenerationStatus}</Typography>
            <Box sx={{ pt: 2 }}>
              <LinearProgress color={"primary"} sx={{ borderRadius: "50px" }} />
            </Box>
          </div>
        </Box>
      </Modal>
    </div>
  );
}

const style_modal = {
  position: "absolute" as "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 500,
  color: "inherit",
  bgcolor: "background.paper",
  p: 4,
  borderRadius: "10px"
};