revite/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";

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>
            { 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>
    );
}