Source: App/App.jsx

import React, { useState } from 'react';
import ContextMenu from 'context-menu';
import './App.css';
import { processSwagger } from 'translation-to-graphql';
import SplitPane from 'react-split-pane';
import Translation from '../Translation/Translation';
import Preview from '../Preview/Preview';
import FileTree from '../FileManagement/FileTree';
import 'context-menu/lib/styles.css';

/**
 * @file App
 * Represents the top-level componenet for the translation tool
 * @module App
 * @extends React.Component
 */
export default function TranslationTool() {
  const [swaggerFile, setSwaggerFile] = useState(null);
  const [swaggerName, setSwaggerName] = useState(null);
  const [translationFile, setTranslationFile] = useState(null);
  const [file, setFile] = useState(null);

  /**
   * Handle change of translation file
   * @method
   * @param {Object} translation - translation file
   */
  const handleTranslationChange = (translation) => {
    setTranslationFile(translation);
  };

  const handleFileChange = (file) => {
    setFile(file);
  };

  const handleOpenSwagger = (event) => {
    const fileReader = new FileReader();
    fileReader.addEventListener('load', () => {
      // parse JSON file
      const swagger = JSON.parse(fileReader.result);
      setSwaggerFile(processSwagger(swagger));
    });
    setSwaggerName(event.target.files[0].name);
    fileReader.readAsText(event.target.files[0]);
  };

  /**
   * Render
   * @method
   */

  return (
    <div className="container">
      <ContextMenu />
      <SplitPane split="vertical" defaultSize="20%" maxSize="20%">
        <FileTree onFileChange={handleFileChange} />
        <SplitPane
          split="vertical"
          defaultSize="50%"
          primary="second"
          paneStyle={{ overflow: 'scroll' }}
        >
          <div>
            <div className="swagger-upload">
              <h2>Swagger</h2>
              <div className="swagger-btn">
                <input
                  id="swagger"
                  type="file"
                  name="file"
                  onChange={handleOpenSwagger}
                  accept="application/JSON"
                />
                <label htmlFor="swagger" className="custom-file-action">
                  Open Swagger
                </label>
              </div>
              <div className="swagger-name">
                <p>{swaggerName}</p>
              </div>
            </div>
            <hr />
            <Translation
              onTranslationChange={(translation) =>
                handleTranslationChange(translation)
              }
              swaggerFile={swaggerFile}
            />
          </div>
          {translationFile && (
            <Preview
              translationFile={translationFile}
              swaggerFile={swaggerFile}
            />
          )}
        </SplitPane>
      </SplitPane>
    </div>
  );
}