Untitled

 avatar
unknown
plain_text
2 years ago
3.5 kB
7
Indexable
// external lib dependencies
import { createContext, FC, useContext, useMemo, useCallback, useState } from "react";

// absolute path dependencies
import { sendFiles, getFilesByEngagementId, getFileByFileId } from "services";

interface FilesState {
  uploadFiles: (_: File[], id: number, category: string, password: string) => void;
  fetchFiles: (id: number) => void;
  fetchFile: (file_id: string, file_name: string, password: string) => Promise<any>;
  files: any[];
  loadingFiles: boolean;
  loadingUploadFiles: boolean;
  errorMessage: string;
}

export const FilesContext = createContext<FilesState>({
  uploadFiles: (_: File[], id: number, category: string) => {},
  fetchFiles: (id: number) => {},
  fetchFile: (file_id: string, file_name: string, password: string) => new Promise((resolve, reject) => {}),
  files: [],
  loadingFiles: false,
  loadingUploadFiles: false,
  errorMessage: ""
});

export const FilesProvider: FC = ({ children }) => {
  const [files, setFiles] = useState<any>([]);
  const [loadingFiles, setLoadingFiles] = useState<boolean>(true);
  const [loadingUploadFiles, setLoadingUploadFiles] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string>("");

  const fetchFiles = useCallback(
    (id: number) => {
      setLoadingFiles(true);

      getFilesByEngagementId(id)
        .then((res) => {
          setFiles(res);
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => setLoadingFiles(false));
    },
    [setFiles]
  );

  const fetchFile = useCallback(async (file_id: string, file_name: string, password: string) => {

    var payload = {
      "file_password": password
    }
    setErrorMessage("")
    return getFileByFileId(payload, file_id)
      .then((res) => res.blob())
      .then((blob) => {
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(new Blob([blob]));
        link.setAttribute("download", file_name);

        document.body.appendChild(link);
        link.click();

        if (link && link.parentNode) {
          link.parentNode.removeChild(link);
        }
      })
      .catch( async (err) => {
        console.log("I am in catch block")
        await err.json().then((res: any) => {
          console.log(res.detail)
          setErrorMessage(res.detail)
        })
      })
      .finally(() => console.log("I have fetched the file, ", password))
  }, [setErrorMessage]);

  const uploadFiles = useCallback(
    (files: File[], id: number, category: string, password: string) => {
      setLoadingUploadFiles(true);

      var payload = new FormData();
      payload.append("file", files[0]);
      payload.append('data', '{"file_password" : "' + password + '"}');

      sendFiles(payload, id, category)
        .then((res) => {
          fetchFiles(id);
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => setLoadingUploadFiles(false));
    },
    [fetchFiles]
  );

  const value = useMemo(() => {
    return {
      uploadFiles,
      fetchFiles,
      fetchFile,
      files,
      loadingFiles,
      loadingUploadFiles,
      errorMessage,
    };
  }, [uploadFiles, fetchFiles, fetchFile, files, loadingFiles, loadingUploadFiles, errorMessage]);

  return <FilesContext.Provider value={value}>{children}</FilesContext.Provider>;
};

export const useFilesContext = () => {
  return useContext(FilesContext);
};
Editor is loading...