Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin
Created September 29, 2021 17:28
Show Gist options
  • Save adrianhajdin/5fea42c89bd78da47eee1d30c740bf5a to your computer and use it in GitHub Desktop.
Save adrianhajdin/5fea42c89bd78da47eee1d30c740bf5a to your computer and use it in GitHub Desktop.
Agora
import React, { useState, useEffect, useContext } from "react";
import Modal from 'react-modal';
import { Line } from 'rc-progress';
import { Text } from 'react-native';
import chatContext, {controlMessageEnum} from './ChatContext';
import { PollContext } from './PollContext';
import styles from './pollStyles';
const Poll = () => {
const { question, setQuestion, answers: voteData, setAnswers, isModalOpen, setIsModalOpen } = useContext(PollContext)
const { sendControlMessage } = useContext(chatContext);
const [totalVotes, setTotalVotes] = useState(0);
const [voted, setVoted] = useState(false);
useEffect(() => {
if(voteData.length > 0){
setTotalVotes(voteData.map(item => item.votes).reduce((prev, next) => prev + next));
}
}, [voteData])
const submitVote = (e, item) => {
if(voted === false) {
const newAnswers = voteData.map((answer) => {
if(answer.option === item.option) {
return { ...answer, votes: answer.votes + 1 }
} else {
return answer;
}
});
setAnswers(newAnswers);
sendControlMessage(controlMessageEnum.initiatePoll, { question, answers: newAnswers })
setTotalVotes(totalVotes + 1);
setVoted((prevVoted) => !prevVoted);
}
};
const closeModal = () => {
setIsModalOpen(false);
setTotalVotes(0);
setVoted(false);
setQuestion('');
setAnswers([
{ option: '', votes: 0 },
{ option: '', votes: 0 },
{ option: '', votes: 0 },
{ option: '', votes: 0 }
]);
}
return (
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}
style={styles.customStyles}
contentLabel="Poll Modal"
>
<div>
<h1>{question}</h1>
<div style={styles.flexColumn}>
{voteData && voteData.map((item, i) => !voted ? (
<button style={styles.button} key={i} onClick={(e) => submitVote(e, item)}>
{item.option}
</button>
) : (
<div style={styles.flexCenter}>
<h2 style={styles.mr20}>{item.option}</h2>
<Line percent={(item.votes / totalVotes) * 100} strokeWidth="5" trailWidth="3" />
<p style={styles.ml20}>{item.votes}</p>
</div>
))}
</div>
<h3>Total Votes: {totalVotes}</h3>
</div>
</Modal>
);
}
export default Poll;
import { createContext } from 'react';
import React, { useState } from 'react';
export const PollContext = createContext();
const PollProvider = (props) => {
const [question, setQuestion] = useState('');
const [isModalOpen, setIsModalOpen] = useState(false);
const [answers, setAnswers] = useState([
{ option: '', votes: 0 },
{ option: '', votes: 0 },
{ option: '', votes: 0 },
{ option: '', votes: 0 }
]);
return (
<PollContext.Provider value={{
answers,
setAnswers,
question,
setQuestion,
isModalOpen,
setIsModalOpen
}}>
{props.children}
</PollContext.Provider>
);
};
export default PollProvider;
export default {
button: {
border: 'none',
cursor: 'pointer',
margin: '10px 0',
outline: 'none',
padding: '15px',
fontWeight: 'bold',
},
customStyles: {
content: {
width: '50%',
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)'
}
},
flexColumn: {
display: 'flex', flexDirection: 'column'
},
flexCenter: {
display: 'flex', alignItems: 'center'
},
mr20: {
marginRight: '20px'
},
ml20: {
marginLeft: '20px'
}
}
@Known-For-Web-Development

Sir can u pls give all the files of video calling app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment