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.

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
Merged
Changes from 1 commit
Commits
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 committed Jul 3, 2024

Unverified

This user has not yet uploaded their public signing key.
commit 21112c3a6e286cb32cddf9cdfcd9d01c619a3f11
164 changes: 92 additions & 72 deletions src/components/NewsFeed/Prompts/PromptModal.js
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;