ApiSettings support new access token

apps/app/src/client/components/Me/ApiSettings.tsx

@@ -2,15 +2,17 @@ import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { apiv3Delete, apiv3Post } from '~/client/util/apiv3-client';
+import { apiv3Delete, apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 
 
+/**
+ * TODO: support managing multiple access tokens.
+ */
 const ApiSettings = React.memo((): JSX.Element => {
 
   const { t } = useTranslation();
-  // const { data: personalSettingsData } = usePersonalSettings();
-  const [newAccessToken, setNewAccessToken] = React.useState<string | null>(null);
+  const [accessToken, setAccessToken] = React.useState<string | null>(null);
 
   const submitHandler = useCallback(async() => {
 
@@ -18,7 +20,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       await apiv3Delete('/personal-setting/access-token/all');
       const expiredAt = new Date('2099-12-31T23:59:59.999Z');
       const result = await apiv3Post('/personal-setting/access-token', { expiredAt });
-      setNewAccessToken(result.data.token);
+      setAccessToken(result.data.token);
 
       toastSuccess(t('toaster.update_successed', { target: t('page_me_apitoken.api_token'), ns: 'commons' }));
     }
@@ -28,6 +30,20 @@ const ApiSettings = React.memo((): JSX.Element => {
 
   }, [t]);
 
+  React.useEffect(() => {
+    const fetchData = async() => {
+      try {
+        const result = await apiv3Get('/personal-setting/access-token');
+        setAccessToken(result.data.accessTokens.length > 0 ? '*******************' : null);
+      }
+      catch (err) {
+        toastError(err);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <>
 
@@ -36,7 +52,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       <div className="row mb-3">
         <label htmlFor="apiToken" className="col-md-3 text-md-end col-form-label">{t('Current API Token')}</label>
         <div className="col-md-6">
-          {newAccessToken != null
+          {accessToken != null
             ? (
               <input
                 data-testid="grw-api-settings-input"
@@ -44,7 +60,7 @@ const ApiSettings = React.memo((): JSX.Element => {
                 className="form-control"
                 type="text"
                 name="apiToken"
-                value={newAccessToken}
+                value={accessToken}
                 readOnly
               />
             )