UI: Blacklist app crash fix and other changes (#666)

* fix: handle when no view blacklists auth * ui: blacklist preset time menu to buttons, minor fixes
MarechJ · Sep 3, 2024 · 43f4474 · 43f4474
1 parent 69db494
commit 43f4474
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 108 deletions.
diff --git a/rcongui/src/components/Blacklist/BlacklistRecordCreateDialog.js b/rcongui/src/components/Blacklist/BlacklistRecordCreateDialog.js
@@ -18,22 +18,13 @@ import {
 import moment from "moment";
 import { getServerStatus, getSharedMessages } from "../../utils/fetchUtils";
 import TextHistory from "../textHistory";
+import { TimePickerButtons } from "../shared/time-picker-buttons";
 
-const ONE_HOUR = 60 * 60;
-const ONE_DAY = ONE_HOUR * 24;
 const presetTimes = [
-  { label: "1 hour", value: ONE_HOUR },
-  { label: "6 hours", value: ONE_HOUR * 6 },
-  { label: "12 hours", value: ONE_HOUR * 12 },
-  { label: "1 day", value: ONE_DAY },
-  { label: "2 days", value: ONE_DAY * 2 },
-  { label: "3 days", value: ONE_DAY * 3 },
-  { label: "5 days", value: ONE_DAY * 5 },
-  { label: "7 days", value: ONE_DAY * 7 },
-  { label: "14 days", value: ONE_DAY * 14 },
-  { label: "30 days", value: ONE_DAY * 30 },
-  { label: "365 days", value: ONE_DAY * 365 },
-  { label: "Never", value: null },
+  [1, "hour"],
+  [1, "day"],
+  [1, "week"],
+  [1, "month"],
 ];
 
 function BlacklistServerWarning({ blacklist, currentServer }) {
@@ -104,11 +95,14 @@ export default function BlacklistRecordCreateDialog({
   React.useEffect(() => {
     if (open) {
       const messageType = "punishments";
+      const locallyStoredMessages = new TextHistory(messageType).getTexts();
+      setPunishMessages(locallyStoredMessages);
+
       getServerStatus()
         .then((server) => setCurrentServer(server))
         .catch(() => setCurrentServer({}));
+
       getSharedMessages(messageType).then((sharedMessages) => {
-        const locallyStoredMessages = new TextHistory(messageType).getTexts();
         setPunishMessages(sharedMessages.concat(locallyStoredMessages));
       });
     }
@@ -134,7 +128,7 @@ export default function BlacklistRecordCreateDialog({
   }, [open]);
 
   React.useEffect(() => {
-    if (blacklists.length == 1) {
+    if (blacklists?.length == 1) {
       setBlacklist(blacklists[0]);
     }
   });
@@ -212,7 +206,7 @@ export default function BlacklistRecordCreateDialog({
             />
             {/* EXPIRY */}
             <Grid container spacing={2} alignItems="center">
-              <Grid item xs={8}>
+              <Grid item xs={12}>
                 <TextField
                   margin="dense"
                   id="expiresAt"
@@ -228,31 +222,20 @@ export default function BlacklistRecordCreateDialog({
                   variant="standard"
                 />
               </Grid>
-              <Grid item xs={4}>
-                <Select
-                  value={""}
-                  onChange={(e) => {
-                    e.target.value
-                      ? setExpiresAt(
-                          moment()
-                            .add(e.target.value, "seconds")
-                            .format("YYYY-MM-DDTHH:mm")
-                        )
-                      : setExpiresAt("");
-                  }}
-                  fullWidth
-                  displayEmpty
-                  className={classes.selectEmpty}
-                >
-                  <MenuItem value="">
-                    <em>Preset Times</em>
-                  </MenuItem>
-                  {presetTimes.map(({ value, label }) => (
-                    <MenuItem key={label} value={value}>
-                      {label}
-                    </MenuItem>
-                  ))}
-                </Select>
+              <Grid item xs={12}>
+                {presetTimes.map(([amount, unit], index) => (
+                  <TimePickerButtons
+                    key={unit + index}
+                    amount={amount}
+                    unit={unit}
+                    expirationTimestamp={expiresAt}
+                    setExpirationTimestamp={(timestamp) => {
+                      setExpiresAt(
+                        moment(timestamp).format("YYYY-MM-DDTHH:mm")
+                      );
+                    }}
+                  />
+                ))}
               </Grid>
             </Grid>
             {/* REASON */}

diff --git a/rcongui/src/components/Blacklist/BlacklistRecordGrid.js b/rcongui/src/components/Blacklist/BlacklistRecordGrid.js
@@ -38,12 +38,10 @@ const BlacklistRecordTile = ({
   onDelete,
 }) => {
   const [showAll, setShowAll] = React.useState(false);
-  const [isExpired, setIsExpired] = React.useState(!record.get("is_active"));
-  const [expiresAt, setExpiresAt] = React.useState(
-    record.get("expires_at") ? moment(record.get("expires_at")) : null
-  );
   const myClasses = useStyles();
 
+  const expiresAt = record.get("expires_at") ? moment(record.get("expires_at")) : null
+  const isExpired = !record.get("is_active")
   const player = record.get("player");
   const playerNames = player.get("names", List());
   const firstName = playerNames.get(0) ? playerNames.get(0).get("name") : undefined;
@@ -243,8 +241,6 @@ const BlacklistRecordTile = ({
           isExpired={isExpired}
           onEdit={() => onEdit(record)}
           onExpire={() => {
-            setIsExpired(true);
-            setExpiresAt(now);
             onExpire(record);
           }}
           onDelete={() => onDelete(record)}
@@ -288,8 +284,8 @@ const BlacklistRecordGrid = withWidth()(
         .then((response) =>
           showResponse(response, `Record ${recordId} was edited`, true)
         )
+        .then(result => result && !result.failed && onRefresh())
         .catch(handle_http_errors)
-        .then(onRefresh);
     }
 
     function onExpireRecord(record) {
@@ -300,8 +296,8 @@ const BlacklistRecordGrid = withWidth()(
         .then((response) =>
           showResponse(response, `Record ${record.get("id")} was edited`, true)
         )
+        .then(result => result && !result.failed && onRefresh())
         .catch(handle_http_errors)
-        .then(onRefresh);
     }
 
     function onDeleteRecord(record) {
@@ -311,8 +307,8 @@ const BlacklistRecordGrid = withWidth()(
         .then((response) =>
           showResponse(response, `Record ${record.get("id")} was deleted`, true)
         )
+        .then(result => result && !result.failed && onRefresh())
         .catch(handle_http_errors)
-        .then(onRefresh);
     }
 
     const size = {

diff --git a/rcongui/src/components/GameView/index.js b/rcongui/src/components/GameView/index.js
@@ -577,8 +577,10 @@ const GameView = ({ classes: globalClasses }) => {
 
   async function handleBlacklistOpen(player) {
     const blacklists = await getBlacklists();
-    setBlacklists(blacklists);
-    setBlacklistDialogOpen(true)
+    if (blacklists) {
+      setBlacklists(blacklists);
+      setBlacklistDialogOpen(true)
+    }
   }
 
   function selectedPlayersToRows() {

diff --git a/rcongui/src/components/MapManager/map-rotation/map-rotation-config.jsx b/rcongui/src/components/MapManager/map-rotation/map-rotation-config.jsx
@@ -48,9 +48,11 @@ const MapRotationSettings = () => {
             <Typography variant={'caption'}>Will reset to default enabled when server restarts.</Typography>
           </div>}
           checked={shuffleEnabled}
-          handleChange={(v) => {
-            toggleShuffleEnabled(!shuffleEnabled);
-            setShuffleEnabled(v);
+          handleChange={async (enabled) => {
+            const result = await toggleShuffleEnabled(!shuffleEnabled);
+            if (result && !result.failed) {
+              setShuffleEnabled(enabled);
+            }
           }}
         />
       </Grid>

diff --git a/rcongui/src/components/PlayerView/playerView.js b/rcongui/src/components/PlayerView/playerView.js
@@ -119,7 +119,9 @@ class PlayerView extends Component {
 
   async handleBlacklistOpen(player) {
     const blacklists = await getBlacklists();
-    this.setState({ blacklists, blacklistOpen: true, playerTarget: player })
+    if (blacklists) {
+      this.setState({ blacklists, blacklistOpen: true, playerTarget: player })
+    }
   }
 
   handleVipDialogOpen(player) {
@@ -131,28 +133,34 @@ class PlayerView extends Component {
 
   async getVips() {
     const vips = await getVips();
-    this.setState({ vipPlayers: vips })
+    if (vips) {
+      this.setState({ vipPlayers: vips })
+    }
   }
 
   async addPlayerVip(player, expiresAt, forward) {
     // action
-    await addPlayerVip({
+    const result = await addPlayerVip({
       player_id: player.get("player_id"),
       description: player.get("name"),
       expiration: expiresAt,
       forward: forward,
     })
-    // update state
-    await this.loadPlayers()
-    await this.getVips()
+    if (result) {
+      // update state
+      await this.loadPlayers()
+      await this.getVips()
+    }
   }
 
   async removePlayerVip(player) {
     // action
-    await removePlayerVip({ player_id: player.get("player_id") })
-    // update state
-    await this.loadPlayers()
-    await this.getVips()
+    const result = await removePlayerVip({ player_id: player.get("player_id") })
+    if (result) {
+      // update state
+      await this.loadPlayers()
+      await this.getVips()
+    }
   }
 
   unBan(ban) {

diff --git a/rcongui/src/components/VipDialog/index.js b/rcongui/src/components/VipDialog/index.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import {
   Box,
   Button,
-  ButtonGroup,
   Dialog,
   DialogActions,
   DialogContent,
@@ -14,52 +13,15 @@ import MomentUtils from "@date-io/moment";
 import moment from "moment";
 import { PlayerVipSummary } from "./PlayerVipSummary";
 import { ForwardCheckBox } from "../commonComponent";
+import { TimePickerButtons } from "../shared/time-picker-buttons";
 
-const vipButtons = [
+const presetTimes = [
   [2, "hours"],
   [1, "day"],
   [1, "week"],
   [1, "month"]
 ];
 
-const VipTimeButtons = ({
-  amount,
-  unit,
-  expirationTimestamp,
-  setExpirationTimestamp,
-}) => {
-
-  const adjustTimestamp = (amount, unit) => {
-    const after = moment(expirationTimestamp).add(amount, unit);
-    const now = moment();
-
-    if (after.isBefore(now)) {
-      setExpirationTimestamp(now.format())
-      return;
-    }
-
-    setExpirationTimestamp(after.format());
-  };
-
-  const setTimestamp = (amount, unit) => {
-    setExpirationTimestamp(moment().add(amount, unit).format());
-  };
-
-  return (
-    <ButtonGroup variant="outlined" size="small" style={{ display: "flex", marginBottom: 4 }}>
-      <Button style={{ display: "block", width: "100%", maxWidth: "2rem" }} onClick={() => adjustTimestamp(-amount, unit)}>
-        -
-      </Button>
-      <Button style={{ display: "block", width: "100%" }} onClick={() => setTimestamp(amount, unit)}>
-        {amount} {unit}
-      </Button>
-      <Button style={{ display: "block", width: "100%", maxWidth: "2rem" }} onClick={() => adjustTimestamp(amount, unit)}>
-        +
-      </Button>
-    </ButtonGroup>
-  );
-};
-
 /**
  * 
  * @param open [NEW] boolean - signaling opened/closed dialog window
@@ -133,8 +95,8 @@ export function VipExpirationDialog({ open, vips, onDeleteVip, handleClose, hand
           </MuiPickersUtilsProvider>
           <Box>
             <Button variant="outlined" size="small" color="secondary" style={{ display: "block", width: "100%", marginBottom: 4 }} onClick={() => setExpirationTimestamp(moment().add(15, "minutes"))}>Help to join!</Button>
-            {vipButtons.map(([amount, unit], index) => (
-              <VipTimeButtons
+            {presetTimes.map(([amount, unit], index) => (
+              <TimePickerButtons
                 key={unit + index}
                 amount={amount}
                 unit={unit}

diff --git a/rcongui/src/components/shared/time-picker-buttons.jsx b/rcongui/src/components/shared/time-picker-buttons.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Button,
+  ButtonGroup,
+} from "@material-ui/core";
+import moment from "moment";
+
+export const TimePickerButtons = ({
+  amount,
+  unit,
+  expirationTimestamp,
+  setExpirationTimestamp,
+}) => {
+
+  const adjustTimestamp = (amount, unit) => {
+    const after = moment(expirationTimestamp).add(amount, unit);
+    const now = moment();
+
+    if (after.isBefore(now)) {
+      setExpirationTimestamp(now.format())
+      return;
+    }
+
+    setExpirationTimestamp(after.format());
+  };
+
+  const setTimestamp = (amount, unit) => {
+    setExpirationTimestamp(moment().add(amount, unit).format());
+  };
+
+  return (
+    <ButtonGroup variant="outlined" size="small" style={{ display: "flex", marginBottom: 4 }}>
+      <Button style={{ display: "block", width: "100%", maxWidth: "2rem" }} onClick={() => adjustTimestamp(-amount, unit)}>
+        -
+      </Button>
+      <Button style={{ display: "block", width: "100%" }} onClick={() => setTimestamp(amount, unit)}>
+        {amount} {unit}
+      </Button>
+      <Button style={{ display: "block", width: "100%", maxWidth: "2rem" }} onClick={() => adjustTimestamp(amount, unit)}>
+        +
+      </Button>
+    </ButtonGroup>
+  );
+};