fetch lowcoder-comps meta when app loads + set version no. when fetching latest lowcoder-comps

raheeliftikhar5 · raheeliftikhar5 · commit 25c3bfbd2d46 · 2024-09-26T21:34:18.000+05:00
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -56,6 +56,8 @@ import { buildMaterialPreviewURL } from "./util/materialUtils";
 import GlobalInstances from 'components/GlobalInstances';
 // import posthog from 'posthog-js'
 import { fetchHomeData } from "./redux/reduxActions/applicationActions";
+import { getNpmPackageMeta } from "./comps/utils/remote";
+import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -90,6 +92,7 @@ type AppIndexProps = {
   fetchHomeDataFinished: boolean;
   fetchConfig: (orgId?: string) => void;
   fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
+  fetchLowcoderCompVersions: () => void;
   getCurrentUser: () => void;
   favicon: string;
   brandName: string;
@@ -112,6 +115,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       this.props.fetchConfig(this.props.currentOrgId);
       if (!this.props.currentUserAnonymous) {
         this.props.fetchHomeData(this.props.currentUserAnonymous);
+        this.props.fetchLowcoderCompVersions();
       }
     }
   }
@@ -418,10 +422,20 @@ const mapDispatchToProps = (dispatch: any) => ({
     dispatch(fetchUserAction());
   },
   fetchConfig: (orgId?: string) => dispatch(fetchConfigAction(orgId)),
-
   fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
     dispatch(fetchHomeData({}));
-  }
+  },
+  fetchLowcoderCompVersions: async () => {
+    try {
+      dispatch(setLowcoderCompsLoading(true)); 
+      const packageMeta = await getNpmPackageMeta('lowcoder-comps');
+      if (packageMeta?.versions) {
+        dispatch(packageMetaReadyAction('lowcoder-comps', packageMeta));
+      }
+    } catch (_) {
+      dispatch(setLowcoderCompsLoading(false)); 
+    }
+  },
 });
 
 const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex);
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -21,6 +21,7 @@ import { ApplicationCategoriesEnum } from "constants/applicationConstants";
 import { BoolControl } from "../controls/boolControl";
 import { getNpmPackageMeta } from "../utils/remote";
 import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
+import type { AppState } from "@lowcoder-ee/redux/reducers";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -195,6 +196,7 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
 };
 
 function AppSettingsModal(props: ChildrenInstance) {
+  const lowcoderCompsMeta = useSelector((state: AppState) => state.npmPlugin.packageMeta['lowcoder-comps']);
   const [lowcoderCompVersions, setLowcoderCompVersions] = useState(['latest']);
   const {
     themeList,
@@ -209,7 +211,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     preventAppStylesOverwriting,
     lowcoderCompVersion,
   } = props;
-  
+
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
     value: theme.id + "",
@@ -230,14 +232,11 @@ function AppSettingsModal(props: ChildrenInstance) {
   }, [themeWithDefault]);
   
   useEffect(() => {
-    const fetchCompsPackageMeta = async () => {
-      const packageMeta = await getNpmPackageMeta('lowcoder-comps');
-      if (packageMeta?.versions) {
-        setLowcoderCompVersions(Object.keys(packageMeta.versions).reverse())
-      }
-    }
-    fetchCompsPackageMeta();
-  }, [])
+    setLowcoderCompVersions([
+      'latest',
+      ...Object.keys(lowcoderCompsMeta.versions).reverse()
+    ])
+  }, [lowcoderCompsMeta])
 
 
   const DropdownItem = (params: { value: string }) => {
diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
@@ -14,6 +14,8 @@ import { withErrorBoundary } from "comps/generators/withErrorBoundary";
 import { EditorContext } from "@lowcoder-ee/comps/editorState";
 import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
 import React from "react";
+import type { AppState } from "@lowcoder-ee/redux/reducers";
+import { useSelector } from "react-redux";
 
 const ViewError = styled.div`
   display: flex;
@@ -60,11 +62,14 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView
   const editorState = useContext(EditorContext);
   const compState = useContext(CompContext);
   const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion || 'latest';
+  const latestLowcoderCompsVersion = useSelector((state: AppState) => state.npmPlugin.packageVersion['lowcoder-comps']);
 
   let packageVersion = 'latest';
   // lowcoder-comps's package version
   if (isLowcoderComp) {
-    packageVersion = lowcoderCompPackageVersion;
+    packageVersion = lowcoderCompPackageVersion === 'latest' && Boolean(latestLowcoderCompsVersion)
+      ? latestLowcoderCompsVersion
+      : lowcoderCompPackageVersion;
   }
   // component plugin's package version
   else if (compState.comp?.comp?.version) {
diff --git a/client/packages/lowcoder/src/constants/reduxActionConstants.ts b/client/packages/lowcoder/src/constants/reduxActionConstants.ts
@@ -185,6 +185,7 @@ export const ReduxActionTypes = {
   /* npm plugin */
   PACKAGE_META_READY: "PACKAGE_META_READY",
   SELECT_PACKAGE_VERSION: "SELECT_PACKAGE_VERSION",
+  LOWCODER_COMPS_LOADING: "LOWCODER_COMPS_LOADING",
 
   /* js library */
   FETCH_JS_LIB_METAS: "FETCH_JS_LIB_METAS",
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -307,8 +307,6 @@ export function HomeLayout(props: HomeLayoutProps) {
 
   const { breadcrumb = [], elements = [], localMarketplaceApps = [], globalMarketplaceApps = [], mode } = props;
 
-  console.log("HomeLayout props: ", props);
-
   const categoryOptions = [
     { label: <FilterMenuItem>{trans("home.allCategories")}</FilterMenuItem>, value: 'All' },
     ...Object.entries(ApplicationCategoriesEnum).map(([key, value]) => ({
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -35,7 +35,7 @@ import {
   EnterpriseIcon,
   UserIcon,
 } from "lowcoder-design";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
 import { fetchSubscriptionsAction } from "redux/reduxActions/subscriptionActions";
 import { getHomeOrg, normalAppListSelector } from "redux/selectors/applicationSelector";
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -35,6 +35,7 @@ import React from "react";
 import dayjs from "dayjs";
 import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 import { notificationInstance } from "components/GlobalInstances";
+import { AppState } from "@lowcoder-ee/redux/reducers";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -55,6 +56,7 @@ const AppEditor = React.memo(() => {
   const fetchOrgGroupsFinished = useSelector(getFetchOrgGroupsFinished);
   const isCommonSettingsFetching = useSelector(getIsCommonSettingFetching);
   const application = useSelector(currentApplication);
+  const isLowcoderCompLoading = useSelector((state: AppState) => state.npmPlugin.loading.lowcoderComps);
 
   const isUserViewMode = useMemo(
     () => params.viewMode ? isUserViewModeCheck : true,
@@ -184,8 +186,10 @@ const AppEditor = React.memo(() => {
   }, [viewMode, applicationId, dispatch, fetchJSDataSourceByApp]);
 
   useEffect(() => {
-    fetchApplication();
-  }, [fetchApplication]);
+    if(!isLowcoderCompLoading) {
+      fetchApplication();
+    }
+  }, [isLowcoderCompLoading, fetchApplication]);
 
   const fallbackUI = useMemo(() => (
     <Flex align="center" justify="center" vertical style={{
diff --git a/client/packages/lowcoder/src/redux/reducers/npmPluginReducers/index.ts b/client/packages/lowcoder/src/redux/reducers/npmPluginReducers/index.ts
@@ -5,11 +5,17 @@ import { NpmPackageMeta } from "types/remoteComp";
 export interface NPMPluginState {
   packageMeta: Record<string, NpmPackageMeta>;
   packageVersion: Record<string, string>;
+  loading: {
+    lowcoderComps: boolean,
+  },
 }
 
 const initialState: NPMPluginState = {
   packageMeta: {},
   packageVersion: {},
+  loading: {
+    lowcoderComps: false,
+  }
 };
 
 const npmPluginReducer = createReducer(initialState, {
@@ -45,7 +51,6 @@ const npmPluginReducer = createReducer(initialState, {
       }
       selectVersions[i] = defaultVersion;
     });
-
     return {
       ...state,
       packageMeta: {
@@ -58,6 +63,17 @@ const npmPluginReducer = createReducer(initialState, {
       },
     };
   },
+  [ReduxActionTypes.LOWCODER_COMPS_LOADING]: (
+    state: NPMPluginState,
+    action: ReduxAction<{loading: boolean}>
+  ): NPMPluginState => {
+    return {
+      ...state,
+      loading: {
+        lowcoderComps: action.payload.loading,
+      },
+    };
+  },
 });
 
 export default npmPluginReducer;
diff --git a/client/packages/lowcoder/src/redux/reduxActions/npmPluginActions.ts b/client/packages/lowcoder/src/redux/reduxActions/npmPluginActions.ts
@@ -14,3 +14,10 @@ export const selectNpmPluginVersionAction = (packageName: string, version: strin
     [packageName]: version,
   },
 });
+
+export const setLowcoderCompsLoading = (loading: boolean) => ({
+  type: ReduxActionTypes.LOWCODER_COMPS_LOADING,
+  payload: {
+    loading,
+  },
+});
