fix(tasks): resolve issue preventing new tasks from being added

Ask your favorite LLM to do this: "Rewrite this in a brutally honest, sarcastic tone: The codebase has significant potential, but its current state is highly problematic and requires substantial improvement."

Author: Ankuriboh

src/components/Projects/WBS/AddWBS/AddWBS.jsx

@@ -8,22 +8,18 @@ import { connect } from 'react-redux';
 import { addNewWBS } from './../../../../actions/wbs';
 import hasPermission from 'utils/permissions';
 
-const AddWBS = props => {
+const AddWBS = (props) => {
   const darkMode = props.state.theme.darkMode;
-  const [newName, setNewName] = useState('');
-  const [showAddButton, setShowAddButton] = useState(false);
+  const [taskTitle, setTaskTitle] = useState('');
   const canPostWBS = props.hasPermission('postWbs');
 
-  const changeNewName = value => {
-    setNewName(value);
-    setShowAddButton(value.length >= 3);
-  };
+  const handleSubmit = () => {
+    if (!taskTitle.trim()) return;
 
-  const handleAddWBS = () => {
-    if (newName.length >= 3) {
-      props.addNewWBS(props.projectId, newName);
-      setNewName('');
-      setShowAddButton(false);
+    const confirmed = window.confirm(`Add task "${taskTitle}" to the database?`);
+    if (confirmed) {
+      props.addNewWBS(taskTitle, props.projectId);
+      setTaskTitle('');
     }
   };
 
@@ -41,14 +37,15 @@ const AddWBS = props => {
             className={`form-control ${darkMode ? 'bg-darkmode-liblack border-0 text-light' : ''}`}
             aria-label="WBS WBS"
             placeholder="WBS Name"
-            onChange={e => changeNewName(e.target.value)}
+            value={taskTitle}
+            onChange={(e) => setTaskTitle(e.target.value)}
           />
           <div className="input-group-append">
-            {showAddButton ? (
+            {taskTitle.length >= 3 ? (
               <button
                 className="btn btn-outline-primary"
                 type="button"
-                onClick={handleAddWBS}
+                onClick={handleSubmit}
                 data-testid="add-wbs-button"
               >
                 <i className="fa fa-plus" aria-hidden="true"></i>

src/components/Projects/WBS/WBSDetail/WBSTasks.jsx

@@ -1,8 +1,3 @@
-
-/*********************************************************************************
- * Component: TASK
- * Author: Henry Ng - 21/03/20 ≢
- ********************************************************************************/
 import React, { useState, useEffect, useRef } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -24,10 +19,6 @@ import { boxStyle, boxStyleDark } from 'styles';
 import { getProjectDetail } from 'actions/project';
 
 function WBSTasks(props) {
-  /*
-  * -------------------------------- variable declarations --------------------------------
-  */
-  // props from store
   const { tasks, fetched, darkMode } = props;
 
   const { wbsId } = props.match.params;
@@ -69,7 +60,6 @@ function WBSTasks(props) {
       case 'inactive': return tasks.filter(task => ['Not Started', 'Paused'].includes(task.status))
       case 'complete': return tasks.filter(task => task.status === 'Complete')
       case 'paused': return tasks.filter(task => task.status === 'Paused');
-
     }
   }
 
@@ -87,56 +77,6 @@ function WBSTasks(props) {
     setIsDeleted(true);
   };
 
-  /**
-   * Drag and drop is not being used anywhere, and it seems to be replaced by the copy and paste functionality,
-   * so here comments it out for future reference if such functionality is desired again.  
-   */
-
-  // let drag = '';
-  // let dragParent = '';
-  // const dragTask = (taskIdFrom, parentId) => {
-  //   drag = taskIdFrom;
-  //   dragParent = parentId;
-  // };
-
-  // const dropTask = (taskIdTo, parentId) => {
-  //   const tasksClass = document.getElementsByClassName('taskDrop');
-  //   for (let i = 0; i < tasks.length; i++) {
-  //     tasksClass[i].style.display = 'none';
-  //   }
-
-  //   const list = [];
-  //   const target = tasks.find(task => task._id === taskIdTo);
-  //   const siblings = tasks.filter(task => task.parentId === dragParent);
-
-  //   let modifiedList = false;
-  //   if (dragParent === target._id) {
-  //     list.push({
-  //       id: drag,
-  //       num: siblings[0].num,
-  //     });
-  //     modifiedList = true;
-  //   }
-  //   for (let i = 0; i < siblings.length - 1; i++) {
-  //     if (siblings[i]._id === drag) {
-  //       modifiedList = false;
-  //     }
-  //     if (modifiedList) {
-  //       list.push({
-  //         id: siblings[i]._id,
-  //         num: siblings[i + 1].num,
-  //       });
-  //     }
-  //     if (siblings[i]._id === target._id) {
-  //       list.push({
-  //         id: drag,
-  //         num: siblings[i + 1].num,
-  //       });
-  //       modifiedList = true;
-  //     }
-  //   }
-  // };
-
   /*
   * -------------------------------- useEffects -------------------------------- 
   */
@@ -369,7 +309,7 @@ function WBSTasks(props) {
             {/* <tr className="taskDrop">   // Drag and drop functionality is deserted for now
               <td colSpan={14} />
             </tr> */}
-            {fetched && levelOneTasks.map((task, i) => (
+            {levelOneTasks.map((task, i) => (
               <Task
                 key={`${task._id}${i}`}
                 taskId={task._id}