Allow banning for specified duration (#170)

Author: eltoder

src/components/ProfileName.js

@@ -9,8 +9,9 @@ import MoreVertIcon from "@material-ui/icons/MoreVert";
 
 import { UserContext } from "../context";
 import firebase from "../firebase";
-import { generateColor, generateName } from "../util";
+import { generateColor, generateName, parseDuration } from "../util";
 import ElapsedTime from "./ElapsedTime";
+import PromptDialog from "./PromptDialog";
 import User from "./User";
 
 const useStyles = makeStyles((theme) => ({
@@ -35,8 +36,8 @@ function ProfileName({ userId }) {
   const theme = useTheme();
   const user = useContext(UserContext);
   const classes = useStyles();
-
   const [anchorEl, setAnchorEl] = useState(null);
+  const [banUser, setBanUser] = useState(false);
 
   const handleClickVertIcon = (event) => {
     setAnchorEl(event.currentTarget);
@@ -52,9 +53,13 @@ function ProfileName({ userId }) {
     handleClose();
   };
 
-  const handleBan = (minutes) => {
-    const endTime = Date.now() + minutes * 60000;
-    firebase.database().ref(`users/${userId}/banned`).set(endTime);
+  const handleBan = (duration) => {
+    setBanUser(false);
+    const seconds = parseDuration((duration || "").trim());
+    if (seconds) {
+      const endTime = Date.now() + seconds * 1000;
+      firebase.database().ref(`users/${userId}/banned`).set(endTime);
+    }
   };
 
   const handleUnban = () => {
@@ -96,17 +101,7 @@ function ProfileName({ userId }) {
                 {player.banned && Date.now() < player.banned ? (
                   <MenuItem onClick={() => handleUnban()}>Unban</MenuItem>
                 ) : (
-                  [
-                    <MenuItem key={1} onClick={() => handleBan(30)}>
-                      Ban for 30 minutes
-                    </MenuItem>,
-                    <MenuItem key={2} onClick={() => handleBan(24 * 60)}>
-                      Ban for 1 day
-                    </MenuItem>,
-                    <MenuItem key={3} onClick={() => handleBan(7 * 24 * 60)}>
-                      Ban for 1 week
-                    </MenuItem>,
-                  ]
+                  <MenuItem onClick={() => setBanUser(true)}>Ban</MenuItem>
                 )}
               </Menu>
             </div>
@@ -132,6 +127,14 @@ function ProfileName({ userId }) {
                 )}
               </span>
             </Typography>
+            <PromptDialog
+              open={banUser}
+              onClose={handleBan}
+              title="Ban User"
+              message="Enter ban duration (examples: 1w, 3d, 1.5h, 1h20m, 30m)."
+              label="Duration"
+              maxLength={25}
+            />
           </section>
         );
       }}

src/util.js

@@ -156,3 +156,15 @@ export function formatDateTime(timestamp) {
   const opts = { timeStyle: "short", hour12: false };
   return `${d.toLocaleDateString()} ${d.toLocaleTimeString(undefined, opts)}`;
 }
+
+export function parseDuration(spec) {
+  const units = [7 * 24 * 3600, 24 * 3600, 3600, 60, 1];
+  const re =
+    /^(?:(\d+(?:\.\d+)?)w)?(?:(\d+(?:\.\d+)?)d)?(?:(\d+(?:\.\d+)?)h)?(?:(\d+(?:\.\d+)?)m)?(?:(\d+(?:\.\d+)?)s)?$/i;
+  const m = re.exec(spec);
+  return !m || !m[0]
+    ? null
+    : units
+        .map((v, i) => (m[i + 1] ? parseFloat(m[i + 1]) * v : 0))
+        .reduce((a, c) => a + c);
+}

src/util.test.js

@@ -1,4 +1,4 @@
-import { badWords } from "./util";
+import { badWords, parseDuration } from "./util";
 
 describe("bad words filter", () => {
   it("sort of works", () => {
@@ -16,3 +16,16 @@ describe("bad words filter", () => {
     expect(badWords.hasMatch("a\u200dsshole")).toBe(true);
   });
 });
+
+it("parseDuration works", () => {
+  expect(parseDuration("2w")).toBe(2 * 7 * 24 * 3600);
+  expect(parseDuration("3d")).toBe(3 * 24 * 3600);
+  expect(parseDuration("1.5h")).toBe(1.5 * 3600);
+  expect(parseDuration("20m")).toBe(20 * 60);
+  expect(parseDuration("300s")).toBe(300);
+  expect(parseDuration("1h30m")).toBe(1.5 * 3600);
+  expect(parseDuration("1w1d1h1m")).toBe((8 * 24 + 1) * 3600 + 60);
+  expect(parseDuration("1d1w")).toBe(null);
+  expect(parseDuration("300")).toBe(null);
+  expect(parseDuration("")).toBe(null);
+});