Show ban status on player history card (#317)

rcongui/src/components/PlayersHistory/PlayerTile/PlayerBan.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Grid, Typography } from "@material-ui/core";
+import { fromJS } from "immutable";
+import { reduce } from "lodash";
+
+export function banListFromServer(data) {
+    return fromJS(
+        reduce(
+            data,
+            (acc, val) => {
+                if (!acc.hasOwnProperty(val.steam_id_64)) {
+                    acc[val.steam_id_64] = new Array(val)
+                } else {
+                    acc[val.steam_id_64].push(val)
+                }
+                return acc;
+            },
+            {}
+        )
+    );
+}
+
+
+export const PlayerBan = ({ classes, bans, player }) => {
+    const playerBans = bans.get(player.get('steam_id_64'))
+    const formattedBans = {}
+
+    playerBans?.forEach(b => b.get('type') === 'temp' ? formattedBans.temp = 'IS TEMP BANNED' : formattedBans.perma = 'IS PERMA BANNED')
+    return (
+        <Grid
+            container
+            justify="space-between"
+            spacing={0}
+            className={classes.noPaddingMargin}
+        >
+            <Grid item xs={6}>
+                {formattedBans.temp ?
+                    <Typography variant="h7" color="secondary">{formattedBans.temp}</Typography>
+                    : ""
+                }
+            </Grid>
+            <Grid item xs={6}>
+                {formattedBans.perma ?
+                    <Typography variant="h7" color="secondary">{formattedBans.perma}</Typography>
+                    : ""
+                }
+            </Grid>
+        </Grid>
+
+    )
+}

rcongui/src/components/PlayersHistory/index.js

@@ -33,6 +33,7 @@ import { getEmojiFlag } from "../../utils/emoji";
 import PlayerGrid from "./playerGrid";
 import { VipExpirationDialog } from "../VipDialog";
 import { vipListFromServer } from "../VipDialog/vipFromServer";
+import { banListFromServer } from '../PlayersHistory/PlayerTile/PlayerBan'
 
 const PlayerSummary = ({ player, flag }) => (
   <React.Fragment>
@@ -167,9 +168,11 @@ class PlayersHistory extends React.Component {
       exactMatch: false,
       flags: "",
       country: "",
+      bans: new Map(),
     };
 
     this.getPlayerHistory = this.getPlayerHistory.bind(this);
+    this.loadBans = this.loadBans.bind(this)
     this.blacklistPlayer = this.blacklistPlayer.bind(this);
     this.unblacklistPlayer = this.unblacklistPlayer.bind(this);
     this.addFlagToPlayer = this.addFlagToPlayer.bind(this);
@@ -306,14 +309,23 @@ class PlayersHistory extends React.Component {
           page: data.result.page,
         });
       })
+      .then(this.loadBans)
       .catch(handle_http_errors);
   }
 
+  loadBans() {
+    return this._loadToState("get_bans", false, (data) =>
+      this.setState({
+        bans: banListFromServer(data.result),
+      })
+    );
+  }
+
   _reloadOnSuccess = (data) => {
     if (data.failed) {
       return;
     }
-    this.getPlayerHistory().then(this.loadVips);
+    this.getPlayerHistory().then(this.loadVips).then(this.loadBans);
   };
 
   addFlagToPlayer(playerObj, flag, comment = null) {
@@ -528,6 +540,7 @@ class PlayersHistory extends React.Component {
       doConfirmPlayer,
       doVIPPlayer,
       vips,
+      bans,
       ignoreAccent,
       exactMatch,
       flags,
@@ -587,6 +600,7 @@ class PlayersHistory extends React.Component {
             onDeleteFlag={this.deleteFlag}
             onRemoveFromWatchList={this.onRemoveFromWatchList}
             vips={vips}
+            bans={bans}
             onflag={this.setDoFlag}
             onUnban={this.onUnban}
             onTempBan={this.onTempBan}

rcongui/src/components/PlayersHistory/playerGrid.js

@@ -6,6 +6,7 @@ import { PlayerHeader } from "./PlayerTile/PlayerHeader";
 import { PlayerFlags } from "./PlayerTile/PlayerFlags";
 import { PlayerSighthings } from "./PlayerTile/PlayerSighthings";
 import { PlayerPenalties } from "./PlayerTile/PlayerPenalties";
+import { PlayerBan } from "./PlayerTile/PlayerBan";
 import withWidth from "@material-ui/core/withWidth";
 import { pure } from "recompose";
 
@@ -39,6 +40,7 @@ const PlayerGrid = withWidth()(
     onRemoveFromWatchList,
     width,
     vips,
+    bans
   }) => {
     const myClasses = useStyles();
 
@@ -53,7 +55,7 @@ const PlayerGrid = withWidth()(
     return (
       <Grid container>
         <Grid item xs={12}>
-          <GridList cols={size} cellHeight={210} spacing={12}>
+          <GridList cols={size} cellHeight={240} spacing={12}>
             {players.map((player) => {
               return (
                 <GridListTile
@@ -73,6 +75,7 @@ const PlayerGrid = withWidth()(
                         classes={classes}
                         onDeleteFlag={onDeleteFlag}
                       />
+                      <PlayerBan classes={classes} bans={bans} player={player} />
                       <PlayerSighthings classes={classes} player={player} />
                       <PlayerPenalties classes={classes} player={player} />
                       <Grid container justify="center">