Merge branch 'imprv/98153-SWRize-apiv3-put-personal-setting-associate-ldap' into imprv/98161-swrize-apiv3-put-personal-settings-disassociateldap

packages/app/src/components/Me/AssociateModal.jsx

@@ -49,21 +49,12 @@ class AssociateModal extends React.Component {
 
   async onClickAddBtn() {
     const {
-      t, associateLdapAccount, mutatePersonalExternalAccounts,
+      onAssociate, onClose,
     } = this.props;
     const { username, password } = this.state;
 
-    try {
-      await associateLdapAccount({ username, password });
-      this.props.onClose();
-      toastSuccess(t('security_setting.updated_general_security_setting'));
-    }
-    catch (err) {
-      toastError(err);
-    }
-    if (mutatePersonalExternalAccounts != null) {
-      mutatePersonalExternalAccounts();
-    }
+    onAssociate({ username, password });
+    onClose();
   }
 
   render() {
@@ -135,15 +126,20 @@ AssociateModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  mutatePersonalExternalAccounts: PropTypes.func,
-  associateLdapAccount: PropTypes.func,
+  onAssociate: PropTypes.func.isRequired,
 };
 
 const AssociateModalWrapperFC = (props) => {
   const { t } = useTranslation();
   const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
   const { associateLdapAccount } = usePersonalSettings();
-  return <AssociateModal t={t} mutatePersonalExternalAccounts={mutatePersonalExternalAccounts} associateLdapAccount={associateLdapAccount} {...props} />;
+
+  const associateLdapAccountHandler = (account) => {
+    associateLdapAccount(account);
+    mutatePersonalExternalAccounts();
+  };
+
+  return <AssociateModal t={t} onAssociate={associateLdapAccountHandler} {...props} />;
 };
 
 /**

packages/app/src/components/Me/BasicInfoSettings.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { localeMetadatas } from '~/client/util/i18n';
-import { useSWRxPersonalSettings, usePersonalSettings } from '~/stores/personal-settings';
+import { usePersonalSettings } from '~/stores/personal-settings';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -18,22 +18,15 @@ const BasicInfoSettings = (props: Props) => {
   const { appContainer } = props;
 
   const {
-    mutate: mutateDatabaseData,
-  } = useSWRxPersonalSettings();
-  const {
-    data: personalSettingsInfo, mutate, sync, update, error, personalSettingsDataFromDB,
+    data: personalSettingsInfo, mutate: mutatePersonalSettings, sync, updateBasicInfo, error,
   } = usePersonalSettings();
 
-  useEffect(() => {
-    sync();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [personalSettingsDataFromDB]);
 
   const submitHandler = async() => {
 
     try {
-      update();
-      mutateDatabaseData();
+      await updateBasicInfo();
+      sync();
       toastSuccess(t('toaster.update_successed', { target: t('Basic Info') }));
     }
     catch (err) {
@@ -48,7 +41,7 @@ const BasicInfoSettings = (props: Props) => {
     if (personalSettingsInfo == null) {
       return;
     }
-    mutate({ ...personalSettingsInfo, ...updateData });
+    mutatePersonalSettings({ ...personalSettingsInfo, ...updateData });
   };
 
 

packages/app/src/stores/personal-settings.tsx

@@ -1,7 +1,5 @@
 import useSWR, { SWRResponse } from 'swr';
 
-
-import { Nullable } from '~/interfaces/common';
 import { IExternalAccount } from '~/interfaces/external-account';
 import { IUser } from '~/interfaces/user';
 
@@ -18,51 +16,60 @@ export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
 };
 
 export type IPersonalSettingsInfoOption = {
-  personalSettingsDataFromDB: Nullable<IUser>,
   sync: () => void,
-  update: () => void,
-  associateLdapAccount: (account: { username: string, password: string }) => void,
-  disassociateLdapAccount: (account: { providerType: string, accountId: string }) => void,
+  updateBasicInfo: () => Promise<void>,
+  associateLdapAccount: (account: { username: string, password: string }) => Promise<void>,
+  disassociateLdapAccount: (account: { providerType: string, accountId: string }) => Promise<void>,
 }
 
 export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
-  const { data: personalSettingsDataFromDB } = useSWRxPersonalSettings();
+  const { data: personalSettingsDataFromDB, mutate: revalidate } = useSWRxPersonalSettings();
+  const key = personalSettingsDataFromDB != null ? 'personalSettingsInfo' : null;
+
+  const swrResult = useStaticSWR<IUser, Error>(key, undefined, { fallbackData: personalSettingsDataFromDB });
+
+  // Sync with database
+  const sync = async(): Promise<void> => {
+    const { mutate } = swrResult;
+    const result = await revalidate();
+    mutate(result);
+  };
+
+  const updateBasicInfo = async(): Promise<void> => {
+    const { data } = swrResult;
+
+    if (data == null) {
+      return;
+    }
+
+    const updateData = {
+      name: data.name,
+      email: data.email,
+      isEmailPublished: data.isEmailPublished,
+      lang: data.lang,
+      slackMemberId: data.slackMemberId,
+    };
+
+    // invoke API
+    await apiv3Put('/personal-setting/', updateData);
+  };
+
+
+  const associateLdapAccount = async(account) => {
+    await apiv3Put('/personal-setting/associate-ldap', account);
+  };
+
+  const disassociateLdapAccount = async(account) => {
+    await apiv3Put('/personal-setting/disassociate-ldap', account);
+  };
 
-  const swrResult = useStaticSWR<IUser, Error>('personalSettingsInfo', undefined);
 
   return {
     ...swrResult,
-    personalSettingsDataFromDB,
-
-    // Sync with database
-    sync: (): void => {
-      const { mutate } = swrResult;
-      mutate(personalSettingsDataFromDB);
-    },
-    update: () => {
-      const { data } = swrResult;
-
-      if (data == null) {
-        return;
-      }
-
-      const updateData = {
-        name: data.name,
-        email: data.email,
-        isEmailPublished: data.isEmailPublished,
-        lang: data.lang,
-        slackMemberId: data.slackMemberId,
-      };
-
-      // invoke API
-      apiv3Put('/personal-setting/', updateData);
-    },
-    associateLdapAccount: (account) => {
-      apiv3Put('/personal-setting/associate-ldap', account);
-    },
-    disassociateLdapAccount: (account) => {
-      apiv3Put('/personal-setting/disassociate-ldap', account);
-    },
+    sync,
+    updateBasicInfo,
+    associateLdapAccount,
+    disassociateLdapAccount,
   };
 };