peer-at-code-web/ui/Leaderboard.tsx

'use client';

import { AnimatePresence, motion } from 'framer-motion';

import { useLeaderboardEvent } from '@/lib/hooks/use-leaderboard';
import { cn } from '@/lib/utils';
import Podium from '@/ui/events/podium/Podium';
import { Timer } from './Timer';
import { type ScoreEvent } from '@/lib/leaderboard';
import useSWRSubscription, { type SWRSubscription } from 'swr/subscription';

const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];

export default function Leaderboard({ token }: { token: string }) {
  // TODO CHANGER CECI
  const CHAPITRE_EVENT = 1;

  // const subscription: SWRSubscription<string, ScoreEvent, Error> = (key, { next }) => {
  //   const socket = new WebSocket(key);

  //   socket.addEventListener('message', (event) => {
  //     next(null, JSON.parse(event.data));
  //   });

  //   socket.addEventListener('error', (event) => {
  //     console.error(event);
  //   });

  //   return () => socket.close();
  // };

  // const { data } = useSWRSubscription(
  //   `wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard/${CHAPITRE_EVENT}`,
  //   subscription
  // );

  const { data, isLoading } = useLeaderboardEvent({ token: token, id: CHAPITRE_EVENT });

  const scores = [data?.groups]
    .flat()
    .sort((a, b) => a!.rank - b!.rank)
    .map((group, place) => ({
      ...group,
      place
    }));

  return (
    <section className="flex h-full w-full flex-col space-y-4">
      <header className="sticky flex items-center justify-between">
        <div className="flex flex-col">
          <h1 className="text-xl font-semibold">Tableau des scores</h1>
          <p className="text-muted">Suivez la progression des élèves en direct</p>
        </div>
      </header>
      <main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
        {data && <Podium score={scores} />}
        {data && data.end_date && (
          <Timer className="flex justify-end" targetDate={new Date(data.end_date)} />
        )}
        <AnimatePresence>
          <motion.ul className="flex flex-col space-y-2">
            {data?.groups.map((group, key) => {
              const tries = group.players.reduce((a, b) => a + b.tries, 0) || 0;
              return (
                <motion.li
                  initial={{ opacity: 0, y: -10 }}
                  // @ts-ignore TODO Je sais pas c'est quoi cette merde
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  transition={{ duration: 0.5 }}
                  key={key}
                  className="flex justify-between space-x-2"
                >
                  <div className="flex items-center space-x-4">
                    <span
                      className={cn(
                        'font-semibold text-highlight-secondary',
                        SCORE_COLORS[group.rank - 1]
                      )}
                    >
                      {group.rank}
                    </span>
                    <div className="flex items-center space-x-2">
                      <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
                        <span className="text-lg">{group.name}</span>
                        <span className="text-sm text-highlight-secondary">
                          {group.players && group.players.length > 1
                            ? group.players
                                .map((player) => player.pseudo || 'Anonyme')
                                .sort((a, b) => a.localeCompare(b))
                                .join(', ')
                            : group.players[0].pseudo}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    {/* <div className="flex flex-col">
                      <span className="text-sm font-semibold">Puzzle{puzzles > 1 ? 's' : ''}</span>
                      <span className="text-lg text-highlight-secondary">{puzzles}</span>
                    </div> */}
                    <div className="flex flex-col">
                      <span className="text-sm font-semibold">Essai{tries > 1 ? 's' : ''}</span>
                      <span className="text-lg text-highlight-secondary">{tries}</span>
                    </div>
                    <div className="flex flex-col">
                      <span className="text-sm font-semibold">Score</span>
                      <span className="text-lg text-highlight-secondary">
                        {group.players.reduce((a, b) => a + b.score, 0)}
                      </span>
                    </div>
                  </div>
                </motion.li>
              );
            }) ||
              [...Array(20).keys()].map((i) => (
                <span
                  key={i}
                  className="inline-block h-12 animate-pulse rounded-lg bg-primary-600"
                  style={{
                    animationDelay: `${i * 0.05}s`,
                    animationDuration: '1s'
                  }}
                />
              ))}
          </motion.ul>
        </AnimatePresence>
      </main>
    </section>
  );
}