Client:PortalSettings: fix edit client form

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.types.ts

@@ -47,8 +47,8 @@ export interface ClientFormProps {
   saveClient?: (client: IClientReqDTO) => Promise<IClientProps>;
   updateClient?: (
     clientId: string,
-    client: IClientProps
-  ) => Promise<IClientProps>;
+    client: IClientReqDTO
+  ) => Promise<IClientReqDTO>;
 
   regenerateSecret?: (clientId: string) => Promise<string>;
 

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ClientBlock.tsx

@@ -24,6 +24,10 @@ const ClientBlock = ({
     secret: secretValue,
   });
 
+  React.useEffect(() => {
+    setValue({ id: idValue, secret: secretValue });
+  }, [idValue, secretValue]);
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {};
 
   return (

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx

@@ -46,7 +46,7 @@ const ScopesBlock = ({
 
     setCheckedScopes([...selectedScopes]);
     setFilteredScopes({ ...filtered });
-  }, []);
+  }, [selectedScopes]);
 
   const onAddCheckedScope = (
     group: ScopeGroup,

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import {
   IClientProps,
   IClientReqDTO,
-  IScope,
 } from "@docspace/common/utils/oauth/interfaces";
 
 import BasicBlock from "./components/BasicBlock";
@@ -70,47 +69,16 @@ const ClientForm = ({
 
   const isEdit = !!id;
 
-  // const onInputChange = React.useCallback(
-  //   (e: React.ChangeEvent<HTMLInputElement>) => {
-  //     const { name, value } = e.target;
-
-  //     setForm((v) => {
-  //       v[name] = value;
-
-  //       return { ...v };
-  //     });
-  //   },
-  //   []
-  // );
-
-  // const onCheckboxChange = React.useCallback(
-  //   (name: string) => {
-  //     const idx = checkedScopes.findIndex((scope) => scope === name);
-
-  //     if (idx === -1) {
-  //       setCheckedScopes((val) => [...val, name]);
-  //     } else {
-  //       setCheckedScopes((val) => val.filter((scope) => scope !== name));
-  //     }
-  //   },
-  //   [checkedScopes]
-  // );
-
   const onSaveClick = async () => {
     if (!id) {
-      if (!saveClient) return;
       setIsRequestRunning(true);
 
-      await saveClient(form);
-
-      onCancelClick();
+      await saveClient?.(form);
+    } else {
+      await updateClient?.(clientId, form);
     }
-    // } else {
-    //   if (!updateClient) return;
-    //   await updateClient(clientId, newClient);
-    // }
 
-    // onCancelClick();
+    onCancelClick();
   };
 
   const onCancelClick = () => {
@@ -156,43 +124,50 @@ const ClientForm = ({
       actions.push(fetchClient(id));
     }
 
-    actions.push(fetchScopes());
+    if (scopeList?.length === 0) actions.push(fetchScopes());
 
     const [fetchedClient, ...rest] = await Promise.all(actions);
 
-    if (id && fetchedClient) {
+    if (id) {
       setForm({
-        name: fetchedClient.name,
-        logo: fetchedClient.logo,
-        website_url: fetchedClient.websiteUrl,
-        description: fetchedClient.description,
+        name: fetchedClient?.name || client?.name || "",
+        logo: fetchedClient?.logo || client?.logo || "",
+        website_url: fetchedClient?.websiteUrl || client?.websiteUrl || "",
+        description: fetchedClient?.description || client?.description || "",
 
-        redirect_uris: fetchedClient.redirectUris,
-        allowed_origins: fetchedClient.allowedOrigins,
-        logout_redirect_uri: fetchedClient.logoutRedirectUri,
+        redirect_uris:
+          fetchedClient?.redirectUris || client?.redirectUris || [],
+        allowed_origins:
+          fetchedClient?.allowedOrigins || client?.allowedOrigins || [],
+        logout_redirect_uri:
+          fetchedClient?.logoutRedirectUri || client?.logoutRedirectUri || "",
 
-        terms_url: fetchedClient.termsUrl,
-        policy_url: fetchedClient.policyUrl,
+        terms_url: fetchedClient?.termsUrl || client?.termsUrl || "",
+        policy_url: fetchedClient?.policyUrl || client?.policyUrl || "",
 
-        authentication_method: fetchedClient.authenticationMethod,
+        authentication_method:
+          fetchedClient?.authenticationMethod ||
+          client?.authenticationMethod ||
+          "",
 
-        scopes: fetchedClient.scopes,
+        scopes: fetchedClient?.scopes || client?.scopes || [],
       });
-      setClientId(fetchedClient.clientId);
-      setClientSecret(fetchedClient.clientSecret);
 
-      setInitialClient(fetchedClient);
+      setClientId(fetchedClient?.clientId || client?.clientId || "");
+      setClientSecret(
+        fetchedClient?.clientSecret || client?.clientSecret || ""
+      );
+
+      setInitialClient(client || fetchedClient || ({} as IClientProps));
     }
 
     setIsLoading(false);
-  }, [id, client, fetchScopes]);
+  }, [id, fetchScopes]);
 
   React.useEffect(() => {
-    if (scopeList && scopeList?.length !== 0) return;
-
     setIsLoading(true);
     getClientData();
-  }, [id, scopeList, client, getClientData, fetchScopes]);
+  }, [getClientData, fetchScopes]);
 
   const compareAndValidate = () => {
     let isValid = true;

packages/client/src/store/OAuthStore.ts

@@ -52,7 +52,7 @@ export interface OAuthStoreProps {
 
   saveClient: (client: IClientReqDTO) => Promise<void>;
 
-  updateClient: (clientId: string, client: IClientProps) => Promise<void>;
+  updateClient: (clientId: string, client: IClientReqDTO) => Promise<void>;
 
   changeClientStatus: (clientId: string, status: boolean) => Promise<void>;
 
@@ -237,7 +237,7 @@ class OAuthStore implements OAuthStoreProps {
     }
   };
 
-  updateClient = async (clientId: string, client: IClientProps) => {
+  updateClient = async (clientId: string, client: IClientReqDTO) => {
     try {
       const newClient = await updateClient(clientId, client);
 
@@ -245,7 +245,13 @@ class OAuthStore implements OAuthStoreProps {
 
       if (idx > -1) {
         runInAction(() => {
-          this.clients[idx] = newClient;
+          this.clients[idx] = {
+            ...newClient,
+            creatorAvatar: this.clients[idx].creatorAvatar,
+            creatorDisplayName: this.clients[idx].creatorDisplayName,
+          };
+
+          console.log(this.clients[idx]);
         });
       }
     } catch (e) {

packages/common/api/oauth/index.ts

@@ -74,12 +74,12 @@ export const addClient = async (data: IClientReqDTO): Promise<IClientProps> => {
 
 export const updateClient = async (
   clientId: string,
-  data: IClientProps
+  data: IClientReqDTO
 ): Promise<IClientProps> => {
   const client: IClientResDTO = await request({
     method: "put",
     url: `/clients/${clientId}`,
-    data: transformToClientReqDTO(data),
+    data,
   });
 
   return transformToClientProps(client);