V1 When did you complete this action modal

frontend/components/Pages/ActionsPage/ActionDetails.js

@@ -22,6 +22,7 @@ import { CommunityContext, useDetails } from "../../Contexts/CommunityContext";
 import { TestimonialCard } from "../TestimonialsPage/TestimonialsCard";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { getActionMetric } from "../../Shared/Utils";
+import ActionSelectDateModal from "./ActionSelectDateModal";
 
 export default function ActionDetails({ route, navigation }) {
   const { action_id } = route.params;
@@ -33,6 +34,8 @@ export default function ActionDetails({ route, navigation }) {
   });
   const { testimonials, testimonialsSettings, vendorsSettings } = useContext(CommunityContext);
 
+  const [showSelectDateModal, setShowSelectDateModal] = useState(false);
+  const [dateAction, setDateAction] = useState(null);
   const [isDoneOpen, setIsDoneOpen] = useState(false);
 
   // individual functions to render the context for each tab in the action details page
@@ -142,6 +145,16 @@ export default function ActionDetails({ route, navigation }) {
     }
   };
 
+  // TODO: add functionality to handle the action submission
+  const handleActionSubmit = (date) => {
+    console.log(date);
+    if (dateAction === "DONE") {
+      setIsDoneOpen(true);
+    } else {
+      console.log("Nicely done! You have now added this action to your todo list.")
+    }
+  }
+
   return (
     <Page>
       {isActionLoading ? (
@@ -187,6 +200,7 @@ export default function ActionDetails({ route, navigation }) {
                         color: "white",
                         fontWeight: "bold",
                       }}
+                      onPress={() => {setDateAction("TODO"); setShowSelectDateModal(true)}}
                     >
                       Add to To-Do
                     </Button>
@@ -197,7 +211,7 @@ export default function ActionDetails({ route, navigation }) {
                         color: "white",
                         fontWeight: "bold",
                       }}
-                      onPress={() => setIsDoneOpen(true)}
+                      onPress={() => {setDateAction("DONE"); setShowSelectDateModal(true)}}
                     >
                       Done
                     </Button>
@@ -229,6 +243,13 @@ export default function ActionDetails({ route, navigation }) {
             </VStack>
             <Container height={20}></Container>
           </ScrollView>
+          <ActionSelectDateModal
+            action={dateAction}
+            isOpen={showSelectDateModal}
+            setIsOpen={setShowSelectDateModal}
+            title={action.title}
+            handleSubmit={handleActionSubmit}
+          />
           {/* Modal for when the user marks the action as done */}
           <Modal isOpen={isDoneOpen} onClose={() => {}}>
             <Modal.Content maxWidth="400px">

frontend/components/Pages/ActionsPage/ActionSelectDateModal.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import moment from "moment";
+
+import { Button, Modal, Select, Text } from "native-base";
+
+const ActionSelectDateModal = ({ action, isOpen, setIsOpen, title, handleSubmit }) => {
+  const [completionDate, setCompletionDate] = useState(null);
+
+  const renderOptions = () => {
+    if (action === "DONE") {
+      return [
+        "Just completed it!",
+        `Earlier this year (${moment().format("YYYY")})`,
+        `Last year (${moment().subtract(1, "years").format("YYYY")})`,
+        "Before last year",
+      ]
+    }
+
+    return [
+      "Very soon",
+      `Later this year (${moment().format("YYYY")})`,
+      "Next few years",
+    ]
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+      <Modal.Content maxWidth="400px">
+        <Modal.CloseButton />
+        <Modal.Header>
+          {title.length > 20 ? title.substring(0, 20) + "..." : title}
+        </Modal.Header>
+        <Modal.Body>
+          <Text mb={4}>Click "Apply" after making changes</Text>
+          <Select
+            selectedValue={completionDate}
+            accessibilityLabel="Select completion date"
+            placeholder="Select completion date"
+            onValueChange={(itemValue) => setCompletionDate(itemValue)}
+            _selectedItem={{
+              bg: "primary.100",
+            }}
+          >
+            {renderOptions().map((option, index) => (
+              <Select.Item key={index} label={option} value={option} />
+            ))}
+          </Select>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button.Group variant="ghost" space={2}>
+            <Button onPress={() => setIsOpen(false)}>Cancel</Button>
+            <Button
+              onPress={() => {
+                handleSubmit(completionDate);
+                setIsOpen(false);
+              }}
+            >
+              Apply
+            </Button>
+          </Button.Group>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ActionSelectDateModal;