Add leaderboard to tournaments

Author: vtm9

services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js

@@ -2,6 +2,9 @@ import axios from 'axios';
 import Gon from 'gon';
 import { camelizeKeys } from 'humps';
 import compact from 'lodash/compact';
+import groupBy from 'lodash/groupBy';
+
+import { PanelModeCodes } from '@/pages/tournament/ControlPanel';
 
 import TournamentTypes from '../config/tournamentTypes';
 import { actions } from '../slices';
@@ -212,6 +215,32 @@ export const uploadPlayers = playerIds => (dispatch, getState) => {
   }
 };
 
+export const getTask = (taskId, onSuccess) => () => {
+  channel.push('tournament:get_task', { taskId }).receive('ok', payload => {
+    const data = camelizeKeys(payload);
+
+    onSuccess(data);
+  });
+};
+
+export const getResults = (type, params, onSuccess) => () => {
+  channel
+    .push('tournament:get_results', { params: { type, ...params } })
+    .receive('ok', payload => {
+      const data = camelizeKeys(payload);
+      console.log(data);
+
+      if (type === PanelModeCodes.topUserByClansMode) {
+        const result = Object.values(
+          groupBy(data.results, item => item.clanRank),
+        );
+        onSuccess(result);
+      } else {
+        onSuccess(data.results);
+      }
+    });
+};
+
 export const requestMatchesByPlayerId = userId => dispatch => {
   channel
     .push('tournament:matches:request', { playerId: userId })
@@ -227,12 +256,10 @@ export const uploadPlayersMatches = playerId => dispatch => {
 
 export const joinTournament = teamId => {
   const params = teamId !== undefined ? { teamId } : {};
-  channel
-    .push('tournament:join', params);
+  channel.push('tournament:join', params);
 };
 
 export const leaveTournament = teamId => {
   const params = teamId !== undefined ? { teamId } : {};
-  channel
-    .push('tournament:leave', params);
+  channel.push('tournament:leave', params);
 };

services/app/apps/codebattle/assets/js/widgets/middlewares/TournamentAdmin.js

@@ -2,9 +2,6 @@ import axios from 'axios';
 import Gon from 'gon';
 import { camelizeKeys } from 'humps';
 import compact from 'lodash/compact';
-import groupBy from 'lodash/groupBy';
-
-import { PanelModeCodes } from '@/pages/tournament/ControlPanel';
 
 import { actions } from '../slices';
 
@@ -230,56 +227,45 @@ export const uploadPlayersMatches = playerId => (dispatch, getState) => {
 };
 
 export const createCustomRound = params => {
-  channel
-    .push('tournament:start_round', params);
+  channel.push('tournament:start_round', params);
 };
 
 export const startTournament = () => {
-  channel
-    .push('tournament:start', {});
+  channel.push('tournament:start', {});
 };
 
 export const cancelTournament = () => dispatch => {
-  channel
-    .push('tournament:cancel', {})
-    .receive('ok', response => {
-      dispatch(actions.updateTournamentData(response.tournament));
-    });
+  channel.push('tournament:cancel', {}).receive('ok', response => {
+    dispatch(actions.updateTournamentData(response.tournament));
+  });
 };
 
 export const restartTournament = () => {
-  channel
-    .push('tournament:restart', {});
+  channel.push('tournament:restart', {});
 };
 
 export const startRoundTournament = () => {
-  channel
-    .push('tournament:start_round', {});
+  channel.push('tournament:start_round', {});
 };
 
 export const finishRoundTournament = () => {
-  channel
-    .push('tournament:finish_round', {});
+  channel.push('tournament:finish_round', {});
 };
 
 export const toggleVisibleGameResult = gameId => {
-  channel
-    .push('tournament:toggle_match_visible', { gameId });
+  channel.push('tournament:toggle_match_visible', { gameId });
 };
 
 export const openUpTournament = () => {
-  channel
-    .push('tournament:open_up', {});
+  channel.push('tournament:open_up', {});
 };
 
 export const showTournamentResults = () => {
-  channel
-    .push('tournament:toggle_show_results', {});
+  channel.push('tournament:toggle_show_results', {});
 };
 
 export const sendMatchGameOver = matchId => {
-  channel
-    .push('tournament:match:game_over', { matchId });
+  channel.push('tournament:match:game_over', { matchId });
 };
 
 export const toggleBanUser = (userId, isBanned) => dispatch => {
@@ -300,31 +286,6 @@ export const sendNewReportState = (reportId, state) => dispatch => {
     .receive('error', error => console.error(error));
 };
 
-export const getResults = (type, params, onSuccess) => () => {
-  channel
-    .push('tournament:get_results', { params: { type, ...params } })
-    .receive('ok', payload => {
-      const data = camelizeKeys(payload);
-
-      if (type === PanelModeCodes.topUserByClansMode) {
-        const result = Object.values(
-          groupBy(data.results, item => item.clanRank),
-        );
-        onSuccess(result);
-      } else {
-        onSuccess(data.results);
-      }
-    });
-};
-
-export const getTask = (taskId, onSuccess) => () => {
-  channel.push('tournament:get_task', { taskId }).receive('ok', payload => {
-    const data = camelizeKeys(payload);
-
-    onSuccess(data);
-  });
-};
-
 export const pushActiveMatchToStream = gameId => dispatch => {
   // Update the Redux state immediately for instant UI feedback
   dispatch(actions.setAdminActiveGameId(gameId));

services/app/apps/codebattle/assets/js/widgets/pages/tournament/ClansChartPanel.jsx

@@ -1,8 +1,5 @@
 import React, {
-  memo,
-  useState,
-  useCallback,
-  useRef,
+ memo, useState, useCallback, useRef,
 } from 'react';
 
 import {
@@ -15,7 +12,7 @@ import {
 import { Bubble } from 'react-chartjs-2';
 import { useDispatch } from 'react-redux';
 
-import { getResults } from '../../middlewares/TournamentAdmin';
+import { getResults } from '../../middlewares/Tournament';
 
 import useTournamentPanel from './useTournamentPanel';
 
@@ -73,7 +70,10 @@ function ClansChartPanel({ type, state }) {
   };
 
   return (
-    <div ref={chartRef} className="my-2 px-1 mt-lg-0 rounded-lg position-relative cb-overflow-x-auto cb-overflow-y-auto">
+    <div
+      ref={chartRef}
+      className="my-2 px-1 mt-lg-0 rounded-lg position-relative cb-overflow-x-auto cb-overflow-y-auto"
+    >
       <Bubble data={config.data} options={config.options} />
     </div>
   );