Make it so you can change tabs from menu

Author: alan412

src/App.tsx

@@ -53,12 +53,14 @@ const App: React.FC = () => {
   const [toolboxSettingsModalIsOpen, setToolboxSettingsModalIsOpen] = React.useState(false);
   const [project, setProject] = React.useState<commonStorage.Project | null>(null);
   const [tabItems, setTabItems] = React.useState<Tabs.TabItem[]>([]);
+  const [activeTab, setActiveTab] = React.useState('');
 
   const [shownPythonToolboxCategories, setShownPythonToolboxCategories] = React.useState<Set<string>>(new Set());
   const blocksEditor = React.useRef<editor.Editor | null>(null);
   const [triggerPythonRegeneration, setTriggerPythonRegeneration] = React.useState(0);
   const generatorContext = React.useRef<GeneratorContext | null>(null);
   const blocklyComponent = React.useRef<BlocklyComponentType | null>(null);
+  
 
   const [leftCollapsed, setLeftCollapsed] = React.useState(false);
   const [rightCollapsed, setRightCollapsed] = React.useState(false);
@@ -136,10 +138,11 @@ const App: React.FC = () => {
           { key: opmode.modulePath, title: opmode.className, type: Tabs.TabType.OPMODE }
         );
       });
-      setTabItems(myTabs);      
+      setTabItems(myTabs);    
+      setActiveTab(project.modulePath);  
     }
     else{
-      setTabItems([]);
+      //setTabItems([]);
     }
   }, [project]);
 
@@ -237,6 +240,12 @@ const areBlocksModified = (): boolean => {
   }
   return false;
 }
+const changeModule = async (module : commonStorage.Module | null) =>{
+  if(currentModule && areBlocksModified()){
+    await saveBlocks();
+  }
+  setCurrentModule(module);
+}
 
 const { Sider } = Antd.Layout;
 
@@ -276,20 +285,20 @@ return (
           <Menu.Component
             storage={storage}
             setAlertErrorMessage={setAlertErrorMessage}
-            saveBlocks={saveBlocks}
-            areBlocksModified={areBlocksModified}
-            currentModule={currentModule}
-            setCurrentModule={setCurrentModule}
+            gotoTab={setActiveTab}
             project={project}
             setProject={setProject}
           />
         </Sider>
         <Antd.Layout>
           <Tabs.Component
             tabList={tabItems}
+            activeTab={activeTab}
+            setTabList={setTabItems}
             setAlertErrorMessage={setAlertErrorMessage}
             currentModule={currentModule}
-            setCurrentModule={setCurrentModule}
+            setCurrentModule={changeModule}
+            project={project}
           />
           <Antd.Splitter>
             {/*

src/reactComponents/Menu.tsx

@@ -18,10 +18,7 @@ import {
 export interface MenuProps {
     setAlertErrorMessage: (message: string) => void;
     storage: commonStorage.Storage | null;
-    currentModule: commonStorage.Module | null;
-    setCurrentModule: (module: commonStorage.Module | null) => void;
-    saveBlocks: () => Promise<boolean>;
-    areBlocksModified: () => boolean;
+    gotoTab: (tabKey : string) => void;
     project: commonStorage.Project | null;
     setProject: (project: commonStorage.Project | null) => void;
 }
@@ -149,34 +146,11 @@ export function Component(props: MenuProps) {
             }
         });
     };
-    const moduleFromPath = (key : string) : (commonStorage.Module | null) =>{
-        let foundModule = null;
-
-        if(props.project){
-            if (key == props.project.modulePath){
-                foundModule = props.project;
-                return foundModule;
-            }
-            props.project.mechanisms.forEach((mechanism) => {
-                if(key == mechanism.modulePath){
-                    foundModule = mechanism;
-                    return foundModule;
-                }
-            });
-            props.project.opModes.forEach((opmode) => {
-                if(key == opmode.modulePath){
-                    foundModule = opmode;
-                    return foundModule;
-                }
-            });
-        }
-
-        return foundModule;
-    };
+    
     const handleSelect: Antd.MenuProps['onSelect'] = ({ key }) => {
-        let newModule = moduleFromPath(key);
+        let newModule = props.project ? commonStorage.findModuleInProject(props.project, key) : null;
         if(newModule){
-            props.setCurrentModule(newModule);
+            props.gotoTab(newModule.modulePath);
         }
         else{
             // TODO: It wasn't a module, so do the other thing...

src/reactComponents/Tabs.tsx

@@ -44,8 +44,11 @@ export interface TabItem {
 
 export interface TabsProps {
   tabList: TabItem[];
+  setTabList: (items: TabItem[]) => void;
+  activeTab: string;
+  project: commonStorage.Project | null;
   setAlertErrorMessage: (message: string) => void;
-  currentModule: commonStorage.Module | null; 
+  currentModule: commonStorage.Module | null;
   setCurrentModule: (module: commonStorage.Module | null) => void;
 }
 
@@ -61,15 +64,23 @@ function getIcon(type: TabType) {
 
 export function Component(props: TabsProps) {
   const { t } = I18Next.useTranslation();
-  
-  const [items, setItems] = React.useState<TabsProps['tabList']>(props.tabList);
-  const [activeKey, setActiveKey] = React.useState('1');
- 
+
+  const [activeKey, setActiveKey] = React.useState(props.activeTab);
+
   const onChange = (key: string) => {
-    console.log(key);
+    if (props.project) {
+      props.setCurrentModule(commonStorage.findModuleInProject(props.project, key));
+      setActiveKey(key);
+    }
   }
+  React.useEffect(() => {
+    if (activeKey != props.activeTab) {
+      onChange(props.activeTab);
+    }
+  }, [props.activeTab]);
 
   const onEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
+    const items = props.tabList;
     if (action === 'remove') {
       if (!items) return;
       const targetIndex = items.findIndex((item) => item.key === targetKey);
@@ -81,16 +92,15 @@ export function Component(props: TabsProps) {
         setActiveKey(newActiveKey);
       }
 
-      setItems(newItems);
+      props.setTabList(newItems);
     };
   };
 
-
   return (
     <Antd.Tabs type="editable-card"
       onChange={onChange}
       onEdit={onEdit}
-      defaultActiveKey={props.tabList.length > 1 ? props.tabList[0].key : undefined}
+      activeKey={activeKey}
       tabBarStyle={{ padding: 0, margin: 0 }}
       hideAdd={false}
       items={props.tabList.map((tab) => {