bitburner-src/src/Faction/ui/FactionList.tsx

import React, { useState } from 'react';
import { IPlayer } from "../../PersonObjects/IPlayer";
import { IEngine } from "../../IEngine";
import { Factions } from "../Factions";
import { displayFactionContent, joinFaction } from "../FactionHelpers";

interface IProps {
    player: IPlayer;
    engine: IEngine;
}

export function FactionList(props: IProps): React.ReactElement {
    const setRerender = useState(false)[1];

    function openFaction(faction: string): void {
        props.engine.loadFactionContent();
        displayFactionContent(faction);
    }

    function acceptInvitation(event: React.MouseEvent<HTMLElement>, faction: string): void {
        if (!event.isTrusted) return;
        joinFaction(Factions[faction]);
        setRerender(x => !x);
    }

    return (<>
        <h1>Factions</h1>
        <p>Lists all factions you have joined</p>
        <br />
        <ul>
            {props.player.factions.map((faction: string) => 
                <li key={faction}><a
                    className="a-link-button"
                    onClick={() => openFaction(faction)}
                    style={{padding:"4px", margin:"4px", display:"inline-block"}}>{faction}
                </a></li>)}
        </ul>
        <br />
        <h1>Outstanding Faction Invitations</h1>
        <p style={{width: '70%'}}>Lists factions you have been invited to. You can accept these faction invitations at any time.</p>
        <ul>
            {props.player.factionInvitations.map((faction: string) => 
                <li  key={faction} style={{padding:"6px", margin:"6px"}}>
                    <p style={{display:"inline", margin:"4px", padding:"4px"}}>{faction}</p>
                    <a
                        className="a-link-button"
                        onClick={(e) => acceptInvitation(e, faction)}
                        style={{display:"inline", margin:"4px", padding:"4px"}}>Accept Faction Invitation</a>
                </li>)}
        </ul>
    </>);
}