Merge pull request #6122 from weseek/imprv/98160-swrize-apiv3Put-personal-setting

Update Personal Basic Info 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.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 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, usePersonalSettings } from '~/stores/personal-settings';
@@ -12,21 +11,17 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 
 type Props = {
   appContainer: AppContainer,
-  personalContainer: PersonalContainer,
 }
 
 const BasicInfoSettings = (props: Props) => {
   const { t } = useTranslation();
-  const {
-    // personalContainer will be removed by 98160
-    appContainer, /* personalContainer, */
-  } = props;
+  const { appContainer } = props;
 
   const {
     mutate: mutateDatabaseData,
   } = useSWRxPersonalSettings();
   const {
-    data: personalSettingsInfo, mutate, sync, error, personalSettingsDataFromDB,
+    data: personalSettingsInfo, mutate, sync, update, error, personalSettingsDataFromDB,
   } = usePersonalSettings();
 
   useEffect(() => {
@@ -37,8 +32,7 @@ const BasicInfoSettings = (props: Props) => {
   const submitHandler = async() => {
 
     try {
-      // TODO: SWRize apiv3Put /personal-setting/ -> https://redmine.weseek.co.jp/issues/98160
-      // await personalContainer.updateBasicInfo();
+      update();
       mutateDatabaseData();
       toastSuccess(t('toaster.update_successed', { target: t('Basic Info') }));
     }
@@ -179,6 +173,6 @@ const BasicInfoSettings = (props: Props) => {
 /**
  * Wrapper component for using unstated
  */
-const BasicInfoSettingsWrapper = withUnstatedContainers(BasicInfoSettings, [AppContainer, PersonalContainer]);
+const BasicInfoSettingsWrapper = withUnstatedContainers(BasicInfoSettings, [AppContainer]);
 
 export default BasicInfoSettingsWrapper;

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 @@ export const useSWRxPersonalSettings = (): SWRResponse<IUser, Error> => {
 
 export type IPersonalSettingsInfoOption = {
   personalSettingsDataFromDB: Nullable<IUser>,
-  sync: () => void;
+  sync: () => void,
+  update: () => void,
 }
 
 export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSettingsInfoOption => {
@@ -36,6 +37,24 @@ export const usePersonalSettings = (): SWRResponse<IUser, Error> & IPersonalSett
       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);
+    },
   };
 };