refactor: enhance access token management with type definitions and improved date formatting

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

@@ -5,13 +5,15 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter, Button,
 } from 'reactstrap';
 
-// TODO: add types for accessTokens
+import type { IResGetAccessToken } from '~/interfaces/access-token';
+
 type AccessTokenListProps = {
-  accessTokens: any[];
+  accessTokens: IResGetAccessToken[];
   deleteHandler?: (tokenId: string) => void;
 }
 export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Element => {
 
+
   const { t } = useTranslation();
   const { accessTokens, deleteHandler } = props;
   const [tokenToDelete, setTokenToDelete] = useState<string | null>(null);
@@ -57,7 +59,7 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
                   accessTokens.map(token => (
                     <tr key={token._id}>
                       <td className="text-break">{token.description}</td>
-                      <td>{token.expiredAt.toString()}</td>
+                      <td>{token.expiredAt.toString().split('T')[0]}</td>
                       <td>{token.scope.join(', ')}</td>
                       <td>
                         <button

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

@@ -4,11 +4,13 @@ import { useTranslation } from 'next-i18next';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { toastSuccess, toastError } from '~/client/util/toastr';
+import type { IAccessTokenInfo } from '~/interfaces/access-token';
 import { useSWRxAccessToken } from '~/stores/personal-settings';
 
 import { AccessTokenForm } from './AccessTokenForm';
 import { AccessTokenList } from './AccessTokenList';
 
+
 const NewTokenDisplay = React.memo(({ newToken, closeNewTokenDisplay }: { newToken?: string, closeNewTokenDisplay: () => void }): JSX.Element => {
 
   const { t } = useTranslation();
@@ -79,14 +81,7 @@ export const AccessTokenSettings = React.memo((): JSX.Element => {
     setNewToken(undefined);
   }, []);
 
-
-  // TODO: model で共通化
-  type GenerateAccessTokenInfo = {
-    expiredAt: Date,
-    scope: string[],
-    description: string,
-  }
-  const submitHandler = useCallback(async(info: GenerateAccessTokenInfo) => {
+  const submitHandler = useCallback(async(info: IAccessTokenInfo) => {
     try {
       const result = await generateAccessToken(info);
       mutate();

apps/app/src/interfaces/access-token.ts

@@ -0,0 +1,15 @@
+
+export type IAccessTokenInfo = {
+  expiredAt: Date,
+  description: string,
+  scope: string[],
+}
+
+export type IResGenerateAccessToken = IAccessTokenInfo & {
+  token: string,
+  _id: string,
+}
+
+export type IResGetAccessToken = IAccessTokenInfo & {
+  _id: string,
+}

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

@@ -3,6 +3,9 @@ import { useTranslation } from 'next-i18next';
 import type { SWRConfiguration, SWRResponse } from 'swr';
 import useSWR from 'swr';
 
+import type {
+  IResGenerateAccessToken, IResGetAccessToken, IAccessTokenInfo,
+} from '~/interfaces/access-token';
 import type { IExternalAuthProviderType } from '~/interfaces/external-auth-provider';
 import { useIsGuestUser } from '~/stores-universal/context';
 import loggerFactory from '~/utils/logger';
@@ -114,28 +117,15 @@ export const useSWRxPersonalExternalAccounts = (): SWRResponse<(IExternalAccount
 };
 
 
-type AccessTokenInfo = {
-  expiredAt: Date,
-  scope: string[],
-  description: string,
-}
-
-type AccessTokenResult = AccessTokenInfo & {
-  _id: string,
-}
-
-type GeneratedAccessToken = AccessTokenResult &{
-  token: string,
-}
 interface IAccessTokenOption {
-  generateAccessToken: (info: AccessTokenInfo) => Promise<GeneratedAccessToken>,
+  generateAccessToken: (info: IAccessTokenInfo) => Promise<IResGenerateAccessToken>,
   deleteAccessToken: (tokenId: string) => Promise<void>,
   deleteAllAccessTokens: (userId: string) => Promise<void>,
 }
 
-export const useSWRxAccessToken = (): SWRResponse< AccessTokenResult[] | null, Error> & IAccessTokenOption => {
+export const useSWRxAccessToken = (): SWRResponse< IResGetAccessToken[] | null, Error> & IAccessTokenOption => {
   const generateAccessToken = async(info) => {
-    const res = await apiv3Post('/personal-setting/access-token', info);
+    const res = await apiv3Post<IResGenerateAccessToken>('/personal-setting/access-token', info);
     return res.data;
   };
   const deleteAccessToken = async(tokenId: string) => {