chore: merge from main pr #102

src/app/needs/components/NeedsDisplay.tsx

@@ -304,7 +304,7 @@ export default function NeedsDisplay() {
         className={clsx(
           "fixed right-4 bottom-24 text-white rounded",
           hasHighlightedNeeds
-            ? "bg-twd-primary-purple shadow-twd-primary-purple shadow-glow"
+            ? "bg-twd-primary-purple"
             : "bg-gray-400 cursor-not-allowed"
         )}
       />

src/app/needs/next-actions/components/NextActionsDisplay.tsx

@@ -5,6 +5,8 @@ import { useDatabase } from "@/context/DatabaseContext";
 import clsx from "clsx";
 import changeCase from "@/lib/utils/changeCase";
 import NextActionsSection from "./NextActionsSection";
+import Button from "@/ui/shared/Button";
+import Modal from "@/ui/shared/Modal";
 
 export interface NeedDocument {
   id: string;
@@ -32,14 +34,15 @@ export interface NextActionDocument {
 export default function NextActionsDisplay() {
   const database = useDatabase();
   const [highlightedNeeds, setHighlightedNeeds] = useState<NeedDocument[]>([]);
-  const [relatedNextActions, setRelatedNextActions] = useState<
-    NextActionDocument[]
-  >([]);
+  const [relatedNextActions, setRelatedNextActions] = useState<NextActionDocument[]>([]);
   const [chainEnd, setChainEnd] = useState(0);
   const [actionState, setActionState] = useState(0);
+  const [mode, setMode] = useState<"create" | "destroy">("create");
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [choppingBlock, setChoppingBlock] = useState<NextActionDocument | null>(null);
 
-  useEffect(() => {
-    /* Fetch Data */
+
+  useEffect(() => { /* Fetch Data */
     async function fetchData() {
       const needsDocs = await database.getFromDb("needs");
       const allNeeds = needsDocs.map((doc) => doc.toJSON() as NeedDocument);
@@ -70,6 +73,10 @@ export default function NextActionsDisplay() {
     fetchData();
   }, [database, chainEnd, actionState]);
 
+  useEffect(() => { /* Log Mode Change */
+    console.log(`...to ${mode}.`);
+  }, [mode])
+
   const priorityGroups = useMemo(() => {
     if (highlightedNeeds.length === 0) return [];
 
@@ -119,7 +126,7 @@ export default function NextActionsDisplay() {
     if (highlighted) {
       const updatedTimestamps = [...action.selectedTimestamps];
       updatedTimestamps.pop();
-
+      
       await database.updateDocument(
         collectionName,
         action.id,
@@ -134,17 +141,9 @@ export default function NextActionsDisplay() {
         action.timestamp
       );
     } else {
-      // Highlight action:
-      // Add new selectedTimestamp
-      const updatedTimestamps = [
-        ...action.selectedTimestamps,
-        new Date().toISOString(),
-      ];
-
-      // Find the parent need to copy its selectedExpiry
-      const parentNeed = highlightedNeeds.find(
-        (need) => need.id === action.need
-      );
+      const updatedTimestamps = [...action.selectedTimestamps, new Date().toISOString()];
+
+      const parentNeed = highlightedNeeds.find((need) => need.id === action.need);
       if (!parentNeed) {
         console.error("Parent need not found for action:", action);
         return;
@@ -165,7 +164,30 @@ export default function NextActionsDisplay() {
       );
     }
 
-    setChainEnd((prev) => prev + 1);
+    setChainEnd(prev => prev + 1);
+  };
+
+  const onDeleteAction = async (action: NextActionDocument) => {
+    setChoppingBlock(action);
+    setIsDeleteModalOpen(true);
+  };
+
+  const onReallyDeleteAction = async (action: NextActionDocument) => {
+    await database.deleteFromDb("next_actions", action.id);
+
+    setChoppingBlock(null);
+    setChainEnd(prev => prev + 1);
+  };
+
+  const onToggleMode = () => {
+    switch(mode) {
+      case "create":
+        setMode("destroy");
+        break;
+      case "destroy":
+        setMode("create");
+        break;
+    }
   };
 
   const handleAddAction = async (newAction: string, need: NeedDocument) => {
@@ -186,59 +208,89 @@ export default function NextActionsDisplay() {
       }
 
       setActionState((prev) => prev + 1);
+      console.log(`Action State: ${actionState}`);
     }
   };
-
+ 
   return (
     <div className="w-11/12 m-auto">
-      {priorityGroups.length === 0 ? (
-        <p className="mb-5">
-          You have no unmet needs selected. Review which needs might be unmet
-          before we can recommend next actions to meet them.
-        </p>
-      ) : (
-        priorityGroups.map((group, i) => (
+      {priorityGroups.length === 0
+        ? (<p className="mb-5">
+            You have no unmet needs selected. Review which needs might be unmet before we can recommend next actions to meet them.
+        </p>)
+        : (priorityGroups.map((group, i) => (
           <div key={i} className="mb-6">
-            <h3
-              className={clsx(
-                "text-xl font-bold mb-2",
-                { "text-twd-cube-red": group.priority.order === 1 },
-                { "text-twd-cube-yellow": group.priority.order === 2 },
-                { "text-twd-cube-blue": group.priority.order === 3 },
-                { "text-twd-cube-green": group.priority.order === 4 }
-              )}
-            >
+            <h3 className={clsx(
+              "text-xl font-bold mb-2",
+              {"text-twd-cube-red" : group.priority.order === 1 },
+              {"text-twd-cube-yellow" : group.priority.order === 2},
+              {"text-twd-cube-blue" : group.priority.order === 3},
+              {"text-twd-cube-green" : group.priority.order === 4}
+            )}>
               {changeCase(group.priority.name, "sentence")}
             </h3>
-
+            
             {group.needs.map((need) => {
               const actions = getActionsForNeed(need.id);
 
               return (
                 <div key={need.id}>
                   <h4 className="font-normal mb-4">
-                    To meet a need for {changeCase(need.name, "lower")}, which
-                    actions can you take next?
+                    To meet a need for {changeCase(need.name, "lower")}, which actions can you take next?
                   </h4>
 
-                  {actions.length > 0 ? (
-                    <NextActionsSection
-                      need={need}
-                      actions={actions}
-                      onToggleAction={onToggleAction}
-                      handleAddAction={handleAddAction}
-                    />
-                  ) : (
-                    <p className="text-sm text-gray-500 ml-6">
+                  { actions.length > 0
+                    ? (
+                      <NextActionsSection
+                        need={need}
+                        actions={actions}
+                        onToggleAction={onToggleAction}
+                        onDeleteAction={onDeleteAction}
+                        mode={mode}
+                        handleAddAction={handleAddAction}
+                      />
+                    )
+                    : (<p className="text-sm text-gray-500 ml-6">
                       No next actions available for this need.
-                    </p>
-                  )}
+                    </p>)
+                  }
                 </div>
               );
             })}
           </div>
-        ))
-      )}
+        )))
+      }
+
+      <Button /* Mode Switcher */
+        label={"Delete Mode"} 
+        onClick={() => {
+          console.log(`Toggling mode from ${mode}...`);
+          onToggleMode();
+        }}
+        className={clsx(
+          "fixed right-4 bottom-24 text-white rounded",
+          mode === "destroy"
+          ? "bg-twd-primary-purple"
+          : "bg-gray-400 cursor-not-allowed"
+        )}
+      />
+
+      <Modal title="Delete this action?"
+        modalOpen={isDeleteModalOpen}
+        forwardButton={{
+          action: () => {
+            if (choppingBlock) {
+              onReallyDeleteAction(choppingBlock);
+            }
+            setIsDeleteModalOpen(false);
+          },
+          label: "Yes",
+        }}
+        backButton={{
+          action: () => { setIsDeleteModalOpen(false) },
+          label: "No",
+        }}
+      />
     </div>
   );
-}
+}

src/app/needs/next-actions/components/NextActionsSection.tsx

@@ -12,13 +12,17 @@ interface SectionProps {
   actions: NextActionDocument[];
   onToggleAction: (action: NextActionDocument) => Promise<void>;
   handleAddAction: (newAction: string, need: NeedDocument) => Promise<void>;
+  onDeleteAction: (action: NextActionDocument) => Promise<void>;
+  mode: "create" | "destroy";
 }
 
 export default function NextActionsSection({
   need,
   actions,
   onToggleAction,
   handleAddAction,
+  onDeleteAction,
+  mode
 }: SectionProps) {
   const [modalOpen, setModalOpen] = useState(false);
   const [newAction, setNewAction] = useState<string>("");
@@ -39,30 +43,31 @@ export default function NextActionsSection({
           const highlighted = new Date(action.selectedExpiry) > new Date();
 
           return (
-            <Button
+            <Button label={action.name}
               key={action.id}
-              label={action.name}
-              className={
-                highlighted
+              className={ mode === "destroy"
+                ? "bg-twd-cube-red text-black font-normal"
+                : highlighted
                   ? "bg-twd-primary-purple text-black font-normal"
                   : "bg-gray-600 text-white font-normal"
               }
-              onClick={() => onToggleAction(action)}
+              onClick={() => (mode === "destroy"
+                ? onDeleteAction(action)
+                : onToggleAction(action)
+              )}
             />
           );
         })}
 
-        <button
+        <button aria-label="Add Action"
           onClick={() => setModalOpen(true)}
           className="flex justify-center items-center"
-          aria-label="Add Action"
         >
           <PlusCircleIcon className="w-7 m-auto" />
         </button>
       </div>
 
-      <Modal
-        title="Add a New Action"
+      <Modal title="Add a New Action"
         inputModal={true}
         modalOpen={modalOpen}
         placeholder="What action might help meet this need?"
@@ -78,4 +83,4 @@ export default function NextActionsSection({
       />
     </>
   );
-}
+}