Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useEffect, useState } from 'react';
- import * as PropTypes from 'prop-types';
- import { Modal } from 'react-bootstrap';
- import UserAssignmentPreviewModalStyle from './UserAssignmentPreviewModal.css';
- import buttonStyle from '../../common/Buttons.css';
- import api from '../../api';
- function UserAssignmentsPreviewModal(props) {
- const [userAssignmentInfo, setUserAssignmentInfo] = useState([]);
- const [userAssignmentQualifications, setUserAssignmentQualifications] = useState([]);
- const [availableToApply, setAvailableToApply] = useState([]);
- useEffect(() => {
- setUserAssignmentInfo(props.userAssignmentInfo);
- setUserAssignmentQualifications(props.userAssignmentQualifications);
- setAvailableToApply(props.availableToApply);
- }, []);
- const qualifications = userAssignmentQualifications.map((qualification, index) => {
- return <div key={index}>{qualification}</div>;
- });
- function handleApplication() {
- const { userId: id } = props;
- const postBody = {
- reasonForApplying: 'none',
- linkedInLink: 'none',
- cvFileURL: 'none',
- userAssignment: {
- id: userAssignmentInfo.userAssignment.id,
- },
- };
- api.user_assignment_application.createByID(postBody, id).then(setAvailableToApply(false));
- }
- return (
- <Modal
- show={props.showModal}
- backdrop
- onHide={props.handleCloseModal}
- size="lg"
- aria-labelledby="contained-modal-title-vcenter"
- centered
- >
- <Modal.Header closeButton>
- <Modal.Title className={UserAssignmentPreviewModalStyle.modalHeadline}>
- {userAssignmentInfo.headline}
- {props.availableToApply}
- </Modal.Title>
- </Modal.Header>
- <Modal.Body>
- <div>
- <div className={UserAssignmentPreviewModalStyle.modalSubheadline}>
- {userAssignmentInfo.subheadline}
- </div>
- <div className={UserAssignmentPreviewModalStyle.descriptionQualificationsContainer}>
- <div className={UserAssignmentPreviewModalStyle.modalDescription}>
- {userAssignmentInfo.description}
- </div>
- <div className={UserAssignmentPreviewModalStyle.modalQualifications}>
- <div className={UserAssignmentPreviewModalStyle.modalEstimatedtime}>
- <div>Estimated time (hours)</div>
- <div>{userAssignmentInfo.estimatedTime}</div>
- </div>
- {qualifications}
- </div>
- </div>
- <div className={UserAssignmentPreviewModalStyle.modalPrerequisitesWorkLocationContainer}>
- <div className={UserAssignmentPreviewModalStyle.modalPrerequisites}>
- <div className={UserAssignmentPreviewModalStyle.sectionHeadline}>Prerequisites</div>
- {userAssignmentInfo.prerequisites}
- </div>
- <div className={UserAssignmentPreviewModalStyle.modalWorkLocation}>
- <div className={UserAssignmentPreviewModalStyle.sectionHeadline}>Work location</div>
- {userAssignmentInfo.workLocation}
- </div>
- </div>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoalsHeadlineWrapper}>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoalsHeadline}>
- Delivery goals
- </div>
- </div>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoalsContainer}>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>First</div>
- {userAssignmentInfo.deliveryGoal1}
- </div>
- {userAssignmentInfo.deliveryGoal2 === '' ? null : (
- <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>
- Second
- </div>
- {userAssignmentInfo.deliveryGoal2}
- </div>
- )}
- {userAssignmentInfo.deliveryGoal3 === '' ? null : (
- <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
- <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>
- Third
- </div>
- {userAssignmentInfo.deliveryGoal3}
- </div>
- )}
- </div>
- </div>
- </Modal.Body>
- <Modal.Footer className={UserAssignmentPreviewModalStyle.modalFooterWrapper}>
- <div>
- <button
- className={`${buttonStyle.button} ${UserAssignmentPreviewModalStyle.modalFooterApproveButton}`}
- onClick={handleApplication}
- disabled={!availableToApply}
- >
- Apply
- </button>
- </div>
- </Modal.Footer>
- </Modal>
- );
- }
- UserAssignmentsPreviewModal.propTypes = {
- userAssignmentInfo: PropTypes.object.isRequired,
- userAssignmentQualifications: PropTypes.array.isRequired,
- showModal: PropTypes.bool.isRequired,
- handleCloseModal: PropTypes.func.isRequired,
- availableToApply: PropTypes.bool.isRequired,
- userId: PropTypes.number.isRequired,
- };
- export default UserAssignmentsPreviewModal;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement