Replace all userStudentData queries with composable

yeatmanlab · Aug 20, 2024 · 7b516f6 · 7b516f6
1 parent 3840229
commit 7b516f6
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 94 deletions.
diff --git a/src/components/tasks/TaskCrowding.vue b/src/components/tasks/TaskCrowding.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -29,7 +28,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskFluency.vue b/src/components/tasks/TaskFluency.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -29,7 +28,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskLetter.vue b/src/components/tasks/TaskLetter.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskLevante.vue b/src/components/tasks/TaskLevante.vue
@@ -10,11 +10,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -29,7 +28,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskMEP.vue b/src/components/tasks/TaskMEP.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskMultichoice.vue b/src/components/tasks/TaskMultichoice.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskPA.vue b/src/components/tasks/TaskPA.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskRan.vue b/src/components/tasks/TaskRan.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskSRE.vue b/src/components/tasks/TaskSRE.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskSWR.vue b/src/components/tasks/TaskSWR.vue
@@ -9,11 +9,10 @@
 import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/components/tasks/TaskVocab.vue b/src/components/tasks/TaskVocab.vue
@@ -9,11 +9,10 @@
 import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useQuery } from '@tanstack/vue-query';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import { fetchDocById } from '@/helpers/query/utils';
+import useUserStudentDataQuery from '@/composables/queries/useUserStudentDataQuery';
 import packageLockJson from '../../../package-lock.json';
 
 const props = defineProps({
@@ -45,12 +44,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });
 
-const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', uid, 'studentData'],
-  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
-  keepPreviousData: true,
+const { isLoading: isLoadingUserData, data: userData } = useUserStudentDataQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 // The following code intercepts the back button and instead forces a refresh.

diff --git a/src/composables/queries/useUserStudentDataQuery.js b/src/composables/queries/useUserStudentDataQuery.js
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/store/auth';
 import { fetchDocById } from '@/helpers/query/utils';
-import { USER_DATA_QUERY_KEY } from '@/constants/queryKeys';
+import { USER_STUDENT_DATA_QUERY_KEY } from '@/constants/queryKeys';
 import { FIRESTORE_COLLECTIONS } from '@/constants/firebase';
 
 /**
@@ -13,10 +13,10 @@ import { FIRESTORE_COLLECTIONS } from '@/constants/firebase';
  */
 const useUserStudentDataQuery = (queryOptions = undefined) => {
   const authStore = useAuthStore();
-  const { uid, userQueryKeyIndex } = storeToRefs(authStore);
+  const { uid } = storeToRefs(authStore);
 
   return useQuery({
-    queryKey: [USER_DATA_QUERY_KEY, uid.value, userQueryKeyIndex.value],
+    queryKey: [USER_STUDENT_DATA_QUERY_KEY, uid.value],
     queryFn: () => fetchDocById(FIRESTORE_COLLECTIONS.USERS, uid.value, ['studentData']),
     ...queryOptions,
   });

diff --git a/src/constants/queryKeys.js b/src/constants/queryKeys.js
@@ -1,2 +1,3 @@
 export const USER_DATA_QUERY_KEY = 'user';
+export const USER_STUDENT_DATA_QUERY_KEY = 'user-student';
 export const USER_CLAIMS_QUERY_KEY = 'user-claims';