@100mslive/roomkit-react 0.1.19-alpha.1 → 0.1.19-alpha.2

package/src/Prebuilt/components/Polls/Voting/Leaderboard.tsx

@@ -1,123 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { HMSPollLeaderboardResponse, selectPollByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../../Layout';
-import { Loading } from '../../../../Loading';
-import { Text } from '../../../../Text';
-import { LeaderboardEntry } from './LeaderboardEntry';
-// @ts-ignore
-import { useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore
-import { usePollViewState } from '../../AppData/useUISettings';
-// @ts-ignore
-import { StatusIndicator } from '../common/StatusIndicator';
-import { POLL_VIEWS } from '../../../common/constants';
-
-export const Leaderboard = ({ pollID }: { pollID: string }) => {
-  const hmsActions = useHMSActions();
-  const poll = useHMSStore(selectPollByID(pollID));
-  const [pollLeaderboard, setPollLeaderboard] = useState<HMSPollLeaderboardResponse | undefined>();
-  const { setPollView } = usePollViewState();
-  const toggleSidepane = useSidepaneToggle();
-
-  /*
-  const sharedLeaderboardRef = useRef(false);
-  const sharedLeaderboards = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SHARED_LEADERBOARDS));
-  const { sendEvent } = useCustomEvent({
-    type: HMSNotificationTypes.POLL_LEADERBOARD_SHARED,
-    onEvent: () => {
-      return;
-    },
-  });
-   */
-
-  useEffect(() => {
-    const fetchLeaderboardData = async () => {
-      if (poll) {
-        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(poll, 0, 50);
-        setPollLeaderboard(leaderboardData);
-      }
-    };
-    fetchLeaderboardData();
-  }, [poll, hmsActions.interactivityCenter]);
-
-  if (!poll || !pollLeaderboard)
-    return (
-      <Flex align="center" justify="center" css={{ size: '100%' }}>
-        <Loading />
-      </Flex>
-    );
-  const maxPossibleScore = poll.questions?.reduce((total, question) => (total += question.weight || 0), 0) || 0;
-  const questionCount = poll.questions?.length || 0;
-
-  return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
-        <Flex align="center" css={{ gap: '$4' }}>
-          <Flex
-            css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-            onClick={() => setPollView(POLL_VIEWS.VOTE)}
-          >
-            <ChevronLeftIcon />
-          </Flex>
-          <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
-            {poll.title}
-          </Text>
-          <StatusIndicator isLive={false} />
-        </Flex>
-        <Flex
-          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-          onClick={toggleSidepane}
-        >
-          <CrossIcon />
-        </Flex>
-      </Flex>
-      <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-        Leaderboard
-      </Text>
-      <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-        Based on score and time taken to cast the correct answer
-      </Text>
-      <Box
-        css={{
-          mt: '$8',
-          overflowY: 'auto',
-          flex: '1 1 0',
-          mr: '-$6',
-          pr: '$6',
-        }}
-      >
-        {pollLeaderboard?.entries &&
-          pollLeaderboard.entries.map(question => (
-            <LeaderboardEntry
-              key={question.position}
-              position={question.position}
-              score={question.score}
-              questionCount={questionCount}
-              correctResponses={question.correctResponses}
-              userName={question.peer.username || ''}
-              maxPossibleScore={maxPossibleScore}
-            />
-          ))}
-      </Box>
-
-      {/* {!sharedLeaderboardRef.current ? (
-        <Button
-          css={{ ml: 'auto', mt: '$8' }}
-          onClick={() => {
-            const currentlySharedLeaderboards = sharedLeaderboards || [];
-            hmsActions.sessionStore.set(SESSION_STORE_KEY.SHARED_LEADERBOARDS, [
-              ...currentlySharedLeaderboards,
-              pollID,
-            ]);
-            const pollDetails = { initiatorName: '', startedBy: poll.startedBy, id: pollID };
-            sendEvent();
-            sharedLeaderboardRef.current = true;
-          }}
-        >
-          Share Results
-        </Button>
-      ) : null} */}
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Polls/Voting/PollResultSummary.jsx

@@ -1,125 +0,0 @@
-// @ts-check
-import React, { useMemo } from 'react';
-import { selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
-import { Box, Text } from '../../../../';
-import { checkCorrectAnswer } from '../../../common/utils';
-
-/**
- * @param {{ isQuiz: boolean;
- * isAdmin: boolean;
- * pollResult: import("@100mslive/react-sdk").HMSPoll['result'];
- *  questions: import("@100mslive/react-sdk").HMSPoll['questions'] }} param0
- */
-export const PollResultSummary = ({ isQuiz, isAdmin, pollResult, questions }) => {
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const noAnswers = pollResult?.maxUsers || 0 - (pollResult?.totalUsers || 0);
-  const participationPercentage =
-    pollResult?.maxUsers && pollResult?.maxUsers > 0 ? ((pollResult?.totalUsers || 0) * 100) / pollResult.maxUsers : 0;
-
-  const totalCorrectAnswers = useMemo(() => {
-    let correctAnswers = 0;
-    questions?.forEach(question => {
-      correctAnswers += question.result?.correctResponses || 0;
-    });
-    return correctAnswers;
-  }, [questions]);
-
-  const totalIncorrectAnswers = useMemo(() => {
-    let incorrectAnswers = 0;
-    questions?.forEach(question => {
-      incorrectAnswers +=
-        (question.result?.totalResponses || 0) -
-        (question.result?.correctResponses || 0) -
-        (question.result?.skippedCount || 0);
-    });
-    return incorrectAnswers;
-  }, [questions]);
-
-  const localCorrectAnswers = useMemo(() => {
-    let correctAnswers = 0;
-    questions?.forEach(question => {
-      const localResponse = question.responses?.find(response => response.peer?.peerid === localPeerID);
-      if (checkCorrectAnswer(question.answer, localResponse, question.type)) {
-        correctAnswers++;
-      }
-    });
-    return correctAnswers;
-  }, [localPeerID, questions]);
-
-  const localIncorrectAnswers = useMemo(() => {
-    let incorrectAnswers = 0;
-    questions?.forEach(question => {
-      const localResponse = question.responses?.find(response => response.peer?.peerid === localPeerID);
-      if (!checkCorrectAnswer(question.answer, localResponse, question.type) && localResponse) {
-        incorrectAnswers++;
-      }
-    });
-    return incorrectAnswers;
-  }, [localPeerID, questions]);
-
-  if (!pollResult) {
-    return null;
-  }
-
-  let StatsComponents;
-
-  if (isQuiz && isAdmin) {
-    StatsComponents = (
-      <>
-        <PollStat label="No. of correct answers" value={totalCorrectAnswers} />
-        <PollStat label="No. of wrong answerss" value={totalIncorrectAnswers} />
-        <PollStat label="Peers who didn't answer" value={noAnswers} />
-        <PollStat label="Participation Percentage" value={participationPercentage.toFixed(2) + '%'} />
-      </>
-    );
-  } else if (isQuiz && !isAdmin) {
-    StatsComponents = (
-      <>
-        <PollStat label="No. of correct answers" value={localCorrectAnswers} />
-        <PollStat label="No. of wrong answers" value={localIncorrectAnswers} />
-      </>
-    );
-  } else if (!isQuiz && isAdmin) {
-    StatsComponents = (
-      <>
-        <PollStat label="Peers who didn't answer" value={noAnswers} />
-        <PollStat label="Participation Percentage" value={participationPercentage.toFixed(2) + '%'} />
-      </>
-    );
-  } else {
-    return null;
-  }
-
-  return (
-    <Box
-      css={{
-        display: 'grid',
-        'grid-template-columns': 'repeat(2, 2fr)',
-        gap: '$4',
-        mt: '$3',
-      }}
-    >
-      {StatsComponents}
-    </Box>
-  );
-};
-
-const PollStat = ({ label, value }) => {
-  return (
-    <Box css={{ bg: '$surface_bright', p: '$8', r: '$1' }}>
-      <Text
-        variant="overline"
-        css={{
-          fontWeight: '$semiBold',
-          color: '$on_surface_medium',
-          textTransform: 'uppercase',
-        }}
-      >
-        {label}
-      </Text>
-      <Text variant="sub1" css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
-        {value}
-      </Text>
-    </Box>
-  );
-};