update basicInfo with swr

packages/app/src/client/services/PersonalContainer.js

@@ -39,36 +39,6 @@ export default class PersonalContainer extends Container {
     return 'PersonalContainer';
   }
 
-  /**
-   * Update basic info
-   * @memberOf PersonalContainer
-   * @return {Array} basic info
-   */
-  async updateBasicInfo() {
-    try {
-      const response = await apiv3Put('/personal-setting/', {
-        name: this.state.name,
-        email: this.state.email,
-        isEmailPublished: this.state.isEmailPublished,
-        lang: this.state.lang,
-        slackMemberId: this.state.slackMemberId,
-      });
-      const { updatedUser } = response.data;
-
-      this.setState({
-        name: updatedUser.name,
-        email: updatedUser.email,
-        isEmailPublished: updatedUser.isEmailPublished,
-        lang: updatedUser.lang,
-        slackMemberId: updatedUser.slackMemberId,
-      });
-    }
-    catch (err) {
-      this.setState({ retrieveError: err });
-      logger.error(err);
-      throw new Error('Failed to update personal data');
-    }
-  }
 
   /**
    * Associate LDAP account

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

@@ -20,11 +20,10 @@ class BasicInfoSettings extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, personalContainer } = this.props;
+    const { t, update } = this.props;
 
     try {
-      // TODO: SWRize apiv3Put /personal-setting/ -> https://redmine.weseek.co.jp/issues/98160
-      await personalContainer.updateBasicInfo();
+      await update();
       toastSuccess(t('toaster.update_successed', { target: t('Basic Info') }));
     }
     catch (err) {
@@ -171,6 +170,7 @@ BasicInfoSettings.propTypes = {
   personalContainer: PropTypes.instanceOf(PersonalContainer).isRequired,
   personalSettingsInfo: PropTypes.object,
   onChangePersonalSettings: PropTypes.func,
+  update: PropTypes.func,
   error: PropTypes.object,
 };
 
@@ -191,6 +191,7 @@ const BasicInfoSettingsWrapperFC = (props) => {
       personalSettingsInfo={usePersonalSettingsInfoResult.data || {}}
       onChangePersonalSettings={usePersonalSettingsInfoResult.mutate}
       error={usePersonalSettingsInfoResult.error}
+      update={usePersonalSettingsInfoResult.update}
       {...props}
     />
   );

packages/app/src/interfaces/user.ts

@@ -11,8 +11,11 @@ export type IUser = {
   imageAttachment?: Ref<IAttachment>,
   imageUrlCached: string;
   isGravatarEnabled: boolean,
-  admin: boolean;
-  apiToken?: string;
+  isEmailPublished: boolean,
+  admin: boolean,
+  apiToken?: string,
+  lang: string,
+  slackMemberId?: string,
 }
 
 export type IUserGroupRelation = {

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

@@ -5,7 +5,7 @@ import { Nullable } from '~/interfaces/common';
 import { IExternalAccount } from '~/interfaces/external-account';
 import { IUser } from '~/interfaces/user';
 
-import { apiv3Get } from '../client/util/apiv3-client';
+import { apiv3Get, apiv3Put } from '../client/util/apiv3-client';
 
 import { useStaticSWR } from './use-static-swr';
 
@@ -19,7 +19,8 @@ const useSWRxPersonalSettingsInfo = (): SWRResponse<IUser, Error> => {
 
 export type IPersonalSettingsInfoOption = {
   personalSettingsDataFromDB: Nullable<IUser>,
-  sync: () => void;
+  sync: () => void,
+  update: () => void,
 }
 
 export const usePersonalSettingsInfo = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
@@ -34,6 +35,26 @@ export const usePersonalSettingsInfo = (): SWRResponse<IUser, Error> & IPersonal
       const { mutate } = swrResult;
       mutate(personalSettingsDataFromDB);
     },
+    update: () => {
+      const { data, mutate } = swrResult;
+
+      if (data == null) {
+        return;
+      }
+
+      mutate({ ...data }, false);
+
+      const updateData = {
+        name: data.name,
+        email: data.email,
+        isEmailPublished: data.isEmailPublished,
+        lang: data.lang,
+        slackMemberId: data.slackMemberId,
+      };
+
+      // invoke API
+      apiv3Put('/personal-setting/', updateData);
+    },
   };
 };