participants list is fixed

components/vote/ParticipantCard.tsx

@@ -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>
   );
 };
 

components/vote/ParticipantsList.tsx

@@ -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) =>
+              ? participantsData.map((participant, index) =>
-                  participant.id !== participantsData[0].id && voteStatus ? (
+                  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}
+                          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={false}
@@ -307,13 +314,14 @@ const ParticipantsList = ({ vote_id }: IParams) => {
                       <ParticipantCard
                         hasUrl={false}
                         key={v4()}
-                        voteStatus={voteStatus}
+                        index={index}
-                        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}