slate/scenes/SceneSlate.js

import * as React from "react";
import * as System from "~/components/system";

import { css } from "@emotion/react";

import ScenePage from "~/components/core/ScenePage";
import Section from "~/components/core/Section";

export default class SceneSlate extends React.Component {
  static defaultProps = { data: { data: { objects: [] } } };

  render() {
    const images = this.props.current.data.objects;
    const url = `/@${this.props.viewer.username}/${this.props.data.slatename}`;

    const slates = {
      columns: [
        { key: "name", name: "Data", type: "FILE_LINK", width: "288px" },
        { key: "url", name: "Asset URL", width: "100%" },
      ],
      rows: images,
    };

    // TODO(jim): Refactor later.
    const slateButtons = [
      /*
      { name: "Make public", type: "SIDEBAR", value: "" },
      { name: "Make private", type: "SIDEBAR", value: "" },
      */
      {
        name: "View slate",
        type: "NEW_WINDOW",
        value: url,
      },
      {
        name: "Add image",
        type: "SIDEBAR",
        value: "SIDEBAR_ADD_FILE_TO_BUCKET",
        data: this.props.current,
      },
    ];

    return (
      <ScenePage>
        <System.H1>{this.props.data.slatename}</System.H1>
        <Section
          title="Images"
          buttons={slateButtons}
          onAction={this.props.onAction}
        >
          <System.Table
            data={slates}
            name={`/@${this.props.viewer.username}/${
              this.props.data.slatename
            }`}
            onAction={this.props.onAction}
            onNavigateTo={this.props.onNavigateTo}
          />
        </Section>
      </ScenePage>
    );
  }
}