Merge pull request #105 from jennydo/prompt-close-modal

Refresh prompt responses when close prompt modal
jennydo · Jul 4, 2024 · 07bb1f7 · 07bb1f7
2 parents 113df07 + dacf52c
commit 07bb1f7
Showing 1 changed file with 78 additions and 58 deletions.
diff --git a/src/components/NewsFeed/Prompts/PromptModal.js b/src/components/NewsFeed/Prompts/PromptModal.js
@@ -17,7 +17,6 @@ import axios from "axios";
 import { PromptResponsesContext } from "../../../context/PromptResponseContext";
 
 const PromptModal = () => {
-
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const { user } = useAuthContext();
@@ -34,6 +33,8 @@ const PromptModal = () => {
       const currentDate = new Date().getDate();
       const promptDate = new Date(currentPrompt.createdAt).getDate();
 
+      console.log(currentDate, promptDate);
+
       if (currentDate !== promptDate) return true;
       else return false;
     } else return true;
@@ -123,15 +124,21 @@ const PromptModal = () => {
   useEffect(() => {
     fetchPromptResponses();
     console.log("Refetch prompt responses");
-  }, [dispatch, prompt]);
+  }, [isOpen, dispatch, prompt]);
+
+  const handleClose = () => {
+    setIdx(0);
+    dispatch({ type: "CLEAR" });
+    setPromptsDisplay([]);
+  };
 
   const promptQuote = prompt ? prompt.content : "I love it when you";
   const [firstResponse, setFirstResponse] = useState(null);
   const [idx, setIdx] = useState(0);
   const [promptsDisplay, setPromptsDisplay] = useState([]);
   const [showFirstPrompt, setShowFirstPrompt] = useState(true);
   const firstPromptRef = useRef(null);
-  
+
   const handleClickPrompt = () => {
     if (idx >= promptResponses.length) return;
     setShowFirstPrompt(false);
@@ -154,67 +161,80 @@ const PromptModal = () => {
   };
 
 
-  return (  
+  return (
     <>
-        <Button onClick={onOpen}>Open Modal</Button>
-
-        <Modal isOpen={isOpen} onClose={onClose} size='full'>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalCloseButton />
-
-            <ModalBody className='prompt-modal-body'>
-                <PromptBgImage/>
-                <Grid
-                    gridTemplateRows={"1fr"}
+      <Button onClick={onOpen}>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} size="full">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton onClick={handleClose} />
+
+          <ModalBody className="prompt-modal-body">
+            <PromptBgImage />
+            <Grid
+              gridTemplateRows={"1fr"}
+              h="100%"
+              w="100%"
+              mt={10}
+              // zIndex={1}
+              position="relative"
+            >
+              <GridItem h="60vh" w="100%">
+                <Grid gridTemplateColumns={"1fr 50%"} h="100%" w="100%">
+                  <GridItem
                     h="100%"
                     w="100%"
-                    mt={10}
-                    // zIndex={1}  
-                    position="relative" 
-                >
-                    <GridItem h="60vh" w="100%">
-                    <Grid gridTemplateColumns={"1fr 50%"} h="100%" w="100%">
-                        <GridItem
-                        h="100%"
-                        w="100%"
-                        textAlign="right"
-                        onClick={handleClickPrompt}
-                        >
-                        <p className="prompt-text quote">
-                            {promptQuote.slice(0, promptQuote?.length - 3)}
+                    textAlign="right"
+                    onClick={handleClickPrompt}
+                  >
+                    <p className="prompt-text quote">
+                      {promptQuote.slice(0, promptQuote?.length - 3)}
+                    </p>
+                  </GridItem>
+                  <GridItem
+                    h="65vh"
+                    w="100%"
+                    overflowY="hidden"
+                    textAlign="left"
+                  >
+                    <Grid
+                      templateRows="repeat(5, 1fr)"
+                      gap={6}
+                      ref={firstPromptRef}
+                    >
+                      <GridItem
+                        ref={firstPromptRef}
+                        className={
+                          showFirstPrompt ? "fade-in-text show" : "fade-in-text"
+                        }
+                        tabIndex={-1}
+                      >
+                        <p className="prompt-text responses">
+                          {firstPromptResponse?.content}
                         </p>
-                        </GridItem>
-                        <GridItem h="65vh" w="100%" overflowY="hidden" textAlign="left">
-                        <Grid templateRows="repeat(5, 1fr)" gap={6} ref={firstPromptRef}>
-                            <GridItem
-                            ref={firstPromptRef}
-                            className={
-                                showFirstPrompt ? "fade-in-text show" : "fade-in-text"
-                            }
-                            tabIndex={-1}
-                            >
-                            <p className="prompt-text responses">{firstPromptResponse?.content}</p>
+                      </GridItem>
+                      {promptsDisplay &&
+                        promptsDisplay.map((promptRes, promptIdx) =>
+                          promptIdx ? (
+                            <GridItem key={promptIdx} w="100%" h="10">
+                              <p className="prompt-text responses">
+                                {promptRes.content}
+                              </p>
                             </GridItem>
-                            {promptsDisplay &&
-                            promptsDisplay.map((promptRes, promptIdx) =>
-                                promptIdx ? (
-                                <GridItem key={promptIdx} w="100%" h="10">
-                                    <p className="prompt-text responses">{promptRes.content}</p>
-                                </GridItem>
-                                ) : undefined
-                            )}
-                        </Grid>
-                        </GridItem>
+                          ) : undefined
+                        )}
                     </Grid>
-                    </GridItem>
+                  </GridItem>
                 </Grid>
-            </ModalBody>
-
-          </ModalContent>
-        </Modal>
-    </> 
-    );
+              </GridItem>
+            </Grid>
+          </ModalBody>
+
+        </ModalContent>
+      </Modal>
+    </>
+  );
 };
 
-export default PromptModal;
+export default PromptModal;