update the game list to retain filters in the url query params

backend/src/memcache.ts

@@ -10,7 +10,9 @@ export class Memcache {
   readonly replaceCallback
 
   constructor(url: string) {
-    this.memcached = new Memcached(url, {})
+    this.memcached = new Memcached(url, {
+      timeout: 30
+    })
 
     this.getCallback = promisify(this.memcached.get).bind(this.memcached)
     this.setCallback = promisify(this.memcached.set).bind(this.memcached)

backend/src/rushstatsservice.ts

@@ -78,7 +78,7 @@ export function addRushStatsApis(app, jsonParser, memcache) {
     let cachedResponse = await memcache.get('rolestats' + req.body.monthId)
 
     if (cachedResponse) {
-      console.log('cache hit')
+      console.info('cache hit - ' + 'rolestats' + req.body.monthId)
       res.send(cachedResponse)
       return
     }

frontend/src/vues/GameList.vue

@@ -3,15 +3,16 @@
     <v-text-field
       class="filter flex-1-0"
       placeholder="Filter by Name"
-      v-model="filtervalue"
+      v-model="filterValue"
     ></v-text-field>
   </div>
   <v-data-table-server
     :headers="headers"
-    v-model:items-per-page="resultsPerPage"
     :items="games"
     :items-length="count"
-    v-model:page="page"
+    v-model:items-per-page="resultsPerPage"
+    v-model:page="pageValue"
+    v-model:sort-by="sortValue"
     @update:options="loadData"
   >
     <template v-slot:item.id="{ item }">
@@ -26,11 +27,7 @@
 
     <template #bottom></template>
   </v-data-table-server>
-  <v-pagination
-    :model-value="page"
-    :length="pageCount"
-    @update:modelValue="setPage($event)"
-  ></v-pagination>
+  <v-pagination v-model:model-value="pageValue" :length="pageCount"></v-pagination>
 </template>
 
 <style>
@@ -45,10 +42,10 @@
 <script setup lang="ts">
 import { Game } from '../types'
 import GameTable from './GameTable.vue'
-import { onMounted, watch, ref } from 'vue'
+import { onBeforeMount, watch, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
-import { VDataTable } from 'vuetify/components'
+// import { VDataTable } from 'vuetify/components'
 
 type ReadonlyHeaders = VDataTable['$props']['headers']
 
@@ -64,15 +61,16 @@ const router = useRouter()
 
 const games = ref<Game[]>([])
 const pageCount = ref(1)
-let page = ref(1)
 const resultsPerPage = ref(10)
 
-let count = ref(10)
+const count = ref(0)
 
-const filtervalue = ref<string>('')
+const pageValue = ref(1)
+const filterValue = ref('')
+const sortValue = ref([])
 
 async function loadData({ page, itemsPerPage, sortBy }: any) {
-  let sortString = 'id'
+  let sortString = 'id asc'
   if (sortBy[0]) {
     sortString = `${sortBy[0].key} ${sortBy[0].order}`
   }
@@ -81,50 +79,85 @@ async function loadData({ page, itemsPerPage, sortBy }: any) {
     page: `${page - 1}`,
     count: `${itemsPerPage}`,
     orderBy: sortString,
-    filter: filtervalue.value ? `title:"${filtervalue.value}"` : ''
+    filter: filterValue.value ? `title:"${filterValue.value}"` : ''
   })
 
   games.value = response.data.gameData
   pageCount.value = response.data.pageCount
   count.value = response.data.totalCount
+  console.log('asdf')
+  console.log(page)
+  console.log(itemsPerPage)
+  console.log(sortBy)
+  router.replace({
+    query: {
+      page: pageValue.value,
+      sort: sortString === 'id asc' ? '' : sortString,
+      filter: filterValue.value
+    }
+  })
 }
 
-function setPage(targetPage: number) {
-  router.replace({ query: { page: targetPage, filter: route.query.filter } })
+async function reloadData() {
+  loadData({
+    page: pageValue.value,
+    itemsPerPage: 10,
+    sortBy: sortValue.value
+  })
 }
 
-watch(route, (newValue, oldValue) => {
-  if (!route.query.page) {
-    router.replace({ query: { page: 1, filter: route.query.filter } })
-    page.value = 1
-  } else {
-    page.value = Number(route.query.page)
+watch(route, (newRoute, oldRoute) => {
+  console.log('route')
+  if (newRoute.query.page) {
+    pageValue.value = Number(newRoute.query.page)
   }
 
-  if (route.query.filter) {
-    filtervalue.value = route.query.filter.toString()
+  if (newRoute.query.sort) {
+    sortValue.value = [
+      {
+        key: newRoute.query.sort.split(' ')[0],
+        order: newRoute.query.sort.split(' ')[1]
+      }
+    ]
+  }
+
+  if (newRoute.query.filter) {
+    filterValue.value = newRoute.query.filter.toString()
   }
-  loadData({ page: page.value, itemsPerPage: resultsPerPage.value, sortBy: [] })
 })
 
 let debounce: ReturnType<typeof setTimeout>
-watch(filtervalue, (newFilter: string, oldFilter: string) => {
+watch(filterValue, (newFilter: string, oldFilter: string) => {
   clearTimeout(debounce)
   debounce = setTimeout(() => {
-    router.replace({ query: { page: route.query.page, filter: newFilter } })
+    reloadData()
   }, 500)
-  loadData({ page: page.value, itemsPerPage: resultsPerPage.value, sortBy: [] })
 })
 
-onMounted(async () => {
+onBeforeMount(async () => {
+  // Initialize Filter
   if (!route.query.page) {
-    router.replace({ query: { page: 1 } })
-    page.value = 1
+    pageValue.value = 1
   } else {
-    page.value = Number(route.query.page)
+    pageValue.value = Number(route.query.page)
+    count.value = route.query.page * 10
   }
+
+  // Initialize Sort
+  if (!route.query.sort) {
+    sortValue.value = []
+  } else {    
+    sortValue.value = [
+      {
+        key: route.query.sort.split(' ')[0],
+        order: route.query.sort.split(' ')[1]
+      }
+    ]
+  }
+
+  // Initialize Filter
   if (route.query.filter) {
-    filtervalue.value = route.query.filter.toString()
+    filterValue.value = route.query.filter.toString()
   }
 })
 </script>