bitburner-src/src/Gang/ui/TaskSelector.tsx

/**
 * React Component for the middle part of the gang member accordion. Contains
 * the task selector as well as some stats.
 */
import React, { useState } from "react";
import { numeralWrapper } from "../../ui/numeralFormat";
import { StatsTable } from "../../ui/React/StatsTable";
import { MoneyRate } from "../../ui/React/MoneyRate";
import { Gang } from "../Gang";
import { GangMember } from "../GangMember";

interface IProps {
  member: GangMember;
  gang: Gang;
  onTaskChange: () => void;
}

export function TaskSelector(props: IProps): React.ReactElement {
  const [currentTask, setCurrentTask] = useState(props.member.task);

  function onChange(event: React.ChangeEvent<HTMLSelectElement>): void {
    const task = event.target.value;
    props.member.assignToTask(task);
    setCurrentTask(task);
    props.onTaskChange();
  }

  const tasks = props.gang.getAllTaskNames();

  const data = [
    [`Money:`, MoneyRate(5 * props.member.calculateMoneyGain(props.gang))],
    [`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(props.gang))} / sec`],
    [`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(props.gang))} / sec`],
    [`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`],
  ];

  return (
    <>
      <select onChange={onChange} className="dropdown noselect" value={currentTask}>
        <option key={0} value={"---"}>
          ---
        </option>
        {tasks.map((task: string, i: number) => (
          <option key={i + 1} value={task}>
            {task}
          </option>
        ))}
      </select>
      <div>{StatsTable(data)}</div>
    </>
  );
}