Skip to content

Commit

Permalink
Liking polls functionality added, closes agamjotsingh18#288
Browse files Browse the repository at this point in the history 
Signed-off-by: debsouryadatta <[email protected]>
  • Loading branch information
@debsouryadatta
debsouryadatta committed Jul 31, 2023
1 parent e8b7c6a commit fd7cb24
Showing 1 changed file with 129 additions and 89 deletions.
218 changes: 129 additions & 89 deletions src/components/poll.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Text } from "@chakra-ui/react";
import { Heading } from "@chakra-ui/react";
import { Button } from "@chakra-ui/react";
import { Stack, Flex, Center, } from "@chakra-ui/react"
import { deleteDoc } from '../lib/db';
import { db, deleteDoc } from '../lib/db';
import { useToast } from "@chakra-ui/react";

import Pollpopup from './pollPopup';
Expand Down Expand Up @@ -38,7 +38,12 @@ import {
TwitterShareButton,
WhatsappIcon,
WhatsappShareButton,
} from "react-share";
} from "react-share";
import { faThumbsUp } from '@fortawesome/free-regular-svg-icons';
import { useEffect } from 'react';
import { useState } from 'react';
import { AiFillLike, AiOutlineLike } from 'react-icons/ai';


export default function Poll(props) {
const { user, loadingUser } = useAuth();
Expand All @@ -48,12 +53,26 @@ export default function Poll(props) {
const [hasVoted, setVoted] = React.useState('');
const [copyIcon, setCopyIcon] = React.useState(faCopy);
const [OpenShare, setOpenShare] = React.useState(false);
const [likesArr, setLikesArr] = useState([])

const toast = useToast();

function upVote(){
if (hasVoted==='down'){
setVotes(votes+2);
useEffect(() => {
const checkLikes = () => {
if (props.data.likesArr) {
setLikesArr(props.data.likesArr)
} else {
setLikesArr([])
}
}

checkLikes();
}, [])


function upVote() {
if (hasVoted === 'down') {
setVotes(votes + 2);
setVoted('up');
}
else if (hasVoted === '') {
Expand Down Expand Up @@ -111,100 +130,121 @@ export default function Poll(props) {
await navigator.clipboard.writeText(loc.host + "/poll" + "/" + docId);
}

const likesHandler = async () => {
if (!likesArr.includes(user.email)) {
setLikesArr([...likesArr, user.email]);
// const documentRef = doc(db, "polls", props.data.id);
const documentRef = db.collection("polls").doc(props.data.id);
const response = await documentRef.update({
likesArr: [...likesArr, user.email]
});
}
}


return (
<>
<Box px={8} py={{ base: 12, lg: 8 }} borderWidth="1px" borderRadius="lg" overflow="hidden">
<Stack direction="column" spacing={4}>
<Flex>
{props.pollvoting &&
<Stack direction="column" pr={6}>
<ChevronUpIcon onClick={upVote} color={hasVoted === "up" && "green"} />
<Text ml=".2vw">{votes}{/*props.upvotes*/}</Text>
<ChevronDownIcon onClick={downVote} color={hasVoted === "down" && "red"} />
</Stack>
}
<Center flex={1} justifyContent={"space-between"}>
<Box align="left">
<Heading as="h6" size="md">{props.name}</Heading>
<Text>{props.description}</Text>
</Box>
<Button cursor={"pointer"} colorScheme="whatsapp" rounded={"full"} onClick={() => setOpenShare(true) || console.log("props::", props.data.id)} title='Copy Link'>
<FontAwesomeIcon icon={copyIcon} />
</Button>
</Center>
</Flex>
{(props.flag === "discover") ? <Button colorScheme="green" onClick={() => setShowModal(true)} isFullWidth={true}>Open Poll</Button> :
<><Button colorScheme="green" onClick={() => setShowModal(true)} isFullWidth={true}>Open Poll</Button>
{user?.uid === props.polls[0].author.id && <Button colorScheme="red" onClick={() => deleteHandler(props.id)} isFullWidth={true}>Delete Poll</Button>
}
</>}
</Stack>

{showModal && <Pollpopup set={setShowModal} data={props.data} />}
</Box>
<Modal isOpen={OpenShare} onClose={() => setOpenShare(false)}>
<Box px={8} py={{ base: 12, lg: 8 }} borderWidth="1px" borderRadius="lg" overflow="hidden">
<Stack direction="column" spacing={4}>
<Flex>
{props.pollvoting &&
<Stack direction="column" pr={6}>
<ChevronUpIcon onClick={upVote} color={hasVoted === "up" && "green"} />
<Text ml=".2vw">{votes}{/*props.upvotes*/}</Text>
<ChevronDownIcon onClick={downVote} color={hasVoted === "down" && "red"} />
</Stack>
}
<Center flex={1} justifyContent={"space-between"}>
<div>
<Box align="left">
<Heading as="h6" size="md">{props.name}</Heading>
<Text>{props.description}</Text>
</Box>
</div>
<Flex flexDirection="column">
<Button cursor={"pointer"} colorScheme="whatsapp" rounded={"full"} onClick={likesHandler} title='Like' m={1}>
{likesArr.includes(user.email) ? <AiFillLike /> : <AiOutlineLike />}

{likesArr.length}
</Button>
<Button cursor={"pointer"} colorScheme="whatsapp" rounded={"full"} onClick={() => setOpenShare(true) || console.log("props::", props.data.id)} title='Copy Link' m={1}>
<FontAwesomeIcon icon={copyIcon} />
</Button>
</Flex>
</Center>
</Flex>
{(props.flag === "discover") ? <Button colorScheme="green" onClick={() => setShowModal(true)} isFullWidth={true}>Open Poll</Button> :
<><Button colorScheme="green" onClick={() => setShowModal(true)} isFullWidth={true}>Open Poll</Button>
{user?.uid === props.polls[0].author.id && <Button colorScheme="red" onClick={() => deleteHandler(props.id)} isFullWidth={true}>Delete Poll</Button>
}
</>}
</Stack>

{showModal && <Pollpopup set={setShowModal} data={props.data} />}
</Box>
<Modal isOpen={OpenShare} onClose={() => setOpenShare(false)}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Share To</ModalHeader>
<ModalCloseButton />
<ModalBody>
<HStack spacing={"16px"}>
<FacebookShareButton
url={`${shareURL}`}
quote={'Visit PollItUp'}
hashtag="#pollItUp #Polls #checkitout"
>
<FacebookIcon size={45} round={true} />
</FacebookShareButton>
<WhatsappShareButton
title="pollItUp"
url={`${shareURL}`}
>
<WhatsappIcon size={45} round={true} />
</WhatsappShareButton>
<TwitterShareButton
url={`${shareURL}`}
>
<TwitterIcon size={45} round={true} />
</TwitterShareButton>

<LinkedinShareButton
title="poll It Up"
url={`${shareURL}`}
>
<LinkedinIcon size={45} round={true} />
</LinkedinShareButton>

<TelegramShareButton
url={`${shareURL}`}
>
<TelegramIcon size={45} round={true} />
</TelegramShareButton>

<PinterestShareButton
description={`Checkout my profile in pollItUp`}
media={`${shareURL}`}
>
<PinterestIcon size={45} round={true} />
</PinterestShareButton>

<RedditShareButton
title="poll It Up"
hashtag="#pollItUp #Polls #checkitout"
url={`${shareURL}`}
>
<RedditIcon size={45} round={true} />
</RedditShareButton>

</HStack>
<HStack spacing={"16px"}>
<FacebookShareButton
url={`${shareURL}`}
quote={'Visit PollItUp'}
hashtag="#pollItUp #Polls #checkitout"
>
<FacebookIcon size={45} round={true} />
</FacebookShareButton>
<WhatsappShareButton
title="pollItUp"
url={`${shareURL}`}
>
<WhatsappIcon size={45} round={true} />
</WhatsappShareButton>
<TwitterShareButton
url={`${shareURL}`}
>
<TwitterIcon size={45} round={true} />
</TwitterShareButton>

<LinkedinShareButton
title="poll It Up"
url={`${shareURL}`}
>
<LinkedinIcon size={45} round={true} />
</LinkedinShareButton>

<TelegramShareButton
url={`${shareURL}`}
>
<TelegramIcon size={45} round={true} />
</TelegramShareButton>

<PinterestShareButton
description={`Checkout my profile in pollItUp`}
media={`${shareURL}`}
>
<PinterestIcon size={45} round={true} />
</PinterestShareButton>

<RedditShareButton
title="poll It Up"
hashtag="#pollItUp #Polls #checkitout"
url={`${shareURL}`}
>
<RedditIcon size={45} round={true} />
</RedditShareButton>

</HStack>
</ModalBody>

<ModalFooter>
<Container mt={2} mb={5} centerContent >
<Button colorScheme="blue" mr={3} onClick={() => shareHandler(props.data.id)}>
copy text to clipboard
</Button>
</Container>
<Container mt={2} mb={5} centerContent >
<Button colorScheme="blue" mr={3} onClick={() => shareHandler(props.data.id)}>
copy text to clipboard
</Button>
</Container>
</ModalFooter>
</ModalContent>
</Modal>
Expand Down

0 comments on commit fd7cb24

Please sign in to comment.