react/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js

// @flow

import React, { Fragment, useContext, useCallback, useRef } from 'react';
import { ProfilerContext } from './ProfilerContext';
import { ModalDialogContext } from '../ModalDialog';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import { StoreContext } from '../context';
import {
  prepareProfilingDataExport,
  prepareProfilingDataFrontendFromExport,
} from './utils';
import { downloadFile } from '../utils';

import styles from './ProfilingImportExportButtons.css';

import type { ProfilingDataExport } from './types';

export default function ProfilingImportExportButtons() {
  const { isProfiling, profilingData, rootID } = useContext(ProfilerContext);
  const store = useContext(StoreContext);
  const { profilerStore } = store;

  const inputRef = useRef<HTMLInputElement | null>(null);

  const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);

  const downloadData = useCallback(() => {
    if (rootID === null) {
      return;
    }

    if (profilingData !== null) {
      const profilingDataExport = prepareProfilingDataExport(profilingData);
      const date = new Date();
      const dateString = date
        .toLocaleDateString(undefined, {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        })
        .replace(/\//g, '-');
      const timeString = date
        .toLocaleTimeString(undefined, {
          hour12: false,
        })
        .replace(/:/g, '-');
      downloadFile(
        `profiling-data.${dateString}.${timeString}.json`,
        JSON.stringify(profilingDataExport, null, 2)
      );
    }
  }, [rootID, profilingData]);

  const uploadData = useCallback(() => {
    if (inputRef.current !== null) {
      inputRef.current.click();
    }
  }, []);

  const handleFiles = useCallback(() => {
    const input = inputRef.current;
    if (input !== null && input.files.length > 0) {
      const fileReader = new FileReader();
      fileReader.addEventListener('load', () => {
        try {
          const raw = ((fileReader.result: any): string);
          const profilingDataExport = ((JSON.parse(
            raw
          ): any): ProfilingDataExport);
          profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
            profilingDataExport
          );
        } catch (error) {
          modalDialogDispatch({
            type: 'SHOW',
            title: 'Import failed',
            content: (
              <Fragment>
                <div>The profiling data you selected cannot be imported.</div>
                {error !== null && (
                  <div className={styles.ErrorMessage}>{error.message}</div>
                )}
              </Fragment>
            ),
          });
        }
      });
      // TODO (profiling) Handle fileReader errors.
      fileReader.readAsText(input.files[0]);
    }
  }, [modalDialogDispatch, profilerStore]);

  return (
    <Fragment>
      <div className={styles.VRule} />
      <input
        ref={inputRef}
        className={styles.Input}
        type="file"
        onChange={handleFiles}
        tabIndex={-1}
      />
      <Button
        disabled={isProfiling}
        onClick={uploadData}
        title="Load profile..."
      >
        <ButtonIcon type="import" />
      </Button>
      <Button
        disabled={isProfiling || !profilerStore.didRecordCommits}
        onClick={downloadData}
        title="Save profile..."
      >
        <ButtonIcon type="export" />
      </Button>
    </Fragment>
  );
}