Remove debug logs, refactor some problematic code

client/src/App.vue

@@ -35,35 +35,19 @@ const EditContentBlockWizard = defineAsyncComponent(() =>
 const EditRoomEntryWizard = defineAsyncComponent(() =>
   import('@/components/rooms/room-entries/EditRoomEntryWizard.vue')
 );
-const NewProjectEntryWizard = defineAsyncComponent(() =>
+const NewProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/NewProjectEntryWizard.vue'));
-  import('@/components/portfolio/NewProjectEntryWizard.vue')
+const EditProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/EditProjectEntryWizard.vue'));
-);
+const NewObjectiveWizard = defineAsyncComponent(() => import('@/components/objective-groups/NewObjectiveWizard.vue'));
-const EditProjectEntryWizard = defineAsyncComponent(() =>
+const NewNoteWizard = defineAsyncComponent(() => import('@/components/notes/NewNoteWizard.vue'));
-  import('@/components/portfolio/EditProjectEntryWizard.vue')
+const EditNoteWizard = defineAsyncComponent(() => import('@/components/notes/EditNoteWizard.vue'));
-);
+const EditClassNameWizard = defineAsyncComponent(() => import('@/components/school-class/EditClassNameWizard.vue'));
-const NewObjectiveWizard = defineAsyncComponent(() =>
+const EditTeamNameWizard = defineAsyncComponent(() => import('@/components/profile/EditTeamNameWizard.vue'));
-  import('@/components/objective-groups/NewObjectiveWizard.vue')
-);
-const NewNoteWizard = defineAsyncComponent(() =>
-  import('@/components/notes/NewNoteWizard.vue')
-);
-const EditNoteWizard = defineAsyncComponent(() =>
-  import('@/components/notes/EditNoteWizard.vue')
-);
-const EditClassNameWizard = defineAsyncComponent(() =>
-  import('@/components/school-class/EditClassNameWizard.vue')
-);
-const EditTeamNameWizard = defineAsyncComponent(() =>
-  import('@/components/profile/EditTeamNameWizard.vue')
-);
 const EditSnapshotTitleWizard = defineAsyncComponent(() =>
   import('@/components/snapshots/EditSnapshotTitleWizard.vue')
 );
 const DefaultLayout = defineAsyncComponent(() => import('@/layouts/DefaultLayout.vue'));
 const SimpleLayout = defineAsyncComponent(() => import('@/layouts/SimpleLayout.vue'));
-const FullScreenLayout = defineAsyncComponent(() =>
+const FullScreenLayout = defineAsyncComponent(() => import('@/layouts/FullScreenLayout.vue'));
-  import('@/layouts/FullScreenLayout.vue')
-);
 const PublicLayout = defineAsyncComponent(() => import('@/layouts/PublicLayout.vue'));
 const BlankLayout = defineAsyncComponent(() => import('@/layouts/BlankLayout.vue'));
 const SplitLayout = defineAsyncComponent(() => import('@/layouts/SplitLayout.vue'));

client/src/components/page-form/PageFormInput.vue

@@ -22,7 +22,7 @@ import { getUniqueId } from '@/helpers/id';
 
 interface Props {
   label: string;
-  type: string;
+  type?: string;
   value: string;
 }
 const props = withDefaults(defineProps<Props>(), {

client/src/components/rooms/AddRoomEntryButton.vue

@@ -16,7 +16,7 @@ const PlusIcon = defineAsyncComponent(() => import('@/components/icons/PlusIcon.
 
 const props = withDefaults(
   defineProps<{
-    module: boolean;
+    module?: boolean;
   }>(),
   {
     module: false,

client/src/graphql/client.js

@@ -19,10 +19,10 @@ export default function(uri, networkErrorCallback) {
   });
 
   const consoleLink = new ApolloLink((operation, forward) => {
-    log.debug('operation', operation.operationName);
+    // log.debug('operation', operation.operationName);
 
     return forward(operation).map((data) => {
-      log.debug(`returned from server for ${operation.operationName}`, data);
+      // log.debug(`returned from server for ${operation.operationName}`, data);
       return data;
     });
   });
@@ -43,7 +43,8 @@ export default function(uri, networkErrorCallback) {
   const errorLink = onError(({ networkError, graphQLErrors }) => {
     if (networkError && networkErrorCallback) {
       networkErrorCallback(networkError.statusCode);
-      if (networkError.statusCode == 402) { // not authenticated, we don't need to continue here
+      if (networkError.statusCode == 402) {
+        // not authenticated, we don't need to continue here
         return;
       }
     }

client/src/helpers/matomo-client.ts

@@ -27,7 +27,7 @@ export function matomoTrackPageView(absolutePath: string = '/', title?: string)
 
   if (matomoLastUrl !== url) {
     // do not track the same url twice
-    log.debug('trackMatomoPageView', { url, matomoLastUrl, title });
+    // log.debug('trackMatomoPageView', { url, matomoLastUrl, title });
     window._paq.push(['setCustomUrl', url]);
     window._paq.push(['trackPageView', title]);
     matomoLastUrl = url;
@@ -39,7 +39,7 @@ export function matomoTrackEvent(category: string, action: string, name?: string
   const dataJSON = JSON.stringify(data);
 
   if (matomoLastEventData !== dataJSON) {
-    log.debug('matomoTrackEvent', { category, action, name, value });
+    // log.debug('matomoTrackEvent', { category, action, name, value });
     // @ts-ignore
     window._paq.push(['trackEvent', category, action, name, value]);
     matomoLastEventData = dataJSON;
@@ -79,7 +79,7 @@ export function matomoTrackModuleVisibilityEvent(blockType: string, block: any,
 export function matomoTrackUser(userId: string, role: matomoUserRole = 'Student') {
   // see https://developer.matomo.org/guides/tracking-javascript-guide#user-id for the process
   if (matomoLastUserId !== userId) {
-    log.debug('matomoTrackUser', { userId, matomoLastUserId, role });
+    // log.debug('matomoTrackUser', { userId, matomoLastUserId, role });
 
     if (userId) {
       // @ts-ignore

client/src/pages/module/module.vue

@@ -1,228 +1,233 @@
 <template>
-  <module :module="module" @editNote="editNote" @addNote="addNote" @bookmark="bookmark" />
+  <module
+    :module="module"
+    @editNote="editNote"
+    @addNote="addNote"
+    @bookmark="bookmark"
+  />
 </template>
 
 <script>
-  import Module from '@/components/modules/Module.vue';
+import Module from '@/components/modules/Module.vue';
-  import log from 'loglevel';
+import log from 'loglevel';
 
-  import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
+import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
-  import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
+import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
-  // import ME_QUERY from '@/graphql/gql/meQuery.gql';
+// import ME_QUERY from '@/graphql/gql/meQuery.gql';
-  import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
+import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
-  import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
+import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
-  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
+import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
-  import meMixin from '@/mixins/me';
+import meMixin from '@/mixins/me';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import {setModuleEditMode} from '@/graphql/cache-operations';
+import { setModuleEditMode } from '@/graphql/cache-operations';
 
-  export default {
+export default {
-    mixins: [meMixin],
+  mixins: [meMixin],
 
-    components: {
+  components: {
-      Module,
+    Module,
-    },
+  },
 
-    data() {
+  data() {
+    return {
+      module: {},
+      updateSent: false,
+    };
+  },
+
+  beforeRouteLeave(to, _, next) {
+    // toggle edit mode if leaving the module subtree
+    if (this.module.inEditMode && to.path.indexOf('/module/') === -1) {
+      setModuleEditMode(this.module.slug, false);
+    }
+    next();
+  },
+
+  apollo: {
+    module() {
       return {
-        module: {},
+        query: MODULE_DETAILS_QUERY,
-        updateSent: false,
+        variables: {
+          slug: this.$route.params.slug,
+        },
+        result({
+          data: {
+            module: { id },
+          },
+        }) {
+          if (!this.updateSent) {
+            // log.debug(`=== updating result for module ${id} ===`);
+            this.updateLastVisitedModule(id);
+            this.updateSent = true;
+          }
+        },
+        fetchPolicy: 'cache-first',
       };
     },
+    scrollPosition: {
+      query: SCROLL_POSITION,
+    },
+  },
 
-    beforeRouteLeave(to, _, next) {
+  methods: {
-      // toggle edit mode if leaving the module subtree
+    updateLastVisitedModule(moduleId) {
-      if (this.module.inEditMode && to.path.indexOf('/module/') === -1) {
+      // log.debug(`updating last visited module for module ${moduleId}`);
-        setModuleEditMode(this.module.slug, false);
+      if (!moduleId) {
+        log.warn('no module id');
+        return;
       }
-      next();
-    },
 
-    apollo: {
+      if (this.me.lastModule && this.me.lastModule.id === moduleId) {
-      module() {
+        log.debug('same module already set as last module');
-        return {
+        return;
-          query: MODULE_DETAILS_QUERY,
+      }
-          variables: {
+
-            slug: this.$route.params.slug,
+      this.$apollo.mutate({
+        mutation: UPDATE_LAST_MODULE_MUTATION,
+        variables: {
+          input: {
+            id: moduleId,
           },
-          result({
+        },
+        update: (
+          store,
+          {
             data: {
-              module: {id},
+              updateLastModule: { lastModule },
             },
-          }) {
+          }
-            if (!this.updateSent) {
+        ) => {
-              log.debug(`=== updating result for module ${id} ===`);
+          const { slug } = lastModule;
-              this.updateLastVisitedModule(id);
+          // log.debug('updating last module', lastModule.id, slug);
-              this.updateSent = true;
+          const query = ME_QUERY;
-            }
+          let { me } = store.readQuery({
-          },
+            query,
-          fetchPolicy: 'cache-first',
+          });
-        };
+          // me.lastModule = {
-      },
+          //   id,
-      scrollPosition: {
+          //   slug,
-        query: SCROLL_POSITION,
+          //   __typename: 'ModuleNode',
-      },
+          // };
-    },
 
-    methods: {
+          let edges = [...me.recentModules.edges];
-      updateLastVisitedModule(moduleId) {
+          const foundIndex = edges.findIndex((edge) => edge.node.slug === slug);
-        log.debug(`updating last visited module for module ${moduleId}`);
+          if (foundIndex > -1) {
-        if (!moduleId) {
+            edges = [...edges.slice(0, foundIndex), ...edges.slice(foundIndex + 1, edges.length)];
-          log.warn('no module id');
+          }
-          return;
+          edges = [
-        }
-
-        if (this.me.lastModule && this.me.lastModule.id === moduleId) {
-          log.debug('same module already set as last module');
-          return;
-        }
-
-        this.$apollo.mutate({
-          mutation: UPDATE_LAST_MODULE_MUTATION,
-          variables: {
-            input: {
-              id: moduleId,
-            },
-          },
-          update: (
-            store,
             {
-              data: {
+              node: lastModule,
-                updateLastModule: {lastModule},
+              __typename: 'ModuleNodeEdge',
-              },
-            }
-          ) => {
-            const {id, slug} = lastModule;
-            log.debug('updating last module', id, slug);
-            const query = ME_QUERY;
-            let {me} = store.readQuery({
-              query,
-            });
-            // me.lastModule = {
-            //   id,
-            //   slug,
-            //   __typename: 'ModuleNode',
-            // };
-
-            let edges = [...me.recentModules.edges];
-            const foundIndex = edges.findIndex((edge) => edge.node.slug === slug);
-            if (foundIndex > -1) {
-              edges = [...edges.slice(0, foundIndex), ...edges.slice(foundIndex + 1, edges.length)];
-            }
-            edges = [
-              {
-                node: lastModule,
-                __typename: 'ModuleNodeEdge',
-              },
-              ...edges.slice(0, 2),
-            ];
-            const recentModules = {
-              __typename: 'ModuleNodeConnection',
-              edges,
-            };
-            const data = {
-              me: {
-                ...me,
-                recentModules,
-                lastModule: {
-                  ...lastModule,
-                  // todo: do we really need this? shouldn't the lastModule property already include this?
-                  __typename: 'ModuleNode',
-                },
-              },
-            };
-            store.writeQuery({
-              query,
-              data,
-            });
-          },
-        });
-      },
-      bookmark(bookmarked) {
-        const slug = this.module.slug;
-        this.$apollo.mutate({
-          mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
-          variables: {
-            input: {
-              module: slug,
-              bookmarked,
             },
-          },
+            ...edges.slice(0, 2),
-          update: (store) => {
+          ];
-            const fragment = MODULE_FRAGMENT;
+          const recentModules = {
-            const id = store.identify({
+            __typename: 'ModuleNodeConnection',
-              __typename: 'ModuleNode',
+            edges,
-              slug: slug,
-            });
-
-            const module = store.readFragment({
-              fragment,
-              id,
-            });
-
-            let bookmark;
-
-            if (bookmarked) {
-              bookmark = {
-                __typename: 'ModuleBookmarkNode',
-                note: null,
-              };
-            } else {
-              bookmark = null;
-            }
-
-            const data = {
-              ...module,
-              bookmark,
-            };
-
-            store.writeFragment({
-              data,
-              fragment,
-              id,
-            });
-          },
-          optimisticResponse: {
-            __typename: 'Mutation',
-            updateModuleBookmark: {
-              __typename: 'UpdateModuleBookmarkPayload',
-              success: true,
-            },
-          },
-        });
-      },
-      addNote(id) {
-        this.$store.dispatch('addNote', {
-          content: id,
-          parent: this.module.slug,
-          type: 'module',
-        });
-      },
-      editNote() {
-        this.$store.dispatch('editNote', this.module.bookmark.note);
-      },
-      scrollTo() {
-        if (this.scrollPosition && this.scrollPosition.scrollTo) {
-          let options = {
-            container: 'body',
-            easing: 'ease',
-            offset: -60,
-            x: false,
-            y: true,
           };
-          setTimeout(() => {
+          const data = {
-            this.$scrollTo(`[data-scrollto="${this.scrollPosition.scrollTo}"]`, 1000, options);
+            me: {
-            this.$apollo.mutate({
+              ...me,
-              mutation: SCROLL_TO_MUTATION,
+              recentModules,
-              variables: {
+              lastModule: {
-                scrollTo: '',
+                ...lastModule,
+                // todo: do we really need this? shouldn't the lastModule property already include this?
+                __typename: 'ModuleNode',
               },
-            });
+            },
-          }, 250); // unfortunately this timeout is needed as it is hard to tell when everything is rendered
+          };
-        }
+          store.writeQuery({
-      },
+            query,
+            data,
+          });
+        },
+      });
     },
-  };
+    bookmark(bookmarked) {
+      const slug = this.module.slug;
+      this.$apollo.mutate({
+        mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
+        variables: {
+          input: {
+            module: slug,
+            bookmarked,
+          },
+        },
+        update: (store) => {
+          const fragment = MODULE_FRAGMENT;
+          const id = store.identify({
+            __typename: 'ModuleNode',
+            slug: slug,
+          });
+
+          const module = store.readFragment({
+            fragment,
+            id,
+          });
+
+          let bookmark;
+
+          if (bookmarked) {
+            bookmark = {
+              __typename: 'ModuleBookmarkNode',
+              note: null,
+            };
+          } else {
+            bookmark = null;
+          }
+
+          const data = {
+            ...module,
+            bookmark,
+          };
+
+          store.writeFragment({
+            data,
+            fragment,
+            id,
+          });
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          updateModuleBookmark: {
+            __typename: 'UpdateModuleBookmarkPayload',
+            success: true,
+          },
+        },
+      });
+    },
+    addNote(id) {
+      this.$store.dispatch('addNote', {
+        content: id,
+        parent: this.module.slug,
+        type: 'module',
+      });
+    },
+    editNote() {
+      this.$store.dispatch('editNote', this.module.bookmark.note);
+    },
+    scrollTo() {
+      if (this.scrollPosition && this.scrollPosition.scrollTo) {
+        let options = {
+          container: 'body',
+          easing: 'ease',
+          offset: -60,
+          x: false,
+          y: true,
+        };
+        setTimeout(() => {
+          this.$scrollTo(`[data-scrollto="${this.scrollPosition.scrollTo}"]`, 1000, options);
+          this.$apollo.mutate({
+            mutation: SCROLL_TO_MUTATION,
+            variables: {
+              scrollTo: '',
+            },
+          });
+        }, 250); // unfortunately this timeout is needed as it is hard to tell when everything is rendered
+      }
+    },
+  },
+};
 </script>