remove swr "usePersonalSettingsInfo" and use

"useSWRxPersonalSettings" instead

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

@@ -4,19 +4,19 @@ import { useTranslation } from 'react-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { apiv3Put } from '~/client/util/apiv3-client';
-import { usePersonalSettingsInfo } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings } from '~/stores/personal-settings';
 
 
 const ApiSettings = React.memo((): JSX.Element => {
 
   const { t } = useTranslation();
-  const { data: personalSettingsInfoData, mutate: mutatePersonalSettingsInfo } = usePersonalSettingsInfo();
+  const { data: personalSettingsData, mutate: mutatePersonalSettings } = useSWRxPersonalSettings();
 
   const submitHandler = useCallback(async() => {
 
     try {
       const result = await apiv3Put('/personal-setting/api-token');
-      mutatePersonalSettingsInfo(result.data.userData);
+      mutatePersonalSettings(result.data.userData);
 
       toastSuccess(t('toaster.update_successed', { target: t('page_me_apitoken.api_token') }));
     }
@@ -24,7 +24,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       toastError(err);
     }
 
-  }, [mutatePersonalSettingsInfo, t]);
+  }, [mutatePersonalSettings, t]);
 
   return (
     <>
@@ -34,7 +34,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       <div className="row mb-3">
         <label htmlFor="apiToken" className="col-md-3 text-md-right">{t('Current API Token')}</label>
         <div className="col-md-6">
-          {personalSettingsInfoData?.apiToken != null
+          {personalSettingsData?.apiToken != null
             ? (
               <input
                 data-testid="grw-api-settings-input"
@@ -42,7 +42,7 @@ const ApiSettings = React.memo((): JSX.Element => {
                 className="form-control"
                 type="text"
                 name="apiToken"
-                value={personalSettingsInfoData.apiToken}
+                value={personalSettingsData.apiToken}
                 readOnly
               />
             )

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 { usePersonalSettingsInfo } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings } from '~/stores/personal-settings';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -22,14 +22,14 @@ const BasicInfoSettings = (props: Props) => {
   } = props;
 
   const {
-    data: personalSettingsInfo, mutate, error, personalSettingsDataFromDB, sync,
-  } = usePersonalSettingsInfo();
+    data: personalSettingsInfo, mutate, error,
+  } = useSWRxPersonalSettings();
 
   useEffect(() => {
-    // Sync only when getting personal settings data from DB
-    sync();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [personalSettingsDataFromDB]);
+    // Mutate only when getting personal settings data from DB
+    mutate(personalSettingsInfo);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [personalSettingsInfo]);
 
   const submitHandler = async() => {
 

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 { usePersonalSettingsInfo } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings } from '~/stores/personal-settings';
 
 
 class PasswordSettings extends React.Component {
@@ -160,7 +160,7 @@ PasswordSettings.propTypes = {
 
 const PasswordSettingsWrapperFC = (props) => {
   const { t } = useTranslation();
-  const { mutate: mutatePersonalSetting } = usePersonalSettingsInfo();
+  const { mutate: mutatePersonalSetting } = useSWRxPersonalSettings();
 
   const submitHandler = useCallback(() => {
     mutatePersonalSetting();

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

@@ -1,39 +1,19 @@
 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';
-
 
-const useSWRxPersonalSettingsInfo = (): SWRResponse<IUser, Error> => {
-  return useSWR(
+export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
+  const swrResult = useSWR(
     '/personal-setting',
     endpoint => apiv3Get(endpoint).then(response => response.data.currentUser),
   );
-};
-
-export type IPersonalSettingsInfoOption = {
-  personalSettingsDataFromDB: Nullable<IUser>,
-  sync: () => void;
-}
-
-export const usePersonalSettingsInfo = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
-  const { data: personalSettingsDataFromDB } = useSWRxPersonalSettingsInfo();
-
-  const swrResult = useStaticSWR<IUser, Error>('personalSettingsInfo', undefined);
 
   return {
     ...swrResult,
-    personalSettingsDataFromDB,
-    sync: (): void => {
-      const { mutate } = swrResult;
-      mutate(personalSettingsDataFromDB);
-    },
   };
 };