Fix hidden element bug

Resolves MS-665

client/src/components/Chapter.vue

@@ -124,7 +124,7 @@ const filteredContentBlocks = computed(() => {
     (contentBlock) =>
       !hidden({
         block: contentBlock,
-        schoolClass: schoolClass,
+        schoolClass: schoolClass.value,
         type: CONTENT_TYPE,
       })
   );
@@ -221,7 +221,7 @@ const editNote = () => {
 const textHidden = (type: string) => {
   return hidden({
     block: props.chapter,
-    schoolClass: schoolClass,
+    schoolClass: schoolClass.value,
     type,
   });
 };

client/src/components/ContentBlock.vue

@@ -340,7 +340,7 @@ const contentBlocksWithContentLists = computed(() => {
 const isHidden = computed(() => {
   return hidden({
     block: props.contentBlock,
-    schoolClass: schoolClass,
+    schoolClass: schoolClass.value,
     type: CONTENT_TYPE,
   });
 });

client/src/mixins/me.ts

@@ -2,20 +2,49 @@ import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 import { computed } from 'vue';
 import { useQuery } from '@vue/apollo-composable';
 
-const defaultMe = {
+export interface Me {
+  selectedClass: {
+    id: string;
+    readOnly: boolean;
+  };
+  permissions: string[];
+  schoolClasses: any[];
+  isTeacher: boolean;
+  team: any;
+  lastTopic: any;
+  readOnly: boolean;
+}
+
+export interface MeQuery {
+  me: Me;
+}
+
+// todo: use the correct interface from vue router
+export interface Location {
+  name: string;
+  params: {
+    topicSlug: string;
+  };
+}
+
+type RouteLocation = Location | string;
+
+const defaultMe: MeQuery = {
   me: {
     selectedClass: {
       id: '',
+      readOnly: false,
     },
     permissions: [],
     schoolClasses: [],
     isTeacher: false,
     team: null,
+    readOnly: false,
+    lastTopic: undefined,
   },
-  showPopover: false,
 };
 
-const getTopicRoute = (me) => {
+const getTopicRoute = (me: Me): RouteLocation => {
   if (me.lastTopic && me.lastTopic.slug) {
     return {
       name: 'topic',
@@ -27,38 +56,34 @@ const getTopicRoute = (me) => {
   return '/book/topic/berufliche-grundbildung';
 };
 
-const getSelectedClass = (me) => {
+const getSelectedClass = (me: Me) => {
   return me.selectedClass;
 };
 
-const getCanManageContent = (me) => {
+const getCanManageContent = (me: Me): boolean => {
   return me.isTeacher;
 };
 
-const getIsReadOnly = (me) => {
+const getIsReadOnly = (me: Me): boolean => {
   return me.readOnly || me.selectedClass.readOnly;
 };
 
-const getCurrentClassName = (me) => {
+const getCurrentClassName = (me: Me) => {
-  let currentClass = me.schoolClasses.find((schoolClass) => {
+  const currentClass = me.schoolClasses.find((schoolClass) => {
     return schoolClass.id === me.selectedClass.id;
   });
   return currentClass ? currentClass.name : me.schoolClasses.length ? me.schoolClasses[0].name : '';
 };
 
-const options = {
-  fetchPolicy: 'cache-first',
-};
-
 const getMe = () => {
-  const { result } = useQuery(ME_QUERY, null, options);
+  const { result } = useQuery(ME_QUERY);
 
-  const me = computed(() => result.value?.me, defaultMe.me);
+  const me = computed(() => result.value?.me || defaultMe.me);
   const topicRoute = computed(() => {
     return getTopicRoute(me.value);
   });
   const schoolClass = computed(() => {
-    return getSelectedClass(me.value);
+    return me.value.selectedClass;
   });
   const canManageContent = computed(() => {
     return getCanManageContent(me.value);
@@ -80,19 +105,25 @@ const meMixin = {
   },
 
   computed: {
-    topicRoute() {
+    topicRoute(): RouteLocation {
+      // @ts-ignore
       return getTopicRoute(this.$data.me);
     },
-    schoolClass() {
+    schoolClass(): any {
+      console.log('schoolClass legacy');
+      // @ts-ignore
       return getSelectedClass(this.$data.me);
     },
-    canManageContent() {
+    canManageContent(): boolean {
+      // @ts-ignore
       return getCanManageContent(this.$data.me);
     },
-    isReadOnly() {
+    isReadOnly(): boolean {
+      // @ts-ignore
       return getIsReadOnly(this.$data.me);
     },
-    currentClassName() {
+    currentClassName(): string {
+      // @ts-ignore
       return getCurrentClassName(this.$data.me);
     },
   },
@@ -100,11 +131,12 @@ const meMixin = {
   apollo: {
     me: {
       query: ME_QUERY,
-      update(data) {
+      // @ts-ignore
+      update(data: any) {
         // todo: refactor
+        // @ts-ignore
         return this.$getRidOfEdges(data).me;
       },
-      ...options,
     },
   },
 };