Client - refactoring pagination query

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -7,8 +7,8 @@
           {{ $t('admin.BACK_TO_ADMIN') }}
         </button>
         <AdminUsersSelects
-          :sort="sort"
-          :order_by="order_by"
+          :sort="sortList"
+          :order_by="orderByList"
           :query="query"
           @updateSelect="reloadUsers"
         />
@@ -135,6 +135,7 @@
   import { IPagination, TPaginationPayload } from '@/types/api'
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { getQuery, sortList } from '@/utils/api'
   import { getDateWithTZ } from '@/utils/dates'
 
   export default defineComponent({
@@ -149,14 +150,16 @@
       const route = useRoute()
       const router = useRouter()
 
-      const sort: string[] = ['asc', 'desc']
-      const order_by: string[] = [
+      const orderByList: string[] = [
         'admin',
         'created_at',
         'username',
         'workouts_count',
       ]
-      let query: TPaginationPayload = reactive(getQuery(route.query))
+      const defaultOrderBy = 'created_at'
+      let query: TPaginationPayload = reactive(
+        getQuery(route.query, orderByList, defaultOrderBy)
+      )
 
       const authUser: ComputedRef<IUserProfile> = computed(
         () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
@@ -174,32 +177,6 @@
       function loadUsers(queryParams: TPaginationPayload) {
         store.dispatch(USERS_STORE.ACTIONS.GET_USERS, queryParams)
       }
-      function getPage(page: string | (string | null)[] | null): number {
-        return page && typeof page === 'string' && +page > 0 ? +page : 1
-      }
-      function getPerPage(perPage: string | (string | null)[] | null): number {
-        return perPage && typeof perPage === 'string' && +perPage > 0
-          ? +perPage
-          : 10
-      }
-      function getOrder(order: string | (string | null)[] | null): string {
-        return order && typeof order === 'string' && sort.includes(order)
-          ? order
-          : 'asc'
-      }
-      function getOrderBy(order: string | (string | null)[] | null): string {
-        return order && typeof order === 'string' && order_by.includes(order)
-          ? order
-          : 'created_at'
-      }
-      function getQuery(query: LocationQuery): TPaginationPayload {
-        return {
-          page: getPage(query.page),
-          per_page: getPerPage(query.per_page),
-          order: getOrder(query.order),
-          order_by: getOrderBy(query.order_by),
-        }
-      }
       function updateUser(username: string, admin: boolean) {
         store.dispatch(USERS_STORE.ACTIONS.UPDATE_USER, {
           username,
@@ -219,10 +196,7 @@
       watch(
         () => route.query,
         (newQuery: LocationQuery) => {
-          query.page = getPage(newQuery.page)
-          query.per_page = getPerPage(newQuery.per_page)
-          query.order = getOrder(newQuery.order)
-          query.order_by = getOrderBy(newQuery.order_by)
+          query = getQuery(newQuery, orderByList, defaultOrderBy, { query })
           loadUsers(query)
         }
       )
@@ -234,10 +208,10 @@
       return {
         authUser,
         errorMessages,
+        orderByList,
         pagination,
-        order_by,
         query,
-        sort,
+        sortList,
         users,
         capitalize,
         format,

fittrackee_client/src/types/api.ts

@@ -13,3 +13,8 @@ export type TPaginationPayload = {
   per_page: number
   page: number
 }
+
+export interface IQueryOptions {
+  defaultSort?: string
+  query?: TPaginationPayload
+}

fittrackee_client/src/utils/api.ts

@@ -0,0 +1,50 @@
+import { LocationQuery } from 'vue-router'
+
+import { IQueryOptions, TPaginationPayload } from '@/types/api'
+
+export const sortList: string[] = ['asc', 'desc']
+export const defaultPage = 1
+export const defaultPerPage = 10
+
+export const getNumberQueryValue = (
+  queryValue: string | (string | null)[] | null,
+  defaultValue: number
+): number => {
+  return queryValue && typeof queryValue === 'string' && +queryValue > 0
+    ? +queryValue
+    : defaultValue
+}
+
+export const getStringQueryValue = (
+  queryValue: string | (string | null)[] | null,
+  availableValues: string[],
+  defaultValue: string
+): string => {
+  return queryValue &&
+    typeof queryValue === 'string' &&
+    availableValues.includes(queryValue)
+    ? queryValue
+    : defaultValue
+}
+
+export const getQuery = (
+  locationQuery: LocationQuery,
+  orderByList: string[],
+  defaultOrderBy: string,
+  options?: IQueryOptions
+): TPaginationPayload => {
+  const queryOptions = options || {}
+  const defaultSort = queryOptions.defaultSort || 'asc'
+  const query = queryOptions.query || <TPaginationPayload>{}
+
+  query.page = getNumberQueryValue(locationQuery.page, defaultPage)
+  query.per_page = getNumberQueryValue(locationQuery.per_page, defaultPerPage)
+  query.order = getStringQueryValue(locationQuery.order, sortList, defaultSort)
+  query.order_by = getStringQueryValue(
+    locationQuery.order_by,
+    orderByList,
+    defaultOrderBy
+  )
+
+  return query
+}