oneconsole-plugin-starter/src/components/ActionBar.tsx

import React from "react";
import Box from "@material-ui/core/Box";
import IconButton from "@material-ui/core/IconButton";
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import AssignmentIcon from '@material-ui/icons/Assignment';
import ShareIcon from '@material-ui/icons/Share';

import { useStore } from "react-redux";
import { RootState } from "../app/rootReducer";

const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
  .then(
    () => console.log('Async: Copying to clipboard was successful!'),
    (err) => console.error('Async: Could not copy text: ', err)
  );

const shareApp = (state: RootState) => copyToClipboard(`${window.location.href}?state=${encodeURIComponent(JSON.stringify(state))}`);

export interface Props {
  fullPath: string;
}

const ActionBar: React.FC<Props> = ({ fullPath }) => {
  const store = useStore();

  return (
    < Box style={{ textAlign: "center", width: "100%", position: "fixed", bottom: "0", background: "white" }}>
      <IconButton title="Share application" color="secondary" onClick={_ => shareApp(store.getState())}>
        <ShareIcon fontSize="small" />
      </IconButton>
      <IconButton title="Copy link to clipboard" color="secondary" onClick={_ => copyToClipboard(fullPath)}>
        <AssignmentIcon fontSize="small" />
      </IconButton>
      <IconButton title="Open link in new window" color="primary" onClick={_ => window.open(fullPath)}>
        <OpenInNewIcon fontSize="large" />
      </IconButton>
    </Box >
  );
};

export default ActionBar;