DocumentOrganizer/src/pages/FilesPage/AddFile.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";
import { FILES_VIEW_PAGE } from "../../constants/pages";
import PropTypes from "prop-types";

const AddFile = ({ history }) => {
  const [dropzoneActive, setDropzoneActive] = useState(false);
  const [pdfFile, setPdfFile] = useState(null);
  const [title, setTitle] = useState("");
  const [showMessage, setShowMessage] = useState(false);
  const dispatch = useDispatch();
  const categories = useSelector(selectCategories);
  const tags = useSelector(selectTags);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [note,setNote] = useState("")
  const { t } = useTranslation();

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

  const onSuccessUploadFile = () => {
    dispatch(resetIsCheckedTagsValue());
    setPdfFile(null);
    setTitle("");
    setShowMessage(true);
    setNote("")
  };

  useEffect(() => {
    if (showMessage === true) {
      setTimeout(() => {
        setShowMessage(false);
      }, 2000);
    }
  }, [showMessage]);

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

  const handleChangeInputFile = (e) => {
    const selectedFile = e.target.files[0];
    setTitle(selectedFile.name.split(".")[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));

    if (
      title === "" ||
      tagsIds.length === 0 ||
      pdfFile === null ||
      selectedCategory === null
    )
      return;

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

  const handleChangeNote = (e) => {
    setNote(e.target.value)
  }

  return (
    <div className="files-page" style={{ paddingTop: "0px" }}>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      {/* <div className="files-page-card">
        <div className="files-page-card-title">
          <h1>Title</h1>
        </div>
        <div className="files-page-card-content">
          <input
            type="text"
            className="create-ad-form-control-first-step-input"
            onChange={(e) => setTitle(e.target.value)}
            value={title}
            placeholder="Document Title"
          />
        </div>
      </div> */}

      <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%", borderColor: "#e4e4e4 !important" }}
            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 files-page-drag-and-drop"
            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-title"></div>
        <textarea className="files-note" placeholder="Note..." value={note} onChange={(e) => handleChangeNote(e)}/>
      </div>

      <div
        className="add-file-message"
        style={
          showMessage === false ? { display: "none" } : { display: "flex" }
        }
      >
        <p>Uspesno dodat fajl</p>
      </div>

      <div className="files-page-card">
        <div
          className="files-page-card-add-button"
          style={{ alignItems: "center" }}
        >
          <p
            className="applicant-ads-back-button"
            onClick={() => history.push(FILES_VIEW_PAGE)}
          >
            Nazad na sve fajlove
          </p>
          <IconButton
            className="c-btn ads-page-btn c-btn--primary add-ad-btn"
            onClick={uploadFileHandler}
          >
            + {t("files.addFile")}
          </IconButton>
        </div>
      </div>
    </div>
  );
};

AddFile.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
};

export default AddFile;