wip

Author: vtm9

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

@@ -1,18 +1,15 @@
-import React, {
-  memo, useCallback, useContext,
-} from 'react';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
-import i18next from 'i18next';
-import { useSelector } from 'react-redux';
-import AsyncSelect from 'react-select/async';
-
-import CustomEventStylesContext from '../../components/CustomEventStylesContext';
-import UserLabel from '../../components/UserLabel';
-import {
-  tournamentPlayersSelector,
-} from '../../selectors';
+import React, { memo, useCallback, useContext } from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import cn from "classnames";
+import i18next from "i18next";
+import { useSelector } from "react-redux";
+import AsyncSelect from "react-select/async";
+
+import CustomEventStylesContext from "../../components/CustomEventStylesContext";
+import UserLabel from "../../components/UserLabel";
+import { tournamentPlayersSelector } from "../../selectors";
+import Leaderboard from "../lobby/Leaderboard";
 
 // %{"type" => "top_users_by_clan_ranking"} ->
 // %{"type" => "tasks_ranking"} ->
@@ -21,88 +18,97 @@ import {
 // %{"type" => "top_user_by_task_ranking", "task_id" => task_id} ->
 //
 export const PanelModeCodes = {
-  ratingMode: 'ratingMode',
-  reportsMode: 'reportsMode',
-  playerMode: 'playerMode',
-  topUserByClansMode: 'top_users_by_clan_ranking',
-  taskRatingMode: 'tasks_ranking',
-  clansBubbleDistributionMode: 'clans_bubble_distribution',
-  taskRatingAdvanced: 'task_rating_advanced',
-  taskDurationDistributionMode: 'task_duration_distribution',
-  topUserByTasksMode: 'top_user_by_task_ranking',
+  ratingMode: "ratingMode",
+  reportsMode: "reportsMode",
+  leaderboardMode: "leaderboardMode",
+  playerMode: "playerMode",
+  topUserByClansMode: "top_users_by_clan_ranking",
+  taskRatingMode: "tasks_ranking",
+  clansBubbleDistributionMode: "clans_bubble_distribution",
+  taskRatingAdvanced: "task_rating_advanced",
+  taskDurationDistributionMode: "task_duration_distribution",
+  topUserByTasksMode: "top_user_by_task_ranking",
 };
 
 export const mapPanelModeToTitle = {
-  [PanelModeCodes.ratingMode]: i18next.t('Rating Panel'),
-  [PanelModeCodes.reportsMode]: i18next.t('Reports Panel'),
-  [PanelModeCodes.playerMode]: i18next.t('Player Panel'),
-  [PanelModeCodes.topUserByClansMode]: i18next.t('Top users by clan ranking'),
-  [PanelModeCodes.taskRatingMode]: i18next.t('Tasks ranking'),
-  [PanelModeCodes.clansBubbleDistributionMode]: i18next.t('Clans bubble distribution'),
-  [PanelModeCodes.taskRatingAdvanced]: i18next.t('Duration distribution and top users by task'),
-  [PanelModeCodes.taskDurationDistributionMode]: i18next.t('task duration distribution'),
-  [PanelModeCodes.topUserByTasksMode]: i18next.t('Top user by task ranking'),
+  [PanelModeCodes.ratingMode]: i18next.t("Rating Panel"),
+  [PanelModeCodes.reportsMode]: i18next.t("Reports Panel"),
+  [PanelModeCodes.playerMode]: i18next.t("Player Panel"),
+  [PanelModeCodes.leaderboardMode]: i18next.t("Leaderboard"),
+  [PanelModeCodes.topUserByClansMode]: i18next.t("Top users by clan ranking"),
+  [PanelModeCodes.taskRatingMode]: i18next.t("Tasks ranking"),
+  [PanelModeCodes.clansBubbleDistributionMode]: i18next.t(
+    "Clans bubble distribution",
+  ),
+  [PanelModeCodes.taskRatingAdvanced]: i18next.t(
+    "Duration distribution and top users by task",
+  ),
+  [PanelModeCodes.taskDurationDistributionMode]: i18next.t(
+    "task duration distribution",
+  ),
+  [PanelModeCodes.topUserByTasksMode]: i18next.t("Top user by task ranking"),
 };
 
 const customStyle = {
-  control: provided => ({
+  control: (provided) => ({
     ...provided,
-    color: 'white',
-    borderRadius: '0.3rem',
-    backgroundColor: '#2a2a35',
-    borderColor: '#3a3f50',
+    color: "white",
+    borderRadius: "0.3rem",
+    backgroundColor: "#2a2a35",
+    borderColor: "#3a3f50",
 
-    ':hover': {
-      borderColor: '#4c4c5a',
+    ":hover": {
+      borderColor: "#4c4c5a",
     },
   }),
-  indicatorsContainer: provided => ({
+  indicatorsContainer: (provided) => ({
     ...provided,
   }),
-  indicatorSeparator: provided => ({
+  indicatorSeparator: (provided) => ({
     ...provided,
-    backgroundColor: '#999',
+    backgroundColor: "#999",
   }),
-  clearIndicator: provided => ({
+  clearIndicator: (provided) => ({
     ...provided,
   }),
-  dropdownIndicator: provided => ({
+  dropdownIndicator: (provided) => ({
     ...provided,
-    color: '#999',
+    color: "#999",
   }),
-  input: provided => ({
+  input: (provided) => ({
     ...provided,
   }),
-  menu: provided => ({
+  menu: (provided) => ({
     ...provided,
-    backgroundColor: '#2a2a35',
+    backgroundColor: "#2a2a35",
   }),
-  option: provided => ({
+  option: (provided) => ({
     ...provided,
-    backgroundColor: '#2a2a35',
-    ':hover': {
-      backgroundColor: '#3a3f50',
+    backgroundColor: "#2a2a35",
+    ":hover": {
+      backgroundColor: "#3a3f50",
     },
-    ':focus': {
-      backgroundColor: '#3a3f50',
+    ":focus": {
+      backgroundColor: "#3a3f50",
     },
-    ':active': {
-      backgroundColor: '#3a3f50',
+    ":active": {
+      backgroundColor: "#3a3f50",
     },
   }),
 };
 
 function ControlPanel({
+  allowedPanelModes,
   isPlayer,
   searchOption,
   panelMode,
   panelHistory,
-  disabledPanelModeControl = false,
   disabledSearch = false,
   setPanelHistory,
   setSearchOption,
   setPanelMode,
 }) {
+  console.log(allowedPanelModes);
   const allPlayers = useSelector(tournamentPlayersSelector);
   const hasCustomEventStyles = useContext(CustomEventStylesContext);
 
@@ -117,22 +123,31 @@ function ControlPanel({
     if (prev.userId) {
       setSearchOption(allPlayers[prev.userId]);
     }
-  }, [panelHistory, setPanelHistory, setPanelMode, setSearchOption, allPlayers]);
-  const onChangePanelMode = useCallback(e => {
-    setPanelMode({ panel: e.target.value });
-    setPanelHistory(items => [...items, panelMode]);
-  }, [setPanelMode, setPanelHistory, panelMode]);
+  }, [
+    panelHistory,
+    setPanelHistory,
+    setPanelMode,
+    setSearchOption,
+    allPlayers,
+  ]);
+  const onChangePanelMode = useCallback(
+    (e) => {
+      setPanelMode({ panel: e.target.value });
+      setPanelHistory((items) => [...items, panelMode]);
+    },
+    [setPanelMode, setPanelHistory, panelMode],
+  );
   const onChangeSearchedPlayer = useCallback(
     ({ value = {} }) => setSearchOption(value),
     [setSearchOption],
   );
   const loadOptions = useCallback(
     (inputValue, callback) => {
-      const substr = (inputValue || '').toLowerCase();
+      const substr = (inputValue || "").toLowerCase();
 
       const options = Object.values(allPlayers)
-        .filter(player => player.name.toLowerCase().indexOf(substr) !== -1)
-        .map(player => ({
+        .filter((player) => player.name.toLowerCase().indexOf(substr) !== -1)
+        .map((player) => ({
           label: <UserLabel user={player} />,
           value: player,
         }));
@@ -142,9 +157,9 @@ function ControlPanel({
     [allPlayers],
   );
 
-  const backBtnClassName = cn('btn text-nowrap cb-rounded mr-1 mb-2', {
-    'btn-outline-secondary cb-btn-outline-secondary': !hasCustomEventStyles,
-    'cb-custom-event-btn-outline-secondary': hasCustomEventStyles,
+  const backBtnClassName = cn("btn text-nowrap cb-rounded mr-1 mb-2", {
+    "btn-outline-secondary cb-btn-outline-secondary": !hasCustomEventStyles,
+    "cb-custom-event-btn-outline-secondary": hasCustomEventStyles,
   });
 
   return (
@@ -157,12 +172,15 @@ function ControlPanel({
           disabled={panelHistory.length === 0}
         >
           <FontAwesomeIcon icon="backward" className="mr-1" />
-          {i18next.t('Back')}
+          {i18next.t("Back")}
         </button>
         {panelMode.panel === PanelModeCodes.ratingMode && !disabledSearch ? (
           <div className="input-group flex-nowrap mb-2">
             <div className="input-group-prepend">
-              <span className="input-group-text cb-bg-highlight-panel cb-border-color cb-text" id="search-icon">
+              <span
+                className="input-group-text cb-bg-highlight-panel cb-border-color cb-text"
+                id="search-icon"
+              >
                 <FontAwesomeIcon icon="search" />
               </span>
             </div>
@@ -181,35 +199,35 @@ function ControlPanel({
               loadOptions={loadOptions}
             />
           </div>
-        ) : <div />}
+        ) : (
+          <div />
+        )}
       </div>
-      <div
-        className={cn('d-flex mb-2 text-nowrap justify-content-end', {
-          'text-muted': disabledPanelModeControl,
-        })}
-      >
+      <div className={cn("d-flex mb-2 text-nowrap justify-content-end")}>
         <select
           key="select_panel_mode"
           className="form-control custom-select cb-bg-panel cb-border-color text-white cb-rounded"
           value={panelMode.panel}
           onChange={onChangePanelMode}
-          disabled={disabledPanelModeControl}
         >
-          {Object.values(PanelModeCodes).map(mode => (
-            (![
-              PanelModeCodes.taskRatingAdvanced,
-              PanelModeCodes.taskDurationDistributionMode,
-              PanelModeCodes.topUserByTasksMode,
-            ].includes(mode) || mode === panelMode.panel) && (
-              <option
-                key={mode}
-                value={mode}
-                className="cb-bg-panel text-white"
-                disabled={mode === PanelModeCodes.playerMode && !isPlayer}
-              >
-                {mapPanelModeToTitle[mode]}
-              </option>
-            )))}
+          {Object.values(PanelModeCodes).map(
+            (mode) =>
+              (![
+                PanelModeCodes.taskRatingAdvanced,
+                PanelModeCodes.taskDurationDistributionMode,
+                PanelModeCodes.topUserByTasksMode,
+              ].includes(mode) ||
+                mode === panelMode.panel) && (
+                <option
+                  key={mode}
+                  value={mode}
+                  className="cb-bg-panel text-white"
+                  disabled={mode === PanelModeCodes.playerMode && !isPlayer}
+                >
+                  {mapPanelModeToTitle[mode]}
+                </option>
+              ),
+          )}
         </select>
       </div>
     </div>