From 58c8187a419725481c1a81c2cb0ed33796652f46 Mon Sep 17 00:00:00 2001 From: Gauthier Roebroeck Date: Tue, 11 Jul 2023 14:46:43 +0800 Subject: [PATCH] refactor(webui): convert dates using axios interceptor --- .../AuthenticationActivityTable.vue | 2 +- komga-webui/src/components/UsersList.vue | 2 +- komga-webui/src/plugins/http.plugin.ts | 31 ++++++++++++++++--- komga-webui/src/types/items.ts | 22 ++++++------- komga-webui/src/types/komga-books.ts | 9 +++--- komga-webui/src/types/komga-collections.ts | 4 +-- komga-webui/src/types/komga-history.ts | 2 +- komga-webui/src/types/komga-pagehashes.ts | 4 +-- komga-webui/src/types/komga-readlists.ts | 4 +-- komga-webui/src/types/komga-series.ts | 4 +-- komga-webui/src/types/komga-transientbooks.ts | 2 +- komga-webui/src/types/komga-users.ts | 2 +- komga-webui/src/views/BrowseBook.vue | 2 +- komga-webui/src/views/HistoryView.vue | 2 +- 14 files changed, 56 insertions(+), 36 deletions(-) diff --git a/komga-webui/src/components/AuthenticationActivityTable.vue b/komga-webui/src/components/AuthenticationActivityTable.vue index 9697c955..2c30cbd5 100644 --- a/komga-webui/src/components/AuthenticationActivityTable.vue +++ b/komga-webui/src/components/AuthenticationActivityTable.vue @@ -24,7 +24,7 @@ new Intl.DateTimeFormat($i18n.locale, { dateStyle: 'medium', timeStyle: 'short' - }).format(new Date(item.dateTime)) + }).format(item.dateTime) }} diff --git a/komga-webui/src/components/UsersList.vue b/komga-webui/src/components/UsersList.vue index c65058e2..f53433ef 100644 --- a/komga-webui/src/components/UsersList.vue +++ b/komga-webui/src/components/UsersList.vue @@ -30,7 +30,7 @@ new Intl.DateTimeFormat($i18n.locale, { dateStyle: 'medium', timeStyle: 'short' - }).format(new Date(usersLastActivity[u.id])) + }).format(usersLastActivity[u.id]) }) }} diff --git a/komga-webui/src/plugins/http.plugin.ts b/komga-webui/src/plugins/http.plugin.ts index 69dbf3df..861ef702 100644 --- a/komga-webui/src/plugins/http.plugin.ts +++ b/komga-webui/src/plugins/http.plugin.ts @@ -1,17 +1,40 @@ import urls from '@/functions/urls' -import axios, { AxiosInstance, AxiosRequestConfig } from 'axios' +import axios, {AxiosInstance, AxiosRequestConfig} from 'axios' import _Vue from 'vue' +import {parseISO} from 'date-fns' export default { - install (Vue: typeof _Vue) { - Vue.prototype.$http = axios.create({ + install(Vue: typeof _Vue) { + const client = axios.create({ baseURL: urls.origin, withCredentials: true, - headers: { 'X-Requested-With': 'XMLHttpRequest' }, + headers: {'X-Requested-With': 'XMLHttpRequest'}, } as AxiosRequestConfig) + client.interceptors.response.use(originalResponse => { + handleDates(originalResponse.data) + return originalResponse + }) + Vue.prototype.$http = client }, } +const isoDateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?(?:[-+]\d{2}:?\d{2}|Z)?$/ + +function isIsoDateString(value: any): boolean { + return value && typeof value === 'string' && isoDateFormat.test(value) +} + +export function handleDates(body: any) { + if (body === null || body === undefined || typeof body !== 'object') + return body + + for (const key of Object.keys(body)) { + const value = body[key] + if (isIsoDateString(value)) body[key] = parseISO(value) + else if (typeof value === 'object') handleDates(value) + } +} + declare module 'vue/types/vue' { interface Vue { $http: AxiosInstance; diff --git a/komga-webui/src/types/items.ts b/komga-webui/src/types/items.ts index d9af645c..6b81a7e0 100644 --- a/komga-webui/src/types/items.ts +++ b/komga-webui/src/types/items.ts @@ -110,15 +110,13 @@ export class BookItem extends Item { text = this.item.metadata.releaseDate ? new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium', timeZone: 'UTC'} as Intl.DateTimeFormatOptions).format(new Date(this.item.metadata.releaseDate)) : i18n.t('book_card.no_release_date') else if (context.includes(ItemContext.DATE_ADDED)) { - const date = new Date(this.item.created) - text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) - title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) + text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created) + title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created) } else if (context.includes(ItemContext.READ_DATE)) { - if (this.item.readProgress?.lastModified) { - const date = new Date(this.item.readProgress?.lastModified) - text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) - title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) + if (this.item.readProgress?.readDate) { + text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.readProgress?.readDate) + title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.readProgress?.readDate) } else { text = i18n.t('book_card.unread') } @@ -179,15 +177,13 @@ export class SeriesItem extends Item { text = this.item.booksMetadata.releaseDate ? new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium', timeZone: 'UTC'} as Intl.DateTimeFormatOptions).format(new Date(this.item.booksMetadata.releaseDate)) : i18n.t('book_card.no_release_date') else if (context.includes(ItemContext.DATE_ADDED)) { - const date = new Date(this.item.created) - text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) - title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) + text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created) + title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.created) } else if (context.includes(ItemContext.DATE_UPDATED)) { - const date = new Date(this.item.lastModified) - text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) - title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(date) + text = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.lastModified) + title = new Intl.DateTimeFormat(i18n.locale, {dateStyle: 'long', timeStyle: 'medium'} as Intl.DateTimeFormatOptions).format(this.item.lastModified) } else text = i18n.tc('common.books_n', this.item.booksCount) diff --git a/komga-webui/src/types/komga-books.ts b/komga-webui/src/types/komga-books.ts index 9154574d..0e308a96 100644 --- a/komga-webui/src/types/komga-books.ts +++ b/komga-webui/src/types/komga-books.ts @@ -9,8 +9,8 @@ export interface BookDto { name: string, url: string, number: number, - created: string, - lastModified: string, + created: Date, + lastModified: Date, sizeBytes: number, size: string, media: MediaDto, @@ -76,8 +76,9 @@ export interface BookMetadataDto { export interface ReadProgressDto { page: number, completed: boolean, - created: string, - lastModified: string + readDate: Date, + created: Date, + lastModified: Date } export interface BookMetadataUpdateDto { diff --git a/komga-webui/src/types/komga-collections.ts b/komga-webui/src/types/komga-collections.ts index 5b1cb2d7..39e6d588 100644 --- a/komga-webui/src/types/komga-collections.ts +++ b/komga-webui/src/types/komga-collections.ts @@ -4,8 +4,8 @@ interface CollectionDto { ordered: boolean, filtered: boolean, seriesIds: string[], - createdDate: string, - lastModifiedDate: string + createdDate: Date, + lastModifiedDate: Date } interface CollectionCreationDto { diff --git a/komga-webui/src/types/komga-history.ts b/komga-webui/src/types/komga-history.ts index 48a4a549..7d052f62 100644 --- a/komga-webui/src/types/komga-history.ts +++ b/komga-webui/src/types/komga-history.ts @@ -1,6 +1,6 @@ export interface HistoricalEventDto { type: string, - timestamp: string, + timestamp: Date, bookId?: string, seriesId?: string, properties: Record[], diff --git a/komga-webui/src/types/komga-pagehashes.ts b/komga-webui/src/types/komga-pagehashes.ts index 28a9e863..4d0afcb3 100644 --- a/komga-webui/src/types/komga-pagehashes.ts +++ b/komga-webui/src/types/komga-pagehashes.ts @@ -27,6 +27,6 @@ export interface PageHashCreationDto { export interface PageHashKnownDto extends PageHashDto { action: PageHashAction deleteCount: number, - createdDate: string, - lastModifiedDate: string, + createdDate: Date, + lastModifiedDate: Date, } diff --git a/komga-webui/src/types/komga-readlists.ts b/komga-webui/src/types/komga-readlists.ts index ec0df8bf..0afd1099 100644 --- a/komga-webui/src/types/komga-readlists.ts +++ b/komga-webui/src/types/komga-readlists.ts @@ -5,8 +5,8 @@ export interface ReadListDto { ordered: boolean, filtered: boolean, bookIds: string[], - createdDate: string, - lastModifiedDate: string + createdDate: Date, + lastModifiedDate: Date } export interface ReadListCreationDto { diff --git a/komga-webui/src/types/komga-series.ts b/komga-webui/src/types/komga-series.ts index bc2962c9..f3669251 100644 --- a/komga-webui/src/types/komga-series.ts +++ b/komga-webui/src/types/komga-series.ts @@ -6,8 +6,8 @@ export interface SeriesDto { libraryId: string, name: string, url: string, - created: string, - lastModified: string, + created: Date, + lastModified: Date, booksCount: number, booksReadCount: number, booksUnreadCount: number, diff --git a/komga-webui/src/types/komga-transientbooks.ts b/komga-webui/src/types/komga-transientbooks.ts index 88498822..686717cf 100644 --- a/komga-webui/src/types/komga-transientbooks.ts +++ b/komga-webui/src/types/komga-transientbooks.ts @@ -4,7 +4,7 @@ export interface TransientBookDto { id: string, name: string, url: string, - fileLastModified: string, + fileLastModified: Date, sizeBytes: number, size: string, status: string, diff --git a/komga-webui/src/types/komga-users.ts b/komga-webui/src/types/komga-users.ts index 1b675de5..acc528ba 100644 --- a/komga-webui/src/types/komga-users.ts +++ b/komga-webui/src/types/komga-users.ts @@ -44,6 +44,6 @@ export interface AuthenticationActivityDto { userAgent?: string, success: Boolean, error?: string, - dateTime: string, + dateTime: Date, source?: string, } diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue index 845182f7..247e5f1e 100644 --- a/komga-webui/src/views/BrowseBook.vue +++ b/komga-webui/src/views/BrowseBook.vue @@ -527,7 +527,7 @@ export default Vue.extend({ return new Intl.DateTimeFormat(this.$i18n.locale, { dateStyle: 'medium', timeStyle: 'short', - } as Intl.DateTimeFormatOptions).format(new Date(this.book.readProgress.lastModified)) + } as Intl.DateTimeFormatOptions).format(this.book.readProgress.readDate) return undefined }, previousId(): string { diff --git a/komga-webui/src/views/HistoryView.vue b/komga-webui/src/views/HistoryView.vue index 5e5493b7..83dc8593 100644 --- a/komga-webui/src/views/HistoryView.vue +++ b/komga-webui/src/views/HistoryView.vue @@ -41,7 +41,7 @@ new Intl.DateTimeFormat($i18n.locale, { dateStyle: 'medium', timeStyle: 'short' - }).format(new Date(item.timestamp)) + }).format(item.timestamp) }}