Fix ListView bug in Navigations

client/packages/openblocks/src/appView/AppViewInstance.tsx

@@ -76,8 +76,7 @@ export class AppViewInstance<I = any, O = any> {
 
     if (!appDsl) {
       if (!axiosIns && window.setupProxy) {
-        axiosIns = axios.create({ baseURL: baseUrl, withCredentials: true });
-        window.setupProxy(axiosIns, message);
+        axiosIns = window.setupProxy(axiosIns, message);
       }
       const data: ApplicationResp = await axiosIns
         .get(`/api/v1/applications/${this.appId}/view`)

client/packages/openblocks/src/comps/comps/layout/mobileTabLayout.tsx

@@ -5,7 +5,7 @@ import { manualOptionsControl } from "comps/controls/optionsControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
 import styled from "styled-components";
-import React, { Suspense, useContext, useState } from "react";
+import React, { Suspense, useContext, useRef, useState } from "react";
 import { registerLayoutMap } from "comps/comps/uiComp";
 import { AppSelectComp } from "comps/comps/layout/appSelectComp";
 import { NameAndExposingInfo } from "comps/utils/exposingTypes";
@@ -21,6 +21,8 @@ import RootWrapper from "components/RootWrapper"
 import { useSelector } from "react-redux";
 import { getBrandingConfig } from "redux/selectors/configSelectors";
 
+import { AppViewInstance, OpenblocksAppView } from "index.sdk"
+
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>
   import("antd-mobile/es/components/tab-bar/tab-bar").then((module) => ({
@@ -151,6 +153,20 @@ let MobileTabLayoutTmp = (function () {
     .build();
 })();
 
+function View(appId: string) {
+  const ref = useRef<AppViewInstance | null>(null);
+  if (!appId) {
+    return null;
+  }
+  return (
+    <OpenblocksAppView
+      ref={ref}
+      appId={appId}
+      baseUrl={window.location.origin}
+    />
+  )
+}
+
 MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   const [tabIndex, setTabIndex] = useState(0);
   const { readOnly } = useContext(ExternalEditorContext);
@@ -160,34 +176,35 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
     >
   ).filter((tab) => !tab.children.hidden.getView());
   const currentTab = tabViews[tabIndex];
-  // const appView = (currentTab &&
-  //   currentTab.children.app.getAppId() &&
-  //   currentTab.children.app.getView()) || (
-  //   <EmptyContent
-  //     text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
-  //     style={{ height: "100%", backgroundColor: "white" }}
-  //   />
-  // );
-  // Workaround until fix ListView bug
-  const appView = currentTab && currentTab.children.app.getAppId() ? (
-    <iframe
-      title={currentTab.children.app.getAppId()}
-      src={`${window.location.origin}/apps/${currentTab.children.app.getAppId()}?template=true`}
-      style={{
-        height: "100%",
-        width: "100%",
-        overflow: "hidden",
-        border: "none",
-        display: "block"
-      }}
-    >
-    </iframe>
-  ) : (
+  const appView = (currentTab &&
+    currentTab.children.app.getAppId() &&
+    View(currentTab.children.app.getAppId())) || (
     <EmptyContent
       text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
       style={{ height: "100%", backgroundColor: "white" }}
     />
-  )
+  );
+
+  // Workaround until fix ListView bug
+  // const appView = currentTab && currentTab.children.app.getAppId() ? (
+  //   <iframe
+  //     title={currentTab.children.app.getAppId()}
+  //     src={`${window.location.origin}/apps/${currentTab.children.app.getAppId()}?template=true`}
+  //     style={{
+  //       height: "100%",
+  //       width: "100%",
+  //       overflow: "hidden",
+  //       border: "none",
+  //       display: "block"
+  //     }}
+  //   >
+  //   </iframe>
+  // ) : (
+  //   <EmptyContent
+  //     text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
+  //     style={{ height: "100%", backgroundColor: "white" }}
+  //   />
+  // )
 
   const tabBarView = (
     <TabBarView

client/packages/openblocks/src/comps/comps/layout/navLayout.tsx

@@ -10,12 +10,13 @@ import { TopHeaderHeight } from "constants/style";
 import { Section } from "openblocks-design";
 import { trans } from "i18n";
 import { EditorContainer, EmptyContent } from "pages/common/styledComponent";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { isUserViewMode, useAppPathParam, useAppPageId } from "util/hooks";
 import RootWrapper from "components/RootWrapper"
 import { useSelector } from "react-redux";
 import { getBrandingConfig } from "redux/selectors/configSelectors";
+import { AppViewInstance, OpenblocksAppView } from "index.sdk";
 
 const StyledSide = styled(Layout.Sider)`
   max-height: calc(100vh - ${TopHeaderHeight});
@@ -62,6 +63,20 @@ let NavTmpLayout = (function () {
     .build();
 })();
 
+function View(appId: string) {
+  const ref = useRef<AppViewInstance | null>(null);
+  if (!appId) {
+    return null;
+  }
+  return (
+    <OpenblocksAppView
+      ref={ref}
+      appId={appId}
+      baseUrl={window.location.origin}
+    />
+  )
+}
+
 NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
   const pathParam = useAppPathParam();
   const [appPageId, updateHash] = useAppPageId();
@@ -170,6 +185,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
         selectedKey = firstItem[0];
       }
     }
+    console.log(selectedKey)
     setSelectedKey(selectedKey);
   }, [appPageId]);
 
@@ -178,7 +194,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
   let pageView = <EmptyContent text="" style={{ height: "100%" }} />;
   const selectedItem = itemKeyRecord[selectedKey];
   if (selectedItem && !selectedItem.children.hidden.getView()) {
-    const compView = selectedItem.children.action.getView();
+    //@ts-ignore
+    const compView = View(selectedItem.toJsonValue().action.comp.app.appId);
     if (compView) {
       pageView = compView;
     }

client/packages/openblocks/src/global.ts

@@ -6,6 +6,6 @@ declare global {
   interface Window {
     printPerf: () => void;
     __OPENBLOCKS_DEV__?: {};
-    setupProxy?: (axiosIns: AxiosInstance, message: unknown) => void;
+    setupProxy?: (axiosIns: AxiosInstance, message: unknown) => AxiosInstance;
   }
 }

proxy/src/main.ts

@@ -13,6 +13,7 @@ initI18n().then(() => {
 });
 
 let mockIns: MockAdapter;
+let axiosInstance: AxiosInstance;
 
 window.setupProxy = (axiosIns: AxiosInstance, messageIns: unknown) => {
   if (!mockIns) {
@@ -32,5 +33,7 @@ window.setupProxy = (axiosIns: AxiosInstance, messageIns: unknown) => {
       });
       console.warn("[PROXY]: Mock applied!");
     }
+    axiosInstance = axiosIns;
   }
+  return axiosInstance;
 };

proxy/window.d.ts

@@ -7,6 +7,6 @@ declare global {
   interface Window {
     sdk: unknown;
     uploadAvatar: (config: UploadRequestOption) => void;
-    setupProxy: (axiosIns: AxiosInstance, messageIns: unknown) => void;
+    setupProxy: (axiosIns: AxiosInstance, messageIns: unknown) => AxiosInstance;
   }
 }