From 7abc9dee08597cb566550ff2f6918988b48db896 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Sun, 9 Jan 2022 15:50:06 -0800 Subject: [PATCH 01/20] Created Modal.js that returns basic elements --- client/src/components/manageProjects/Modal.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 client/src/components/manageProjects/Modal.js diff --git a/client/src/components/manageProjects/Modal.js b/client/src/components/manageProjects/Modal.js new file mode 100644 index 000000000..8aedfa4e1 --- /dev/null +++ b/client/src/components/manageProjects/Modal.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const Modal = (props) => { + console.log(props); + return ( +
+ {' '} + This is Modal +
+ ); +}; + +export default Modal; From 5896635149a49406a23e5cc397e931a0cfbafd2f Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Sun, 9 Jan 2022 15:52:32 -0800 Subject: [PATCH 02/20] Created functionality to show or hide modal using state and drilling props to the child(ren) component(s) to close the modal --- .../manageProjects/editableField.js | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 2395169b8..2a80751ba 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import '../../sass/ManageProjects.scss'; +import Modal from './Modal'; const EditableField = ({ projId, @@ -15,8 +16,16 @@ const EditableField = ({ const [fieldValue, setFieldValue] = useState(fieldData); const [editable, setEditable] = useState(false); const [notRestricted, setNotRestricted] = useState(false); + const [showModal, setShowModal] = useState(false); const ref = useRef(); + // Modal Functions + console.log('editableField: showModal:', showModal); + const closeModal = (e) => { + setShowModal(false); + console.log(showModal); + }; + // create function that checks the user has access to edit all fields const checkUser = () => { @@ -50,12 +59,21 @@ const EditableField = ({ [edit] ) : ( - - {' '} - + <> + setShowModal(true)} + > + {' '} + {/* Modal will go here. onclick => open modal */} + {/* 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..." */} [Contact your team lead to make changes to this field] - - + + + {showModal ? : null} + )} From 5032f8dfd78dbcb0df28833f2e884ddfcb4b39eb Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Wed, 12 Jan 2022 20:26:43 -0800 Subject: [PATCH 03/20] Passed down projectName prop to all editable fields in order to use it to use it as a field for the issue template --- client/src/components/manageProjects/editProject.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/client/src/components/manageProjects/editProject.js b/client/src/components/manageProjects/editProject.js index 561bcfa43..3fafad771 100644 --- a/client/src/components/manageProjects/editProject.js +++ b/client/src/components/manageProjects/editProject.js @@ -57,6 +57,7 @@ const EditProject = (props) => {
{
{
{
{
{
{
{
{
{
{
{
{
Date: Wed, 12 Jan 2022 20:31:55 -0800 Subject: [PATCH 04/20] Created Modal,js, which has local state for a form field that collects the proposed value for an editable field. The component also shows contains the title, project name and name of the field to edit values to create the issue. --- client/src/components/manageProjects/Modal.js | 43 +++++++++++++++++-- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/client/src/components/manageProjects/Modal.js b/client/src/components/manageProjects/Modal.js index 8aedfa4e1..c8a7f7365 100644 --- a/client/src/components/manageProjects/Modal.js +++ b/client/src/components/manageProjects/Modal.js @@ -1,11 +1,46 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { Label, Input, AuxiliaryButton } from '../../components/Form'; const Modal = (props) => { - console.log(props); + const [issue, setIssue] = useState({ proposedValue: '' }); + console.log('Modal.js: issue: ', issue); + + const handleChange = (e) => { + setIssue({ [e.target.name]: e.target.value }); + }; + + const handleCancel = (e) => { + setIssue({ proposedValue: '' }); + props.handleClose(e); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + props.getIssue(issue); + setIssue({ proposedValue: '' }); + }; + return (
- {' '} - This is Modal +
+
Close [X]
+

Title: {props.title}

+

Project Name: {props.project}

+

Field to Edit: {props.fieldToEdit}

+
+ + + + Cancel + Submit +
+
); }; From 43ce51c11a325dae55e0d34dd497f4b4cd865670 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Wed, 12 Jan 2022 20:43:59 -0800 Subject: [PATCH 05/20] Brought in project name and field name to use in the body of the issue along with the proposed value and the hardcoded value for an assignee. Created controls to open and close the modal (opens on the edit link) and sent down the Modal component props to create the issue and getIssue function to collect the proposed Value from the user input. --- .../manageProjects/editableField.js | 43 ++++++++++++++++--- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 2a80751ba..9ad18c3e2 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -4,6 +4,7 @@ import Modal from './Modal'; const EditableField = ({ projId, + projectName, fieldData, fieldName, updateProject, @@ -17,17 +18,37 @@ const EditableField = ({ 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 [formattedIssue, setFormattedIssue] = useState({ + title: 'Request to edit project field', + projectName: projectName, + fieldToEdit: fieldName, + proposedValue: '', + assignee: 'ExperimentsInHonesty', + }); + const ref = useRef(); // Modal Functions - console.log('editableField: showModal:', showModal); + const closeModal = (e) => { + setFormattedIssue({ + ...formattedIssue, + proposedValue: '', + }); setShowModal(false); - console.log(showModal); }; - // create function that checks the user has access to edit all fields + const getIssue = (issue) => { + console.log('value', issue); + const newIssue = { + ...formattedIssue, + proposedValue: issue.proposedValue, + }; + setFormattedIssue(newIssue); + }; + // create function that checks the user has access to edit all fields const checkUser = () => { const permitted = canEdit.includes(accessLevel); setNotRestricted(permitted); @@ -66,13 +87,21 @@ const EditableField = ({ onClick={() => setShowModal(true)} > {' '} - {/* Modal will go here. onclick => open modal */} - {/* 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..." */} [Contact your team lead to make changes to this field] + {/* Modal will go here. onclick => open modal */} + {/* 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 ? : null} + {showModal ? ( + + ) : null} )}
From 3b7a53cc0e469b4fc4b480967bf061f83b331279 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Wed, 12 Jan 2022 21:23:17 -0800 Subject: [PATCH 06/20] Cleaned up some console.logs and using template literals for 2 values --- client/src/components/manageProjects/Modal.js | 1 - client/src/components/manageProjects/editableField.js | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/client/src/components/manageProjects/Modal.js b/client/src/components/manageProjects/Modal.js index c8a7f7365..3a19093c1 100644 --- a/client/src/components/manageProjects/Modal.js +++ b/client/src/components/manageProjects/Modal.js @@ -3,7 +3,6 @@ import { Label, Input, AuxiliaryButton } from '../../components/Form'; const Modal = (props) => { const [issue, setIssue] = useState({ proposedValue: '' }); - console.log('Modal.js: issue: ', issue); const handleChange = (e) => { setIssue({ [e.target.name]: e.target.value }); diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 9ad18c3e2..3ea27da1a 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -19,10 +19,11 @@ const EditableField = ({ const [notRestricted, setNotRestricted] = useState(false); const [showModal, setShowModal] = useState(false); // body to be collected and sent to the Github server + const [formattedIssue, setFormattedIssue] = useState({ title: 'Request to edit project field', - projectName: projectName, - fieldToEdit: fieldName, + projectName: `${projectName}`, + fieldToEdit: `${fieldName}`, proposedValue: '', assignee: 'ExperimentsInHonesty', }); @@ -40,7 +41,6 @@ const EditableField = ({ }; const getIssue = (issue) => { - console.log('value', issue); const newIssue = { ...formattedIssue, proposedValue: issue.proposedValue, @@ -95,7 +95,7 @@ const EditableField = ({ {showModal ? ( Date: Wed, 12 Jan 2022 22:39:37 -0800 Subject: [PATCH 07/20] moved Modal.js to a modal directory to try and keep things more organized --- .../manageProjects/{ => modal}/Modal.js | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) rename client/src/components/manageProjects/{ => modal}/Modal.js (63%) diff --git a/client/src/components/manageProjects/Modal.js b/client/src/components/manageProjects/modal/Modal.js similarity index 63% rename from client/src/components/manageProjects/Modal.js rename to client/src/components/manageProjects/modal/Modal.js index 3a19093c1..914d5e54b 100644 --- a/client/src/components/manageProjects/Modal.js +++ b/client/src/components/manageProjects/modal/Modal.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { Label, Input, AuxiliaryButton } from '../../components/Form'; +import '../../../sass/Modal.scss'; +import { Label, Input, AuxiliaryButton } from '../../Form'; const Modal = (props) => { const [issue, setIssue] = useState({ proposedValue: '' }); @@ -17,15 +18,21 @@ const Modal = (props) => { e.preventDefault(); props.getIssue(issue); setIssue({ proposedValue: '' }); + props.handleClose(e); }; return ( -
-
-
Close [X]
-

Title: {props.title}

-

Project Name: {props.project}

-

Field to Edit: {props.fieldToEdit}

+
+
+
+ Close [X] +
+

{props.title}

+

Project Name: {props.project}

+

Field to Edit: {props.fieldToEdit}

Date: Wed, 12 Jan 2022 22:40:18 -0800 Subject: [PATCH 08/20] ap[plied absic styling to the modal --- client/src/sass/Modal.scss | 69 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 client/src/sass/Modal.scss diff --git a/client/src/sass/Modal.scss b/client/src/sass/Modal.scss new file mode 100644 index 000000000..a82456c91 --- /dev/null +++ b/client/src/sass/Modal.scss @@ -0,0 +1,69 @@ +.container--Modal { + display: flex; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(250, 17, 79, 0.9); + justify-content: center; + align-items: center; + z-index: 5; +} + +.close-x { + display: flex; + width: 100%; + justify-content: flex-end; +} + +.modal-box { + padding: 1.5rem 3rem 4.5rem 3rem; + background-color: #fff; + border-radius: 0.5rem; +} + +.title { + text-decoration: underline; +} + +.button-space { + margin-top: 2rem; +} + +.project-sub-heading { + margin: 20px 0 20px 0; +} + +div.editable-field { + font-weight: normal; + font-size: 18px; + max-width: none; + width: 400px; +} + +.editable-field { + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; + min-width: 90%; +} + +.editable-field-div { + margin-top: 20px; +} + +.section-name { + font-size: 16px; +} + +.section-content { + font-size: 14px; + text-transform: none; + font-family: Arial, Helvetica, sans-serif; +} + +.project-edit-button { + color: #fa114f; + cursor: pointer; + font-family: Arial, Helvetica, sans-serif; +} From 404cfe6809045ead9331bd96e74d985f9577d8d8 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Wed, 12 Jan 2022 22:41:40 -0800 Subject: [PATCH 09/20] changed import directory location for Modal.js --- client/src/components/manageProjects/editableField.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 3ea27da1a..ba9eeb734 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -1,6 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import '../../sass/ManageProjects.scss'; -import Modal from './Modal'; +import Modal from './modal/Modal'; const EditableField = ({ projId, From 1d2300cede15efda8693501f491368113dd02c54 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Wed, 12 Jan 2022 23:29:26 -0800 Subject: [PATCH 10/20] added functionality to close modal when clicking outside the modal content area --- client/src/components/manageProjects/modal/Modal.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/client/src/components/manageProjects/modal/Modal.js b/client/src/components/manageProjects/modal/Modal.js index 914d5e54b..827c59e80 100644 --- a/client/src/components/manageProjects/modal/Modal.js +++ b/client/src/components/manageProjects/modal/Modal.js @@ -22,11 +22,8 @@ const Modal = (props) => { }; return ( -
-
+
props.handleClose()}> +
e.stopPropagation()}>
Close [X]
From 5d2c1ac89e55ab1498d21b2862cb79332ab0a4a8 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Wed, 12 Jan 2022 23:30:49 -0800 Subject: [PATCH 11/20] changed nale of modal-content class --- client/src/sass/Modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/sass/Modal.scss b/client/src/sass/Modal.scss index a82456c91..f44b7c64f 100644 --- a/client/src/sass/Modal.scss +++ b/client/src/sass/Modal.scss @@ -17,7 +17,7 @@ justify-content: flex-end; } -.modal-box { +.modal-content { padding: 1.5rem 3rem 4.5rem 3rem; background-color: #fff; border-radius: 0.5rem; From 0a2874d8fef1da393c5ca3a0952ef3320173dae9 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Thu, 13 Jan 2022 20:32:59 -0800 Subject: [PATCH 12/20] called api function from the submit event on the form. The POST operation is successful but an issue body still needs to be created. Made modicifations to the handleSubmit, removed the props.handleClose and am using setShowModal instead --- .../components/manageProjects/modal/Modal.js | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/client/src/components/manageProjects/modal/Modal.js b/client/src/components/manageProjects/modal/Modal.js index 827c59e80..9980c1f16 100644 --- a/client/src/components/manageProjects/modal/Modal.js +++ b/client/src/components/manageProjects/modal/Modal.js @@ -3,7 +3,9 @@ import '../../../sass/Modal.scss'; import { Label, Input, AuxiliaryButton } from '../../Form'; const Modal = (props) => { + // console.log('Modal.js: props: ', props); const [issue, setIssue] = useState({ proposedValue: '' }); + // console.log('Modal: issue: ', issue); const handleChange = (e) => { setIssue({ [e.target.name]: e.target.value }); @@ -11,14 +13,17 @@ const Modal = (props) => { const handleCancel = (e) => { setIssue({ proposedValue: '' }); - props.handleClose(e); + props.setShowModal(false); }; const handleSubmit = (e) => { e.preventDefault(); props.getIssue(issue); setIssue({ proposedValue: '' }); - props.handleClose(e); + // this handle close cannot go here + // props.handleClose(e); + + props.setShowModal(false); }; return ( @@ -30,7 +35,17 @@ const Modal = (props) => {

{props.title}

Project Name: {props.project}

Field to Edit: {props.fieldToEdit}

- + { + handleSubmit(e); + props + .requestToEdit() + .then((res) => { + console.log(res); + }) + .catch((err) => console.log(err)); + }} + > Date: Thu, 13 Jan 2022 20:35:50 -0800 Subject: [PATCH 13/20] Created requestToEdit API call function and created changed the formattedIssue title --- .../manageProjects/editableField.js | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index ba9eeb734..34035cc84 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -1,6 +1,7 @@ import React, { useState, useRef, useEffect } from 'react'; import '../../sass/ManageProjects.scss'; import Modal from './modal/Modal'; +import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../../utils/globalSettings'; const EditableField = ({ projId, @@ -14,19 +15,21 @@ const EditableField = ({ accessLevel, canEdit, }) => { + const headerToSend = REACT_APP_CUSTOM_REQUEST_HEADER; 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 + // body to be collected and sent to the Github server const [formattedIssue, setFormattedIssue] = useState({ - title: 'Request to edit project field', + title: `Request to edit ${projectName}'s ${fieldName} field`, projectName: `${projectName}`, fieldToEdit: `${fieldName}`, proposedValue: '', assignee: 'ExperimentsInHonesty', }); + console.log('editableField: formattedIssue: ', formattedIssue); const ref = useRef(); @@ -45,6 +48,7 @@ const EditableField = ({ ...formattedIssue, proposedValue: issue.proposedValue, }; + console.log('editableIssue: newIssue:', newIssue); setFormattedIssue(newIssue); }; @@ -63,6 +67,30 @@ const EditableField = ({ } }, [editable]); + const requestToEdit = async () => { + const url = `https://api.github.com/repos/hackforla/VRMS/issues`; + const requestOptions = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + // 'x-customrequired-header': headerToSend, + Accept: 'application/vnd.github.v3+json', + Authorization: 'token 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', + }, + title: formattedIssue.title, + body: JSON.stringify(formattedIssue), + }; + + try { + const response = await fetch(url, requestOptions); + const resJson = await response.json(); + + return resJson; + } catch (error) { + console.log(`update user error: `, error); + } + }; + return ( // here goes the conditional rendering // this button will be disabled if user !admin @@ -100,6 +128,8 @@ const EditableField = ({ fieldToEdit={fieldName} handleClose={closeModal} getIssue={getIssue} + requestToEdit={requestToEdit} + setShowModal={setShowModal} /> ) : null} From 3909b8e3977a75b274ee9ecbba6ee7f71d77a687 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Thu, 13 Jan 2022 21:35:43 -0800 Subject: [PATCH 14/20] Deleted title property in the API call and not the POST is being successfull --- client/src/components/manageProjects/editableField.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 34035cc84..40ac9516e 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -29,7 +29,6 @@ const EditableField = ({ proposedValue: '', assignee: 'ExperimentsInHonesty', }); - console.log('editableField: formattedIssue: ', formattedIssue); const ref = useRef(); @@ -48,7 +47,6 @@ const EditableField = ({ ...formattedIssue, proposedValue: issue.proposedValue, }; - console.log('editableIssue: newIssue:', newIssue); setFormattedIssue(newIssue); }; @@ -73,11 +71,9 @@ const EditableField = ({ method: 'POST', headers: { 'Content-Type': 'application/json', - // 'x-customrequired-header': headerToSend, Accept: 'application/vnd.github.v3+json', - Authorization: 'token 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', + Authorization: 'token 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', }, - title: formattedIssue.title, body: JSON.stringify(formattedIssue), }; From e3089298ffb0d8dab070e2f7066e73b5ace66109 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Thu, 13 Jan 2022 21:44:19 -0800 Subject: [PATCH 15/20] cleaned-up comiit and comments --- client/src/components/manageProjects/modal/Modal.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/client/src/components/manageProjects/modal/Modal.js b/client/src/components/manageProjects/modal/Modal.js index 9980c1f16..986bf377e 100644 --- a/client/src/components/manageProjects/modal/Modal.js +++ b/client/src/components/manageProjects/modal/Modal.js @@ -3,9 +3,7 @@ import '../../../sass/Modal.scss'; import { Label, Input, AuxiliaryButton } from '../../Form'; const Modal = (props) => { - // console.log('Modal.js: props: ', props); const [issue, setIssue] = useState({ proposedValue: '' }); - // console.log('Modal: issue: ', issue); const handleChange = (e) => { setIssue({ [e.target.name]: e.target.value }); @@ -20,9 +18,6 @@ const Modal = (props) => { e.preventDefault(); props.getIssue(issue); setIssue({ proposedValue: '' }); - // this handle close cannot go here - // props.handleClose(e); - props.setShowModal(false); }; @@ -41,7 +36,7 @@ const Modal = (props) => { props .requestToEdit() .then((res) => { - console.log(res); + console.log('response', res); }) .catch((err) => console.log(err)); }} From a5684771e95d38a07ff81b17110a8652b94894c9 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Thu, 13 Jan 2022 23:04:34 -0800 Subject: [PATCH 16/20] Removed unnecessary .env import, imported github pat from .env but it is not working. Have formatted 2 lines for the issue. Still to do the proposed value. --- .../src/components/manageProjects/editableField.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 40ac9516e..e77b12402 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -1,7 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import '../../sass/ManageProjects.scss'; import Modal from './modal/Modal'; -import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../../utils/globalSettings'; const EditableField = ({ projId, @@ -15,19 +14,22 @@ const EditableField = ({ accessLevel, canEdit, }) => { - const headerToSend = REACT_APP_CUSTOM_REQUEST_HEADER; + 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 [value, setValue] = useState(''); const [formattedIssue, setFormattedIssue] = useState({ title: `Request to edit ${projectName}'s ${fieldName} field`, projectName: `${projectName}`, fieldToEdit: `${fieldName}`, proposedValue: '', - assignee: 'ExperimentsInHonesty', + body: `### Project: ${projectName}
Field to edit: ${fieldName}
Proposed Value: ${value}`, + assignee: 'chukalicious', }); const ref = useRef(); @@ -48,6 +50,8 @@ const EditableField = ({ proposedValue: issue.proposedValue, }; setFormattedIssue(newIssue); + + console.log(typeof newIssue.proposedValue); }; // create function that checks the user has access to edit all fields @@ -72,7 +76,8 @@ const EditableField = ({ headers: { 'Content-Type': 'application/json', Accept: 'application/vnd.github.v3+json', - Authorization: 'token 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', + // Authorization: REACT_APP_GUTHUB_PAT, + Authorization: 'token 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', }, body: JSON.stringify(formattedIssue), }; From 7a118d9977db794a22d1e370ee799702a822fa3a Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Mon, 17 Jan 2022 18:02:07 -0800 Subject: [PATCH 17/20] Deleted console logs and updated the issue object that will be sent to the API. The proposed value input is not showing in the issue. --- .../components/manageProjects/editableField.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index e77b12402..8502f2ee0 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -22,15 +22,15 @@ const EditableField = ({ const [showModal, setShowModal] = useState(false); // body to be collected and sent to the Github server + const [value, setValue] = useState(''); + console.log('value: ', value); const [formattedIssue, setFormattedIssue] = useState({ title: `Request to edit ${projectName}'s ${fieldName} field`, - projectName: `${projectName}`, - fieldToEdit: `${fieldName}`, - proposedValue: '', body: `### Project: ${projectName}
Field to edit: ${fieldName}
Proposed Value: ${value}`, assignee: 'chukalicious', }); + console.log('formattedIssue:', formattedIssue); const ref = useRef(); @@ -49,9 +49,15 @@ const EditableField = ({ ...formattedIssue, proposedValue: issue.proposedValue, }; + + const issueStr = issue.proposedValue; setFormattedIssue(newIssue); + setValue(issueStr); + // setValue(issue.proposedValue); console.log(typeof newIssue.proposedValue); + console.log(newIssue.proposedValue); + console.log('newIssue', newIssue); }; // create function that checks the user has access to edit all fields @@ -77,7 +83,7 @@ const EditableField = ({ 'Content-Type': 'application/json', Accept: 'application/vnd.github.v3+json', // Authorization: REACT_APP_GUTHUB_PAT, - Authorization: 'token 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', + Authorization: 'token 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', }, body: JSON.stringify(formattedIssue), }; @@ -92,8 +98,9 @@ const EditableField = ({ } }; + console.log('value: ', value); + return ( - // here goes the conditional rendering // this button will be disabled if user !admin
From e936943dda6fc884f39a064d60c943218e0f32ec Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Mon, 17 Jan 2022 18:03:36 -0800 Subject: [PATCH 18/20] deleted unnecessary .md fole --- team-lead-contact-info.md | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 team-lead-contact-info.md diff --git a/team-lead-contact-info.md b/team-lead-contact-info.md deleted file mode 100644 index cef9148f0..000000000 --- a/team-lead-contact-info.md +++ /dev/null @@ -1,11 +0,0 @@ -## Team Lead Contact Sheet - -### Please find your team lead's email from the table below to request the desired changes. - -| Team Lead | Email | -| :-------: | :---: | -| | | -| | | -| | | -| | | -| | | From 18b47d98524757b0d73e79766d695142b732d268 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Mon, 17 Jan 2022 18:06:52 -0800 Subject: [PATCH 19/20] removed hardcoded token before pushing --- client/src/components/manageProjects/editableField.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 8502f2ee0..b283b5f62 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -83,7 +83,7 @@ const EditableField = ({ 'Content-Type': 'application/json', Accept: 'application/vnd.github.v3+json', // Authorization: REACT_APP_GUTHUB_PAT, - Authorization: 'token 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', + // Authorization: , }, body: JSON.stringify(formattedIssue), }; From 978d2d60a4cd18aca6f0c48c8a9a18dcf1733038 Mon Sep 17 00:00:00 2001 From: Katiuska Alicea Date: Sun, 23 Jan 2022 22:25:45 -0800 Subject: [PATCH 20/20] Moved proposedValue state up one level in order to be able to drill it down as props to the formattedIssue object that will be sent to the Github API. The formattedIssues body gets updated with the proposedValue input using a useEffect function that detects changes in the issueValue prop. The issueVaues props are updated when the form is submitted in the Modal.js --- .../components/manageProjects/editProject.js | 26 +++++++ .../manageProjects/editableField.js | 71 +++++++++---------- .../components/manageProjects/modal/Modal.js | 4 +- client/src/pages/ManageProjects.js | 18 ++++- 4 files changed, 78 insertions(+), 41 deletions(-) diff --git a/client/src/components/manageProjects/editProject.js b/client/src/components/manageProjects/editProject.js index 3fafad771..a5fd02af2 100644 --- a/client/src/components/manageProjects/editProject.js +++ b/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); @@ -67,6 +68,8 @@ const EditProject = (props) => { fieldTitle="Name:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -81,6 +84,8 @@ const EditProject = (props) => { fieldTitle="Description:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -95,6 +100,8 @@ const EditProject = (props) => { fieldTitle="Location:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -109,6 +116,8 @@ const EditProject = (props) => { fieldTitle="GitHub Identifier:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -123,6 +132,8 @@ const EditProject = (props) => { fieldTitle="GitHib URL:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -137,6 +148,8 @@ const EditProject = (props) => { fieldTitle="Slack URL:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -151,6 +164,8 @@ const EditProject = (props) => { fieldTitle="Google Drive URL:" accessLevel={props.userAccessLevel} canEdit={['admin', 'user']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -165,6 +180,7 @@ const EditProject = (props) => { fieldTitle="Google Drive ID:" accessLevel={props.userAccessLevel} canEdit={['admin']} + issueValue={props.issueValue} />
@@ -179,6 +195,8 @@ const EditProject = (props) => { fieldTitle="HfLA Website URL:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -193,6 +211,8 @@ const EditProject = (props) => { fieldTitle="Video Conference Link:" accessLevel={props.userAccessLevel} canEdit={['admin', 'user']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -207,6 +227,8 @@ const EditProject = (props) => { fieldTitle="Looking For Description:" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -221,6 +243,8 @@ const EditProject = (props) => { fieldTitle="Partners (comma separated):" accessLevel={props.userAccessLevel} canEdit={['admin', 'user']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
@@ -235,6 +259,8 @@ const EditProject = (props) => { fieldTitle="Recruiting Categories (comma separated):" accessLevel={props.userAccessLevel} canEdit={['admin']} + getIssue={props.getIssue} + issueValue={props.issueValue} />
diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index b283b5f62..937f29c1c 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -13,7 +13,11 @@ 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); @@ -22,12 +26,12 @@ const EditableField = ({ const [showModal, setShowModal] = useState(false); // body to be collected and sent to the Github server - - const [value, setValue] = useState(''); - console.log('value: ', value); + const [issueStr, setIssueStr] = useState(''); + console.log('issueStr:', issueStr); const [formattedIssue, setFormattedIssue] = useState({ title: `Request to edit ${projectName}'s ${fieldName} field`, - body: `### Project: ${projectName}
Field to edit: ${fieldName}
Proposed Value: ${value}`, + + body: `### Project: ${projectName}
Field to edit: ${fieldName}
Proposed Value: ${issueValue}`, assignee: 'chukalicious', }); console.log('formattedIssue:', formattedIssue); @@ -35,6 +39,12 @@ const EditableField = ({ const ref = useRef(); // Modal Functions + useEffect(() => { + setFormattedIssue({ + ...formattedIssue, + body: `### Project: ${projectName}
Field to edit: ${fieldName}
Proposed Value: ${issueValue}`, + }); + }, [issueValue]); const closeModal = (e) => { setFormattedIssue({ @@ -44,37 +54,6 @@ const EditableField = ({ setShowModal(false); }; - const getIssue = (issue) => { - const newIssue = { - ...formattedIssue, - proposedValue: issue.proposedValue, - }; - - const issueStr = issue.proposedValue; - setFormattedIssue(newIssue); - setValue(issueStr); - // setValue(issue.proposedValue); - - console.log(typeof newIssue.proposedValue); - console.log(newIssue.proposedValue); - console.log('newIssue', newIssue); - }; - - // create function that checks the user has access to edit all fields - const checkUser = () => { - const permitted = canEdit.includes(accessLevel); - setNotRestricted(permitted); - }; - - // Update the displayed results to match the change just made to the db - useEffect(() => { - checkUser(); - if (editable) { - ref.current.focus(); - setFieldValue(fieldData); - } - }, [editable]); - const requestToEdit = async () => { const url = `https://api.github.com/repos/hackforla/VRMS/issues`; const requestOptions = { @@ -83,22 +62,37 @@ const EditableField = ({ 'Content-Type': 'application/json', Accept: 'application/vnd.github.v3+json', // Authorization: REACT_APP_GUTHUB_PAT, - // Authorization: , + 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); } }; - console.log('value: ', value); + // create function that checks the user has access to edit all fields + const checkUser = () => { + const permitted = canEdit.includes(accessLevel); + setNotRestricted(permitted); + }; + + // Update the displayed results to match the change just made to the db + useEffect(() => { + checkUser(); + if (editable) { + ref.current.focus(); + setFieldValue(fieldData); + } + }, [editable]); return ( // this button will be disabled if user !admin @@ -125,7 +119,6 @@ const EditableField = ({ {' '} [Contact your team lead to make changes to this field] - {/* Modal will go here. onclick => open modal */} {/* 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..." */} diff --git a/client/src/components/manageProjects/modal/Modal.js b/client/src/components/manageProjects/modal/Modal.js index 986bf377e..e9ff26d49 100644 --- a/client/src/components/manageProjects/modal/Modal.js +++ b/client/src/components/manageProjects/modal/Modal.js @@ -4,8 +4,10 @@ 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 }); }; @@ -17,7 +19,7 @@ const Modal = (props) => { const handleSubmit = (e) => { e.preventDefault(); props.getIssue(issue); - setIssue({ proposedValue: '' }); + console.log('issue en el handleSubmit: ', issue); props.setShowModal(false); }; diff --git a/client/src/pages/ManageProjects.js b/client/src/pages/ManageProjects.js index efb9b1132..d44748b68 100644 --- a/client/src/pages/ManageProjects.js +++ b/client/src/pages/ManageProjects.js @@ -16,6 +16,20 @@ const ManageProjects = () => { const [componentToDisplay, setComponentToDisplay] = useState(''); // displayProjectInfo, editMeetingTime or editProjectInfor const user = auth?.user; + const [issueValue, setIssueValue] = useState({ proposedValue: '' }); + console.log('ManageProjects: issueValue:', issueValue); + + const getIssue = (issue) => { + console.log('ManageProjects: getIssue: issue: ', issue); + + setIssueValue({ proposedValue: issue.proposedValue }); + }; + + console.log( + 'ManageProjects: issueValue: after running the getIssue function:', + issueValue + ); + // Fetch projects from db async function fetchProjects() { try { @@ -76,7 +90,7 @@ const ManageProjects = () => { const goSelectProject = () => { setComponentToDisplay('selectProject'); - } + }; switch (componentToDisplay) { case 'editMeetingTime': @@ -90,6 +104,8 @@ const ManageProjects = () => { recurringEvents={recurringEvents} renderUpdatedProj={renderUpdatedProj} userAccessLevel={user.accessLevel} + getIssue={getIssue} + issueValue={issueValue.proposedValue} /> ); break;