added marketplace route

lowcoder-org · FalkWolsky · Feb 21, 2024 · Feb 20, 2024 · Feb 21, 2024 · Feb 21, 2024
commit 3ff918e5f24ca80367054046aade47906d90daae
diff --git a/client/packages/lowcoder-design/src/icons/icon-application-home.svg b/client/packages/lowcoder-design/src/icons/icon-application-home.svg
diff --git a/client/packages/lowcoder-design/src/icons/icon-application-marketplace-active.svg b/client/packages/lowcoder-design/src/icons/icon-application-marketplace-active.svg
diff --git a/client/packages/lowcoder-design/src/icons/icon-application-marketplace.svg b/client/packages/lowcoder-design/src/icons/icon-application-marketplace.svg
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -176,11 +176,13 @@ export { ReactComponent as HomeModuleIcon } from "./icon-application-module.svg"
 export { ReactComponent as HomeQueryLibraryIcon } from "./icon-application-query-library.svg";
 export { ReactComponent as HomeDataSourceIcon } from "./icon-application-datasource.svg";
 export { ReactComponent as RecyclerIcon } from "./icon-application-recycler.svg";
+export { ReactComponent as MarketplaceIcon } from "./icon-application-marketplace.svg";
 export { ReactComponent as HomeActiveIcon } from "./icon-application-home-active.svg";
 export { ReactComponent as HomeModuleActiveIcon } from "./icon-application-module-active.svg";
 export { ReactComponent as HomeQueryLibraryActiveIcon } from "./icon-application-query-library-active.svg";
 export { ReactComponent as HomeDataSourceActiveIcon } from "./icon-application-datasource-active.svg";
 export { ReactComponent as RecyclerActiveIcon } from "./icon-application-recycler-active.svg";
+export { ReactComponent as MarketplaceActiveIcon } from "./icon-application-marketplace-active.svg";
 export { ReactComponent as FavoritesIcon } from "./icon-application-favorites.svg";
 export { ReactComponent as HomeSettingIcon } from "./icon-application-setting.svg";
 export { ReactComponent as FolderIcon } from "./icon-application-folder.svg";

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -14,6 +14,7 @@ import {
   IMPORT_APP_FROM_TEMPLATE_URL,
   INVITE_LANDING_URL,
   isAuthUnRequired,
+  MARKETPLACE_URL,
   ORG_AUTH_LOGIN_URL,
   ORG_AUTH_REGISTER_URL,
   QUERY_LIBRARY_URL,
@@ -138,6 +139,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 FOLDER_URL,
                 TRASH_URL,
                 SETTING,
+                MARKETPLACE_URL,
               ]}
               // component={ApplicationListPage}
               component={ApplicationHome}

diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -21,6 +21,7 @@ export const ORGANIZATION_SETTING_DETAIL = `${ORGANIZATION_SETTING}/:orgId`;
 
 export const ALL_APPLICATIONS_URL = "/apps";
 export const MODULE_APPLICATIONS_URL = "/apps/module";
+export const MARKETPLACE_URL = `/marketplace`;
 export const DATASOURCE_URL = `/datasource`;
 export const DATASOURCE_CREATE_URL = `${DATASOURCE_URL}/new/:datasourceType`;
 export const DATASOURCE_EDIT_URL = `${DATASOURCE_URL}/:datasourceId`;

diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -2053,6 +2053,7 @@ export const de = {
       "modules": "Module",
       "module": "Modul",
       "trash": "Papierkorb",
+      "marketplace": "Marktplatz",
       "queryLibrary": "Abfragebibliothek",
       "datasource": "Datenquellen",
       "selectDatasourceType": "Datenquellentyp auswählen",

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2236,6 +2236,7 @@ export const en = {
     "modules": "Modules",
     "module": "Module",
     "trash": "Trash",
+    "marketplace": "Marketplace",
     "queryLibrary": "Query Library",
     "datasource": "Data Sources",
     "selectDatasourceType": "Select Data Source Type",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -2120,6 +2120,7 @@ home: {
     modules: "模块",
     module: "模块",
     trash: "回收站",
+    marketplace: "市场",
     queryLibrary: "查询管理",
     datasource: "数据源",
     selectDatasourceType: "选择数据源类型",

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceView.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { HomeLayout } from "./HomeLayout";
+import { MARKETPLACE_URL } from "constants/routesURL";
+import { marketplaceSelector } from "redux/selectors/applicationSelector";
+import { fetchAllMarketplaceApps } from "redux/reduxActions/applicationActions";
+import { trans } from "../../i18n";
+
+export function MarketplaceView() {
+  const [haveFetchedApps, setHaveFetchApps] = useState<boolean>(false);
+
+  const dispatch = useDispatch();
+  const marketplaceApps = useSelector(marketplaceSelector);
+
+  useEffect(() => {
+    if (!marketplaceApps.length && !haveFetchedApps) {
+      dispatch(fetchAllMarketplaceApps());
+      setHaveFetchApps(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (marketplaceApps.length) {
+      setHaveFetchApps(true);
+    }
+  }, [marketplaceApps])
+
+  return (
+    <HomeLayout
+      elements={marketplaceApps}
+      breadcrumb={[{ text: trans("home.marketplace"), path: MARKETPLACE_URL }]}
+      mode={"marketplace"}
+    />
+  );
+};
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -4,6 +4,7 @@ import {
   FOLDER_URL,
   FOLDER_URL_PREFIX,
   FOLDERS_URL,
+  MARKETPLACE_URL,
   MODULE_APPLICATIONS_URL,
   QUERY_LIBRARY_URL,
   SETTING,
@@ -30,6 +31,8 @@ import {
   PointIcon,
   RecyclerActiveIcon,
   RecyclerIcon,
+  MarketplaceIcon,
+  MarketplaceActiveIcon,
 } from "lowcoder-design";
 import React, { useEffect, useState } from "react";
 import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
@@ -44,6 +47,7 @@ import styled, { css } from "styled-components";
 import history from "../../util/history";
 import { FolderView } from "./FolderView";
 import { TrashView } from "./TrashView";
+import { MarketplaceView } from "./MarketplaceView";
 import { SideBarItemType } from "../../components/layout/SideBarSection";
 import { RootFolderListView } from "./RootFolderListView";
 import InviteDialog from "../common/inviteDialog";
@@ -411,6 +415,19 @@ export default function ApplicationHome() {
                 visible: ({ user }) => user.orgDev,
                 onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
               },
+              {
+                text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
+                routePath: MARKETPLACE_URL,
+                routePathExact: false,
+                routeComp: MarketplaceView,
+                icon: ({ selected, ...otherProps }) =>
+                  selected ? (
+                    <MarketplaceActiveIcon {...otherProps} />
+                  ) : (
+                    <MarketplaceIcon {...otherProps} />
+                  ),
+                visible: ({ user }) => user.orgDev,
+              },
               {
                 text: <TabLabel>{trans("settings.title")}</TabLabel>,
                 routePath: SETTING,