From d82cc5b3dd68556d95a24e84ead4602e248ab7f6 Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Wed, 7 Apr 2021 20:52:38 -0400
Subject: [PATCH] Refactor pagination-related functions on frontend

---
 .../interface/viewPbCardInterface.vue         |  65 ++--
 frontend/layouts/default.vue                  |   1 -
 frontend/mixins/crud.js                       | 318 +++++++++++-------
 frontend/pages/public-pbs.vue                 |   8 +-
 frontend/services/base.ts                     |  49 +++
 frontend/services/dropdown.ts                 |  45 +--
 6 files changed, 292 insertions(+), 194 deletions(-)

diff --git a/frontend/components/interface/viewPbCardInterface.vue b/frontend/components/interface/viewPbCardInterface.vue
index 1e39119..34535f9 100644
--- a/frontend/components/interface/viewPbCardInterface.vue
+++ b/frontend/components/interface/viewPbCardInterface.vue
@@ -135,11 +135,11 @@
 </template>
 
 <script>
-import { executeGiraffeql } from '~/services/giraffeql'
 import {
   handleError,
   serializeNestedProperty,
   copyToClipboard,
+  collectPaginatorData,
 } from '~/services/base'
 import EventColumn from '~/components/table/common/eventColumn.vue'
 import ResultColumn from '~/components/table/common/resultColumn.vue'
@@ -403,32 +403,29 @@ export default {
           Object.assign(ele, additionalFilters)
         })
 
-        const data = await executeGiraffeql(this, {
-          getPersonalBestPaginator: {
-            edges: {
-              node: {
-                id: true,
-                timeElapsed: true,
-                movesCount: true,
-                attemptsSucceeded: true,
-                attemptsTotal: true,
-                setSize: true,
-                pbClass: {
-                  id: true,
-                  name: true,
-                },
-                event: {
-                  id: true,
-                  scoreMethod: true,
-                },
-              },
+        const results = await collectPaginatorData(
+          this,
+          'getPersonalBestPaginator',
+          {
+            id: true,
+            timeElapsed: true,
+            movesCount: true,
+            attemptsSucceeded: true,
+            attemptsTotal: true,
+            setSize: true,
+            pbClass: {
+              id: true,
+              name: true,
             },
-            __args: {
-              first: 500, // at most 7*numEvents required
-              filterBy: filters,
+            event: {
+              id: true,
+              scoreMethod: true,
             },
           },
-        })
+          {
+            filterBy: filters,
+          }
+        )
 
         // create a map field -> serializeFn for fast serialization
         const serializeMap = new Map()
@@ -440,27 +437,27 @@ export default {
         })
 
         // apply serialization to results
-        data.edges.forEach((ele) => {
+        results.forEach((ele) => {
           serializeMap.forEach((serialzeFn, field) => {
-            serializeNestedProperty(ele.node, field, serialzeFn)
+            serializeNestedProperty(ele, field, serialzeFn)
           })
         })
 
         // loop through pbs, add to eventsMap
-        data.edges.forEach((ele) => {
-          const itemObject = eventsMap.get(ele.node.event.id)
+        results.forEach((ele) => {
+          const itemObject = eventsMap.get(ele.event.id)
           // flag the itemObject as hasRecords
           if (!itemObject.hasRecords) itemObject.hasRecords = true
 
           // if pbClass.id === 1, classify as single
-          if (ele.node.pbClass.id === 1) {
-            itemObject.single = ele.node
-          } else if (ele.node.pbClass.id === 2) {
+          if (ele.pbClass.id === 1) {
+            itemObject.single = ele
+          } else if (ele.pbClass.id === 2) {
             // else if pbClass.id === 2, is Avg
-            itemObject['ao' + ele.node.setSize] = ele.node
-          } else if (ele.node.pbClass.id === 3) {
+            itemObject['ao' + ele.setSize] = ele
+          } else if (ele.pbClass.id === 3) {
             // else if pbClass.id === 3, is Mean
-            itemObject['mo' + ele.node.setSize] = ele.node
+            itemObject['mo' + ele.setSize] = ele
           }
         })
         this.items = items
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b84d3ff..752f1c8 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -336,7 +336,6 @@ export default {
       return (
         allowedRoles.includes(this.$store.getters['auth/user']?.role) ||
         allowedPermissions.some((ele) =>
-          // eslint-disable-next-line camelcase
           this.$store.getters['auth/user']?.allPermissions.includes(ele)
         )
       )
diff --git a/frontend/mixins/crud.js b/frontend/mixins/crud.js
index 1533570..b82d901 100644
--- a/frontend/mixins/crud.js
+++ b/frontend/mixins/crud.js
@@ -17,6 +17,8 @@ import {
   handleError,
   serializeNestedProperty,
   goToPage,
+  getPaginatorData,
+  collectPaginatorData,
 } from '~/services/base'
 
 export default {
@@ -444,23 +446,113 @@ export default {
     async exportData() {
       this.loading.exportData = true
       try {
+        // create a map field -> serializeFn for fast serialization
+        const serializeMap = new Map()
+
+        const query = collapseObject(
+          this.recordInfo.paginationOptions.headers
+            .concat(
+              (this.recordInfo.requiredFields ?? []).map((field) => ({
+                field,
+              }))
+            )
+            .reduce(
+              (total, headerInfo) => {
+                const fieldInfo = this.recordInfo.fields[headerInfo.field]
+
+                // field unknown, abort
+                if (!fieldInfo)
+                  throw new Error('Unknown field: ' + headerInfo.field)
+
+                // if field has '+', add all of the fields
+                if (headerInfo.field.match(/\+/)) {
+                  headerInfo.field.split(/\+/).forEach((field) => {
+                    total[field] = true
+                    // assuming all fields are valid
+                    serializeMap.set(
+                      field,
+                      this.recordInfo.fields[field].serialize
+                    )
+                  })
+                } else {
+                  total[headerInfo.field] = true
+                  serializeMap.set(headerInfo.field, fieldInfo.serialize)
+                }
+                return total
+              },
+              { id: true } // always add id
+            )
+        )
+
+        const args = {
+          [this.positivePageDelta ? 'first' : 'last']: this.options
+            .itemsPerPage,
+          ...(this.options.page > 1 &&
+            this.positivePageDelta && {
+              after: this.currentPaginatorInfo.endCursor,
+            }),
+          ...(!this.positivePageDelta && {
+            before: this.currentPaginatorInfo.startCursor,
+          }),
+          sortBy: this.options.sortBy,
+          sortDesc: this.options.sortDesc,
+          filterBy: [
+            this.filters.concat(this.lockedFilters).reduce((total, ele) => {
+              if (!total[ele.field]) total[ele.field] = {}
+
+              // check if there is a parser on the fieldInfo
+              const fieldInfo = this.recordInfo.fields[ele.field]
+
+              // field unknown, abort
+              if (!fieldInfo) throw new Error('Unknown field: ' + ele.field)
+
+              // parse '__null' to null first
+              const value = ele.value === '__null' ? null : ele.value
+
+              // apply parseValue function, if any
+              total[ele.field][ele.operator] = fieldInfo.parseValue
+                ? fieldInfo.parseValue(value)
+                : value
+
+              return total
+            }, {}),
+          ],
+          ...(this.search && { search: this.search }),
+          ...(this.groupBy && { groupBy: this.groupBy }),
+        }
+
         // fetch data
-        const results = await this.getRecords(false)
-
-        const data = results.edges
-          .map((ele) => ele.node)
-          .map((item) => {
-            const returnItem = {}
-            this.headers.forEach((headerObject) => {
-              if (headerObject.value) {
-                returnItem[headerObject.value] = this.getTableRowData(
-                  headerObject,
-                  item
-                )
-              }
-            })
-            return returnItem
+        const results = await collectPaginatorData(
+          this,
+          'get' + this.capitalizedType + 'Paginator',
+          query,
+          args
+        )
+
+        // remove any undefined serializeMap elements
+        serializeMap.forEach((val, key) => {
+          if (val === undefined) serializeMap.delete(key)
+        })
+
+        // apply serialization to results
+        results.forEach((ele) => {
+          serializeMap.forEach((serialzeFn, field) => {
+            serializeNestedProperty(ele, field, serialzeFn)
           })
+        })
+
+        const data = results.map((item) => {
+          const returnItem = {}
+          this.headers.forEach((headerObject) => {
+            if (headerObject.value) {
+              returnItem[headerObject.value] = this.getTableRowData(
+                headerObject,
+                item
+              )
+            }
+          })
+          return returnItem
+        })
 
         if (data.length < 1) {
           throw new Error('No results to export')
@@ -531,120 +623,102 @@ export default {
       }
     },
 
-    async getRecords(paginated = true) {
-      const paginationArgs = paginated
-        ? {
-            [this.positivePageDelta ? 'first' : 'last']: this.options
-              .itemsPerPage,
-            ...(this.options.page > 1 &&
-              this.positivePageDelta && {
-                after: this.currentPaginatorInfo.endCursor,
-              }),
-            ...(!this.positivePageDelta && {
-              before: this.currentPaginatorInfo.startCursor,
-            }),
-          }
-        : {
-            first: 100, // first 100 rows only
-          }
-
-      // create a map field -> serializeFn for fast serialization
-      const serializeMap = new Map()
-
-      const data = await executeGiraffeql(this, {
-        ['get' + this.capitalizedType + 'Paginator']: {
-          paginatorInfo: {
-            total: true,
-            startCursor: true,
-            endCursor: true,
-          },
-          edges: {
-            node: collapseObject(
-              this.recordInfo.paginationOptions.headers
-                .concat(
-                  (this.recordInfo.requiredFields ?? []).map((field) => ({
-                    field,
-                  }))
-                )
-                .reduce(
-                  (total, headerInfo) => {
-                    const fieldInfo = this.recordInfo.fields[headerInfo.field]
-
-                    // field unknown, abort
-                    if (!fieldInfo)
-                      throw new Error('Unknown field: ' + headerInfo.field)
-
-                    // if field has '+', add all of the fields
-                    if (headerInfo.field.match(/\+/)) {
-                      headerInfo.field.split(/\+/).forEach((field) => {
-                        total[field] = true
-                        // assuming all fields are valid
-                        serializeMap.set(
-                          field,
-                          this.recordInfo.fields[field].serialize
-                        )
-                      })
-                    } else {
-                      total[headerInfo.field] = true
-                      serializeMap.set(headerInfo.field, fieldInfo.serialize)
-                    }
-                    return total
-                  },
-                  { id: true } // always add id
-                )
-            ),
-            cursor: true,
-          },
-          __args: {
-            ...paginationArgs,
-            sortBy: this.options.sortBy,
-            sortDesc: this.options.sortDesc,
-            filterBy: [
-              this.filters.concat(this.lockedFilters).reduce((total, ele) => {
-                if (!total[ele.field]) total[ele.field] = {}
-
-                // check if there is a parser on the fieldInfo
-                const fieldInfo = this.recordInfo.fields[ele.field]
+    async loadData() {
+      this.loading.loadData = true
+      try {
+        // create a map field -> serializeFn for fast serialization
+        const serializeMap = new Map()
+
+        const query = collapseObject(
+          this.recordInfo.paginationOptions.headers
+            .concat(
+              (this.recordInfo.requiredFields ?? []).map((field) => ({
+                field,
+              }))
+            )
+            .reduce(
+              (total, headerInfo) => {
+                const fieldInfo = this.recordInfo.fields[headerInfo.field]
 
                 // field unknown, abort
-                if (!fieldInfo) throw new Error('Unknown field: ' + ele.field)
-
-                // parse '__null' to null first
-                const value = ele.value === '__null' ? null : ele.value
-
-                // apply parseValue function, if any
-                total[ele.field][ele.operator] = fieldInfo.parseValue
-                  ? fieldInfo.parseValue(value)
-                  : value
-
+                if (!fieldInfo)
+                  throw new Error('Unknown field: ' + headerInfo.field)
+
+                // if field has '+', add all of the fields
+                if (headerInfo.field.match(/\+/)) {
+                  headerInfo.field.split(/\+/).forEach((field) => {
+                    total[field] = true
+                    // assuming all fields are valid
+                    serializeMap.set(
+                      field,
+                      this.recordInfo.fields[field].serialize
+                    )
+                  })
+                } else {
+                  total[headerInfo.field] = true
+                  serializeMap.set(headerInfo.field, fieldInfo.serialize)
+                }
                 return total
-              }, {}),
-            ],
-            ...(this.search && { search: this.search }),
-            ...(this.groupBy && { groupBy: this.groupBy }),
-          },
-        },
-      })
+              },
+              { id: true } // always add id
+            )
+        )
 
-      // remove any undefined serializeMap elements
-      serializeMap.forEach((val, key) => {
-        if (val === undefined) serializeMap.delete(key)
-      })
+        const args = {
+          [this.positivePageDelta ? 'first' : 'last']: this.options
+            .itemsPerPage,
+          ...(this.options.page > 1 &&
+            this.positivePageDelta && {
+              after: this.currentPaginatorInfo.endCursor,
+            }),
+          ...(!this.positivePageDelta && {
+            before: this.currentPaginatorInfo.startCursor,
+          }),
+          sortBy: this.options.sortBy,
+          sortDesc: this.options.sortDesc,
+          filterBy: [
+            this.filters.concat(this.lockedFilters).reduce((total, ele) => {
+              if (!total[ele.field]) total[ele.field] = {}
+
+              // check if there is a parser on the fieldInfo
+              const fieldInfo = this.recordInfo.fields[ele.field]
+
+              // field unknown, abort
+              if (!fieldInfo) throw new Error('Unknown field: ' + ele.field)
+
+              // parse '__null' to null first
+              const value = ele.value === '__null' ? null : ele.value
+
+              // apply parseValue function, if any
+              total[ele.field][ele.operator] = fieldInfo.parseValue
+                ? fieldInfo.parseValue(value)
+                : value
+
+              return total
+            }, {}),
+          ],
+          ...(this.search && { search: this.search }),
+          ...(this.groupBy && { groupBy: this.groupBy }),
+        }
 
-      // apply serialization to results
-      data.edges.forEach((ele) => {
-        serializeMap.forEach((serialzeFn, field) => {
-          serializeNestedProperty(ele.node, field, serialzeFn)
-        })
-      })
+        const results = await getPaginatorData(
+          this,
+          'get' + this.capitalizedType + 'Paginator',
+          query,
+          args
+        )
 
-      return data
-    },
+        // remove any undefined serializeMap elements
+        serializeMap.forEach((val, key) => {
+          if (val === undefined) serializeMap.delete(key)
+        })
 
-    async loadData() {
-      this.loading.loadData = true
-      try {
-        const results = await this.getRecords()
+        // apply serialization to results
+        results.edges.forEach((ele) => {
+          serializeMap.forEach((serialzeFn, field) => {
+            serializeNestedProperty(ele.node, field, serialzeFn)
+          })
+        })
 
         this.records = results.edges.map((ele) => ele.node)
 
diff --git a/frontend/pages/public-pbs.vue b/frontend/pages/public-pbs.vue
index b88d51e..257a5ea 100644
--- a/frontend/pages/public-pbs.vue
+++ b/frontend/pages/public-pbs.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="text-center pt-3">
+    <v-container fluid class="text-center pb-0">
       <v-progress-circular
         v-if="loading.presets"
         indeterminate
@@ -19,8 +19,8 @@
           {{ item.name }}
         </v-chip>
 
-        <v-divider />
-        <div class="pt-2">PB Types</div>
+        <v-divider class="my-2" />
+        <div>PB Types</div>
         <v-chip
           v-for="item in pbTypes"
           :key="item.text"
@@ -30,7 +30,7 @@
           {{ item.text }}
         </v-chip>
       </div>
-    </div>
+    </v-container>
     <CrudRecordPage
       :record-info="recordInfo"
       :locked-filters="lockedFilters"
diff --git a/frontend/services/base.ts b/frontend/services/base.ts
index e6e58a5..2945c2e 100644
--- a/frontend/services/base.ts
+++ b/frontend/services/base.ts
@@ -1,5 +1,6 @@
 import { format } from 'timeago.js'
 import { convertArrayToCSV } from 'convert-array-to-csv'
+import { executeGiraffeql } from '~/services/giraffeql'
 
 type StringKeyObject = { [x: string]: any }
 
@@ -220,3 +221,51 @@ export function goToPage(that, routeName, item, openInNew = false) {
     that.$router.push(routeObject)
   }
 }
+
+export function getPaginatorData(that, operation, query, args) {
+  return executeGiraffeql(that, <any>{
+    [operation]: {
+      paginatorInfo: {
+        total: true,
+        startCursor: true,
+        endCursor: true,
+      },
+      edges: {
+        node: query,
+        cursor: true,
+      },
+      __args: args,
+    },
+  })
+}
+
+// executes a giraffeql paginated operation 100 rows at a time until no more results are returned
+export async function collectPaginatorData(
+  that,
+  operation,
+  query,
+  args = {},
+  fetchRows = 100
+) {
+  let afterCursor: string | undefined
+
+  const allResults: any[] = []
+
+  let hasMore = true
+  while (hasMore) {
+    const data = <any>await getPaginatorData(that, operation, query, {
+      ...args,
+      first: fetchRows,
+      after: afterCursor,
+    })
+
+    afterCursor = data.paginatorInfo.endCursor
+
+    // if results returned is less than fetchRows, no more results
+    if (data.edges.length < fetchRows) hasMore = false
+
+    allResults.push(...data.edges.map((ele) => ele.node))
+  }
+
+  return allResults
+}
diff --git a/frontend/services/dropdown.ts b/frontend/services/dropdown.ts
index 781e214..22e3e40 100644
--- a/frontend/services/dropdown.ts
+++ b/frontend/services/dropdown.ts
@@ -1,4 +1,5 @@
 import { executeGiraffeql } from '~/services/giraffeql'
+import { collectPaginatorData } from '~/services/base'
 
 function memoize(memoizedFn) {
   const cache = {}
@@ -14,24 +15,13 @@ function memoize(memoizedFn) {
   }
 }
 
-export const getEvents = memoize(async function (that, _forceReload = false) {
-  const data = await executeGiraffeql<'getEventPaginator'>(that, {
-    getEventPaginator: {
-      edges: {
-        node: {
-          id: true,
-          name: true,
-          scoreMethod: true,
-          cubingIcon: true,
-        },
-      },
-      __args: {
-        first: 100,
-      },
-    },
+export const getEvents = memoize(function (that, _forceReload = false) {
+  return collectPaginatorData(that, 'getEventPaginator', {
+    id: true,
+    name: true,
+    scoreMethod: true,
+    cubingIcon: true,
   })
-
-  return data.edges.map((edge) => edge.node)
 })
 
 export const getProducts = memoize(async function (that, _forceReload = false) {
@@ -52,26 +42,15 @@ export const getProducts = memoize(async function (that, _forceReload = false) {
   return data.edges.map((edge) => edge.node)
 })
 
-export const getPersonalBestClasses = memoize(async function (
+export const getPersonalBestClasses = memoize(function (
   that,
   _forceReload = false
 ) {
-  const data = await executeGiraffeql<'getPersonalBestClassPaginator'>(that, {
-    getPersonalBestClassPaginator: {
-      edges: {
-        node: {
-          id: true,
-          name: true,
-          setSize: true,
-        },
-      },
-      __args: {
-        first: 100,
-      },
-    },
+  return collectPaginatorData(that, 'getPersonalBestClassPaginator', {
+    id: true,
+    name: true,
+    setSize: true,
   })
-
-  return data.edges.map((edge) => edge.node)
 })
 
 export const getUserRoles = memoize(async function (