Feature/modal to create issue for edit request

client/src/components/manageProjects/editProject.js

@@ -7,6 +7,7 @@ import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../../utils/globalSettings';
 //for user level block access to all except for the ones checked
 
 const EditProject = (props) => {
+  console.log('editProject: props: ', props);
   const headerToSend = REACT_APP_CUSTOM_REQUEST_HEADER;
 
   //const [currentProjectData, setCurrentProjectData] = useState(props.projectToEdit);
@@ -57,6 +58,7 @@ const EditProject = (props) => {
 
       <div>
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.name}
           fieldName="name"
           updateProject={updateProject}
@@ -66,10 +68,13 @@ const EditProject = (props) => {
           fieldTitle="Name:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.description}
           fieldName="description"
           updateProject={updateProject}
@@ -79,10 +84,13 @@ const EditProject = (props) => {
           fieldTitle="Description:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.location}
           fieldName="location"
           updateProject={updateProject}
@@ -92,10 +100,13 @@ const EditProject = (props) => {
           fieldTitle="Location:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.githubIdentifier}
           fieldName="githubIdentifier"
           updateProject={updateProject}
@@ -105,10 +116,13 @@ const EditProject = (props) => {
           fieldTitle="GitHub Identifier:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.githubUrl}
           fieldName="githubUrl"
           updateProject={updateProject}
@@ -118,10 +132,13 @@ const EditProject = (props) => {
           fieldTitle="GitHib URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.slackUrl}
           fieldName="slackUrl"
           updateProject={updateProject}
@@ -131,10 +148,13 @@ const EditProject = (props) => {
           fieldTitle="Slack URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.googleDriveUrl}
           fieldName="googleDriveUrl"
           updateProject={updateProject}
@@ -144,10 +164,13 @@ const EditProject = (props) => {
           fieldTitle="Google Drive URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin', 'user']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.googleDriveId}
           fieldName="googleDriveId"
           updateProject={updateProject}
@@ -157,10 +180,12 @@ const EditProject = (props) => {
           fieldTitle="Google Drive ID:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.hflaWebsiteUrl}
           fieldName="hflaWebsiteUrl"
           updateProject={updateProject}
@@ -170,10 +195,13 @@ const EditProject = (props) => {
           fieldTitle="HfLA Website URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.videoConferenceLink}
           fieldName="videoConferenceLink"
           updateProject={updateProject}
@@ -183,10 +211,13 @@ const EditProject = (props) => {
           fieldTitle="Video Conference Link:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin', 'user']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.lookingDescription}
           fieldName="lookingDescription"
           updateProject={updateProject}
@@ -196,10 +227,13 @@ const EditProject = (props) => {
           fieldTitle="Looking For Description:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={partnerDataFormatted}
           fieldName="partners"
           updateProject={updateProject}
@@ -209,10 +243,13 @@ const EditProject = (props) => {
           fieldTitle="Partners (comma separated):"
           accessLevel={props.userAccessLevel}
           canEdit={['admin', 'user']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={recrutingDataFormatted}
           fieldName="recruitingCategories"
           updateProject={updateProject}
@@ -222,6 +259,8 @@ const EditProject = (props) => {
           fieldTitle="Recruiting Categories (comma separated):"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
 

client/src/components/manageProjects/editableField.js

@@ -1,8 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import '../../sass/ManageProjects.scss';
+import Modal from './modal/Modal';
 
 const EditableField = ({
   projId,
+  projectName,
   fieldData,
   fieldName,
   updateProject,
@@ -11,14 +13,73 @@ const EditableField = ({
   fieldTitle,
   accessLevel,
   canEdit,
+  getIssue,
+  issueValue,
 }) => {
+  console.log('editableField: props: issueValue: ', issueValue);
+  console.log('editableField: props: issueValue: ', typeof issueValue);
+  const { REACT_APP_GUTHUB_PAT } = process.env;
+  console.log(REACT_APP_GUTHUB_PAT);
   const [fieldValue, setFieldValue] = useState(fieldData);
   const [editable, setEditable] = useState(false);
   const [notRestricted, setNotRestricted] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  // body to be collected and sent to the Github server
+  const [issueStr, setIssueStr] = useState('');
+  console.log('issueStr:', issueStr);
+  const [formattedIssue, setFormattedIssue] = useState({
+    title: `Request to edit ${projectName}'s ${fieldName} field`,
+
+    body: `### Project: ${projectName} <br> Field to edit: ${fieldName} <br> Proposed Value: ${issueValue}`,
+    assignee: 'chukalicious',
+  });
+  console.log('formattedIssue:', formattedIssue);
+
   const ref = useRef();
 
-  // create function that checks the user has access to edit all fields
+  // Modal Functions
+  useEffect(() => {
+    setFormattedIssue({
+      ...formattedIssue,
+      body: `### Project: ${projectName} <br> Field to edit: ${fieldName} <br> Proposed Value: ${issueValue}`,
+    });
+  }, [issueValue]);
+
+  const closeModal = (e) => {
+    setFormattedIssue({
+      ...formattedIssue,
+      proposedValue: '',
+    });
+    setShowModal(false);
+  };
+
+  const requestToEdit = async () => {
+    const url = `https://api.github.com/repos/hackforla/VRMS/issues`;
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/vnd.github.v3+json',
+        // Authorization: REACT_APP_GUTHUB_PAT,
+        Authorization: 'token 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',
+      },
+      body: JSON.stringify(formattedIssue),
+    };
+    try {
+      const response = await fetch(url, requestOptions);
+      const resJson = await response.json();
 
+      console.log('requestOptions: body: ', requestOptions.body);
+      console.log('formattedIssue inside the api call:', formattedIssue);
+
+      return resJson;
+    } catch (error) {
+      console.log(`update user error: `, error);
+    }
+  };
+
+  // create function that checks the user has access to edit all fields
   const checkUser = () => {
     const permitted = canEdit.includes(accessLevel);
     setNotRestricted(permitted);
@@ -34,7 +95,6 @@ const EditableField = ({
   }, [editable]);
 
   return (
-    // here goes the conditional rendering
     // this button will be disabled if user !admin
     <div>
       <div>
@@ -50,12 +110,30 @@ const EditableField = ({
             [edit]
           </span>
         ) : (
-          <span className="project-edit-button" style={{ color: 'gray' }}>
-            {' '}
-            <a href="https://github.com/chukalicious/VRMS/blob/feature/allow-pm-to-edit-project-fields/team-lead-contact-info.md">
+          <>
+            <span
+              className="project-edit-button"
+              style={{ color: 'gray' }}
+              onClick={() => setShowModal(true)}
+            >
+              {' '}
               [Contact your team lead to make changes to this field]
-            </a>
-          </span>
+            </span>
+            {/* Propose this text gets changed to a call to action type of text and something that better describes what happens when the link is clicked  */}
+            {/* "Click here to..." */}
+
+            {showModal ? (
+              <Modal
+                title={`Request to edit ${projectName} project ${fieldName} field`}
+                project={projectName}
+                fieldToEdit={fieldName}
+                handleClose={closeModal}
+                getIssue={getIssue}
+                requestToEdit={requestToEdit}
+                setShowModal={setShowModal}
+              />
+            ) : null}
+          </>
         )}
       </div>
 

client/src/components/manageProjects/modal/Modal.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import '../../../sass/Modal.scss';
+import { Label, Input, AuxiliaryButton } from '../../Form';
+
+const Modal = (props) => {
+  const [issue, setIssue] = useState({ proposedValue: '' });
+  console.log('issue when it renders: ', issue);
+
+  const handleChange = (e) => {
+    console.log('issue before change: ', issue);
+    setIssue({ [e.target.name]: e.target.value });
+  };
+
+  const handleCancel = (e) => {
+    setIssue({ proposedValue: '' });
+    props.setShowModal(false);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    props.getIssue(issue);
+    console.log('issue en el handleSubmit: ', issue);
+    props.setShowModal(false);
+  };
+
+  return (
+    <div className="container--Modal" onClick={() => props.handleClose()}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="close-x" onClick={props.handleClose}>
+          Close [X]
+        </div>
+        <p className="Label title">{props.title}</p>
+        <p className="Label">Project Name: {props.project}</p>
+        <p className="Label">Field to Edit: {props.fieldToEdit}</p>
+        <form
+          onSubmit={(e) => {
+            handleSubmit(e);
+            props
+              .requestToEdit()
+              .then((res) => {
+                console.log('response', res);
+              })
+              .catch((err) => console.log(err));
+          }}
+        >
+          <Label>Proposed Value:</Label>
+          <Input
+            type="text"
+            id="proposedValue"
+            name="proposedValue"
+            value={issue.proposedValue}
+            onChange={handleChange}
+          />
+
+          <AuxiliaryButton onClick={handleCancel}>Cancel</AuxiliaryButton>
+          <AuxiliaryButton type="submit">Submit</AuxiliaryButton>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;