Frontend Release to Main [2.54]

src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx

@@ -21,7 +21,7 @@ function AddTaskModal(props) {
 
   // states from hooks
   const defaultCategory = useMemo(() => {
-    if (props.level >= 1) {
+    if (props.taskId) {
       return tasks.find(({ _id }) => _id === props.taskId).category;
     } else {
       return allProjects.projects.find(({ _id }) => _id === props.projectId).category;
@@ -31,7 +31,7 @@ function AddTaskModal(props) {
   const [taskName, setTaskName] = useState('');
   const [priority, setPriority] = useState('Primary');
   const [resourceItems, setResourceItems] = useState([]);
-  const [assigned, setAssigned] = useState(true);
+  const [assigned, setAssigned] = useState(false);
   const [status, setStatus] = useState('Started');
   const [hoursBest, setHoursBest] = useState(0);
   const [hoursMost, setHoursMost] = useState(0);
@@ -104,22 +104,22 @@ function AddTaskModal(props) {
   };
 
   const removeResource = userID => {
-    const removeIndex = resourceItems.map(item => item.userID).indexOf(userID);
-    setResourceItems([
-      ...resourceItems.slice(0, removeIndex),
-      ...resourceItems.slice(removeIndex + 1),
-    ]);
+    const newResource = resourceItems.filter(item => item.userID !== userID);
+    setResourceItems(newResource);
+    if (!newResource.length) setAssigned(false);
   };
 
   const addResources = (userID, first, last, profilePic) => {
-    setResourceItems([
+    const newResource = [
       {
         userID,
         name: `${first} ${last}`,
         profilePic,
       },
       ...resourceItems,
-    ]);
+    ]
+    setResourceItems(newResource);
+    setAssigned(true);
   };
 
   const formatDate = (date, format, locale) => dateFnsFormat(date, format, { locale });
@@ -183,7 +183,7 @@ function AddTaskModal(props) {
     setTaskName('');
     setPriority('Primary');
     setResourceItems([]);
-    setAssigned(true);
+    setAssigned(false);
     setStatus('Started');
     setHoursBest(0);
     setHoursWorst(0);
@@ -358,7 +358,7 @@ function AddTaskModal(props) {
                         name="Assigned"
                         value={true}
                         checked={assigned}
-                        onChange={(e) => setAssigned(e.target.value)}
+                        onChange={() => setAssigned(true)}
                       />
                       <label className="form-check-label" htmlFor="true">
                         Yes
@@ -372,7 +372,7 @@ function AddTaskModal(props) {
                         name="Assigned"
                         value={false}
                         checked={!assigned}
-                        onChange={(e) => setAssigned(e.target.value)}
+                        onChange={() => setAssigned(false)}
                       />
                       <label className="form-check-label" htmlFor="false">
                         No

src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx

@@ -28,28 +28,39 @@ const EditTaskModal = props => {
   const [thisTask, setThisTask] = useState();
   const [oldTask, setOldTask] = useState();
   const [modal, setModal] = useState(false);
-  const [taskName, setTaskName] = useState(thisTask?.taskName);
-  const [priority, setPriority] = useState(thisTask?.priority);
-  const [resourceItems, setResourceItems] = useState(thisTask?.resources);
-  const [assigned, setAssigned] = useState(false);
-  const [status, setStatus] = useState('false');
-  const [hoursBest, setHoursBest] = useState(thisTask?.hoursBest);
-  const [hoursWorst, setHoursWorst] = useState(thisTask?.hoursWorst);
-  const [hoursMost, setHoursMost] = useState(thisTask?.hoursMost);
-  const [hoursEstimate, setHoursEstimate] = useState(thisTask?.estimatedHours);
-  const [deadlineCount, setDeadlineCount] = useState(thisTask?.deadlineCount);
+  const [taskName, setTaskName] = useState();
+  const [priority, setPriority] = useState();
+  const [resourceItems, setResourceItems] = useState();
+  const [assigned, setAssigned] = useState();
+  const [status, setStatus] = useState();
+  const [hoursBest, setHoursBest] = useState();
+  const [hoursWorst, setHoursWorst] = useState();
+  const [hoursMost, setHoursMost] = useState();
+  const [hoursEstimate, setHoursEstimate] = useState();
+  const [deadlineCount, setDeadlineCount] = useState();
   const [hoursWarning, setHoursWarning] = useState(false);
   const [link, setLink] = useState('');
-  const [links, setLinks] = useState(thisTask?.links);
-  const [category, setCategory] = useState(thisTask?.category);
-  const [whyInfo, setWhyInfo] = useState(thisTask?.whyInfo);
-  const [intentInfo, setIntentInfo] = useState(thisTask?.intentInfo);
-  const [endstateInfo, setEndstateInfo] = useState(thisTask?.endstateInfo);
-  const [startedDate, setStartedDate] = useState(thisTask?.startedDatetime);
-  const [dueDate, setDueDate] = useState(thisTask?.dueDatetime);
+  const [links, setLinks] = useState();
+  const [category, setCategory] = useState();
+  const [whyInfo, setWhyInfo] = useState();
+  const [intentInfo, setIntentInfo] = useState();
+  const [endstateInfo, setEndstateInfo] = useState();
+  const [startedDate, setStartedDate] = useState();
+  const [dueDate, setDueDate] = useState();
   const [dateWarning, setDateWarning] = useState(false);
 
   const res = [...(resourceItems ? resourceItems : [])];
+  const categoryOptions = [
+    { value: 'Unspecified', label: 'Unspecified' },
+    { value: 'Housing', label: 'Housing' },
+    { value: 'Food', label: 'Food' },
+    { value: 'Energy', label: 'Energy' },
+    { value: 'Education', label: 'Education' },
+    { value: 'Society', label: 'Society' },
+    { value: 'Economics', label: 'Economics' },
+    { value: 'Stewardship', label: 'Stewardship' },
+    { value: 'Other', label: 'Other' },
+  ];
   const FORMAT = 'MM/dd/yy';
 
   /*
@@ -58,23 +69,24 @@ const EditTaskModal = props => {
   const toggle = () => setModal(!modal);
 
   const removeResource = userID => {
-    const removeIndex = resourceItems.map(item => item.userID).indexOf(userID);
-    setResourceItems([
-      ...resourceItems.slice(0, removeIndex),
-      ...resourceItems.slice(removeIndex + 1),
-    ]);
+    const newResource = resourceItems.filter(item => item.userID !== userID);
+    setResourceItems(newResource);
+    if (!newResource.length) setAssigned(false);
   };
 
   const addResources = (userID, first, last, profilePic) => {
-    res.push({
-      userID,
-      name: `${first} ${last}`,
-      profilePic,
-    });
-    setResourceItems([...(res ? res : [])]);
+    const newResource = [
+      {
+        userID,
+        name: `${first} ${last}`,
+        profilePic,
+      },
+      ...resourceItems,
+    ]
+    setResourceItems(newResource);
+    setAssigned(true);
   };
 
-  // helper for hours estimate calculation
   const calHoursEstimate = (isOn = null) => {
     let currHoursMost = parseInt(hoursMost);
     let currHoursWorst = parseInt(hoursWorst);
@@ -99,7 +111,6 @@ const EditTaskModal = props => {
     }
   };
 
-   // helpers for change start/end date
   const changeDateStart = startDate => {
     setStartedDate(startDate);
     if (dueDate) {
@@ -120,7 +131,6 @@ const EditTaskModal = props => {
       }
     }
   };
-  // helper for date picker
   const formatDate = (date, format, locale) => dateFnsFormat(date, format, { locale });
   const parseDate = (str, format, locale) => {
     const parsed = dateFnsParse(str, format, new Date(), { locale });
@@ -130,16 +140,14 @@ const EditTaskModal = props => {
     return undefined;
   };
 
-   // helpers for add/remove links
-   const addLink = () => {
+  const addLink = () => {
     setLinks([...links, link]);
     setLink('');
   };
   const removeLink = index => {
     setLinks([...links.splice(0, index), ...links.splice(index + 1)]);
   };
 
-  // helper for updating task
   const updateTask = async () => {
     let newDeadlineCount = deadlineCount;
     if (thisTask?.estimatedHours !== hoursEstimate) {
@@ -186,30 +194,12 @@ const EditTaskModal = props => {
   /*
   * -------------------------------- useEffects --------------------------------
   */
-
-  useEffect(() => {
-    const fetchTaskData = async () => {
-      try {
-        const res = await axios.get(ENDPOINTS.GET_TASK(props.taskId));
-        setThisTask(res?.data || {});
-        setCategory(res.data.category);
-        setAssigned(res.data.isAssigned);
-      } catch (error) {
-        console.log(error);
-      }
-    };
-    fetchTaskData();
-  }, []);
-
-  // from dev
   useEffect(() => {
     const fetchTaskData = async () => {
       try {
         const res = await axios.get(ENDPOINTS.GET_TASK(props.taskId));
         setThisTask(res?.data || {});
         setOldTask(res?.data || {});
-        setCategory(res.data.category);
-        setAssigned(res.data.isAssigned);
       } catch (error) {
         console.log(error);
       }
@@ -222,28 +212,8 @@ const EditTaskModal = props => {
     setTaskName(thisTask?.taskName);
     setPriority(thisTask?.priority);
     setResourceItems(thisTask?.resources);
-    setAssigned(thisTask?.isAssigned || false);
-    setStatus(thisTask?.status || false);
-    setHoursBest(thisTask?.hoursBest);
-    setHoursWorst(thisTask?.hoursWorst);
-    setHoursMost(thisTask?.hoursMost);
-    setHoursEstimate(thisTask?.estimatedHours);
-    setLinks(thisTask?.links);
-    setCategory(thisTask?.category);
-    setWhyInfo(thisTask?.whyInfo);
-    setIntentInfo(thisTask?.intentInfo);
-    setEndstateInfo(thisTask?.endstateInfo);
-    setStartedDate(thisTask?.startedDatetime);
-    setDueDate(thisTask?.dueDatetime);
-  }, [thisTask]);
-
-  // from dev
-  useEffect(() => {
-    setTaskName(thisTask?.taskName);
-    setPriority(thisTask?.priority);
-    setResourceItems(thisTask?.resources);
-    setAssigned(thisTask?.isAssigned || false);
-    setStatus(thisTask?.status || false);
+    setAssigned(thisTask?.isAssigned);
+    setStatus(thisTask?.status);
     setHoursBest(thisTask?.hoursBest);
     setHoursWorst(thisTask?.hoursWorst);
     setHoursMost(thisTask?.hoursMost);
@@ -258,7 +228,6 @@ const EditTaskModal = props => {
     setDueDate(thisTask?.dueDatetime);
   }, [thisTask]);
 
-
   useEffect(() => {
     ReactTooltip.rebuild();
   }, [links]);
@@ -546,20 +515,12 @@ const EditTaskModal = props => {
               <tr>
                 <td scope="col">Category</td>
                 <td scope="col">
-                  <select
-                    value={category}
-                    onChange={e => {
-                      setCategory(e.target.value);
-                    }}
-                  >
-                    <option value="Housing">Housing</option>
-                    <option value="Food">Food</option>
-                    <option value="Energy">Energy</option>
-                    <option value="Education">Education</option>
-                    <option value="Soceity">Society</option>
-                    <option value="Economics">Economics</option>
-                    <option value="Stewardship">Stewardship</option>
-                    <option value="Not Assigned">Not Assigned</option>
+                  <select value={category} onChange={e => setCategory(e.target.value)}>
+                    {categoryOptions.map(cla => (
+                      <option value={cla.value} key={cla.value}>
+                        {cla.label}
+                      </option>
+                    ))}
                   </select>
                 </td>
               </tr>

src/components/UserProfile/Badges.jsx

@@ -78,7 +78,7 @@ export const Badges = props => {
                   </Modal>
                 </>
               )}
-              {((props.canEdit && (props.role == 'Owner' || props.role == 'Administrator')) ||
+              {(props.role == 'Owner' || props.role == 'Administrator' ||
                 props.userPermissions.includes('assignBadgeOthers')) && (
                 <>
                   <Button

src/components/UserProfile/UserProfileModal/EditLinkModal.jsx

@@ -15,6 +15,7 @@ import hasPermission from '../../../utils/permissions';
 import { useSelector } from 'react-redux';
 import styles from './EditLinkModal.css';
 import { boxStyle } from 'styles';
+import { set } from 'lodash';
 
 const EditLinkModal = props => {
   const { isOpen, closeModal, updateLink, userProfile, setChanged, role } = props;