diff --git a/backend/routers/projects.router.js b/backend/routers/projects.router.js index 8991000cb..f0762b834 100644 --- a/backend/routers/projects.router.js +++ b/backend/routers/projects.router.js @@ -10,6 +10,8 @@ router.post('/', ProjectController.create); router.get('/:ProjectId', ProjectController.project_by_id); +router.put('/:ProjectId', ProjectController.update); + router.patch('/:ProjectId', ProjectController.update); diff --git a/backend/routers/projects.router.test.js b/backend/routers/projects.router.test.js index 5233247b9..b4abbc6ee 100644 --- a/backend/routers/projects.router.test.js +++ b/backend/routers/projects.router.test.js @@ -73,7 +73,7 @@ describe('UPDATE', () => { // Update project const res2 = await request - .patch(`/api/projects/${res.body._id}`) + .put(`/api/projects/${res.body._id}`) .set(headers) .send(updatedDataPayload); expect(res2.status).toBe(200); diff --git a/client/src/App.js b/client/src/App.js index 7a2d51b7f..d610b188b 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -21,6 +21,7 @@ import ProjectLeaderDashboard from './pages/ProjectLeaderDashboard'; import UserAdmin from './pages/UserAdmin'; import ProjectList from './pages/ProjectList'; import ManageProjects from './pages/ManageProjects'; +import addProject from './components/manageProjects/addProject'; import HealthCheck from './pages/HealthCheck'; import SecretPassword from './pages/SecretPassword'; import UserWelcome from './pages/UserWelcome'; @@ -49,7 +50,7 @@ const routes = [ { path: '/events', name: 'events', Component: Events }, { path: '/useradmin', name: 'useradmin', Component: UserAdmin }, { path: '/projects', name: 'projects', Component: ProjectList }, - { path: '/projects/create', name: 'projectform', Component: ProjectForm }, + { path: '/projects/create', name: 'projectform', Component: addProject}, { path: '/projects/:projectId', name: 'project', diff --git a/client/src/api/ProjectApiService.js b/client/src/api/ProjectApiService.js index 12f4e0763..949bd5ee0 100644 --- a/client/src/api/ProjectApiService.js +++ b/client/src/api/ProjectApiService.js @@ -22,6 +22,7 @@ class ProjectApiService { } } + // Handles the POST request and returns the projects ID. async create(projectData) { const { name, @@ -58,26 +59,13 @@ class ProjectApiService { } } - async updateProject(projectId, fieldName, fieldValue) { - let updateValue = fieldValue; - // These field are arrays, but the form makes them comma separated strings, - // so this adds it back to db as an arrray. - if ( - fieldValue && - (fieldName === 'partners' || fieldName === 'recruitingCategories') - ) { - updateValue = fieldValue - .split(',') - .filter((x) => x !== '') - .map((y) => y.trim()); - } - + async updateProject(projectId, projectData) { // Update database const url = `${this.baseProjectUrl}${projectId}`; const requestOptions = { - method: 'PATCH', + method: 'PUT', headers: this.headers, - body: JSON.stringify({ [fieldName]: updateValue }), + body: JSON.stringify({ ...projectData }), }; try { diff --git a/client/src/components/ProjectForm.js b/client/src/components/ProjectForm.js index e455fb57e..dc0c5491f 100644 --- a/client/src/components/ProjectForm.js +++ b/client/src/components/ProjectForm.js @@ -1,9 +1,11 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { useForm } from 'react-hook-form'; import ProjectApiService from '../api/ProjectApiService'; + +import { ReactComponent as EditIcon } from '../svg/Icon_Edit.svg'; import { ReactComponent as PlusIcon } from '../svg/PlusIcon.svg'; -import { Redirect } from 'react-router-dom' +import { Redirect } from 'react-router-dom'; import { Typography, Box, @@ -18,70 +20,7 @@ import { RadioGroup, } from '@mui/material'; import { styled } from '@mui/material/styles'; -import useAuth from "../hooks/useAuth" - -/** Project Form Component - * - * To be used for creating and updating a project - * */ - -const simpleInputs = [ - { - label: 'Project Name', - name: 'name', - type: 'text', - placeholder: 'Enter project name', - }, - { - label: 'Project Description', - name: 'description', - type: 'textarea', - placeholder: 'Enter project description', - }, - { - label: 'Location', - name: 'location', - type: 'text', - placeholder: 'Enter location for meeting', - value: /https:\/\/[\w-]*\.?zoom.us\/(j|my)\/[\d\w?=-]+/, - errorMessage: 'Please enter a valid Zoom URL', - addressValue: '', - addressError: 'Invalid address' - - }, - // Leaving incase we want to add this back in for updating projects - // { - // label: 'GitHub Identifier', - // name: 'githubIdentifier', - // type: 'text', - // placeholder: 'Enter GitHub identifier', - // }, - { - label: 'GitHub URL', - name: 'githubUrl', - type: 'text', - placeholder: 'htttps://github.com/' - }, - { - label: 'Slack Channel Link', - name: 'slackUrl', - type: 'text', - placeholder: 'htttps://slack.com/', - }, - { - label: 'Google Drive URL', - name: 'googleDriveUrl', - type: 'text', - placeholder: 'htttps://drive.google.com/', - }, - // Leaving incase we want to add this back in for updating projects - // { - // label: 'HFLA Website URL', - // name: 'hflaWebsiteUrl', - // type: 'text', - // placeholder: 'htttps://hackforla.org/projects/', - // }, -]; +import useAuth from '../hooks/useAuth'; /** STYLES * -most TextField and InputLabel styles are controlled by the theme @@ -107,54 +46,144 @@ const StyledRadio = styled(Radio)(({ theme }) => ({ /**Project Form Component * -renders a form for creating and updating a project - */ -export default function ProjectForm() { - //seperate state for the location radio buttons - const [locationType, setLocationType] = React.useState('remote'); - const [activeButton, setActiveButton] = React.useState('close'); - const [newlyCreatedID, setNewlyCreatedID] = useState(null); + +/** + +/** + * Takes Array, formData, projectToEdit, handleChage, isEdit + * submitForm, handleChange, and isEdit are for the edit forms. + * - arr - simpleInputs arr from the edit page that holds the input's properties. + * - formData - passes the current project information to the form. + * - projectToEdit - used to grab the of the project we are editing. + * - isEdit - Whether its creating a new project or editing one - True or False. + * - setFormData - allows us to updated the form data. + * */ +export default function ProjectForm({ + arr, + formData, + projectToEdit, + isEdit, + setFormData +}) { const history = useHistory(); + + // ----------------- States ----------------- + const [locationType, setLocationType] = useState('remote'); + // State to track the toggling from Project view to Edit Project View via edit icon. + const [editMode, setEditMode] = useState(false); const { auth } = useAuth(); - const { register, handleSubmit, formState: { errors } } = useForm({ + + /** + * React Hook Forms + * - register + * - handleSubmit + * - formState + * - reset + * - defaultValues - holds edit project data + * + */ + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ mode: 'all', + // Holds the current project data in state. defaultValues: { - name: '', - description: '', - location: '', - githubUrl: '', - slackUrl: '', - googleDriveUrl: '' - } + ...formData, + }, }); - const routeToNewProjectPage = () => { - if(newlyCreatedID !== null) { - history.push(`/projects/${newlyCreatedID}`) - } - } - - useEffect(() => { - routeToNewProjectPage() - },[newlyCreatedID]) + // ----------------- Submit requests ----------------- - // only handles radio button change - const handleRadioChange = (event) => { - setLocationType(event.target.value); + // Handles POST request found in api/ProjectApiService. + const submitNewProject = async (data) => { + const projectApi = new ProjectApiService(); + try { + const id = await projectApi.create(data); + history.push(`/projects/${id}`); + } catch (errors) { + console.error(errors); + return; + } }; - const submitForm = async (data) => { + // Fires PUT request to update the project, + const submitEditProject = async (data) => { const projectApi = new ProjectApiService(); try { - const id = await projectApi.create(data); - setNewlyCreatedID(id); + await projectApi.updateProject(projectToEdit._id, data); } catch (errors) { console.error(errors); return; } - setActiveButton('close'); + // setOriginalProjectData(data); + setFormData(data); + setEditMode(false); + }; + + // ----------------- Handles and Toggles ----------------- + + // Handles the location radio button change. + const handleRadioChange = (event) => { + setLocationType(event.target.value); + }; + + // Toggles the project view to edit mode change. + const handleEditMode = (event) => { + setEditMode(!editMode); + // React hook form method to reset data back to original values. Triggered when Edit Mode is cancelled. + reset({ + ...formData, + }); + }; + + // ----------------- Icons ----------------- + + // Holds the Add New Project Icon and styling. + const addIcon = () => { + return ( + + + + Add New Project + + + ); }; + // Holds the Edit New Project Icon and styling. + const editIcon = () => { + return ( + + + + {editMode ? 'Cancel' : 'Edit Mode'} + + + ); + }; + + // ----------------- Location radio ----------------- + // Holdes the location radios styling. const locationRadios = ( @@ -170,12 +199,14 @@ export default function ProjectForm() { value="remote" control={} label="Remote" + disabled={isEdit ? !editMode : false} /> } label="In-Person" + disabled={isEdit ? !editMode : false} /> @@ -191,22 +222,20 @@ export default function ProjectForm() { - Project Information - - - - - - Add New Project + {editMode ? 'Editing Project' : 'Project Information'} + {isEdit ? editIcon() : addIcon()} -
{ - submitForm(data) - })}> - {simpleInputs.map((input) => ( + { + isEdit ? submitEditProject(data) : submitNewProject(data); + })} + > + {arr.map((input) => ( @@ -218,49 +247,93 @@ export default function ProjectForm() { {input.name === 'location' && locationRadios} - - + + {/* Sets text field and data (if needed) based on the whether it is as add or edit form page. */} + {isEdit ? ( + /** + * Edit textfield. + * Includes + * - handleChange - to update the input fields based on users input. + * - value - formData that is passed from the DB to fill the input fields. + * */ + + ) : ( + // Add new project textfield. + + )} ))}
+ + + + + Save + + + + + Close + + + + - - - - - Save - - - - - Close - - - - ) : ( - ) + ); } diff --git a/client/src/components/manageProjects/addProject.js b/client/src/components/manageProjects/addProject.js new file mode 100644 index 000000000..d7209dfe0 --- /dev/null +++ b/client/src/components/manageProjects/addProject.js @@ -0,0 +1,75 @@ +import React from 'react'; +import ProjectForm from '../ProjectForm'; + +function addProject() { + // Array filled with default inputs. + const simpleInputs = [ + { + label: 'Project Name', + name: 'name', + type: 'text', + placeholder: 'Enter project name', + }, + { + label: 'Project Description', + name: 'description', + type: 'textarea', + placeholder: 'Enter project description', + }, + { + label: 'Location', + name: 'location', + type: 'text', + placeholder: 'Enter location for meeting', + value: /https:\/\/[\w-]*\.?zoom.us\/(j|my)\/[\d\w?=-]+/, + errorMessage: 'Please enter a valid Zoom URL', + addressValue: '', + addressError: 'Invalid address', + }, + // Leaving incase we want to add this back in for updating projects + // { + // label: 'GitHub Identifier', + // name: 'githubIdentifier', + // type: 'text', + // placeholder: 'Enter GitHub identifier', + // }, + { + label: 'GitHub URL', + name: 'githubUrl', + type: 'text', + placeholder: 'htttps://github.com/', + }, + { + label: 'Slack Channel Link', + name: 'slackUrl', + type: 'text', + placeholder: 'htttps://slack.com/', + }, + { + label: 'Google Drive URL', + name: 'googleDriveUrl', + type: 'text', + placeholder: 'htttps://drive.google.com/', + }, + // Leaving incase we want to add this back in for updating projects + // { + // label: 'HFLA Website URL', + // name: 'hflaWebsiteUrl', + // type: 'text', + // placeholder: 'htttps://hackforla.org/projects/', + // }, + ]; + + return ( +
+ +
+ ); +} + +export default addProject; diff --git a/client/src/components/manageProjects/editProject.js b/client/src/components/manageProjects/editProject.js index cd8197f89..fd53d7361 100644 --- a/client/src/components/manageProjects/editProject.js +++ b/client/src/components/manageProjects/editProject.js @@ -1,30 +1,39 @@ import React, { useState, useEffect } from 'react'; -import { Link } from 'react-router-dom'; -import EditableField from './editableField'; import EditMeetingTimes from './editMeetingTimes'; import CreateNewEvent from './createNewEvent'; import readableEvent from './utilities/readableEvent'; -import { ReactComponent as EditIcon } from "../../svg/Icon_Edit.svg"; -import '../../sass/ManageProjects.scss'; +import ProjectForm from '../ProjectForm'; + +import { ReactComponent as EditIcon } from '../../svg/Icon_Edit.svg'; +import { ReactComponent as PlusIcon } from '../../svg/PlusIcon.svg'; + +import { Typography, Box, Divider } from '@mui/material'; // Need to hold user state to check which type of user they are and conditionally render editing fields in this component // for user level block access to all except for the ones checked const EditProject = ({ projectToEdit, - userAccessLevel, - updateProject, recurringEvents, createNewRecurringEvent, deleteRecurringEvent, updateRecurringEvent, regularEvents, - updateRegularEvent + updateRegularEvent, }) => { - // Add commas to arrays for display - const partnerDataFormatted = projectToEdit.partners.join(', '); + const [formData, setFormData] = useState({ + name: projectToEdit.name, + description: projectToEdit.description, + location: projectToEdit.location, + // githubIdentifier: projectToEdit.name, + githubUrl: projectToEdit.githubUrl, + slackUrl: projectToEdit.slackUrl, + googleDriveUrl: projectToEdit.googleDriveUrl, + // hflaWebsiteUrl: projectToEdit.name, + }); + // eslint-disable-next-line no-unused-vars - const recrutingDataFormatted = projectToEdit.recruitingCategories.join(', '); - const [recurringEventsState, setRecurringEventsState] = useState([]); + + const [rEvents, setREvents] = useState([]); const [regularEventsState, setRegularEventsState] = useState([]); const [selectedEvent, setSelectedEvent] = useState(); const [isCreateNew, setIsCreateNew] = useState(); @@ -32,7 +41,7 @@ const EditProject = ({ // States for alerts const [eventAlert, setEventAlert] = useState(null); - // Get project recurring events when component loads + // test useEffect(() => { if (regularEvents) { setRegularEventsState( @@ -45,20 +54,78 @@ const EditProject = ({ } }, [projectToEdit, regularEvents, setRegularEventsState]); + // Form inputs. + const simpleInputs = [ + { + label: 'Project Name', + name: 'name', + type: 'text', + value: projectToEdit.name, + }, + { + label: 'Project Description', + name: 'description', + type: 'textarea', + value: projectToEdit.description, + }, + { + label: 'Location', + name: 'location', + type: 'text', + value: /https:\/\/[\w-]*\.?zoom.us\/(j|my)\/[\d\w?=-]+/, + errorMessage: 'Please enter a valid Zoom URL', + addressValue: '', + addressError: 'Invalid address', + }, + // Leaving incase we want to add this back in for updating projects + // { + // label: 'GitHub Identifier', + // name: 'githubIdentifier', + // type: 'text', + // placeholder: 'Enter GitHub identifier', + // }, + { + label: 'GitHub URL', + name: 'githubUrl', + type: 'text', + value: projectToEdit.githubUrl, + }, + { + label: 'Slack Channel Link', + name: 'slackUrl', + type: 'text', + value: projectToEdit.slackUrl, + }, + { + label: 'Google Drive URL', + name: 'googleDriveUrl', + type: 'text', + value: projectToEdit.googleDriveUrl, + }, + // Leaving incase we want to add this back in for updating projects + // { + // label: 'HFLA Website URL', + // name: 'hflaWebsiteUrl', + // type: 'text', + // value: projectToEdit.hflaWebsiteUrl, + // }, + ]; + + // Get project recurring events when component loads useEffect(() => { if (recurringEvents) { - setRecurringEventsState( + setREvents( recurringEvents // eslint-disable-next-line no-underscore-dangle .filter((e) => e?.project?._id === projectToEdit._id) - .map((item) => ({...item, ...readableEvent(item)})) + .map((item) => readableEvent(item)) .sort((a, b) => a.dayOfTheWeekNumber - b.dayOfTheWeekNumber) - ); - } - }, [projectToEdit, recurringEvents, setRecurringEventsState]); + ); + } + }, [projectToEdit, recurringEvents, setREvents]); return ( -
+
- - All Projects - -
- *The data here is only test data and is not accurate* -
-
{`Project: ${projectToEdit.name}`}
- - - - - - - - {/* */} - - {/* */} - {/* */} - - {/* */} -
-

Recurring Events

-

{eventAlert}

-
    - {recurringEventsState.map((event) => ( - // eslint-disable-next-line no-underscore-dangle -
  • - -
    • - ))} -
-
-
- -
+ + + Recurring Events + + + setIsCreateNew(true)} + > + + + Add New Event + + + + + +
+

{eventAlert}

+
    + {rEvents.map((event) => ( + // eslint-disable-next-line no-underscore-dangle +
  • + +
    • + ))} +
+
+ {/*
*/} + + -
-

Manually Edit Events Checkin

-

{eventAlert}

-
    - {regularEventsState.map((event, index) => ( - - // eslint-disable-next-line no-underscore-dangle - - ))} -
-
-
+ + + + + Manually Edit Events Checkin + + + + + +
+

{eventAlert}

+
    + {regularEventsState.map((event, index) => ( + + // eslint-dis able-next-line no-underscore-dangle + + ))} +
+
+ + + + ); }; diff --git a/client/src/sass/ManageProjects.scss b/client/src/sass/ManageProjects.scss index 67292c383..46899a9dc 100644 --- a/client/src/sass/ManageProjects.scss +++ b/client/src/sass/ManageProjects.scss @@ -139,7 +139,6 @@ div.editable-field { ul { padding-top: 4px; - border-top: 2px solid #32373b; } li { diff --git a/client/src/svg/Icon_Edit.svg b/client/src/svg/Icon_Edit.svg index f2eb7335c..6a6271821 100644 --- a/client/src/svg/Icon_Edit.svg +++ b/client/src/svg/Icon_Edit.svg @@ -1,3 +1,3 @@ - +