Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refresh prompt responses when close prompt modal #105

Merged
merged 3 commits into from
Jul 4, 2024
+78 −58
Merged

Refresh prompt responses when close prompt modal #105

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21112c3
Refresh prompt responses when close prompt modal
Euclid0192 Jul 3, 2024
1bc7055
Merge branch 'main' into prompt-close-modal
Euclid0192 Jul 4, 2024
dacf52c
Resolve conflicts with main
Euclid0192 Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Refresh prompt responses when close prompt modal
@Euclid0192
Euclid0192 committed Jul 3, 2024

Verified

This commit was signed with the committer’s verified signature.
snyk-bot Snyk bot
GPG key ID: 5009E0832F4D3DD3
Verified
Learn about vigilant mode
commit 21112c3a6e286cb32cddf9cdfcd9d01c619a3f11
164 changes: 92 additions & 72 deletions src/components/NewsFeed/Prompts/PromptModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
import {
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalCloseButton,
useDisclosure,
Button,
GridItem,
Grid,
} from '@chakra-ui/react'
import './Prompt.scss'
import PromptBgImage from './PromptBgImage';
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalCloseButton,
useDisclosure,
Button,
GridItem,
Grid,
} from "@chakra-ui/react";
import "./Prompt.scss";
import PromptBgImage from "./PromptBgImage";
import { useState, useRef, useEffect, useContext } from "react";
import { useAuthContext } from "../../../hooks/useAuthContext";
import axios from "axios";
import { PromptResponsesContext } from "../../../context/PromptResponseContext";

const PromptModal = () => {

const { isOpen, onOpen, onClose } = useDisclosure()
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;