CHOMPStation2/tgui/packages/tgui/interfaces/StarcasterCh.js

/* eslint react/no-danger: "off" */
import { useBackend } from '../backend';
import { Button, LabeledList, Section, NoticeBox } from '../components';
import { Window } from '../layouts';
import { resolveAsset } from '../assets';

export const StarcasterCh = (props, context) => {
  const { act, data } = useBackend(context);

  const {
    article,
  } = data;

  let body = <ViewArticles />;

  if (article) {
    body = <SelectedArticle />;
  }

  return (
    <Window width={575} height={750} resizable>
      <Window.Content scrollable>
        {body}
      </Window.Content>
    </Window>
  );
};

const SelectedArticle = (props, context) => {
  const { act, data } = useBackend(context);

  const {
    article,
  } = data;

  if (!article) {
    return (
      <Section>
        Error: Article not found.
      </Section>
    );
  }

  const {
    title,
    cover,
    content,
  } = article;

  return (
    <Section title={"Viewing: " + title} buttons={
      <Button
        icon="times"
        onClick={() => act("PRG_reset")}>
        Close
      </Button>
    }>
      {!!cover && <img src={resolveAsset(cover)} />}
      {/* News articles are written in premade .html files and cannot be edited by players, so it should be
        * safe enough to use dangerouslySetInnerHTML here.
        */}
      <div dangerouslySetInnerHTML={{ __html: content }} /> 
    </Section>
  );
};

const ViewArticles = (props, context) => {
  const { act, data } = useBackend(context);

  const {
    showing_archived,
    all_articles,
  } = data;

  return (
    <Section title="Articles List" buttons={
      <Button.Checkbox
        onClick={() => act("PRG_toggle_archived")}
        checked={showing_archived}>
        Show Archived
      </Button.Checkbox>
    }>
      <LabeledList>
        {all_articles.length && all_articles.map(article => (
          <LabeledList.Item label={article.name} key={article.uid} buttons={
            <Button
              icon="download"
              onClick={() => act("PRG_openarticle", { uid: article.uid })} />
          } />
        )) || (
          <LabeledList.Item label="Error">
            Unable to connect to Starfire database.
          </LabeledList.Item>
        )}
      </LabeledList>
    </Section>
  );
};