Release v0.2.48.

Fix refresh token logic.

Fix inverted percentage indicator color.

Always show standard button in the sign in page.

Bump the version to release.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "toshokan",
-  "version": "0.2.47",
+  "version": "0.2.48",
   "private": true,
   "scripts": {
     "build": "vite build",
@@ -20,7 +20,7 @@
     "@tailwindcss/typography": "^0.5.2",
     "@vuelidate/core": "^2.0.0-alpha.35",
     "@vuelidate/validators": "^2.0.0-alpha.27",
-    "@vueuse/core": "^8.0.1",
+    "@vueuse/core": "^8.1.1",
     "apexcharts": "^3.33.2",
     "axios": "^0.26.1",
     "core-js": "^3.21.1",
@@ -43,7 +43,7 @@
     "slugify": "^1.6.5",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
-    "vue-query": "^1.19.2",
+    "vue-query": "^1.19.3",
     "vue-router": "^4.0.14",
     "vue3-apexcharts": "^1.4.1",
     "vuedraggable": "^4.1.0",
@@ -54,14 +54,15 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@types/dedent": "^0.7.0",
+    "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive": "^3.0.13",
     "@types/gapi.client.sheets": "^4.0.20201029",
     "@types/google.visualization": "^0.0.68",
     "@types/jest": "^27.4.1",
     "@types/tailwindcss": "^3.0.9",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vue/compiler-sfc": "^3.2.31",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
     "babel-jest": "^27.5.1",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
@@ -75,9 +76,9 @@
     "git-describe": "^4.1.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
-    "postcss": "^8.4.8",
+    "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "source-map": "^0.7.3",
     "tailwindcss": "^3.0.23",
     "vite": "^2.8.6",

src/components/GroupedStatistics.vue

@@ -52,7 +52,8 @@ const groups = computed(() => [
       monthlyReversed.value?.[0]?.totalSpent,
       monthlyReversed.value?.[1]?.totalSpent
     ),
-    currency: true
+    currency: true,
+    inverted: true
   },
   {
     label: t('dashboard.stats.bought'),
@@ -94,7 +95,7 @@ const groups = computed(() => [
         <div class="mt-0.5 flex items-center justify-between">
           <p>
             <span
-              class="text-lg md:text-xl lg:text-2xl font-semibold text-primary-700 dark:text-primary-400 shrink-0"
+              class="sm:text-lg md:text-xl lg:text-2xl font-semibold text-primary-700 dark:text-primary-400 shrink-0"
             >
               {{
                 n(
@@ -115,9 +116,9 @@ const groups = computed(() => [
             v-if="(group.percentage?.percentage || 0) !== 0"
             :class="[
               'flex items-center text-xxs lg:text-xs font-semibold tracking-wide uppercase px-2 py-0.5 lg:py-1 rounded-full shrink-0',
-              group.percentage?.increased
-                ? 'bg-red-100 dark:bg-red-700/40 text-red-800 dark:text-red-200'
-                : 'bg-green-100 dark:bg-green-600/40 text-green-800 dark:text-green-200'
+              group.percentage?.increased !== !!group.inverted
+                ? 'bg-green-100 dark:bg-green-600/40 text-green-800 dark:text-green-200'
+                : 'bg-red-100 dark:bg-red-700/40 text-red-800 dark:text-red-200'
             ]"
           >
             <span aria-hidden="true">

src/components/SignInWithGoogleButton.vue

@@ -16,8 +16,17 @@ import useDarkMode from '@/composables/useDarkMode'
 import useTailwindTheme from '@/composables/useTailwindTheme'
 import { useAuthStore } from '@/stores/auth'
 
-const props = defineProps({ prompt: { type: Boolean, default: true } })
-const { prompt } = toRefs(props)
+const props = defineProps({
+  prompt: {
+    type: Boolean,
+    default: true
+  },
+  type: {
+    type: String,
+    validator: (value) => ['icon', 'standard'].includes(value)
+  }
+})
+const { prompt, type } = toRefs(props)
 
 const emit = defineEmits(['notification'])
 
@@ -64,7 +73,7 @@ function renderButton() {
       size: 'large',
       locale: locale.value,
       text: 'continue_with',
-      type: isMdBreakpoint.value ? 'standard' : 'icon'
+      type: type.value || (isMdBreakpoint.value ? 'standard' : 'icon')
     })
   }
 }

src/data/Query.js

@@ -48,17 +48,19 @@ export default class Query {
           const reasons = response.getReasons()
 
           if (reasons.includes('timeout')) {
-            reject(new Error(errorMessage), { reason: 'timeout' })
+            reject({ message: errorMessage, reason: 'timeout' })
           } else if (reasons.includes('access_denied')) {
-            reject(
-              new Error(errorMessage, { code: 401, reason: 'access_denied' })
-            )
+            reject({
+              message: errorMessage,
+              status: 401,
+              reason: 'access_denied'
+            })
           } else {
             const message = i18n.global.t('errors.badQuery', {
               error: errorMessage
             })
 
-            reject(new Error(message, { reason: 'invalid_query' }))
+            reject({ message, reason: 'invalid_query' })
           }
 
           return

src/mutations/useBulkDeleteBookMutation.js

@@ -2,12 +2,17 @@ import { useMutation, useQueryClient } from 'vue-query'
 
 import { useSheetStore } from '@/stores/sheet'
 import bulkDeleteBooks from '@/services/sheet/bulkDeleteBooks'
+import { fetch } from '@/util/gapi'
 
 export default function useBulkDeleteBookMutation() {
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation((books) => bulkDeleteBooks(sheetStore.sheetId, books), {
+  async function mutate(books) {
+    return await fetch(bulkDeleteBooks(sheetStore.sheetId, books))
+  }
+
+  return useMutation(mutate, {
     onSuccess(_, books) {
       books.forEach((book) => {
         queryClient.setQueryData(['book', book.id], null)

src/mutations/useBulkEditBookMutation.js

@@ -2,12 +2,17 @@ import { useMutation, useQueryClient } from 'vue-query'
 
 import { useSheetStore } from '@/stores/sheet'
 import bulkUpdateBooks from '@/services/sheet/bulkUpdateBooks'
+import { fetch } from '@/util/gapi'
 
 export default function useBulkEditBookMutation() {
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation((books) => bulkUpdateBooks(sheetStore.sheetId, books), {
+  async function mutate(books) {
+    return await fetch(bulkUpdateBooks(sheetStore.sheetId, books))
+  }
+
+  return useMutation(mutate, {
     onSuccess(_, books) {
       books.forEach((book) => {
         queryClient.setQueryData(['book', book.id], book)

src/mutations/useCreateBookMutation.js

@@ -3,13 +3,18 @@ import { useMutation, useQueryClient } from 'vue-query'
 import { useCollectionStore } from '@/stores/collection'
 import { useSheetStore } from '@/stores/sheet'
 import insertBook from '@/services/sheet/insertBook'
+import { fetch } from '@/util/gapi'
 
 export default function useCreateBookMutation() {
   const collectionStore = useCollectionStore()
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation((book) => insertBook(sheetStore.sheetId, book), {
+  async function mutate(book) {
+    return await fetch(insertBook(sheetStore.sheetId, book))
+  }
+
+  return useMutation(mutate, {
     onSuccess(_, book) {
       const groups = collectionStore.filters.groups
 

src/mutations/useDeleteBookMutation.js

@@ -2,12 +2,17 @@ import { useMutation, useQueryClient } from 'vue-query'
 
 import { useSheetStore } from '@/stores/sheet'
 import deleteBook from '@/services/sheet/deleteBook'
+import { fetch } from '@/util/gapi'
 
 export default function useDeleteBookMutation() {
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation((book) => deleteBook(sheetStore.sheetId, book), {
+  async function mutate(book) {
+    return await fetch(deleteBook(sheetStore.sheetId, book))
+  }
+
+  return useMutation(mutate, {
     onSuccess(_, book) {
       queryClient.setQueryData(['book', book.id], null)
 

src/mutations/useEditBookMutation.js

@@ -3,13 +3,18 @@ import { useMutation, useQueryClient } from 'vue-query'
 import { useCollectionStore } from '@/stores/collection'
 import { useSheetStore } from '@/stores/sheet'
 import updateBook from '@/services/sheet/updateBook'
+import { fetch } from '@/util/gapi'
 
 export default function useEditBookMutation() {
   const collectionStore = useCollectionStore()
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation((book) => updateBook(sheetStore.sheetId, book), {
+  async function mutate(book) {
+    return await fetch(updateBook(sheetStore.sheetId, book))
+  }
+
+  return useMutation(mutate, {
     onSuccess(_, book) {
       const groups = collectionStore.filters.groups
 

src/queries/useBookCollectionQuery.js

@@ -2,28 +2,18 @@ import { computed } from 'vue'
 import { useQuery } from 'vue-query'
 
 import getBooksFromCollection from '@/services/sheet/getBooksFromCollection'
-import { useAuthStore } from '@/stores/auth'
 import { useSheetStore } from '@/stores/sheet'
+import { fetch } from '@/util/gapi'
 
 export default function useBookCollectionQuery(book, { enabled }) {
-  const authStore = useAuthStore()
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
   async function fetcher() {
-    return await getBooksFromCollection(sheetId.value, book.value)
+    return await fetch(getBooksFromCollection(sheetId.value, book.value))
   }
 
   const bookTitle = computed(() => book.value?.titleParts?.title + ' #')
 
-  return useQuery(['book-collection', bookTitle], fetcher, {
-    enabled,
-    retry(_, error) {
-      if (error.code === 401) {
-        authStore.refreshToken()
-      }
-
-      return 2
-    }
-  })
+  return useQuery(['book-collection', bookTitle], fetcher, { enabled })
 }

src/queries/useBookExistsQuery.js

@@ -2,26 +2,16 @@ import { computed } from 'vue'
 import { useQuery } from 'vue-query'
 
 import getBookByCode from '@/services/sheet/getBookByCode'
-import { useAuthStore } from '@/stores/auth'
 import { useSheetStore } from '@/stores/sheet'
+import { fetch } from '@/util/gapi'
 
 export default function useBookExistsQuery(isbn, { enabled }) {
-  const authStore = useAuthStore()
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
   async function fetcher() {
-    return await getBookByCode(sheetId.value, isbn.value)
+    return await fetch(getBookByCode(sheetId.value, isbn.value))
   }
 
-  return useQuery(['book-exists', isbn], fetcher, {
-    enabled,
-    retry(_, error) {
-      if (error.code === 401) {
-        authStore.refreshToken()
-      }
-
-      return 2
-    }
-  })
+  return useQuery(['book-exists', isbn], fetcher, { enabled })
 }

src/queries/useBookQuery.js

@@ -2,26 +2,16 @@ import { computed } from 'vue'
 import { useQuery } from 'vue-query'
 
 import getBookById from '@/services/sheet/getBookById'
-import { useAuthStore } from '@/stores/auth'
 import { useSheetStore } from '@/stores/sheet'
+import { fetch } from '@/util/gapi'
 
 export default function useBookQuery(bookId, { enabled }) {
-  const authStore = useAuthStore()
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
   async function fetcher() {
-    return await getBookById(sheetId.value, bookId.value)
+    return await fetch(getBookById(sheetId.value, bookId.value))
   }
 
-  return useQuery(['book', bookId], fetcher, {
-    enabled,
-    retry(_, error) {
-      if (error.code === 401) {
-        authStore.refreshToken()
-      }
-
-      return 2
-    }
-  })
+  return useQuery(['book', bookId], fetcher, { enabled })
 }

src/queries/useBookSearchQuery.js

@@ -3,19 +3,18 @@ import { useQuery } from 'vue-query'
 
 import { PropertyToColumn } from '@/model/Book'
 import searchBooks from '@/services/sheet/searchBooks'
-import { useAuthStore } from '@/stores/auth'
 import { useSheetStore } from '@/stores/sheet'
+import { fetch } from '@/util/gapi'
 
 export default function useBookSearchQuery(
   { query, sortBy, sortDirection, page },
   { enabled, keepPreviousData }
 ) {
-  const authStore = useAuthStore()
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
   async function fetcher() {
-    return await searchBooks({
+    const promise = searchBooks({
       sheetId: sheetId.value,
       searchTerm: query.value,
       sort: {
@@ -24,21 +23,13 @@ export default function useBookSearchQuery(
       },
       page: page.value
     })
+
+    return await fetch(promise)
   }
 
   return useQuery(
     ['book-search', { query, sortBy, sortDirection, page }],
     fetcher,
-    {
-      enabled,
-      keepPreviousData,
-      retry(_, error) {
-        if (error.code === 401) {
-          authStore.refreshToken()
-        }
-
-        return 2
-      }
-    }
+    { enabled, keepPreviousData }
   )
 }