arduino-ide/arduino-ide-extension/src/browser/dialogs.ts/cloud-share-sketch-dialog.tsx

import * as React from 'react';
import { inject, injectable } from 'inversify';
import { Widget } from '@phosphor/widgets';
import { Message } from '@phosphor/messaging';
import { clipboard } from 'electron';
import {
  AbstractDialog,
  ReactWidget,
  DialogProps,
} from '@theia/core/lib/browser';
import { CreateApi } from '../create/create-api';

const RadioButton = (props: {
  id: string;
  changed: (evt: React.BaseSyntheticEvent) => void;
  value: string;
  isSelected: boolean;
  isDisabled: boolean;
  label: string;
}) => {
  return (
    <p className="RadioButton">
      <input
        id={props.id}
        onChange={props.changed}
        value={props.value}
        type="radio"
        checked={props.isSelected}
        disabled={props.isDisabled}
      />
      <label htmlFor={props.id}>{props.label}</label>
    </p>
  );
};

export const ShareSketchComponent = ({
  treeNode,
  createApi,
  domain = 'https://create.arduino.cc',
}: {
  treeNode: any;
  createApi: CreateApi;
  domain?: string;
}): React.ReactElement => {
  // const [publicVisibility, setPublicVisibility] = React.useState<boolean>(
  //     treeNode.isPublic
  // );

  const [loading, setloading] = React.useState<boolean>(false);

  const radioChangeHandler = async (event: React.BaseSyntheticEvent) => {
    setloading(true);
    const sketch = await createApi.editSketch({
      id: treeNode.sketchId,
      params: {
        is_public: event.target.value === 'private' ? false : true,
      },
    });
    // setPublicVisibility(sketch.is_public);
    treeNode.isPublic = sketch.is_public;
    setloading(false);
  };

  const sketchLink = `${domain}/editor/_/${treeNode.sketchId}/preview`;
  const embedLink = `<iframe src="${sketchLink}?embed" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>`;

  return (
    <div id="widget-container arduino-sharesketch-dialog">
      <p>Choose visibility of your Sketch:</p>
      <RadioButton
        changed={radioChangeHandler}
        id="1"
        isSelected={treeNode.isPublic === false}
        label="Private. Only you can view the Sketch."
        value="private"
        isDisabled={loading}
      />
      <RadioButton
        changed={radioChangeHandler}
        id="2"
        isSelected={treeNode.isPublic === true}
        label="Public. Anyone with the link can view the Sketch."
        value="public"
        isDisabled={loading}
      />

      {treeNode.isPublic && (
        <div>
          <p>Link:</p>
          <div className="sketch-link">
            <input
              type="text"
              readOnly
              value={sketchLink}
              className="theia-input"
            />
            <button
              onClick={() => clipboard.writeText(sketchLink)}
              value="copy"
              className="theia-button secondary"
            >
              Copy
            </button>
          </div>
          <p>Embed:</p>
          <div className="sketch-link-embed">
            <textarea
              readOnly
              value={embedLink}
              className="theia-input stretch"
            />
          </div>
        </div>
      )}
    </div>
  );
};

@injectable()
export class ShareSketchWidget extends ReactWidget {
  constructor(private treeNode: any, private createApi: CreateApi) {
    super();
  }

  protected render(): React.ReactNode {
    return (
      <ShareSketchComponent
        treeNode={this.treeNode}
        createApi={this.createApi}
      />
    );
  }
}

@injectable()
export class ShareSketchDialogProps extends DialogProps {
  readonly node: any;
  readonly createApi: CreateApi;
}

@injectable()
export class ShareSketchDialog extends AbstractDialog<void> {
  protected widget: ShareSketchWidget;

  constructor(
    @inject(ShareSketchDialogProps)
    protected readonly props: ShareSketchDialogProps
  ) {
    super({ title: props.title });
    this.contentNode.classList.add('arduino-share-sketch-dialog');
    this.widget = new ShareSketchWidget(props.node, props.createApi);
  }

  get value(): void {
    return;
  }
  protected onAfterAttach(msg: Message): void {
    if (this.widget.isAttached) {
      Widget.detach(this.widget);
    }
    Widget.attach(this.widget, this.contentNode);
    super.onAfterAttach(msg);
    this.update();
  }

  protected onUpdateRequest(msg: Message): void {
    super.onUpdateRequest(msg);
    this.widget.update();
  }

  protected onActivateRequest(msg: Message): void {
    super.onActivateRequest(msg);
    this.widget.activate();
  }
}