Issue.jsx

import { useState, useEffect } from 'react';
import { Button, Label, Input, Form, FormGroup, Row, Col } from 'reactstrap';
import { toast } from 'react-toastify';
import { useHistory, useParams } from 'react-router-dom';
import axios from 'axios';
import { ENDPOINTS } from '../../../utils/URL';
import styles from './Issue.module.css';
import { useSelector } from 'react-redux';

function Issue() {
  const ISSUE_FORM_HEADER = 'ISSUE LOG';
  const ISSUE_DATE = 'Issue Date:';
  const ISSUE_TYPE = 'Issue Type:';
  const CONSEQUENCES_TITLE = 'Consequence(s): select all that apply';
  const NOTE = 'Note: MET means Materials, Equipment and/or Tool.';
  const DESCRIPTION_PLACEHOLDER =
    "Description the issue as detailed as possible.\n (minimum 100 characters)\n • What happened?\n • Who's involved\n • How did it happen?\n • What was the immediate action taken?\n • If there were any witnesses, who are they?\n";
  const RESOLVED = 'Resolved?';
  const DESCRIPTION = 'Description:';
  const defaultOption = 'Safety';
  const maxDescriptionCharacterLimit = 500;
  const history = useHistory();
  const { projectId } = useParams();

  const dropdownOptions = ['Safety', 'METs quality / functionality', 'Labor', 'Weather', 'Other'];
  const userData = localStorage.getItem('token');
  const userId = JSON.parse(atob(userData?.split('.')[1]))?.userid;

  const safetyCheckboxOptions = [
    'MET Damage/Waste',
    'Schedule Delay',
    'Minor Injury',
    'Major Injury',
    'Other',
  ];

  const metQualityCheckboxOptions = ['Require Reorder of MET', 'Schedule Delay', 'Other'];

  const laborCheckboxOptions = ['Quality Issue', 'Schedule Delay', 'Other'];

  const weatherCheckboxOptions = ['Require Reorder of MET', 'Schedule Delay', 'Other'];

  const otherOption = ['Other'];

  const darkMode = useSelector(state => state.theme.darkMode);

  const [formData, setFormData] = useState({
    issueDate: '',
    dropdown: defaultOption,
    checkboxes: new Set(),
    other: '',
    resolved: '',
    description: '',
  });

  const [checkboxOptions, setCheckboxOption] = useState([]);
  const [characterCount, setCharacterCount] = useState(0);

  const handleCheckboxChange = option => {
    setFormData(prevFormData => {
      const newCheckboxes = new Set(prevFormData.checkboxes);

      if (newCheckboxes.has(option)) {
        newCheckboxes.delete(option);
      } else {
        newCheckboxes.add(option);
      }

      return { ...prevFormData, checkboxes: newCheckboxes };
    });
  };

  const handleOtherInputChange = (e, option) => {
    setFormData({ ...formData, other: e.target.value });

    if (e.target.value.length > 0 && e.target.value.trim() && !formData.checkboxes.has(option)) {
      handleCheckboxChange(option);
    } else if (formData.checkboxes.has(option) && e.target.value.trim().length === 0) {
      handleCheckboxChange(option);
    }
  };
  const handleDescriptionChange = e => {
    let currentDescription = e.target.value;

    if (currentDescription.length > maxDescriptionCharacterLimit) {
      currentDescription = currentDescription.slice(0, maxDescriptionCharacterLimit);
    }

    setFormData({ ...formData, description: currentDescription });
    setCharacterCount(currentDescription.trim().length);
  };

  const handleCancel = e => {
    e.preventDefault();
    history.goBack();
  };

  const validateData = currentFormData => {
    // Declaring date vars with current device time to check if issue date is in the future.
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const todayStr = `${year}-${month}-${day}`;

    if (!currentFormData.issueDate) {
      toast.error('Issue Date is required.');
      return false;
    }

    if (currentFormData.issueDate > todayStr) {
      toast.error('Issue Date cannot be in the future.');
      return false;
    }

    if (!currentFormData.dropdown) {
      toast.error('Issue Type is required.');
      return false;
    }

    if (currentFormData.checkboxes.size === 0) {
      toast.error('Consequence(s) is required.');
      return false;
    }

    if (
      currentFormData.checkboxes &&
      ((currentFormData.checkboxes.has('Other') && currentFormData.other.trim().length <= 0) ||
        (!currentFormData.checkboxes.has('Other') && currentFormData.other.trim().length > 0))
    ) {
      toast.error('Please specify the other consequence.');
      return false;
    }

    if (!currentFormData.resolved) {
      toast.error('Resolved is required.');
      return false;
    }

    if (currentFormData.description.trim().length <= 100) {
      toast.error('Please add a mininum of 100 characters to Description.');
      return false;
    }

    return true;
  };

  const handleSubmit = async e => {
    e.preventDefault();

    const isDataValid = validateData(formData);
    const issueConsequences = Array.from([
      ...formData.checkboxes,
      formData.other.trim() === '' ? null : formData.other.trim(),
    ]).filter(Boolean);
    const currentFormData = {
      issueDate: formData.issueDate,
      issueType: formData.dropdown,
      issueConsequences,
      issueResolved: formData.resolved === 'Yes',
      issueText: formData.description,
      createdBy: userId,
      projectId,
    };
    if (!isDataValid) {
      return false;
    }
    await axios
      .post(`${ENDPOINTS.BM_ISSUE_FORM}`, currentFormData)
      .then(() => {
        toast.success('Issue Form Submitted Successfully');
        history.push(`/bmdashboard/projects/${projectId}`);
        return true;
      })
      .catch(() => {
        toast.error('Issue Form Submission Failed');
        return false;
      });
    return isDataValid;
  };

  const createAndSetCheckboxOptionPairArray = currentCheckboxOption => {
    // Need this logic to dynamically create rows and cols.
    const currentCheckBoxOptionPairArray = [];

    for (let i = 0; i < currentCheckboxOption.length; i += 2) {
      let pair = [];
      if (i + 1 >= currentCheckboxOption.length) {
        pair = [currentCheckboxOption[i]];
      } else {
        pair = [currentCheckboxOption[i], currentCheckboxOption[i + 1]];
      }

      currentCheckBoxOptionPairArray.push(pair);
    }

    setCheckboxOption(currentCheckBoxOptionPairArray);
  };

  const changeCheckboxOption = selectedOption => {
    let currentCheckboxOption = otherOption;

    if (selectedOption === 'Safety') {
      currentCheckboxOption = safetyCheckboxOptions;
    } else if (selectedOption === 'METs quality / functionality') {
      currentCheckboxOption = metQualityCheckboxOptions;
    } else if (selectedOption === 'Labor') {
      currentCheckboxOption = laborCheckboxOptions;
    } else if (selectedOption === 'Weather') {
      currentCheckboxOption = weatherCheckboxOptions;
    }

    createAndSetCheckboxOptionPairArray(currentCheckboxOption);
  };

  const handleDropdownChange = option => {
    setFormData({ ...formData, dropdown: option, checkboxes: new Set(), other: '' });
    changeCheckboxOption(option);
  };

  useEffect(() => {
    // Run this once during initialization to set default dropdown/checkbox options.
    createAndSetCheckboxOptionPairArray(safetyCheckboxOptions);
    handleDropdownChange(defaultOption);
  }, []);

  return (
    <div
      className={darkMode ? `${styles.darkModeIssueFormContainer}` : `${styles.issueFormContainer}`}
    >
      <h4 className={`${styles.issueTitleText}`}>{ISSUE_FORM_HEADER}</h4>
      <Form>
        <FormGroup>
          <Row className={`${styles.issueDate}`}>
            <Col className="d-flex justify-content-center">
              <Label className={`${styles.subTitleText}`}>
                <span className={`${styles.redAsterisk}`}>* </span>
                {ISSUE_DATE}
              </Label>
            </Col>
            <Col>
              <Input
                className={`${styles.issueFormOverrideCss} ${styles.issueDateInput}`}
                type="date"
                name="issueDate"
                id="issueDate"
                required
                min={new Date('2020-01-01').toISOString().split('T')[0]}
                max={new Date().toISOString().split('T')[0]}
                onChange={e => setFormData({ ...formData, issueDate: e.target.value })}
              />
            </Col>
          </Row>
        </FormGroup>
        <Row>
          <Col>
            <Label className={`${styles.redText}`}>{NOTE}</Label>
          </Col>
        </Row>
        <FormGroup>
          <Row>
            <Col>
              <Label className={`${styles.subTitleText}`}>
                <span className={`${styles.redAsterisk}`}>* </span>
                {ISSUE_TYPE}
              </Label>
            </Col>
          </Row>
          <Row>
            <Col>
              <Input
                className={`${styles.issueFormOverrideCss}`}
                type="select"
                name="dropdown"
                value={formData.dropdown}
                onChange={e => handleDropdownChange(e.target.value)}
                required
              >
                {dropdownOptions.map(option => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </Input>
            </Col>
          </Row>
        </FormGroup>
        <FormGroup>
          <Row>
            <Col>
              <Label className={`${styles.subTitleText}`}>
                <span className={`${styles.redAsterisk}`}>* </span>
                {CONSEQUENCES_TITLE}
              </Label>
            </Col>
          </Row>
          {checkboxOptions.map(pair => (
            <Row key={pair} className={`${styles.consequencesCheckboxes}`}>
              {pair.map(option => (
                <Col key={option}>
                  <Label check>
                    <Input
                      type="checkbox"
                      checked={formData.checkboxes.has(option) || false}
                      onChange={() => handleCheckboxChange(option)}
                      required
                    />
                    {option}
                  </Label>
                  {option === 'Other' && (
                    <Input
                      className={`${styles.issueFormOverrideCss}`}
                      type="textarea"
                      rows="1"
                      placeholder="If other is selected, please specify."
                      value={formData.other}
                      onChange={e => handleOtherInputChange(e, option)}
                      required={formData.checkboxes.has(option)}
                      disabled={!formData.checkboxes.has(option)}
                    />
                  )}
                </Col>
              ))}
            </Row>
          ))}
        </FormGroup>
        <FormGroup>
          <Row>
            <Col>
              <Label className={`${styles.subTitleText}`}>
                <span className={`${styles.redAsterisk}`}>* </span>
                {RESOLVED}
              </Label>
            </Col>
          </Row>
          <Row className={`${styles.issueRadioButtons}`}>
            <Col className={`${styles.issueRadioButtons}`}>
              <Label check>
                <Input
                  type="radio"
                  name="radioOption"
                  onChange={() => setFormData({ ...formData, resolved: 'Yes' })}
                  required
                />
                Yes
              </Label>
            </Col>
            <Col className={`${styles.issueRadioButtons}`}>
              <Label check>
                <Input
                  type="radio"
                  name="radioOption"
                  onChange={() => setFormData({ ...formData, resolved: 'No' })}
                  required
                />
                No
              </Label>
            </Col>
          </Row>
        </FormGroup>
        <FormGroup>
          <Row>
            <Col>
              <Label for="description" className={`${styles.subTitleText}`}>
                <span className={`${styles.redAsterisk}`}>* </span>
                {DESCRIPTION}
              </Label>
            </Col>
          </Row>
          <Row className={`${styles.positionRelative}`}>
            <Col>
              <Input
                className={`${styles.issueFormOverrideCss} ${styles.rowMarginBottom}`}
                type="textarea"
                id="description"
                placeholder={DESCRIPTION_PLACEHOLDER}
                value={formData.description}
                rows="8"
                onChange={e => handleDescriptionChange(e)}
                required
              />
            </Col>
            <div className={`${styles.characterCounterText}`}>
              {characterCount}/{maxDescriptionCharacterLimit}
            </div>
          </Row>
        </FormGroup>
        <FormGroup>
          <Row className="text-center">
            <Col>
              <Button className={`${styles.issueFormButtonCancel}`} onClick={e => handleCancel(e)}>
                Cancel
              </Button>
            </Col>
            <Col>
              <Button className={`${styles.issueFormButtonSubmit}`} onClick={e => handleSubmit(e)}>
                Submit
              </Button>
            </Col>
          </Row>
        </FormGroup>
      </Form>
    </div>
  );
}

export default Issue;