Members.tsx

import styles from './Panes.module.scss';
import { useEffect, useState } from "preact/hooks";
import { Servers } from "revolt.js/dist/api/objects";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";

interface Props {
    server: Servers.Server;
}

// ! FIXME: bad code :)
export function Members({ server }: Props) {
    const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);

    const ctx = useForceUpdate();
    const users = useUsers(members?.map(x => x._id.user) ?? [], ctx);

    useEffect(() => {
        ctx.client.servers.members.fetchMembers(server._id)
            .then(members => setMembers(members))
    }, [ ]);

    return (
        <div className={styles.members}>
            <div className={styles.subtitle}>
                { members?.length ?? 0 } Members
            </div>
            { members && members.length > 0 && users?.map(x => x && 
                <div className={styles.member}>
                    <div>@{x.username}</div>
                </div>) 
            }
        </div>
    );
}