api setting use new access token

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

@@ -2,22 +2,23 @@ import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { apiv3Put } from '~/client/util/apiv3-client';
+import { apiv3Delete, apiv3Post } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useSWRxPersonalSettings, usePersonalSettings } from '~/stores/personal-settings';
 
 
 const ApiSettings = React.memo((): JSX.Element => {
 
   const { t } = useTranslation();
-  const { mutate: mutateDatabaseData } = useSWRxPersonalSettings();
-  const { data: personalSettingsData } = usePersonalSettings();
+  // const { data: personalSettingsData } = usePersonalSettings();
+  const [newAccessToken, setNewAccessToken] = React.useState<string | null>(null);
 
   const submitHandler = useCallback(async() => {
 
     try {
-      await apiv3Put('/personal-setting/api-token');
-      mutateDatabaseData();
+      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);
 
       toastSuccess(t('toaster.update_successed', { target: t('page_me_apitoken.api_token'), ns: 'commons' }));
     }
@@ -25,7 +26,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       toastError(err);
     }
 
-  }, [mutateDatabaseData, t]);
+  }, [t]);
 
   return (
     <>
@@ -35,7 +36,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">
-          {personalSettingsData?.apiToken != null
+          {newAccessToken != null
             ? (
               <input
                 data-testid="grw-api-settings-input"
@@ -43,7 +44,7 @@ const ApiSettings = React.memo((): JSX.Element => {
                 className="form-control"
                 type="text"
                 name="apiToken"
-                value={personalSettingsData.apiToken}
+                value={newAccessToken}
                 readOnly
               />
             )