From 5c3b92ec151129a7a9a373af32cc6a93d620a66c Mon Sep 17 00:00:00 2001 From: LoV432 Date: Wed, 10 Jan 2024 23:47:54 +0500 Subject: [PATCH] refactor all confirmation popups --- app/components/AdminPanel.tsx | 175 ++++++-------------------- app/components/BanList.tsx | 36 ++---- app/components/ConfirmationModals.tsx | 109 ++++++++++++++++ 3 files changed, 154 insertions(+), 166 deletions(-) create mode 100644 app/components/ConfirmationModals.tsx diff --git a/app/components/AdminPanel.tsx b/app/components/AdminPanel.tsx index 0d040ae..9b73b18 100644 --- a/app/components/AdminPanel.tsx +++ b/app/components/AdminPanel.tsx @@ -1,5 +1,9 @@ import { useRef } from 'react'; import { Player } from '../lib/parse-players'; +import { + ConfirmationModalWithInput, + ConfirmationModal +} from './ConfirmationModals'; export default function AdminPanel({ adminPanelModal, @@ -158,9 +162,7 @@ function BanPlayerPopUp({ }) { const banTime = useRef() as React.MutableRefObject; const banReason = useRef() as React.MutableRefObject; - const banPlayer = (e: React.MouseEvent) => { - const time = Number(banTime.current.value) | 0; - const reason = String(banReason.current.value) || 'Good Reason'; + const banPlayer = (time: number, reason: string) => { fetch('/api/rcon', { method: 'POST', headers: { @@ -170,49 +172,17 @@ function BanPlayerPopUp({ command: `css_ban #${player.id} ${time} "${reason}"` }) }); - banTime.current.value = ''; - closePopUp(); + banPlayerModal.current.close(); adminPanelModal.current.close(); }; - function closePopUp() { - banPlayerModal.current.close(); - banTime.current.value = ''; - banReason.current.value = ''; - } - return ( - -
-

Ban Player

-

Are you sure you want to ban "{player.name}"?

- - - - - -
-
- -
- + ); } @@ -225,7 +195,7 @@ function KickPlayerPopUp({ kickPlayerModal: React.MutableRefObject; adminPanelModal: React.MutableRefObject; }) { - const kickPlayer = (e: React.MouseEvent) => { + const kickPlayer = () => { fetch('/api/rcon', { method: 'POST', headers: { @@ -235,36 +205,17 @@ function KickPlayerPopUp({ command: `kickid ${player.id}` }) }); - closePopUp(); + kickPlayerModal.current.close(); adminPanelModal.current.close(); }; - function closePopUp() { - kickPlayerModal.current.close(); - } - return ( - -
-

Kick Player

-

Are you sure you want to kick "{player.name}"?

- - - -
-
- -
- + ); } @@ -277,7 +228,7 @@ function SlayPlayerPopUp({ slayPlayerModal: React.MutableRefObject; adminPanelModal: React.MutableRefObject; }) { - const slayPlayer = (e: React.MouseEvent) => { + const slayPlayer = () => { fetch('/api/rcon', { method: 'POST', headers: { @@ -287,36 +238,17 @@ function SlayPlayerPopUp({ command: `css_slay #${player.id}` }) }); - closePopUp(); + slayPlayerModal.current.close(); adminPanelModal.current.close(); }; - function closePopUp() { - slayPlayerModal.current.close(); - } - return ( - -
-

Slay Player

-

Are you sure you want to slay "{player.name}"?

- - - -
-
- -
- + ); } @@ -329,11 +261,7 @@ function MutePlayerPopUp({ mutePlayerModal: React.MutableRefObject; adminPanelModal: React.MutableRefObject; }) { - const muteTime = useRef() as React.MutableRefObject; - const muteReason = useRef() as React.MutableRefObject; - const mutePlayer = (e: React.MouseEvent) => { - const time = Number(muteTime.current.value) | 0; - const reason = String(muteReason.current.value) || 'Good Reason'; + const mutePlayer = (time: number, reason: string) => { fetch('/api/rcon', { method: 'POST', headers: { @@ -352,47 +280,16 @@ function MutePlayerPopUp({ command: `css_gag #${player.id} ${time} "${reason}"` }) }); - closePopUp(); + mutePlayerModal.current.close(); adminPanelModal.current.close(); }; - function closePopUp() { - mutePlayerModal.current.close(); - muteTime.current.value = ''; - muteReason.current.value = ''; - } - return ( - -
-

Mute Player

-

Are you sure you want to mute "{player.name}"?

- - - - - -
-
- -
- + ); } diff --git a/app/components/BanList.tsx b/app/components/BanList.tsx index c2552ea..5e94f9f 100644 --- a/app/components/BanList.tsx +++ b/app/components/BanList.tsx @@ -1,6 +1,7 @@ 'use client'; import { useEffect, useRef, useState } from 'react'; import { getBans, dbAllBansReturn } from '../lib/get-bans'; +import { ConfirmationModal } from './ConfirmationModals'; export default function BanListButton() { const [banList, setBanlist] = useState([] as dbAllBansReturn); @@ -165,7 +166,7 @@ function UnbanPlayerPopUp({ unbanPlayerModal: React.MutableRefObject; updateBanList: () => Promise; }) { - const unbanPlayer = (e: React.MouseEvent) => { + const unbanPlayer = () => { if (player?.player_steamid) { fetch('/api/rcon', { method: 'POST', @@ -187,37 +188,18 @@ function UnbanPlayerPopUp({ }) }); } - closePopUp(); + unbanPlayerModal.current.close(); setTimeout(() => { updateBanList(); }, 500); }; - function closePopUp() { - unbanPlayerModal.current.close(); - } - return ( - -
-

Unban Player

-

Are you sure you want to unban "{player?.player_name}"?

- - - -
-
- -
- + ); } diff --git a/app/components/ConfirmationModals.tsx b/app/components/ConfirmationModals.tsx new file mode 100644 index 0000000..3791451 --- /dev/null +++ b/app/components/ConfirmationModals.tsx @@ -0,0 +1,109 @@ +import { useRef } from 'react'; + +export function ConfirmationModal({ + modalName, + modalRef, + playerName, + modalAction +}: { + modalName: string; + modalRef: React.MutableRefObject; + playerName: string; + modalAction: () => void; +}) { + function closePopUp() { + modalRef.current.close(); + } + return ( + +
+

+ {modalName} Player +

+

+ Are you sure you want to {modalName} "{playerName}"? +

+ + + +
+
+ +
+ + ); +} + +export function ConfirmationModalWithInput({ + modalName, + modalRef, + playerName, + modalAction +}: { + modalName: string; + modalRef: React.MutableRefObject; + playerName: string; + modalAction: (time: number, reason: string) => void; +}) { + const timeRef = useRef() as React.MutableRefObject; + const reasonRef = useRef() as React.MutableRefObject; + function closePopUp() { + modalRef.current.close(); + timeRef.current.value = ''; + reasonRef.current.value = ''; + } + return ( + +
+

+ {modalName} Player +

+

+ Are you sure you want to {modalName} "{playerName}"? +

+ + + + + +
+
+ +
+ + ); +}