SWRize apiv3 get personal external accounts

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

@@ -65,23 +65,6 @@ export default class PersonalContainer extends Container {
     }
   }
 
-  /**
-   * retrieve external accounts that linked me
-   */
-  async retrieveExternalAccounts() {
-    try {
-      const response = await apiv3Get('/personal-setting/external-accounts');
-      const { externalAccounts } = response.data;
-
-      this.setState({ externalAccounts });
-    }
-    catch (err) {
-      this.setState({ retrieveError: err });
-      logger.error(err);
-      throw new Error('Failed to fetch external accounts');
-    }
-  }
-
   /**
    * Change name
    */

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

@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 import PropTypes from 'prop-types';
@@ -14,6 +13,7 @@ import {
 import AppContainer from '~/client/services/AppContainer';
 import PersonalContainer from '~/client/services/PersonalContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import { useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
 
 import LdapAuthTest from '../Admin/Security/LdapAuthTest';
 import { withUnstatedContainers } from '../UnstatedUtils';
@@ -48,7 +48,7 @@ class AssociateModal extends React.Component {
   }
 
   async onClickAddBtn() {
-    const { t, personalContainer } = this.props;
+    const { t, personalContainer, mutatePersonalExternalAccounts } = this.props;
     const { username, password } = this.state;
 
     try {
@@ -59,11 +59,8 @@ class AssociateModal extends React.Component {
     catch (err) {
       toastError(err);
     }
-    try {
-      await personalContainer.retrieveExternalAccounts();
-    }
-    catch (err) {
-      toastError(err);
+    if (mutatePersonalExternalAccounts != null) {
+      mutatePersonalExternalAccounts();
     }
   }
 
@@ -137,11 +134,13 @@ AssociateModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  mutatePersonalExternalAccounts: PropTypes.func,
 };
 
 const AssociateModalWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <AssociateModal t={t} {...props} />;
+  const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
+  return <AssociateModal t={t} mutatePersonalExternalAccounts={mutatePersonalExternalAccounts} {...props} />;
 };
 
 /**

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

@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 import PropTypes from 'prop-types';
@@ -13,6 +12,7 @@ import {
 import AppContainer from '~/client/services/AppContainer';
 import PersonalContainer from '~/client/services/PersonalContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import { useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -26,7 +26,7 @@ class DisassociateModal extends React.Component {
   }
 
   async onClickDisassociateBtn() {
-    const { t, personalContainer } = this.props;
+    const { t, personalContainer, mutatePersonalExternalAccounts } = this.props;
     const { providerType, accountId } = this.props.accountForDisassociate;
 
     try {
@@ -37,11 +37,9 @@ class DisassociateModal extends React.Component {
     catch (err) {
       toastError(err);
     }
-    try {
-      await personalContainer.retrieveExternalAccounts();
-    }
-    catch (err) {
-      toastError(err);
+
+    if (mutatePersonalExternalAccounts != null) {
+      mutatePersonalExternalAccounts();
     }
   }
 
@@ -81,12 +79,14 @@ DisassociateModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   accountForDisassociate: PropTypes.object.isRequired,
+  mutatePersonalExternalAccounts: PropTypes.func,
 
 };
 
 const DisassociateModalWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <DisassociateModal t={t} {...props} />;
+  const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
+  return <DisassociateModal t={t} mutatePersonalExternalAccounts={mutatePersonalExternalAccounts} {...props} />;
 };
 
 /**

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

@@ -1,4 +1,3 @@
-
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
@@ -6,8 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 
 import AppContainer from '~/client/services/AppContainer';
-import PersonalContainer from '~/client/services/PersonalContainer';
-import { toastError } from '~/client/util/apiNotification';
+import { useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -32,15 +30,6 @@ class ExternalAccountLinkedMe extends React.Component {
     this.closeDisassociateModal = this.closeDisassociateModal.bind(this);
   }
 
-  async componentDidMount() {
-    try {
-      await this.props.personalContainer.retrieveExternalAccounts();
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
   openAssociateModal() {
     this.setState({ isAssociateModalOpen: true });
   }
@@ -65,8 +54,7 @@ class ExternalAccountLinkedMe extends React.Component {
   }
 
   render() {
-    const { t, personalContainer } = this.props;
-    const { externalAccounts } = personalContainer.state;
+    const { t, personalExternalAccounts } = this.props;
 
     return (
       <Fragment>
@@ -95,7 +83,7 @@ class ExternalAccountLinkedMe extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {externalAccounts !== 0 && externalAccounts.map(account => (
+            {personalExternalAccounts != null && personalExternalAccounts.length > 0 && personalExternalAccounts.map(account => (
               <ExternalAccountRow
                 account={account}
                 key={account._id}
@@ -128,17 +116,19 @@ class ExternalAccountLinkedMe extends React.Component {
 ExternalAccountLinkedMe.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  personalContainer: PropTypes.instanceOf(PersonalContainer).isRequired,
+  personalExternalAccounts: PropTypes.arrayOf(PropTypes.object),
 };
 
 const ExternalAccountLinkedMeWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <ExternalAccountLinkedMe t={t} {...props} />;
+  const { data: personalExternalAccountsData } = useSWRxPersonalExternalAccounts();
+
+  return <ExternalAccountLinkedMe t={t} personalExternalAccounts={personalExternalAccountsData} {...props} />;
 };
 
 /**
  * Wrapper component for using unstated
  */
-const ExternalAccountLinkedMeWrapper = withUnstatedContainers(ExternalAccountLinkedMeWrapperFC, [AppContainer, PersonalContainer]);
+const ExternalAccountLinkedMeWrapper = withUnstatedContainers(ExternalAccountLinkedMeWrapperFC, [AppContainer]);
 
 export default ExternalAccountLinkedMeWrapper;

packages/app/src/interfaces/external-account.ts

@@ -0,0 +1,10 @@
+import { Ref } from '~/interfaces/common';
+import { IUser } from '~/interfaces/user';
+
+
+export type IExternalAccount<ID = string> = {
+  _id: ID,
+  providerType: string,
+  accountId: string,
+  user: Ref<IUser>,
+}

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

@@ -0,0 +1,13 @@
+import useSWR, { SWRResponse } from 'swr';
+
+import { IExternalAccount } from '~/interfaces/external-account';
+
+import { apiv3Get } from '../client/util/apiv3-client';
+
+
+export const useSWRxPersonalExternalAccounts = (): SWRResponse<IExternalAccount[], Error> => {
+  return useSWR(
+    '/personal-setting/external-accounts',
+    endpoint => apiv3Get(endpoint).then(response => response.data.externalAccounts),
+  );
+};