Refactor some code

client/src/components/ContentBlock.vue

@@ -168,7 +168,11 @@ const { mutate: duplicateContentBlock } = useMutation(DUPLICATE_CONTENT_BLOCK_MU
       const variables = {
         id,
       };
-      const { chapter }: any = store.readQuery({ query, variables });
+
+      const { chapter }: any = store.readQuery({
+        query,
+        variables,
+      });
       const index = chapter.contentBlocks.findIndex(
         (contentBlock: ExtendedContentBlockNode) => contentBlock.id === contentBlockId
       );
@@ -179,7 +183,12 @@ const { mutate: duplicateContentBlock } = useMutation(DUPLICATE_CONTENT_BLOCK_MU
           contentBlocks,
         },
       };
-      store.writeQuery({ query, variables, data });
+
+      store.writeQuery({
+        query,
+        variables,
+        data,
+      });
     }
   },
 }));
@@ -200,35 +209,53 @@ const { mutate: doDeleteContentBlock } = useMutation(DELETE_CONTENT_BLOCK_MUTATI
   ) => {
     if (success) {
       const query = CHAPTER_QUERY;
+
       const variables = {
         id: props.parent.id,
       };
-      const { chapter }: any = store.readQuery({ query, variables });
+
+      const { chapter }: any = store.readQuery({
+        query,
+        variables,
+      });
       const index = chapter.contentBlocks.findIndex(
         (contentBlock: ExtendedContentBlockNode) => contentBlock.id === props.contentBlock.id
       );
+
       if (index < 0) {
         throw Error('ContentBlock not found');
       }
+
       const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
+
       const data = {
         chapter: {
           ...chapter,
           contentBlocks,
         },
       };
-      store.writeQuery({ query, variables, data });
+
+      store.writeQuery({
+        query,
+        variables,
+        data,
+      });
     }
   },
 }));
 
 onMounted(() => {
   const element = wrapper.value;
+
   if (element !== null) {
     if (route.hash === `#${props.contentBlock.id}`) {
       setTimeout(() => {
         const rect = element.getBoundingClientRect();
-        window.scrollTo({ top: rect.y, behavior: 'smooth' });
+
+        window.scrollTo({
+          top: rect.y,
+          behavior: 'smooth',
+        });
       }, PAGE_LOAD_TIMEOUT);
     }
 
@@ -277,15 +304,10 @@ const deleteContentBlock = () => {
 };
 
 // computed properties
-const canEditModule = computed(() => {
+const canEditModule = computed(() => !props.contentBlock.indent && props.editMode);
-  return !props.contentBlock.indent && props.editMode;
+const specialClass = computed(() => `content-block--${props.contentBlock.type.toLowerCase()}`);
-});
+const isInstrumentBlock = computed(() => !!props.contentBlock.instrumentCategory);
-const specialClass = computed(() => {
+
-  return `content-block--${props.contentBlock.type.toLowerCase()}`;
-});
-const isInstrumentBlock = computed(() => {
-  return !!props.contentBlock.instrumentCategory;
-});
 // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
 const instrumentStyle = computed(() => {
   if (isInstrumentBlock.value) {
@@ -313,11 +335,12 @@ const instrumentLabelStyle = computed(() => {
       color: props.contentBlock.instrumentCategory.foreground,
     };
   }
+
   return {};
 });
-const isMine = computed(() => {
+
-  return props.contentBlock.mine;
+const isMine = computed(() => props.contentBlock.mine);
-});
+
 const contentBlocksWithContentLists = computed(() => {
   /*
          collects all content_list_items in content_lists:
@@ -359,19 +382,18 @@ const contentBlocksWithContentLists = computed(() => {
     contents: newContent,
   });
 });
-const isHidden = computed(() => {
+
-  return hidden({
+const isHidden = computed(() =>
+  hidden({
     block: props.contentBlock,
     schoolClass: schoolClass.value,
     type: CONTENT_TYPE,
-  });
+  })
-});
+);
-const root = computed(() => {
-  // we need the root content block id, not the generated content block if inside a content list block
-  return props.contentBlock.root ? props.contentBlock.root : props.contentBlock.id;
-});
-</script>
 
+// we need the root content block id, not the generated content block if inside a content list block
+const root = computed(() => (props.contentBlock.root ? props.contentBlock.root : props.contentBlock.id));
+</script>
 <style lang="scss">
 /* todo: re-add `scoped` after switch to vite or this bug is fixed: https://github.com/vuejs/vue-loader/issues/1915 */
 @import 'styles/helpers';