Skip to content

Commit

Permalink
refactor all confirmation popups
Browse files Browse the repository at this point in the history
  • Loading branch information
@LoV432
LoV432 committed Jan 10, 2024
1 parent b8b284e commit 5c3b92e
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 166 deletions.
175 changes: 36 additions & 139 deletions app/components/AdminPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { useRef } from 'react';
import { Player } from '../lib/parse-players';
import {
ConfirmationModalWithInput,
ConfirmationModal
} from './ConfirmationModals';

export default function AdminPanel({
adminPanelModal,
Expand Down Expand Up @@ -158,9 +162,7 @@ function BanPlayerPopUp({
}) {
const banTime = useRef() as React.MutableRefObject<HTMLInputElement>;
const banReason = useRef() as React.MutableRefObject<HTMLInputElement>;
const banPlayer = (e: React.MouseEvent<HTMLButtonElement>) => {
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: {
Expand All @@ -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 (
<dialog ref={banPlayerModal} className="modal">
<div className="modal-box bg-zinc-900">
<h3 className="pb-5 text-lg font-bold">Ban Player</h3>
<p>Are you sure you want to ban "{player.name}"?</p>
<input
ref={banTime}
className="input mt-5 w-full"
placeholder="Time in minutes/0 perm"
></input>
<input
ref={banReason}
className="input mt-5 w-full"
placeholder="Ban Reason"
></input>
<button onClick={banPlayer} className="btn btn-error mt-5 w-full">
BAN
</button>
<button onClick={closePopUp} className="btn btn-ghost mt-5 w-full">
Cancel
</button>
<button
onClick={closePopUp}
className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
>
✕
</button>
</div>
<div className="modal-backdrop bg-zinc-700 opacity-30">
<button onClick={closePopUp}>close</button>
</div>
</dialog>
<ConfirmationModalWithInput
modalAction={banPlayer}
modalName="Ban"
modalRef={banPlayerModal}
playerName={player.name}
/>
);
}

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

function closePopUp() {
kickPlayerModal.current.close();
}

return (
<dialog ref={kickPlayerModal} className="modal">
<div className="modal-box bg-zinc-900">
<h3 className="pb-5 text-lg font-bold">Kick Player</h3>
<p>Are you sure you want to kick "{player.name}"?</p>
<button onClick={kickPlayer} className="btn btn-error mt-5 w-full">
KICK
</button>
<button onClick={closePopUp} className="btn btn-ghost mt-5 w-full">
Cancel
</button>
<button
onClick={closePopUp}
className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
>
✕
</button>
</div>
<div className="modal-backdrop bg-zinc-700 opacity-30">
<button onClick={closePopUp}>close</button>
</div>
</dialog>
<ConfirmationModal
modalAction={kickPlayer}
modalName="kick"
modalRef={kickPlayerModal}
playerName={player.name}
/>
);
}

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

function closePopUp() {
slayPlayerModal.current.close();
}

return (
<dialog ref={slayPlayerModal} className="modal">
<div className="modal-box bg-zinc-900">
<h3 className="pb-5 text-lg font-bold">Slay Player</h3>
<p>Are you sure you want to slay "{player.name}"?</p>
<button onClick={slayPlayer} className="btn btn-error mt-5 w-full">
SLAY
</button>
<button onClick={closePopUp} className="btn btn-ghost mt-5 w-full">
Cancel
</button>
<button
onClick={closePopUp}
className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
>
✕
</button>
</div>
<div className="modal-backdrop bg-zinc-700 opacity-30">
<button onClick={closePopUp}>close</button>
</div>
</dialog>
<ConfirmationModal
modalAction={slayPlayer}
modalName="slay"
modalRef={slayPlayerModal}
playerName={player.name}
/>
);
}

Expand All @@ -329,11 +261,7 @@ function MutePlayerPopUp({
mutePlayerModal: React.MutableRefObject<HTMLDialogElement>;
adminPanelModal: React.MutableRefObject<HTMLDialogElement>;
}) {
const muteTime = useRef() as React.MutableRefObject<HTMLInputElement>;
const muteReason = useRef() as React.MutableRefObject<HTMLInputElement>;
const mutePlayer = (e: React.MouseEvent<HTMLButtonElement>) => {
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: {
Expand All @@ -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 (
<dialog ref={mutePlayerModal} className="modal">
<div className="modal-box bg-zinc-900">
<h3 className="pb-5 text-lg font-bold">Mute Player</h3>
<p>Are you sure you want to mute "{player.name}"?</p>
<input
ref={muteTime}
className="input mt-5 w-full"
placeholder="Time in minutes/0 perm"
></input>
<input
ref={muteReason}
className="input mt-5 w-full"
placeholder="Mute Reason"
></input>
<button onClick={mutePlayer} className="btn btn-error mt-5 w-full">
MUTE
</button>
<button onClick={closePopUp} className="btn btn-ghost mt-5 w-full">
Cancel
</button>
<button
onClick={closePopUp}
className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
>
✕
</button>
</div>
<div className="modal-backdrop bg-zinc-700 opacity-30">
<button onClick={closePopUp}>close</button>
</div>
</dialog>
<ConfirmationModalWithInput
modalAction={mutePlayer}
modalName="Mute"
modalRef={mutePlayerModal}
playerName={player.name}
/>
);
}
36 changes: 9 additions & 27 deletions app/components/BanList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -165,7 +166,7 @@ function UnbanPlayerPopUp({
unbanPlayerModal: React.MutableRefObject<HTMLDialogElement>;
updateBanList: () => Promise<void>;
}) {
const unbanPlayer = (e: React.MouseEvent<HTMLButtonElement>) => {
const unbanPlayer = () => {
if (player?.player_steamid) {
fetch('/api/rcon', {
method: 'POST',
Expand All @@ -187,37 +188,18 @@ function UnbanPlayerPopUp({
})
});
}
closePopUp();
unbanPlayerModal.current.close();
setTimeout(() => {
updateBanList();
}, 500);
};

function closePopUp() {
unbanPlayerModal.current.close();
}

return (
<dialog ref={unbanPlayerModal} className="modal">
<div className="modal-box bg-zinc-900">
<h3 className="pb-5 text-lg font-bold">Unban Player</h3>
<p>Are you sure you want to unban "{player?.player_name}"?</p>
<button onClick={unbanPlayer} className="btn btn-error mt-5 w-full">
UNBAN
</button>
<button onClick={closePopUp} className="btn btn-ghost mt-5 w-full">
Cancel
</button>
<button
onClick={closePopUp}
className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
>
✕
</button>
</div>
<div className="modal-backdrop bg-zinc-700 opacity-30">
<button onClick={closePopUp}>close</button>
</div>
</dialog>
<ConfirmationModal
modalAction={unbanPlayer}
modalName="unban"
modalRef={unbanPlayerModal}
playerName={player?.player_name || ''}
/>
);
}
Loading

0 comments on commit 5c3b92e

Please sign in to comment.