Front-End Create

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={<Project />}
           />
+          <Route
+            path='/new/project'
+            element={<EditProject edit={false} />}
+          />
+          <Route
+            path='/edit/project/:id'
+            element={<EditProject edit={true} />}
+          />
           <Route
             path='*'
             element={<NotFound />}

project-manager/src/Scss/components/EditProject.scss

@@ -0,0 +1 @@
+// SCSS Goes here

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 (
+    <div className='project-editor'>
+      {error && (
+        <div className='error-prompt'>
+          <h2>{error.error}</h2>
+          <h3>Values that need to be changed:</h3>
+          <ul>
+            {error.fields.map((field) => {
+              return (
+                <li>
+                  {field.field_name} - {field.description}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <fieldset>
+          <legend>{edit ? 'Edit' : 'Create'} a Project</legend>
+          <label htmlFor='name'>
+            Name:
+            <input
+              type='text'
+              name='project_name'
+              id='name'
+              placeholder='Project Name'
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </label>
+          <label htmlFor='readme-check'>
+            README?
+            <input
+              type='checkbox'
+              name='setReadme'
+              id='readme-check'
+              value={setReadme}
+              onChange={(e) => {
+                setSetReadme(e.target.value);
+              }}
+            />
+          </label>
+          <label htmlFor='description'>
+            Description:
+            <input
+              type='text'
+              name='project_description'
+              id='description'
+              placeholder='Project Description'
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </label>
+        </fieldset>
+        <button disabled={error || loading}>
+          {edit ? 'Edit' : 'Create'} Project
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default EditProject;

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 (
-    <div className="home">
+    <div className='home'>
       <h1>Home</h1>
       <ListProjects />
+      <Link to={'/new/project'}>New Project</Link>
     </div>
   );
 };

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

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();
 };
 

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,
   };