fix: cannot to upgrade marketplace plugins (#319)

* fix: cannot to upgrade marketplace plugins

* fix

* fix error

src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx

@@ -16,8 +16,11 @@ export type Props = {
   loading?: boolean;
   marketplacePlugins?:
     | {
+        fullId: string;
         id: string;
         version: string;
+        title?: string;
+        author?: string;
       }[]
     | undefined;
   personalPlugins?: PluginItem[];

src/components/organisms/Settings/Project/Plugin/hooks.ts

@@ -8,10 +8,19 @@ import {
   useInstallPluginMutation,
   useUninstallPluginMutation,
   useUploadPluginMutation,
+  useUpgradePluginMutation,
 } from "@reearth/gql/graphql-client-api";
 import { useLang, useT } from "@reearth/i18n";
 import { useProject, useNotification, useCurrentTheme } from "@reearth/state";
 
+export type Plugin = {
+  fullId: string;
+  id: string;
+  version: string;
+  title?: string;
+  author?: string;
+};
+
 export default (projectId: string) => {
   const t = useT();
   const locale = useLang();
@@ -31,6 +40,7 @@ export default (projectId: string) => {
   const [installPluginMutation] = useInstallPluginMutation();
   const [uploadPluginMutation] = useUploadPluginMutation();
   const [uninstallPluginMutation] = useUninstallPluginMutation();
+  const [upgradePluginMutation] = useUpgradePluginMutation();
 
   const extensions = useMemo(
     () => ({
@@ -50,14 +60,20 @@ export default (projectId: string) => {
   const marketplacePlugins = useMemo(
     () =>
       rawSceneData?.scene?.plugins
-        .filter(p => p.plugin?.id !== "reearth")
-        .map<{ id: string; version: string }>(p => {
-          const [id, version] = p.plugin?.id.split("~") ?? ["", ""];
+        .filter(p => p.plugin && p.plugin?.id !== "reearth")
+        .map((p): Plugin | undefined => {
+          if (!p.plugin) return;
+          const fullId = p.plugin.id;
+          const [id, version] = fullId.split("~", 2);
           return {
+            fullId,
             id,
             version,
+            title: p.plugin.name,
+            author: p.plugin.author,
           };
-        }) ?? [],
+        })
+        .filter((p): p is Plugin => !!p) ?? [],
     [rawSceneData],
   );
 
@@ -77,12 +93,22 @@ export default (projectId: string) => {
   }, [rawSceneData]);
 
   const handleInstallByMarketplace = useCallback(
-    async (pluginId: string) => {
-      if (!sceneId) return;
-      const results = await installPluginMutation({
-        variables: { sceneId, pluginId },
-      });
-      if (results.errors || !results.data?.installPlugin?.scenePlugin) {
+    async (pluginId: string | undefined, oldPluginId?: string) => {
+      if (!sceneId || !pluginId) return;
+
+      const results = await (oldPluginId
+        ? upgradePluginMutation({
+            variables: {
+              sceneId,
+              pluginId: oldPluginId,
+              toPluginId: pluginId,
+            },
+          })
+        : await installPluginMutation({
+            variables: { sceneId, pluginId },
+          }));
+
+      if (results.errors) {
         setNotification({
           type: "error",
           text: t("Failed to install plugin."),
@@ -95,7 +121,7 @@ export default (projectId: string) => {
         await client.resetStore();
       }
     },
-    [client, installPluginMutation, sceneId, setNotification, t],
+    [client, installPluginMutation, sceneId, setNotification, t, upgradePluginMutation],
   );
 
   const handleInstallByUploadingZipFile = useCallback(

src/components/organisms/Settings/Project/Plugin/index.tsx

@@ -8,9 +8,7 @@ import { useT } from "@reearth/i18n";
 
 import useHooks from "./hooks";
 
-// Components
-
-type Props = {
+export type Props = {
   projectId: string;
 };
 

src/gql/graphql-client-api.tsx

@@ -2695,6 +2695,15 @@ export type UninstallPluginMutationVariables = Exact<{
 
 export type UninstallPluginMutation = { __typename?: 'Mutation', uninstallPlugin?: { __typename?: 'UninstallPluginPayload', pluginId: string } | null };
 
+export type UpgradePluginMutationVariables = Exact<{
+  sceneId: Scalars['ID'];
+  pluginId: Scalars['ID'];
+  toPluginId: Scalars['ID'];
+}>;
+
+
+export type UpgradePluginMutation = { __typename?: 'Mutation', upgradePlugin?: { __typename?: 'UpgradePluginPayload', scenePlugin: { __typename?: 'ScenePlugin', pluginId: string, propertyId?: string | null } } | null };
+
 export type GetProjectQueryVariables = Exact<{
   projectId: Scalars['ID'];
 }>;
@@ -5555,6 +5564,46 @@ export function useUninstallPluginMutation(baseOptions?: Apollo.MutationHookOpti
 export type UninstallPluginMutationHookResult = ReturnType<typeof useUninstallPluginMutation>;
 export type UninstallPluginMutationResult = Apollo.MutationResult<UninstallPluginMutation>;
 export type UninstallPluginMutationOptions = Apollo.BaseMutationOptions<UninstallPluginMutation, UninstallPluginMutationVariables>;
+export const UpgradePluginDocument = gql`
+    mutation UpgradePlugin($sceneId: ID!, $pluginId: ID!, $toPluginId: ID!) {
+  upgradePlugin(
+    input: {sceneId: $sceneId, pluginId: $pluginId, toPluginId: $toPluginId}
+  ) {
+    scenePlugin {
+      pluginId
+      propertyId
+    }
+  }
+}
+    `;
+export type UpgradePluginMutationFn = Apollo.MutationFunction<UpgradePluginMutation, UpgradePluginMutationVariables>;
+
+/**
+ * __useUpgradePluginMutation__
+ *
+ * To run a mutation, you first call `useUpgradePluginMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpgradePluginMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [upgradePluginMutation, { data, loading, error }] = useUpgradePluginMutation({
+ *   variables: {
+ *      sceneId: // value for 'sceneId'
+ *      pluginId: // value for 'pluginId'
+ *      toPluginId: // value for 'toPluginId'
+ *   },
+ * });
+ */
+export function useUpgradePluginMutation(baseOptions?: Apollo.MutationHookOptions<UpgradePluginMutation, UpgradePluginMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpgradePluginMutation, UpgradePluginMutationVariables>(UpgradePluginDocument, options);
+      }
+export type UpgradePluginMutationHookResult = ReturnType<typeof useUpgradePluginMutation>;
+export type UpgradePluginMutationResult = Apollo.MutationResult<UpgradePluginMutation>;
+export type UpgradePluginMutationOptions = Apollo.BaseMutationOptions<UpgradePluginMutation, UpgradePluginMutationVariables>;
 export const GetProjectDocument = gql`
     query GetProject($projectId: ID!) {
   node(id: $projectId, type: PROJECT) {

src/gql/queries/plugin.ts

@@ -71,3 +71,14 @@ export const UNINSTALL_PLUGIN = gql`
     }
   }
 `;
+
+export const UPGRADE_PLUGIN = gql`
+  mutation UpgradePlugin($sceneId: ID!, $pluginId: ID!, $toPluginId: ID!) {
+    upgradePlugin(input: { sceneId: $sceneId, pluginId: $pluginId, toPluginId: $toPluginId }) {
+      scenePlugin {
+        pluginId
+        propertyId
+      }
+    }
+  }
+`;