SHARE
TWEET

React hooks component 2

a guest Jan 29th, 2020 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect, useState } from 'react';
  2. import * as PropTypes from 'prop-types';
  3. import { Modal } from 'react-bootstrap';
  4. import UserAssignmentPreviewModalStyle from './UserAssignmentPreviewModal.css';
  5. import buttonStyle from '../../common/Buttons.css';
  6. import api from '../../api';
  7.  
  8. function UserAssignmentsPreviewModal(props) {
  9.   const [userAssignmentInfo, setUserAssignmentInfo] = useState([]);
  10.   const [userAssignmentQualifications, setUserAssignmentQualifications] = useState([]);
  11.   const [availableToApply, setAvailableToApply] = useState([]);
  12.  
  13.   useEffect(() => {
  14.     setUserAssignmentInfo(props.userAssignmentInfo);
  15.     setUserAssignmentQualifications(props.userAssignmentQualifications);
  16.     setAvailableToApply(props.availableToApply);
  17.   }, []);
  18.  
  19.   const qualifications = userAssignmentQualifications.map((qualification, index) => {
  20.     return <div key={index}>{qualification}</div>;
  21.   });
  22.  
  23.   function handleApplication() {
  24.     const { userId: id } = props;
  25.     const postBody = {
  26.       reasonForApplying: 'none',
  27.       linkedInLink: 'none',
  28.       cvFileURL: 'none',
  29.       userAssignment: {
  30.         id: userAssignmentInfo.userAssignment.id,
  31.       },
  32.     };
  33.     api.user_assignment_application.createByID(postBody, id).then(setAvailableToApply(false));
  34.   }
  35.  
  36.   return (
  37.     <Modal
  38.       show={props.showModal}
  39.       backdrop
  40.       onHide={props.handleCloseModal}
  41.       size="lg"
  42.       aria-labelledby="contained-modal-title-vcenter"
  43.       centered
  44.     >
  45.       <Modal.Header closeButton>
  46.         <Modal.Title className={UserAssignmentPreviewModalStyle.modalHeadline}>
  47.           {userAssignmentInfo.headline}
  48.           {props.availableToApply}
  49.         </Modal.Title>
  50.       </Modal.Header>
  51.       <Modal.Body>
  52.         <div>
  53.           <div className={UserAssignmentPreviewModalStyle.modalSubheadline}>
  54.             {userAssignmentInfo.subheadline}
  55.           </div>
  56.           <div className={UserAssignmentPreviewModalStyle.descriptionQualificationsContainer}>
  57.             <div className={UserAssignmentPreviewModalStyle.modalDescription}>
  58.               {userAssignmentInfo.description}
  59.             </div>
  60.             <div className={UserAssignmentPreviewModalStyle.modalQualifications}>
  61.               <div className={UserAssignmentPreviewModalStyle.modalEstimatedtime}>
  62.                 <div>Estimated time (hours)</div>
  63.                 <div>{userAssignmentInfo.estimatedTime}</div>
  64.               </div>
  65.               {qualifications}
  66.             </div>
  67.           </div>
  68.           <div className={UserAssignmentPreviewModalStyle.modalPrerequisitesWorkLocationContainer}>
  69.             <div className={UserAssignmentPreviewModalStyle.modalPrerequisites}>
  70.               <div className={UserAssignmentPreviewModalStyle.sectionHeadline}>Prerequisites</div>
  71.               {userAssignmentInfo.prerequisites}
  72.             </div>
  73.             <div className={UserAssignmentPreviewModalStyle.modalWorkLocation}>
  74.               <div className={UserAssignmentPreviewModalStyle.sectionHeadline}>Work location</div>
  75.               {userAssignmentInfo.workLocation}
  76.             </div>
  77.           </div>
  78.           <div className={UserAssignmentPreviewModalStyle.modalDelGoalsHeadlineWrapper}>
  79.             <div className={UserAssignmentPreviewModalStyle.modalDelGoalsHeadline}>
  80.               Delivery goals
  81.             </div>
  82.           </div>
  83.           <div className={UserAssignmentPreviewModalStyle.modalDelGoalsContainer}>
  84.             <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
  85.               <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>First</div>
  86.               {userAssignmentInfo.deliveryGoal1}
  87.             </div>
  88.             {userAssignmentInfo.deliveryGoal2 === '' ? null : (
  89.               <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
  90.                 <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>
  91.                   Second
  92.                 </div>
  93.                 {userAssignmentInfo.deliveryGoal2}
  94.               </div>
  95.             )}
  96.             {userAssignmentInfo.deliveryGoal3 === '' ? null : (
  97.               <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
  98.                 <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>
  99.                   Third
  100.                 </div>
  101.                 {userAssignmentInfo.deliveryGoal3}
  102.               </div>
  103.             )}
  104.           </div>
  105.         </div>
  106.       </Modal.Body>
  107.       <Modal.Footer className={UserAssignmentPreviewModalStyle.modalFooterWrapper}>
  108.         <div>
  109.           <button
  110.             className={`${buttonStyle.button} ${UserAssignmentPreviewModalStyle.modalFooterApproveButton}`}
  111.             onClick={handleApplication}
  112.             disabled={!availableToApply}
  113.           >
  114.             Apply
  115.           </button>
  116.         </div>
  117.       </Modal.Footer>
  118.     </Modal>
  119.   );
  120. }
  121.  
  122. UserAssignmentsPreviewModal.propTypes = {
  123.   userAssignmentInfo: PropTypes.object.isRequired,
  124.   userAssignmentQualifications: PropTypes.array.isRequired,
  125.   showModal: PropTypes.bool.isRequired,
  126.   handleCloseModal: PropTypes.func.isRequired,
  127.   availableToApply: PropTypes.bool.isRequired,
  128.   userId: PropTypes.number.isRequired,
  129. };
  130.  
  131. export default UserAssignmentsPreviewModal;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top