Source: Popup/AddFilePopup/AddFilePopup.jsx

import React, { useState, useEffect } from 'react';
import './AddFilePopup.css';
import { FaFile, FaFolder } from 'react-icons/fa';
import { processSwagger } from 'translation-to-graphql';

export default function AddFilePopup({
  selected,
  close,
  newSwaggerFile,
  newTranslationFile,
}) {
  const [activeMenuItem, setActiveMenuItem] = useState(selected);
  const [translationName, setTranslationName] = useState('');

  useEffect(() => {
    setActiveMenuItem(selected);
  }, [selected]);

  const handleCreate = () => {
    newTranslationFile(translationName);
    close();
  };

  const handleCancel = () => {
    close();
  };

  const handleMenuClick = (event) => {
    setActiveMenuItem(event.target.innerText.trim());
  };

  const handleTranslationName = (event) => {
    setTranslationName(event.target.value);
  };

  /**
   * Handling opening of swagger file button
   * @method
   * @param {ChangeEvent<HTMLInputElement>} event - event containing name of the swagger file
   */
  const handleOpenSwagger = (event) => {
    ((swagger) => {
      const fileReader = new FileReader();
      fileReader.addEventListener('load', () => {
        // parse JSON file
        const result = JSON.parse(fileReader.result);
        newSwaggerFile(processSwagger(result), swagger.name);
      });
      fileReader.readAsText(swagger);
    })(event.target.files[0]);
    close();
  };

  return (
    <div className="modal">
      <div className="header"> Add Files </div>

      <div className="content">
        <div className="menu">
          <div
            className="menu-item"
            onClick={handleMenuClick}
            style={{
              background: `${
                activeMenuItem === 'New Translation File'
                  ? 'lightsalmon'
                  : 'lightgrey'
              }`,
            }}
          >
            <FaFile /> New Translation File
          </div>
          <div
            className="menu-item"
            onClick={handleMenuClick}
            style={{
              background: `${
                activeMenuItem === 'New Translation File'
                  ? 'lightgrey'
                  : 'lightsalmon'
              }`,
            }}
          >
            <FaFolder /> Upload Swagger File
          </div>
        </div>

        <div className="form-data">
          {activeMenuItem === 'New Translation File' ? (
            <div className="new-file">
              <span className="file-name">File Name</span>
              <div className="file-input">
                <input
                  type="text"
                  name="translationName"
                  value={translationName}
                  onChange={handleTranslationName}
                />{' '}
                .json
              </div>
            </div>
          ) : (
            <div className="new-file">
              <div className="file-input">
                <input
                  id="swagger"
                  type="file"
                  name="file"
                  onChange={handleOpenSwagger}
                  accept="application/JSON"
                />
                <label htmlFor="swagger" className="custom-file-action">
                  Upload Swagger
                </label>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="actions">
        <button className="btn-create" onClick={handleCreate}>
          Create
        </button>
        <button className="btn-cancel" onClick={handleCancel}>
          Cancel
        </button>
      </div>
    </div>
  );
}