refactor(webui): convert dates using axios interceptor

2026-05-09 05:10:19 +02:00 · 2023-07-11 14:46:43 +08:00 · 2023-07-11 14:46:43 +08:00 · 58c8187a41
commit 58c8187a41
parent 438c40d4d0
14 changed files with 56 additions and 36 deletions
--- 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)
      }}
    </template>
  </v-data-table>
--- 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])
                })
              }}
            </v-list-item-subtitle>
--- 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;
--- a/komga-webui/src/types/items.ts
+++ b/komga-webui/src/types/items.ts
@ -110,15 +110,13 @@ export class BookItem extends Item<BookDto> {
          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<SeriesDto> {
      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)
--- 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 {
--- 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 {
--- 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<string, string>[],
--- 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,
 }
--- 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 {
--- 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,
--- 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,
--- 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,
 }
--- 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 {
--- 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)
        }}
      </template>