participants list is fixed
This commit is contained in:
Kakabay
parent
6983d0df96
commit
c127bbaab1
|
|
@ -3,6 +3,7 @@
|
|||
import Image from 'next/image';
|
||||
import placeholder from '@/public/person placeholder.svg';
|
||||
import clsx from 'clsx';
|
||||
import { motion, usePresence, Variant, Transition } from 'framer-motion';
|
||||
|
||||
interface IProps {
|
||||
number: number;
|
||||
|
|
@ -16,6 +17,7 @@ interface IProps {
|
|||
voteStatus: string;
|
||||
winner: boolean;
|
||||
hasUrl: boolean;
|
||||
index: number;
|
||||
}
|
||||
|
||||
const ParticipantCard = ({
|
||||
|
|
@ -25,6 +27,7 @@ const ParticipantCard = ({
|
|||
votes,
|
||||
progress,
|
||||
voteCode,
|
||||
index,
|
||||
hasUrl,
|
||||
isFirst,
|
||||
voteStatus,
|
||||
|
|
@ -32,9 +35,37 @@ const ParticipantCard = ({
|
|||
}: IProps) => {
|
||||
const substractedProgress = progress > 99 ? progress - 2 : progress;
|
||||
|
||||
const transition: Transition = {
|
||||
type: 'spring',
|
||||
stiffness: 500,
|
||||
damping: 50,
|
||||
mass: 1,
|
||||
delay: index * 0.1,
|
||||
};
|
||||
|
||||
const [isPresent, safeToRemove] = usePresence();
|
||||
|
||||
const animations = {
|
||||
layout: true,
|
||||
initial: 'out',
|
||||
style: {
|
||||
position: (isPresent ? 'static' : 'absolute') as 'static' | 'absolute', // Corrected cast
|
||||
},
|
||||
animate: isPresent ? 'in' : 'out',
|
||||
variants: {
|
||||
in: { scaleY: 1, opacity: 1 },
|
||||
out: { scaleY: 0, opacity: 0, zIndex: -1 },
|
||||
tapped: { scale: 0.98, opacity: 0.5, transition: { duration: 0.1 } },
|
||||
},
|
||||
onAnimationComplete: () => !isPresent && safeToRemove(),
|
||||
transition,
|
||||
};
|
||||
|
||||
return winner && votes !== 0 ? (
|
||||
////////////////////////////////////////////// Winner card
|
||||
<div className="flex flex-col overflow-hidden bg-fillNavyBlue max-w-[940px] w-full group">
|
||||
<motion.div
|
||||
// {...animations}
|
||||
className="flex flex-col overflow-hidden bg-fillNavyBlue max-w-[940px] w-full group">
|
||||
<div className="flex items-center gap-[5px] sm:gap-[20px] p-[5px] pt-[10px] w-full">
|
||||
<h3 className="text-[26px] sm:text-[80px] leading-[100%] font-bold text-fillNavyBlue text-stroke">
|
||||
{number}
|
||||
|
|
@ -104,15 +135,6 @@ const ParticipantCard = ({
|
|||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
{/* <div className="ProgressBar w-full bg-[#3636A3] rounded-[8px]">
|
||||
<div
|
||||
style={{
|
||||
width: `${substractedProgress.toString()}%`,
|
||||
}}
|
||||
className={`rounded-[8px] bg-[#6868B8] w-[${substractedProgress.toString()}%] h-[7px] sm:h-[28px]`}></div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,10 +149,13 @@ const ParticipantCard = ({
|
|||
ugrat
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
////////////////////////////////////////////// Simple card
|
||||
<div className="flex flex-col max-w-[940px] items-center w-full gap-[5px] sm:gap-[20px] group">
|
||||
<motion.div
|
||||
className="flex flex-col max-w-[940px] items-center w-full gap-[5px] sm:gap-[20px] group"
|
||||
// {...animations}
|
||||
>
|
||||
<div className="flex items-center gap-[5px] sm:gap-[20px] max-w-[900px] w-full px-[5px] sm:p-0">
|
||||
<h3 className="w-[24px] text-[16px] sm:text-[20px] leading-[100%] font-bold">{number}</h3>
|
||||
{photo && name ? (
|
||||
|
|
@ -207,7 +232,7 @@ const ParticipantCard = ({
|
|||
</p>
|
||||
) : null}
|
||||
<div className="w-full h-[1px] bg-[#EDEDFA]"></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import Image from 'next/image';
|
|||
import { useMediaQuery } from 'usehooks-ts';
|
||||
import Countdown from './Countdown';
|
||||
import Link from 'next/link';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
interface IParams {
|
||||
vote_id?: string;
|
||||
|
|
@ -31,8 +32,6 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
const [voteStatus, setVoteStatus] = useState<string>();
|
||||
const [winnersCount, setWinnersCount] = useState<number>(0);
|
||||
|
||||
console.log(participantsData);
|
||||
|
||||
// States realted to web socket
|
||||
const [smsNumber, setSmsNumber] = useState<string | null>(null);
|
||||
const [socket, setSocket] = useState<WebSocket | null>(null);
|
||||
|
|
@ -79,11 +78,13 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
socket.onopen = () => {
|
||||
console.log('WebSocket is connected');
|
||||
setIsConnected(true);
|
||||
// addVotes();
|
||||
|
||||
pingInterval = setInterval(() => {
|
||||
if (socket?.readyState === WebSocket.OPEN) {
|
||||
try {
|
||||
socket.send(JSON.stringify({ type: 'ping' }));
|
||||
// addVotes();
|
||||
} catch (error) {
|
||||
console.error('Error sending ping:', error);
|
||||
}
|
||||
|
|
@ -162,9 +163,11 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
|
||||
// Update the corresponding voting item
|
||||
const updatedItems = prevVotingItems.map((item, index) =>
|
||||
index === 5 ? { ...item, votes_count: item.votes_count + 10000 } : item,
|
||||
index === 1 ? { ...item, votes_count: item.votes_count + 1 } : item,
|
||||
);
|
||||
|
||||
console.log('votes updated');
|
||||
console.log(updatedItems.sort((a, b) => b.votes_count - a.votes_count));
|
||||
// Sort the updated items array by votes_count in descending order
|
||||
return updatedItems.sort((a, b) => b.votes_count - a.votes_count);
|
||||
});
|
||||
|
|
@ -234,7 +237,7 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
|
||||
{participantsData && participantsData[0].votes_count > 0 ? (
|
||||
<div className="flex flex-col items-center overflow-hidden bg-fillNavyBlue rounded-[10px] sm:rounded-[30px] max-w-[940px] w-full px-[5px] py-[20px] sm:p-[20px] sm:gap-[20px] gap-[10px]">
|
||||
{participantsData.map((participant, id) =>
|
||||
{participantsData.map((participant, index) =>
|
||||
participant.votes_count === participantsData[0].votes_count ? (
|
||||
participant.url ? (
|
||||
<Link
|
||||
|
|
@ -243,14 +246,15 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
className="w-full">
|
||||
<ParticipantCard
|
||||
key={v4()}
|
||||
index={index}
|
||||
hasUrl={true}
|
||||
voteStatus={voteStatus ? voteStatus : ''}
|
||||
isFirst={id === 0 ? true : false}
|
||||
isFirst={index === 0 ? true : false}
|
||||
name={participant.title}
|
||||
progress={participant.votes_percents}
|
||||
votes={participant.votes_count}
|
||||
voteCode={participant.vote_code}
|
||||
number={id + 1}
|
||||
number={index + 1}
|
||||
photo={participant.photo}
|
||||
smsNumber={data.data.sms_number}
|
||||
winner={true}
|
||||
|
|
@ -259,14 +263,15 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
) : (
|
||||
<ParticipantCard
|
||||
key={v4()}
|
||||
index={index}
|
||||
hasUrl={false}
|
||||
voteStatus={voteStatus ? voteStatus : ''}
|
||||
isFirst={id === 0 ? true : false}
|
||||
isFirst={index === 0 ? true : false}
|
||||
name={participant.title}
|
||||
progress={participant.votes_percents}
|
||||
votes={participant.votes_count}
|
||||
voteCode={participant.vote_code}
|
||||
number={id + 1}
|
||||
number={index + 1}
|
||||
photo={participant.photo}
|
||||
smsNumber={data.data.sms_number}
|
||||
winner={true}
|
||||
|
|
@ -279,25 +284,27 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
|
||||
{winnersCount > 1 ? <div className="w-full h-[1px] bg-[#3636A3]"></div> : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center max-w-[940px] w-full gap-5 justify-center mx-auto">
|
||||
{participantsData
|
||||
? participantsData.map((participant, id) =>
|
||||
participant.id !== participantsData[0].id && voteStatus ? (
|
||||
? participantsData.map((participant, index) =>
|
||||
participant.votes_count !== participantsData[0].votes_count ? (
|
||||
participant.url ? (
|
||||
<Link
|
||||
href={participant.url ? participant.url : ''}
|
||||
target="_blank"
|
||||
className="w-full mx-auto">
|
||||
<ParticipantCard
|
||||
index={index}
|
||||
hasUrl={true}
|
||||
key={v4()}
|
||||
voteStatus={voteStatus}
|
||||
isFirst={id === 0 ? true : false}
|
||||
voteStatus={voteStatus ? voteStatus : ''}
|
||||
isFirst={index === 0 ? true : false}
|
||||
name={participant.title}
|
||||
progress={participant.votes_percents}
|
||||
votes={participant.votes_count}
|
||||
voteCode={participant.vote_code}
|
||||
number={id + 1}
|
||||
number={index + 1}
|
||||
photo={participant.photo}
|
||||
smsNumber={data.data.sms_number}
|
||||
winner={false}
|
||||
|
|
@ -307,13 +314,14 @@ const ParticipantsList = ({ vote_id }: IParams) => {
|
|||
<ParticipantCard
|
||||
hasUrl={false}
|
||||
key={v4()}
|
||||
voteStatus={voteStatus}
|
||||
isFirst={id === 0 ? true : false}
|
||||
index={index}
|
||||
voteStatus={voteStatus ? voteStatus : ''}
|
||||
isFirst={index === 0 ? true : false}
|
||||
name={participant.title}
|
||||
progress={participant.votes_percents}
|
||||
votes={participant.votes_count}
|
||||
voteCode={participant.vote_code}
|
||||
number={id + 1}
|
||||
number={index + 1}
|
||||
photo={participant.photo}
|
||||
smsNumber={data.data.sms_number}
|
||||
winner={false}
|
||||
|
|
|
|||
Loading…
Reference in New Issue