Adds poll view to the sidepane

adityathakurxd · Mar 7, 2024 · 775b62a · 775b62a
1 parent 96d76e6
commit 775b62a
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 10 deletions.
diff --git a/app/components/Conference.tsx b/app/components/Conference.tsx
@@ -31,8 +31,8 @@ function Conference() {
 			<div className="conference-section">
 				<div className="peers-container">
 					<div className="peer-count-container">
-						<PeopleIcon />
-						<p className='peer-count-text'> {peerCount}</p>
+						<PeopleIcon className="peer-count-icon" />
+						<p className="peer-count-text"> {peerCount}</p>
 					</div>
 					{peers?.[peerIndex]?.videoTrack ? <Peer peer={peers[peerIndex]} /> : null}
 					{peers?.[peerIndex + 1]?.videoTrack ? <Peer peer={peers[peerIndex + 1]} /> : null}

diff --git a/app/components/PollVotes.tsx b/app/components/PollVotes.tsx
@@ -1,6 +1,7 @@
 import { HMSPoll, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk'
 import { useEffect, useState } from 'react'
 import { ProgressBar } from './ProgressBar'
+import { toast } from 'react-toastify'
 
 export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
 	const hmsActions = useHMSActions()
@@ -9,7 +10,15 @@ export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
 	const [voteCount, setVoteCount] = useState<number[]>([])
 	const totalCount = voteCount.reduce((sum, value) => (sum += value), 0)
 	const localPeerId = useHMSStore(selectLocalPeerID)
-	const showEndPollButton = localPeerId === poll.startedBy
+	const isPollAuthor = localPeerId === poll.startedBy
+	const hasVoted = question?.responses?.some((response) => response.peer.peerid === localPeerId)
+
+	const [selectedOptionIndex, setSelectedOptionIndex] = useState<number | undefined>()
+	const [loading, setLoading] = useState(false)
+
+	function handleChange(event: any) {
+		setSelectedOptionIndex(event.target.value)
+	}
 
 	useEffect(() => {
 		const newVoteCount = question.options.map(() => 0)
@@ -34,18 +43,38 @@ export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
 			<p style={{ fontWeight: '600', color: 'black' }}>{question?.text}</p>
 			{question?.options?.map((option, index) => (
 				<div key={index} style={{ marginBottom: '10px' }}>
-					<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
+					<div style={{ display: 'flex', gap: '5px', marginBottom: '4px' }}>
+						{!isPollAuthor && (
+							<input
+								style={{ cursor: 'pointer' }}
+								type="radio"
+								value={index}
+								checked={Number(selectedOptionIndex) === index}
+								onChange={handleChange}
+								id={'' + index}
+							/>
+						)}
 						<p style={{ color: 'black', fontWeight: '400', fontSize: '14px', margin: 0 }}>
 							{option.text}
 						</p>
-						<p style={{ color: 'black', fontWeight: '400', fontSize: '14px', margin: 0 }}>
-							{voteCount[index]} vote{voteCount[index] === 1 ? '' : 's'}
-						</p>
+						{(isPollAuthor || hasVoted) && (
+							<p
+								style={{
+									color: 'black',
+									fontWeight: '400',
+									fontSize: '14px',
+									margin: 0,
+									marginLeft: 'auto',
+								}}
+							>
+								{voteCount[index]} vote{voteCount[index] === 1 ? '' : 's'}
+							</p>
+						)}
 					</div>
 					<ProgressBar percentage={totalCount ? voteCount[index] / totalCount : 0} />
 				</div>
 			))}
-			{showEndPollButton ? (
+			{isPollAuthor ? (
 				<button
 					style={{
 						width: '100%',
@@ -59,7 +88,29 @@ export const PollVotes = ({ poll }: { poll: HMSPoll }) => {
 				>
 					End poll
 				</button>
-			) : null}
+			) : (
+				<button
+					style={{
+						width: '100%',
+						textAlign: 'center',
+						// background: 'var(--error_default)',
+						display: 'block',
+						padding: '0.75rem',
+						marginTop: '18px',
+					}}
+					onClick={async () => {
+						await hmsActions.interactivityCenter.addResponsesToPoll(poll.id, [
+							{
+								questionIndex: poll.questions[0].index,
+								option: Number(selectedOptionIndex + 1),
+							},
+						])
+						toast(`Vote submitted!`)
+					}}
+				>
+					Submit
+				</button>
+			)}
 		</div>
 	)
 }
diff --git a/app/components/ProgressBar.tsx b/app/components/ProgressBar.tsx
@@ -9,7 +9,14 @@ export const ProgressBar = ({ percentage = 0 }: { percentage: number }) => {
 				background: 'var(--surface_bright)',
 			}}
 		>
-			<div className="primary" style={{ width: `${percentage * 100}%`, height: '100%' }} />
+			<div
+				style={{
+					width: `${percentage * 100}%`,
+					height: '100%',
+					background: '#2672ed',
+					minWidth: '10px',
+				}}
+			/>
 		</div>
 	)
 }
diff --git a/app/components/styles.css b/app/components/styles.css
@@ -64,6 +64,10 @@
 	border-radius: 6px;
 }
 
+.peer-count-icon {
+	padding-left: 5px;
+}
+
 .peer-count-text {
 	padding: 10px 10px 10px 20px;
 }