refactor: simplify state management, part 1 (#515)

Author: magicmatatjahu

package-lock.json

@@ -45,7 +45,8 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "2.4.0",
     "react-icons": "^4.6.0",
-    "reactflow": "^11.2.0"
+    "reactflow": "^11.2.0",
+    "zustand": "^4.1.4"
   },
   "scripts": {
     "dev": "npm run start",

package.json

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import SplitPane from './SplitPane';
 import { Editor } from './Editor/Editor';
 import { Navigation } from './Navigation';
@@ -8,17 +6,19 @@ import { NewFileModal, RedirectedModal } from './Modals';
 import { VisualiserTemplate } from './Visualiser';
 
 import { debounce } from '../helpers';
-import state from '../state';
+import { usePanelsState } from '../state/index.state';
+
+import type { FunctionComponent } from 'react';
 
 interface ContentProps {}
 
-export const Content: React.FunctionComponent<ContentProps> = () => { // eslint-disable-line sonarjs/cognitive-complexity
-  const sidebarState = state.useSidebarState();
+export const Content: FunctionComponent<ContentProps> = () => { // eslint-disable-line sonarjs/cognitive-complexity
+  const { show, secondaryPanelType } = usePanelsState();
 
-  const navigationEnabled = sidebarState.panels.navigation.get();
-  const editorEnabled = sidebarState.panels.editor.get();
-  const viewEnabled = sidebarState.panels.view.get();
-  const viewType = sidebarState.panels.viewType.get();
+  const navigationEnabled = show.primarySidebar;
+  const editorEnabled = show.primaryPanel;
+  const viewEnabled = show.secondaryPanel;
+  const viewType = secondaryPanelType;
 
   const splitPosLeft = 'splitPos:left';
   const splitPosRight = 'splitPos:right';
@@ -74,4 +74,4 @@ export const Content: React.FunctionComponent<ContentProps> = () => { // eslint-
       </div>
     </div>
   );
-};
+};

src/components/Content.tsx

@@ -1,21 +1,24 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { BsFillCheckCircleFill } from 'react-icons/bs';
 import toast from 'react-hot-toast';
 
-import { ConfirmModal } from './index';
 import examples from '../../examples';
+
+import { ConfirmModal } from './ConfirmModal';
 import { useServices } from '../../services';
-import state from '../../state';
+import { usePanelsState, panelsState } from '../../state/index.state';
+
+import type { ComponentType, MouseEventHandler, FunctionComponent } from 'react';
 
 interface TemplateListItemProps {
   title: string;
-  description: React.ComponentType;
+  description: ComponentType;
   isSelected: boolean;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  onClick: MouseEventHandler<HTMLButtonElement>;
   key: string;
 }
 
-const TemplateListItem: React.FunctionComponent<TemplateListItemProps> = ({ title, description: Description, onClick, isSelected }) => {
+const TemplateListItem: FunctionComponent<TemplateListItemProps> = ({ title, description: Description, onClick, isSelected }) => {
   const containerStyles = isSelected ? 'border-pink-500' : 'border-gray-200';
   const textStyles = isSelected ? 'text-pink-600' : 'text-gray-600';
 
@@ -32,15 +35,14 @@ const TemplateListItem: React.FunctionComponent<TemplateListItemProps> = ({ titl
   );
 };
 
-export const NewFileModal: React.FunctionComponent = () => {
+export const NewFileModal: FunctionComponent = () => {
   const { editorSvc } = useServices();
-  const sidebarState = state.useSidebarState();
-  const newFileEnabled = sidebarState.panels.newFile.get();
+  const newFileOpened = usePanelsState(state => state.newFileOpened);
   const [selectedTemplate, setSelectedTemplate] = useState({ title: '', template: '' });
 
   const onSubmit = () => {
     editorSvc.updateState({ content: selectedTemplate.template, updateModel: true });
-    sidebarState.panels.newFile.set(false);
+    panelsState.setState({ newFileOpened: false });
     setSelectedTemplate({ title: '', template: '' });
 
     toast.success(
@@ -51,7 +53,7 @@ export const NewFileModal: React.FunctionComponent = () => {
   };
 
   const onCancel = () => {
-    sidebarState.panels.newFile.set(false);
+    panelsState.setState({ newFileOpened: false });
     setSelectedTemplate({ title: '', template: '' });
   };
 
@@ -64,7 +66,7 @@ export const NewFileModal: React.FunctionComponent = () => {
       title="AsyncAPI Templates - Start with our template examples"
       confirmText="Use Template"
       confirmDisabled={!selectedTemplate.template}
-      show={newFileEnabled}
+      show={newFileOpened}
       onSubmit={onSubmit}
       onCancel={onCancel}
     >
@@ -103,4 +105,4 @@ export const NewFileModal: React.FunctionComponent = () => {
       </div>
     </ConfirmModal>
   );
-};
+};

src/components/Modals/NewFileModal.tsx

@@ -1,108 +1,103 @@
-import React from 'react';
 import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile } from 'react-icons/vsc';
 
 import { Tooltip } from './common';
 import { SettingsModal } from './Modals/Settings/SettingsModal';
 
-import state from '../state';
+import { usePanelsState, panelsState } from '../state/index.state';
 
-type NavItemType = 'navigation' | 'editor' | 'template' | 'visualiser';
+import type { FunctionComponent, ReactNode } from 'react';
+import type { PanelsState } from '../state/panels.state';
 
-function setActiveNav(navItem: NavItemType) {
-  const panels = state.sidebar.panels;
-  const panelsState = panels.get();
+function updateState(panelName: keyof PanelsState['show'], type?: PanelsState['secondaryPanelType']) {
+  const settingsState = panelsState.getState();
+  let secondaryPanelType = settingsState.secondaryPanelType;
+  const newShow = { ...settingsState.show };
 
-  const newState = {
-    ...panelsState,
-  };
-
-  if (navItem === 'template' || navItem === 'visualiser') {
+  if (type === 'template' || type === 'visualiser') {
     // on current type
-    if (newState.viewType === navItem) {
-      newState.view = !newState.view;
+    if (secondaryPanelType === type) {
+      newShow[`${panelName}`] = !newShow[`${panelName}`];
     } else {
-      newState.viewType = navItem;
-      if (newState.view === false) {
-        newState.view = true;
+      secondaryPanelType = type;
+      if (newShow[`${panelName}`] === false) {
+        newShow[`${panelName}`] = true;
       }
     }
   } else {
-    newState[`${navItem}`] = !newState[`${navItem}`];
+    newShow[`${panelName}`] = !newShow[`${panelName}`];
   }
 
-  if (newState.navigation && !newState.editor && !newState.view) {
-    panels.set({
-      ...newState,
-      view: true,
-    });
-    return;
-  }
-  if (!Object.values(newState).some(itemNav => itemNav === true)) {
-    panels.set({
-      ...newState,
-      view: true,
-    });
-    return;
+  if (!newShow.primaryPanel && !newShow.secondaryPanel) {
+    newShow.secondaryPanel = true;
   }
 
-  panels.set(newState);
+  panelsState.setState({
+    show: newShow,
+    secondaryPanelType,
+  });
 }
 
 interface NavItem {
   name: string;
   title: string;
-  isActive: () => boolean;
-  icon: React.ReactNode;
-  tooltip: React.ReactNode;
+  isActive: boolean;
+  updateState?: () => void;
+  icon: ReactNode;
+  tooltip: ReactNode;
 }
 
 interface SidebarProps {}
 
-export const Sidebar: React.FunctionComponent<SidebarProps> = () => {
-  const sidebarState = state.useSidebarState();
+export const Sidebar: FunctionComponent<SidebarProps> = () => {
+  const { show, secondaryPanelType } = usePanelsState();
 
-  if (sidebarState.show.get() === false) {
+  if (show.activityBar === false) {
     return null;
   }
 
   const navigation: NavItem[] = [
     // navigation
     {
-      name: 'navigation',
+      name: 'primarySidebar',
       title: 'Navigation',
-      isActive: () => sidebarState.panels.navigation.get(),
+      isActive: show.primarySidebar,
+      updateState: () => updateState('primarySidebar'),
       icon: <VscListSelection className="w-5 h-5" />,
       tooltip: 'Navigation',
     },
     // editor
     {
-      name: 'editor',
+      name: 'primaryPanel',
       title: 'Editor',
-      isActive: () => sidebarState.panels.editor.get(),
+      isActive: show.primaryPanel,
+      updateState: () => updateState('primaryPanel'),
       icon: <VscCode className="w-5 h-5" />,
       tooltip: 'Editor',
     },
     // template
     {
       name: 'template',
       title: 'Template',
-      isActive: () => sidebarState.panels.view.get() && sidebarState.panels.viewType.get() === 'template',
+      isActive: show.secondaryPanel && secondaryPanelType === 'template',
+      updateState: () => updateState('secondaryPanel', 'template'),
       icon: <VscOpenPreview className="w-5 h-5" />,
       tooltip: 'HTML preview',
     },
     // visuliser
     {
       name: 'visualiser',
       title: 'Visualiser',
-      isActive: () => sidebarState.panels.view.get() && sidebarState.panels.viewType.get() === 'visualiser',
+      isActive: show.secondaryPanel && secondaryPanelType === 'visualiser',
+      updateState: () => updateState('secondaryPanel', 'visualiser'),
       icon: <VscGraph className="w-5 h-5" />,
       tooltip: 'Blocks visualiser',
     },
     // newFile
     {
       name: 'newFile',
       title: 'New file',
-      isActive: () => false,
+      isActive: false,
+      updateState: () => panelsState.setState({ newFileOpened: true }),
       icon: <VscNewFile className="w-5 h-5" />,
       tooltip: 'New file',
     },
@@ -115,11 +110,11 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = () => {
           <Tooltip content={item.tooltip} placement='right' hideOnClick={true} key={item.name}>
             <button
               title={item.title}
-              onClick={() => setActiveNav(item.name as NavItemType)}
+              onClick={() => item.updateState?.()}
               className={'flex text-sm focus:outline-none border-box p-2'}
               type="button"
             >
-              <div className={item.isActive() ? 'bg-gray-600 p-2 rounded text-white' : 'p-2 text-gray-500 hover:text-white'}>
+              <div className={item.isActive ? 'bg-gray-600 p-2 rounded text-white' : 'p-2 text-gray-500 hover:text-white'}>
                 {item.icon}
               </div>
             </button>

src/components/Sidebar.tsx

@@ -0,0 +1,26 @@
+import { AbstractService } from './abstract.service';
+
+import { convert } from '@asyncapi/converter';
+
+import type { ConvertVersion, ConvertOptions } from '@asyncapi/converter';
+
+export class ConverterService extends AbstractService {
+  async convert(
+    spec: string,
+    version?: ConvertVersion,
+    options?: ConvertOptions,
+  ): Promise<string> {
+    version = version || this.svcs.specificationSvc.getLastVersion();
+
+    try {
+      const converted = convert(spec, version, options);
+      if (typeof converted === 'object') {
+        return JSON.stringify(converted, undefined, 2);
+      }
+      return converted;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+}