Refactor UI's props

src/Components/Editor/Editor.tsx

@@ -279,14 +279,11 @@ export function Editor(props: IEditorProps): JSX.Element {
   return (
     <div ref={editorRef} className="Editor font-sans h-full">
       <UI
-        selectedContainer={selected}
-        current={current}
-        history={history}
-        historyCurrentStep={historyCurrentStep}
-        availableContainers={configuration.AvailableContainers}
-        availableSymbols={configuration.AvailableSymbols}
-        categories={configuration.Categories}
-        apiConfiguration={configuration.APIConfiguration}
+        editorState={{
+          configuration: props.configuration,
+          history,
+          historyCurrentStep
+        }}
         selectContainer={(container) => setNewHistory(
           SelectContainer(
             container,

src/Components/UI/UI.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import { ElementsList } from '../ElementsList/ElementsList';
 import { History } from '../History/History';
-import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { Bar } from '../Bar/Bar';
-import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
 import { Symbols } from '../Symbols/Symbols';
 import { SymbolsSidebar } from '../SymbolsList/SymbolsList';
 import { PropertyType } from '../../Enums/PropertyType';
 import { Messages } from '../Messages/Messages';
-import { ICategory } from '../../Interfaces/ICategory';
 import { Sidebar } from '../Sidebar/Sidebar';
 import { Components } from '../Components/Components';
 import { Viewer } from '../Viewer/Viewer';
@@ -19,17 +14,11 @@ import { IMessage } from '../../Interfaces/IMessage';
 import { DISABLE_API } from '../../utils/default';
 import { UseWorker, UseAsync } from './UseWorker';
 import { FindContainerById } from '../../utils/itertools';
-import { IAPIConfiguration } from '../../Interfaces/IAPIConfiguration';
+import { IEditorState } from '../../Interfaces/IEditorState';
+import { GetCurrentHistoryState } from '../Editor/Editor';
 
 export interface IUIProps {
-  selectedContainer: IContainerModel | undefined
-  current: IHistoryState
-  history: IHistoryState[]
-  historyCurrentStep: number
-  availableContainers: IAvailableContainer[]
-  availableSymbols: IAvailableSymbol[]
-  categories: ICategory[]
-  apiConfiguration: IAPIConfiguration | undefined
+  editorState: IEditorState
   selectContainer: (containerId: string) => void
   deleteContainer: (containerId: string) => void
   onPropertyChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
@@ -67,21 +56,23 @@ function UseSetOrToggleSidebar(
   };
 }
 
-export function UI(props: IUIProps): JSX.Element {
+export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
   const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
   const [messages, setMessages] = React.useState<IMessage[]>([]);
+  const current = GetCurrentHistoryState(editorState.history, editorState.historyCurrentStep);
+  const configuration = editorState.configuration;
 
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   if (window.Worker && !DISABLE_API) {
     UseWorker(
-      props.current,
-      props.apiConfiguration?.apiGetFeedbackUrl,
+      current,
+      configuration.APIConfiguration?.apiGetFeedbackUrl,
       setMessages
     );
   } else if (!DISABLE_API) {
     UseAsync(
-      props.current,
-      props.apiConfiguration?.apiGetFeedbackUrl,
+      current,
+      configuration.APIConfiguration?.apiGetFeedbackUrl,
       setMessages
     );
   }
@@ -94,61 +85,63 @@ export function UI(props: IUIProps): JSX.Element {
   let leftChildren: JSX.Element = (<></>);
   let rightChildren: JSX.Element = (<></>);
 
-  const mainContainer = FindContainerById(props.current.containers, props.current.mainContainer)
+  const mainContainer = FindContainerById(current.containers, current.mainContainer);
 
   if (mainContainer === undefined) {
     throw new Error('Tried to initialized UI but there is no main container!');
   }
 
+  const selectedContainer = FindContainerById(current.containers, current.selectedContainerId);
+
   switch (selectedSidebar) {
     case SidebarType.Components:
       leftSidebarTitle = 'Components';
       leftChildren = <Components
-        selectedContainer={props.selectedContainer}
-        componentOptions={props.availableContainers}
-        categories={props.categories}
-        buttonOnClick={props.addContainer}
+        selectedContainer={selectedContainer}
+        componentOptions={configuration.AvailableContainers}
+        categories={configuration.Categories}
+        buttonOnClick={methods.addContainer}
       />;
       rightSidebarTitle = 'Elements';
       rightChildren = <ElementsList
-        containers={props.current.containers}
+        containers={current.containers}
         mainContainer={mainContainer}
-        symbols={props.current.symbols}
-        selectedContainer={props.selectedContainer}
-        onPropertyChange={props.onPropertyChange}
-        selectContainer={props.selectContainer}
-        addContainer={props.addContainerAt}
+        symbols={current.symbols}
+        selectedContainer={selectedContainer}
+        onPropertyChange={methods.onPropertyChange}
+        selectContainer={methods.selectContainer}
+        addContainer={methods.addContainerAt}
       />;
       break;
 
     case SidebarType.Symbols:
       leftSidebarTitle = 'Symbols';
       leftChildren = <Symbols
-        componentOptions={props.availableSymbols}
-        buttonOnClick={props.addSymbol}
+        componentOptions={configuration.AvailableSymbols}
+        buttonOnClick={methods.addSymbol}
       />;
       rightSidebarTitle = 'Symbols';
       rightChildren = <SymbolsSidebar
-        selectedSymbolId={props.current.selectedSymbolId}
-        symbols={props.current.symbols}
-        onPropertyChange={props.onSymbolPropertyChange}
-        selectSymbol={props.selectSymbol}
+        selectedSymbolId={current.selectedSymbolId}
+        symbols={current.symbols}
+        onPropertyChange={methods.onSymbolPropertyChange}
+        selectSymbol={methods.selectSymbol}
       />;
       break;
 
     case SidebarType.History:
       leftSidebarTitle = 'Timeline';
       leftChildren = <History
-        history={props.history}
-        historyCurrentStep={props.historyCurrentStep}
-        jumpTo={props.loadState}
+        history={editorState.history}
+        historyCurrentStep={editorState.historyCurrentStep}
+        jumpTo={methods.loadState}
       />;
       break;
 
     case SidebarType.Messages:
       leftSidebarTitle = 'Messages';
       leftChildren = <Messages
-        historyState={props.current}
+        historyState={current}
         messages={messages}
         clearMessage={() => setMessages([])}
       />;
@@ -157,8 +150,8 @@ export function UI(props: IUIProps): JSX.Element {
     case SidebarType.Settings:
       leftSidebarTitle = 'Settings';
       leftChildren = <Settings
-        saveEditorAsJSON={props.saveEditorAsJSON}
-        saveEditorAsSVG={props.saveEditorAsSVG}
+        saveEditorAsJSON={methods.saveEditorAsJSON}
+        saveEditorAsSVG={methods.saveEditorAsSVG}
       />;
       break;
   }
@@ -166,7 +159,7 @@ export function UI(props: IUIProps): JSX.Element {
   const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
   const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
 
-  let isLeftSidebarOpenClasses = new Set<string>([
+  const isLeftSidebarOpenClasses = new Set<string>([
     'left-sidebar',
     'left-16',
     '-bottom-full',
@@ -222,9 +215,9 @@ export function UI(props: IUIProps): JSX.Element {
       <Viewer
         isLeftSidebarOpen={isLeftSidebarOpen}
         isRightSidebarOpen={isRightSidebarOpen}
-        current={props.current}
-        selectedContainer={props.selectedContainer}
-        selectContainer={props.selectContainer}
+        current={current}
+        selectedContainer={selectedContainer}
+        selectContainer={methods.selectContainer}
       />
       <Sidebar
         className={`right-sidebar ${isRightSidebarOpenClasses}`}