From 016b6392b35e59e39775f36c44498e320065f543 Mon Sep 17 00:00:00 2001 From: Custom Commands Date: Thu, 29 Dec 2022 18:34:37 -0600 Subject: [PATCH] Front-End Create --- project-manager/src/App.jsx | 9 + .../src/Scss/components/EditProject.scss | 1 + .../src/components/EditProject.jsx | 161 ++++++++++++++++++ project-manager/src/pages/Home.jsx | 4 +- server/controllers/projectsController.js | 16 +- server/middleWare/middleware.js | 2 +- server/utils/projectManagerFileSystem.js | 2 +- 7 files changed, 189 insertions(+), 6 deletions(-) create mode 100644 project-manager/src/Scss/components/EditProject.scss create mode 100644 project-manager/src/components/EditProject.jsx diff --git a/project-manager/src/App.jsx b/project-manager/src/App.jsx index 6384e5a..f7e45a6 100644 --- a/project-manager/src/App.jsx +++ b/project-manager/src/App.jsx @@ -17,6 +17,7 @@ import Home from './pages/Home'; import NotFound from './pages/NotFound'; import Help from './pages/Help'; import Project from './pages/Project'; +import EditProject from './components/EditProject'; function App() { return ( @@ -41,6 +42,14 @@ function App() { path='/project/:id' element={} /> + } + /> + } + /> } diff --git a/project-manager/src/Scss/components/EditProject.scss b/project-manager/src/Scss/components/EditProject.scss new file mode 100644 index 0000000..5986eb1 --- /dev/null +++ b/project-manager/src/Scss/components/EditProject.scss @@ -0,0 +1 @@ +// SCSS Goes here diff --git a/project-manager/src/components/EditProject.jsx b/project-manager/src/components/EditProject.jsx new file mode 100644 index 0000000..4a4f5ec --- /dev/null +++ b/project-manager/src/components/EditProject.jsx @@ -0,0 +1,161 @@ +import '../Scss/components/EditProject.scss'; + +// Libs +import { useState, useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; + +/** + * TODO + * - [ ] Dynamic Create/Edit + * - [ ] Create + * - [ ] Edit + * - [ ] Validation + * - [ ] Handle Server + * - [ ] Prevent Empty + */ + +/** + * @description This is a form used to Create and Edit Basic Project information + * @author NinjaSurge + * @param {*} { edit } + * @return {*} + */ +const EditProject = ({ edit }) => { + const navigate = useNavigate(); + const { id } = useParams(); + + const [name, setName] = useState(null); + const [description, setDescription] = useState(null); + const [setReadme, setSetReadme] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); + // const [errorFields, setErrorFields] = useState(null); + + const url = edit ? `/api/projects/${id}` : '/api/projects/'; + const method = edit ? 'PATCH' : 'POST'; + const return_address = edit ? `/project/${id}` : '/'; + + const handleSubmit = async (e) => { + e.preventDefault(); + console.log('Submitting...'); + setLoading(true); + + // Validation + if (name === null && name === '') { + setError('Invalid Name value'); + } + + if (setReadme === null) { + setError('Invalid setReadme value'); + } + + // Set valid data + const data = { + name, + description, + readme: setReadme, + }; + + fetch(url, { method: method }) + .then((res) => { + if (!res.ok) { + return { fail: true, error: res.json() }; + } + + return res.json(); + }) + .then((data) => { + console.log('data', data); + if (data.fail) { + setError(data.error); + } + console.log('data', data); + setLoading(false); + // navigate(return_address); + }); + }; + + useEffect(() => { + if (!edit) { + setName(''); + setDescription(''); + setSetReadme(false); + } + if (edit) { + fetch(url) + .then((res) => res.json()) + .then((data) => { + setName(data.name); + setDescription(data.description); + setSetReadme(data.setReadme); + }); + } + setLoading(false); + return () => {}; + }, [edit, error, url]); + + return ( +
+ {error && ( +
+

{error.error}

+

Values that need to be changed:

+
    + {error.fields.map((field) => { + return ( +
  • + {field.field_name} - {field.description} +
    • + ); + })} +
+
+ )} + +
+
+ {edit ? 'Edit' : 'Create'} a Project + + + +
+ +
+
+ ); +}; + +export default EditProject; diff --git a/project-manager/src/pages/Home.jsx b/project-manager/src/pages/Home.jsx index a23d35e..41f6dcd 100644 --- a/project-manager/src/pages/Home.jsx +++ b/project-manager/src/pages/Home.jsx @@ -2,12 +2,14 @@ import '../Scss/pages/Home.scss'; // Components import ListProjects from '../components/ListProjects'; +import { Link } from 'react-router-dom'; const Home = () => { return ( -
+

Home

+ New Project
); }; diff --git a/server/controllers/projectsController.js b/server/controllers/projectsController.js index c0a5724..0916867 100644 --- a/server/controllers/projectsController.js +++ b/server/controllers/projectsController.js @@ -88,17 +88,27 @@ const createProject = (req, res) => { let empty_fields = []; for (const field in required_fields) { if (data[required_fields[field]] === undefined) - empty_fields.push(required_fields[field]); + empty_fields.push({ + field_name: required_fields[field], + description: 'Must be filled out', + }); } // Aditional field checks let invalid_fields = []; - if (data.name === '') invalid_fields.push('name must not be empty'); + if (data.name === '') + invalid_fields.push({ + field_name: 'name', + description: 'name must not be empty', + }); if (empty_fields.length != 0) { res .status(400) - .json({ error: 'Must fill out all fields', fields: empty_fields }); + .json({ + error: 'ALL Required fields must be filled out.', + fields: empty_fields, + }); return; } else if (invalid_fields.length != 0) { res diff --git a/server/middleWare/middleware.js b/server/middleWare/middleware.js index 3fd1fcf..e6e2e51 100644 --- a/server/middleWare/middleware.js +++ b/server/middleWare/middleware.js @@ -4,7 +4,7 @@ const { use } = require('../routes/projects'); const router = express.Router(); const globalWare = (req, res, next) => { - console.log(req.method, req.path); + console.log(req.method, req.path, req.body); next(); }; diff --git a/server/utils/projectManagerFileSystem.js b/server/utils/projectManagerFileSystem.js index 29b34e0..63bc76f 100644 --- a/server/utils/projectManagerFileSystem.js +++ b/server/utils/projectManagerFileSystem.js @@ -164,7 +164,7 @@ const makeProject = (project_directory, project_info) => { // Handle incoming project information const uuid = uuidv4(); const info = { - project_info, + ...project_info, _id: uuid, };