Merge branch 'support/98033-omit-personal-container' into imprv/98153-SWRize-apiv3-put-personal-setting-associate-ldap

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

@@ -49,7 +49,7 @@ class AssociateModal extends React.Component {
 
   async onClickAddBtn() {
     const {
-      t, associateLdapAccount, mutatePersonalExternalAccounts,
+      t, onAssociated, associateLdapAccount,
     } = this.props;
     const { username, password } = this.state;
 
@@ -61,8 +61,8 @@ class AssociateModal extends React.Component {
     catch (err) {
       toastError(err);
     }
-    if (mutatePersonalExternalAccounts != null) {
-      mutatePersonalExternalAccounts();
+    if (onAssociated != null) {
+      onAssociated();
     }
   }
 
@@ -135,7 +135,7 @@ AssociateModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  mutatePersonalExternalAccounts: PropTypes.func,
+  onAssociated: PropTypes.func,
   associateLdapAccount: PropTypes.func,
 };
 
@@ -143,7 +143,7 @@ const AssociateModalWrapperFC = (props) => {
   const { t } = useTranslation();
   const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
   const { associateLdapAccount } = usePersonalSettings();
-  return <AssociateModal t={t} mutatePersonalExternalAccounts={mutatePersonalExternalAccounts} associateLdapAccount={associateLdapAccount} {...props} />;
+  return <AssociateModal t={t} onAssociated={mutatePersonalExternalAccounts} associateLdapAccount={associateLdapAccount} {...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/components/Me/DisassociateModal.jsx

@@ -26,7 +26,7 @@ class DisassociateModal extends React.Component {
   }
 
   async onClickDisassociateBtn() {
-    const { t, personalContainer, mutatePersonalExternalAccounts } = this.props;
+    const { t, personalContainer, onDisassociated } = this.props;
     const { providerType, accountId } = this.props.accountForDisassociate;
 
     try {
@@ -38,8 +38,8 @@ class DisassociateModal extends React.Component {
       toastError(err);
     }
 
-    if (mutatePersonalExternalAccounts != null) {
-      mutatePersonalExternalAccounts();
+    if (onDisassociated != null) {
+      onDisassociated();
     }
   }
 
@@ -79,14 +79,14 @@ DisassociateModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   accountForDisassociate: PropTypes.object.isRequired,
-  mutatePersonalExternalAccounts: PropTypes.func,
+  onDisassociated: PropTypes.func,
 
 };
 
 const DisassociateModalWrapperFC = (props) => {
   const { t } = useTranslation();
   const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
-  return <DisassociateModal t={t} mutatePersonalExternalAccounts={mutatePersonalExternalAccounts} {...props} />;
+  return <DisassociateModal t={t} onDisassociated={mutatePersonalExternalAccounts} {...props} />;
 };
 
 /**

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

@@ -1,7 +1,5 @@
-import useSWR, { SWRResponse } from 'swr';
+import useSWR, { mutate, SWRResponse } from 'swr';
 
-
-import { Nullable } from '~/interfaces/common';
 import { IExternalAccount } from '~/interfaces/external-account';
 import { IUser } from '~/interfaces/user';
 
@@ -18,48 +16,54 @@ export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
 };
 
 export type IPersonalSettingsInfoOption = {
-  personalSettingsDataFromDB: Nullable<IUser>,
   sync: () => void,
-  update: () => void,
-  associateLdapAccount: (account: { username: string, password: string }) => void,
+  updateBasicInfo: () => Promise<void>,
+  associateLdapAccount: (account: { username: string, password: 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 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) => {
-      // invoke API
-      apiv3Put('/personal-setting/associate-ldap', account);
-    },
+    sync,
+    updateBasicInfo,
+    associateLdapAccount,
   };
 };