DocumentOrganizer/src/pages/FilesPage/FilesPage.js

import React, { useState } from "react";
import { Checkbox, FormControlLabel, MenuItem, Select } from "@mui/material";
import { useTranslation } from "react-i18next";
import uploadIcon from "../../assets/images/upload.png";
import IconButton from "../../components/IconButton/IconButton";
import { useSelector, useDispatch } from "react-redux";
import { selectCategories } from "../../store/selectors/categoriesSelector";
import { useEffect } from "react";
import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
import {
  changeTagIsCheckedValue,
  resetIsCheckedTagsValue,
  setTagsReq,
} from "../../store/actions/tags/tagsAction";
import { selectTags } from "../../store/selectors/tagsSelector";
import { uploadFileReq } from "../../store/actions/uploadFile/uploadFileActions";

const FilesPage = () => {
  const [dropzoneActive, setDropzoneActive] = useState(false);
  const [pdfFile, setPdfFile] = useState(null);
  const dispatch = useDispatch();
  const categories = useSelector(selectCategories);
  const tags = useSelector(selectTags);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const { t } = useTranslation();

  useEffect(() => {
    dispatch(setCategoriesReq());
    dispatch(setTagsReq());
  }, []);

  const onSuccessUploadFile = () => {
    dispatch(resetIsCheckedTagsValue())
    setPdfFile(null)
  }

  const handleDrop = (e) => {
    e.preventDefault();
    const selectedFile = e.dataTransfer.files[0];
    setPdfFile(selectedFile);
  };

  const handleChangeInputFile = (e) => {
    const selectedFile = e.target.files[0];
    setPdfFile(selectedFile);
  };

  const selectCategoryHandler = (e) => {
    setSelectedCategory(e.target.value);
  };

  const onChangeTagsCheckbox = (id) => {
    dispatch(changeTagIsCheckedValue(id));
  };

  const uploadFileHandler = () => {
    const tagsIds = tags
      .filter((tag) => tag.isChecked === true)
      .map((tag) => Number(tag.id));

    dispatch(
      uploadFileReq({
        categoryId: selectedCategory,
        tagsIds,
        fileToUpload: pdfFile,
        onSuccessUploadFile
      })
    );
  };

  return (
    <div className="files-page">
      <div className="files-page-card">
        <div className="files-page-card-title">
          <h1>Categories</h1>
        </div>
        <div className="files-page-card-content">
          <Select
            labelId="files-page-card-content-select"
            id="files-page-card-content-selectt"
            sx={{ width: "100%" }}
            onChange={selectCategoryHandler}
            value={selectedCategory}
          >
            {categories &&
              categories.map((category, index) => (
                <MenuItem
                  key={index}
                  sx={{ textAlign: "left" }}
                  value={category.id}
                >
                  {category.name}
                </MenuItem>
              ))}
          </Select>
        </div>
      </div>

      <div className="files-page-card">
        <div className="files-page-card-title">
          <h1>Tags</h1>
        </div>
        <div className="files-page-card-content">
          <div className="files-page-card-content-checkboxes">
            {tags &&
              tags.map((tag) => (
                <FormControlLabel
                  key={tag.id}
                  control={
                    <Checkbox
                      value={tag.name}
                      checked={tag.isChecked}
                      onChange={onChangeTagsCheckbox.bind(this, tag.id)}
                      className="create-ad-second-step-checkbox"
                    />
                  }
                  label={tag.name}
                />
              ))}
          </div>
        </div>
      </div>

      <div className="files-page-card">
        <div className="files-page-card-title">
          <h1>Drag & Drop File</h1>
        </div>
        <div className="files-page-card-content">
          <div
            className="uploadCV-input"
            onDragOver={(e) => {
              setDropzoneActive(true);
              e.preventDefault();
            }}
            onDragLeave={(e) => {
              setDropzoneActive(false);
              e.preventDefault();
            }}
            onDrop={(e) => handleDrop(e)}
            style={{
              backgroundColor: dropzoneActive ? "#F4F4F4" : "#ffffff",
            }}
          >
            <div className="uploadCV-input-sub-container">
              <img src={uploadIcon} />
              <div className="uploadCV-input-sub-container">
                {pdfFile !== null ? (
                  <p>{pdfFile.name}</p>
                ) : (
                  <>
                    <p>
                      {t("ads.dragPdf1")} &nbsp;
                      <label
                        htmlFor="upload-file"
                        style={{
                          cursor: "pointer",
                          textDecoration: "underline",
                          color: "#1E92D0",
                        }}
                      >
                        {t("common.search")}
                      </label>
                      &nbsp;{t("ads.dragPdf2")}
                    </p>
                    <input
                      type="file"
                      name="photo"
                      id="upload-file"
                      style={{ display: "none", zIndex: -1 }}
                      value={pdfFile}
                      data-testid="apply-for-ad-modal-fourth-stage-pdf-input"
                      accept=".pdf"
                      onChange={handleChangeInputFile}
                    />
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="files-page-card">
        <div className="files-page-card-add-button">
          <IconButton
            className="c-btn ads-page-btn c-btn--primary add-ad-btn"
            onClick={uploadFileHandler}
          >
            + {t("files.addFile")}
          </IconButton>
        </div>
      </div>
    </div>
  );
};

export default FilesPage;