Permission checks for pages

frontend/src/composables/useIsAdmin.ts

@@ -1,8 +1,9 @@
 import { computed } from "vue";
 import { useCurrentUserQuery } from "@/queries/User";
+import type { QueryClient } from "@tanstack/vue-query";
 
-export default function useIsAdmin() {
-    const { data: user } = useCurrentUserQuery();
+export default function useIsAdmin(queryClient?: QueryClient) {
+    const { data: user, isLoading } = useCurrentUserQuery(queryClient);
     const isAdmin = computed(() => user.value?.is_admin || false);
-    return { isAdmin };
+    return { isAdmin, isLoading };
 }

frontend/src/composables/useIsTeacher.ts

@@ -1,8 +1,9 @@
 import { computed } from "vue";
 import { useCurrentUserQuery } from "@/queries/User";
+import type { QueryClient } from "@tanstack/vue-query";
 
-export default function useIsTeacher() {
-    const { data: user } = useCurrentUserQuery();
+export default function useIsTeacher(queryClient?: QueryClient) {
+    const { data: user, isLoading } = useCurrentUserQuery(queryClient);
     const isTeacher = computed(() => user.value?.is_teacher || false);
-    return { isTeacher };
+    return { isTeacher, isLoading };
 }

frontend/src/main.ts

@@ -3,7 +3,7 @@ import "@mdi/font/css/materialdesignicons.css";
 
 import { createApp } from "vue";
 import { createPinia } from "pinia";
-import { VueQueryPlugin } from "@tanstack/vue-query";
+import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
 
 import App from "./App.vue";
 import router from "./router";
@@ -16,10 +16,13 @@ const app = createApp(App);
 
 const pinia = createPinia();
 
+const queryClient = new QueryClient();
+app.provide("queryClient", queryClient);
+
 app.use(router);
 app.use(pinia);
 app.use(vuetify);
 app.use(i18n);
-app.use(VueQueryPlugin);
+app.use(VueQueryPlugin, { queryClient });
 
 app.mount("#app");

frontend/src/queries/Group.ts

@@ -1,7 +1,7 @@
 import { computed, toValue } from "vue";
 import type { MaybeRefOrGetter } from "vue";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import type { UseMutationReturnType, UseQueryReturnType } from "@tanstack/vue-query";
+import type { QueryClient, UseMutationReturnType, UseQueryReturnType } from "@tanstack/vue-query";
 import type Group from "@/models/Group";
 import type { GroupForm } from "@/models/Group";
 import {
@@ -38,26 +38,34 @@ function PROJECT_USER_GROUP_QUERY_KEY(projectId: number): (string | number)[] {
  * Query composable for fetching a group by id
  */
 export function useGroupQuery(
-    groupId: MaybeRefOrGetter<number | undefined>
+    groupId: MaybeRefOrGetter<number | undefined>,
+    queryClient?: QueryClient
 ): UseQueryReturnType<Group, Error> {
-    return useQuery<Group, Error>({
-        queryKey: GROUP_QUERY_KEY(toValue(groupId)!),
-        queryFn: () => getGroup(toValue(groupId)!),
-        enabled: () => !!toValue(groupId),
-    });
+    return useQuery<Group, Error>(
+        {
+            queryKey: GROUP_QUERY_KEY(toValue(groupId)!),
+            queryFn: () => getGroup(toValue(groupId)!),
+            enabled: () => !!toValue(groupId),
+        },
+        queryClient
+    );
 }
 
 /**
  * Query composable for fetching all groups of a project
  */
 export function useProjectGroupsQuery(
-    projectId: MaybeRefOrGetter<number | undefined>
+    projectId: MaybeRefOrGetter<number | undefined>,
+    queryClient?: QueryClient
 ): UseQueryReturnType<Group[], Error> {
-    return useQuery<Group[], Error>({
-        queryKey: computed(() => PROJECT_GROUPS_QUERY_KEY(toValue(projectId)!)),
-        queryFn: () => getProjectGroups(toValue(projectId)!),
-        enabled: !!toValue(projectId),
-    });
+    return useQuery<Group[], Error>(
+        {
+            queryKey: computed(() => PROJECT_GROUPS_QUERY_KEY(toValue(projectId)!)),
+            queryFn: () => getProjectGroups(toValue(projectId)!),
+            enabled: !!toValue(projectId),
+        },
+        queryClient
+    );
 }
 
 export function useUserGroupsQuery(): UseQueryReturnType<Group[], Error> {
@@ -73,20 +81,26 @@ export function useUserGroupsQuery(): UseQueryReturnType<Group[], Error> {
  * @returns The group the user is in for the project, undefined if the user is not in a group
  */
 export function useProjectGroupQuery(
-    projectId: MaybeRefOrGetter<number | undefined>
+    projectId: MaybeRefOrGetter<number | undefined>,
+    queryClient?: QueryClient
 ): UseQueryReturnType<Group | null, Error> {
-    const { data: projectGroups } = useProjectGroupsQuery(projectId);
-    const { data: user } = useCurrentUserQuery();
-    const userGroup = computed(
-        () =>
+    const { data: projectGroups } = useProjectGroupsQuery(projectId, queryClient);
+    const { data: user } = useCurrentUserQuery(queryClient);
+    const userGroup = computed(() => {
+        if (projectGroups.value === undefined || user.value === undefined) return undefined;
+        return (
             projectGroups.value?.find((group) =>
                 group.members.some((member) => member.uid === user.value?.uid)
             ) || null
-    );
-    return useQuery({
-        queryKey: computed(() => PROJECT_USER_GROUP_QUERY_KEY(toValue(projectId)!)),
-        queryFn: () => userGroup,
+        );
     });
+    return useQuery(
+        {
+            queryKey: computed(() => PROJECT_USER_GROUP_QUERY_KEY(toValue(projectId)!)),
+            queryFn: () => userGroup,
+        },
+        queryClient
+    );
 }
 
 /**

frontend/src/queries/Project.ts

@@ -1,7 +1,7 @@
 import { computed, toValue } from "vue";
 import type { MaybeRefOrGetter } from "vue";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import type { UseMutationReturnType, UseQueryReturnType } from "@tanstack/vue-query";
+import type { QueryClient, UseMutationReturnType, UseQueryReturnType } from "@tanstack/vue-query";
 import type { ProjectForm, UserProjectList } from "@/models/Project";
 import type Project from "@/models/Project";
 import {
@@ -31,23 +31,32 @@ function TEST_FILES_QUERY_KEY(projectId: number): (string | number)[] {
 
 // Hook for fetching project details
 export function useProjectQuery(
-    projectId: MaybeRefOrGetter<number | undefined>
+    projectId: MaybeRefOrGetter<number | undefined>,
+    queryClient?: QueryClient
 ): UseQueryReturnType<Project, Error> {
-    return useQuery<Project, Error>({
-        queryKey: computed(() => PROJECT_QUERY_KEY(toValue(projectId)!)),
-        queryFn: () => getProject(toValue(projectId)!),
-        enabled: () => !!toValue(projectId),
-    });
+    return useQuery<Project, Error>(
+        {
+            queryKey: computed(() => PROJECT_QUERY_KEY(toValue(projectId)!)),
+            queryFn: () => getProject(toValue(projectId)!),
+            enabled: () => !!toValue(projectId),
+        },
+        queryClient
+    );
 }
 
 /**
  * Query composable for fetching all projects of the current user
  */
-export function useProjectsQuery(): UseQueryReturnType<UserProjectList, Error> {
-    return useQuery<UserProjectList>({
-        queryKey: PROJECTS_QUERY_KEY(),
-        queryFn: getProjects,
-    });
+export function useProjectsQuery(
+    queryClient?: QueryClient
+): UseQueryReturnType<UserProjectList, Error> {
+    return useQuery<UserProjectList>(
+        {
+            queryKey: PROJECTS_QUERY_KEY(),
+            queryFn: getProjects,
+        },
+        queryClient
+    );
 }
 
 /**

frontend/src/queries/Subject.ts

@@ -1,7 +1,7 @@
 import { computed, toValue } from "vue";
 import type { MaybeRefOrGetter } from "vue";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import type { UseQueryReturnType, UseMutationReturnType } from "@tanstack/vue-query";
+import type { UseQueryReturnType, UseMutationReturnType, QueryClient } from "@tanstack/vue-query";
 import {
     getSubject,
     getSubjectInstructors,
@@ -74,11 +74,16 @@ export function useSubjectUuidQuery(
 /**
  * Query composable for fetching all subjects of the current user
  */
-export function useSubjectsQuery(): UseQueryReturnType<UserSubjectList, Error> {
-    return useQuery<UserSubjectList, Error>({
-        queryKey: SUBJECTS_QUERY_KEY(),
-        queryFn: getSubjects,
-    });
+export function useSubjectsQuery(
+    queryClient?: QueryClient
+): UseQueryReturnType<UserSubjectList, Error> {
+    return useQuery<UserSubjectList, Error>(
+        {
+            queryKey: SUBJECTS_QUERY_KEY(),
+            queryFn: getSubjects,
+        },
+        queryClient
+    );
 }
 
 /**

frontend/src/queries/User.ts

@@ -1,7 +1,7 @@
 import { computed, toValue } from "vue";
 import type { MaybeRefOrGetter } from "vue";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
-import type { UseQueryReturnType, UseMutationReturnType } from "@tanstack/vue-query";
+import type { UseQueryReturnType, UseMutationReturnType, QueryClient } from "@tanstack/vue-query";
 import type User from "@/models/User";
 import {
     getCurrentUser,
@@ -27,11 +27,14 @@
 /**
  * Query composable for fetching the current user
  */
-export function useCurrentUserQuery(): UseQueryReturnType<User, Error> {
-    return useQuery<User, Error>({
-        queryKey: CURRENT_USER_QUERY_KEY(),
-        queryFn: () => getCurrentUser(),
-    });
+export function useCurrentUserQuery(queryClient?: QueryClient): UseQueryReturnType<User, Error> {
+    return useQuery<User, Error>(
+        {
+            queryKey: CURRENT_USER_QUERY_KEY(),
+            queryFn: () => getCurrentUser(),
+        },
+        queryClient
+    );
 }
 
 /**
@@ -85,7 +88,7 @@
             });
             return { previousUsers: users || [] };
         },
         onSettled: (_, __, uid, ctx) => {
             queryClient.invalidateQueries({ queryKey: USERS_QUERY_KEY() });
         },
         onError: (_, uid, ctx) => {
@@ -146,7 +149,7 @@
             });
             return { previousUsers: users || [] };
         },
         onSettled: (_, __, uid, ctx) => {
             queryClient.invalidateQueries({ queryKey: USERS_QUERY_KEY() });
         },
         onError: (err, uid, ctx) => {