return to original code: redeclear usePersonalSettings, fix mutate

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

@@ -4,19 +4,20 @@ import { useTranslation } from 'react-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { apiv3Put } from '~/client/util/apiv3-client';
-import { useSWRxPersonalSettings } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings, usePersonalSettings } from '~/stores/personal-settings';
 
 
 const ApiSettings = React.memo((): JSX.Element => {
 
   const { t } = useTranslation();
-  const { data: personalSettingsData, mutate: mutatePersonalSettings } = useSWRxPersonalSettings();
+  const { mutate: mutateDatabaseData } = useSWRxPersonalSettings();
+  const { data: personalSettingsData } = usePersonalSettings();
 
   const submitHandler = useCallback(async() => {
 
     try {
-      const result = await apiv3Put('/personal-setting/api-token');
-      mutatePersonalSettings(result.data.userData);
+      await apiv3Put('/personal-setting/api-token');
+      mutateDatabaseData();
 
       toastSuccess(t('toaster.update_successed', { target: t('page_me_apitoken.api_token') }));
     }
@@ -24,7 +25,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       toastError(err);
     }
 
-  }, [mutatePersonalSettings, t]);
+  }, [mutateDatabaseData, t]);
 
   return (
     <>

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

@@ -6,7 +6,7 @@ import AppContainer from '~/client/services/AppContainer';
 import PersonalContainer from '~/client/services/PersonalContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { localeMetadatas } from '~/client/util/i18n';
-import { useSWRxPersonalSettings } from '~/stores/personal-settings';
+import { usePersonalSettings } from '~/stores/personal-settings';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -22,14 +22,13 @@ const BasicInfoSettings = (props: Props) => {
   } = props;
 
   const {
-    data: personalSettingsInfo, mutate, error,
-  } = useSWRxPersonalSettings();
+    data: personalSettingsInfo, mutate, sync, error, personalSettingsDataFromDB,
+  } = usePersonalSettings();
 
   useEffect(() => {
-    // Mutate only when getting personal settings data from DB
-    mutate(personalSettingsInfo);
+    sync();
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [personalSettingsInfo]);
+  }, [personalSettingsDataFromDB]);
 
   const submitHandler = async() => {
 
@@ -46,16 +45,6 @@ const BasicInfoSettings = (props: Props) => {
 
   const { registrationWhiteList } = appContainer.getConfig();
 
-  const isLoading = personalSettingsInfo == null;
-
-  if (isLoading) {
-    return (
-      <div className="text-center">
-        <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
-      </div>
-    );
-  }
-
   const changePersonalSettingsHandler = (updateData) => {
     if (personalSettingsInfo == null) {
       return;

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
-import { useSWRxPersonalSettings } from '~/stores/personal-settings';
+import { usePersonalSettings } from '~/stores/personal-settings';
 
 
 class PasswordSettings extends React.Component {
@@ -160,11 +160,11 @@ PasswordSettings.propTypes = {
 
 const PasswordSettingsWrapperFC = (props) => {
   const { t } = useTranslation();
-  const { mutate: mutatePersonalSetting } = useSWRxPersonalSettings();
+  const { mutate: mutatePersonalSettings } = usePersonalSettings();
 
   const submitHandler = useCallback(() => {
-    mutatePersonalSetting();
-  }, [mutatePersonalSetting]);
+    mutatePersonalSettings();
+  }, [mutatePersonalSettings]);
 
 
   return <PasswordSettings t={t} onSubmit={submitHandler} {...props} />;

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

@@ -1,10 +1,14 @@
 import useSWR, { SWRResponse } from 'swr';
 
+
+import { Nullable } from '~/interfaces/common';
 import { IExternalAccount } from '~/interfaces/external-account';
 import { IUser } from '~/interfaces/user';
 
 import { apiv3Get } from '../client/util/apiv3-client';
 
+import { useStaticSWR } from './use-static-swr';
+
 
 export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
   return useSWR(
@@ -13,6 +17,27 @@ export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
   );
 };
 
+export type IPersonalSettingsInfoOption = {
+  personalSettingsDataFromDB: Nullable<IUser>,
+  sync: () => void;
+}
+
+export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
+  const { data: personalSettingsDataFromDB } = useSWRxPersonalSettings();
+
+  const swrResult = useStaticSWR<IUser, Error>('personalSettingsInfo', undefined);
+
+  return {
+    ...swrResult,
+    personalSettingsDataFromDB,
+
+    // Sync with database
+    sync: (): void => {
+      const { mutate } = swrResult;
+      mutate(personalSettingsDataFromDB);
+    },
+  };
+};
 
 export const useSWRxPersonalExternalAccounts = (): SWRResponse<IExternalAccount[], Error> => {
   return useSWR(