fix(web): installed plugins are not displayed expectedly

reearth · Sep 8, 2022 · 12d546a · 12d546a
1 parent 35a63f2
commit 12d546a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx b/src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx
@@ -15,7 +15,7 @@ export type PluginItem = PluginItemType;
 export type Props = {
   title?: string;
   loading?: boolean;
-  marketplacePluginIds?:
+  marketplacePlugins?:
     | {
         id: string;
         version: string;
@@ -47,7 +47,7 @@ export type PluginTabs = "Marketplace" | "Public" | "Personal";
 
 const PluginSection: React.FC<Props> = ({
   loading,
-  marketplacePluginIds,
+  marketplacePlugins,
   personalPlugins,
   extensions,
   currentTheme,
@@ -100,7 +100,7 @@ const PluginSection: React.FC<Props> = ({
                 extensions?.installed?.map(ext => (
                   <ext.component
                     key={ext.id}
-                    installedPlugins={marketplacePluginIds}
+                    installedPlugins={marketplacePlugins}
                     theme={currentTheme}
                     lang={currentLang}
                     accessToken={accessToken}

diff --git a/src/components/organisms/Settings/Project/Plugin/hooks.ts b/src/components/organisms/Settings/Project/Plugin/hooks.ts
@@ -47,35 +47,33 @@ export default (projectId: string) => {
 
   const sceneId = useMemo(() => rawSceneData?.scene?.id, [rawSceneData]);
 
-  const marketplacePluginIds = useMemo(
+  const marketplacePlugins = useMemo(
     () =>
-      rawSceneData
-        ? rawSceneData?.scene?.plugins
-            .filter(p => p.plugin?.id !== "reearth" && !sceneId)
-            .map<{ id: string; version: string }>(p => {
-              const [id, version] = p.plugin?.id.split("~") ?? ["", ""];
-              return {
-                id,
-                version,
-              };
-            })
-        : [],
-    [rawSceneData, sceneId],
+      rawSceneData?.scene?.plugins
+        .filter(p => p.plugin?.id !== "reearth")
+        .map<{ id: string; version: string }>(p => {
+          const [id, version] = p.plugin?.id.split("~") ?? ["", ""];
+          return {
+            id,
+            version,
+          };
+        }) ?? [],
+    [rawSceneData],
   );
 
   const personalPlugins = useMemo(() => {
-    return rawSceneData
-      ? rawSceneData?.scene?.plugins
-          .filter(p => p.plugin?.id !== "reearth")
-          .map<PluginItem>(p => ({
-            title: p.plugin?.translatedName ?? "",
-            bodyMarkdown: p.plugin?.translatedDescription ?? "",
-            author: p.plugin?.author ?? "",
-            // thumbnailUrl: p.plugin?.thumbnailUrl,
-            isInstalled: true,
-            pluginId: p.plugin?.id ?? "",
-          }))
-      : [];
+    return (
+      rawSceneData?.scene?.plugins
+        .filter(p => p.plugin && p.plugin.id !== "reearth" && p.plugin.id.split("~").length == 3)
+        .map<PluginItem>(p => ({
+          title: p.plugin?.translatedName ?? "",
+          bodyMarkdown: p.plugin?.translatedDescription ?? "",
+          author: p.plugin?.author ?? "",
+          // thumbnailUrl: p.plugin?.thumbnailUrl,
+          isInstalled: true,
+          pluginId: p.plugin?.id ?? "",
+        })) ?? []
+    );
   }, [rawSceneData]);
 
   const handleInstallByMarketplace = useCallback(
@@ -179,7 +177,7 @@ export default (projectId: string) => {
     currentTheme,
     currentLang: locale,
     loading,
-    marketplacePluginIds,
+    marketplacePlugins,
     personalPlugins,
     extensions,
     accessToken,

diff --git a/src/components/organisms/Settings/Project/Plugin/index.tsx b/src/components/organisms/Settings/Project/Plugin/index.tsx
@@ -21,7 +21,7 @@ const Plugin: React.FC<Props> = ({ projectId }) => {
     currentTheme,
     currentLang,
     loading,
-    marketplacePluginIds,
+    marketplacePlugins,
     personalPlugins,
     extensions,
     accessToken,
@@ -37,7 +37,7 @@ const Plugin: React.FC<Props> = ({ projectId }) => {
       {!currentProject?.isArchived ? (
         <PluginSection
           loading={loading}
-          marketplacePluginIds={marketplacePluginIds}
+          marketplacePlugins={marketplacePlugins}
           personalPlugins={personalPlugins}
           extensions={extensions}
           currentTheme={currentTheme}