for-legacy-web/src/pages/settings/server/Bans.tsx

import { Servers } from "revolt.js/dist/api/objects";

import { useContext, useEffect, useState } from "preact/hooks";

import { AppContext } from "../../../context/revoltjs/RevoltClient";

import Tip from "../../../components/ui/Tip";

interface Props {
    server: Servers.Server;
}

export function Bans({ server }: Props) {
    const client = useContext(AppContext);
    const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined);

    useEffect(() => {
        client.servers.fetchBans(server._id).then((bans) => setBans(bans));
    }, []);

    return (
        <div>
            <Tip warning>This section is under construction.</Tip>
            {bans?.map((x) => (
                <div>
                    {x._id.user}: {x.reason ?? "no reason"}{" "}
                    <button
                        onClick={() =>
                            client.servers.unbanUser(server._id, x._id.user)
                        }>
                        unban
                    </button>
                </div>
            ))}
        </div>
    );
}