svg-layout-designer-react/src/Components/App/Actions/MenuActions.ts

import { Dispatch, SetStateAction } from 'react';
import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { fetchConfiguration } from '../../API/api';
import { IEditorState } from '../../../Interfaces/IEditorState';
import { LoadState } from './Load';
import { GetDefaultEditorState } from '../../../utils/default';

export function NewEditor(
  setEditorState: Dispatch<SetStateAction<IEditorState>>,
  setLoaded: Dispatch<SetStateAction<boolean>>
): void {
  // Fetch the configuration from the API
  fetchConfiguration()
    .then((configuration: IConfiguration) => {
      // Set the editor from the given properties of the API
      const editorState: IEditorState = GetDefaultEditorState(configuration);

      setEditorState(editorState);
      setLoaded(true);
    }, (error) => {
      console.warn('[NewEditor] Could not fetch resource from API. Using default.', error);
      setLoaded(true);
    });
}

export function LoadEditor(
  files: FileList | null,
  setEditorState: Dispatch<SetStateAction<IEditorState>>,
  setLoaded: Dispatch<SetStateAction<boolean>>
): void {
  if (files === null) {
    return;
  }
  const file = files[0];
  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const result = reader.result as string;
    const editorState: IEditorState = JSON.parse(result);

    LoadState(editorState, setEditorState, setLoaded);
  });
  reader.readAsText(file);
}