Refactor chapter component

client/src/@types/index.ts

@@ -2,6 +2,11 @@ export type numberOrUndefined = number | undefined;
 
 type types = 'task' | 'normal' | 'base_communication' | 'base_society' | 'base_interdisciplinary';
 
+export interface Page {
+  id: string;
+  title: string;
+}
+
 export interface InstrumentCategory {
   id: string;
   name: string;
@@ -10,10 +15,17 @@ export interface InstrumentCategory {
   types: any[];
 }
 
-export interface ContentBlock {
-  title: string;
+export interface Hideable {
+  userCreated: boolean;
+  hiddenFor: any[];
+  visibleFor: any[];
+  titleHiddenFor: any[];
+  descriptionHiddenFor: any[];
+  hidden: boolean;
+}
+
+export interface ContentBlock extends Hideable, Page {
   contents: any[];
-  id: string;
   isAssignment: boolean;
   type: types;
   notes: any[];
@@ -21,13 +33,15 @@ export interface ContentBlock {
   indent?: boolean;
   instrumentCategory: InstrumentCategory;
   mine: boolean;
-  userCreated: boolean;
-  hiddenFor: any[];
-  visibleFor: any[];
   root: string;
-  titleHiddenFor: any[];
-  descriptionHiddenFor: any[];
-  hidden: boolean;
+}
+
+export interface Chapter extends Hideable, Page {
+  contentBlocks: ContentBlock[];
+  bookmark: any;
+  titleHidden: boolean;
+  descriptionHidden: boolean;
+  description: string;
 }
 
 export interface ActionOptions {

client/src/components/Chapter.vue

@@ -32,7 +32,7 @@
       data-cy="chapter-bookmark-actions"
       @add-note="addNote"
       @edit-note="editNote"
-      @bookmark="bookmark(!chapter.bookmark)"
+      @bookmark="bookmark()"
     />
     <div
       :class="{ 'hideable-element--greyed-out': descriptionGreyedOut }"
@@ -65,104 +65,92 @@
   </div>
 </template>
 
-<script>
-import ContentBlock from '@/components/ContentBlock';
-import AddContentButton from '@/components/AddContentButton';
-import BookmarkActions from '@/components/notes/BookmarkActions';
-import VisibilityAction from '@/components/visibility/VisibilityAction';
+<script setup lang="ts">
+import { computed } from 'vue';
+import ContentBlock from '@/components/ContentBlock.vue';
+import AddContentButton from '@/components/AddContentButton.vue';
+import BookmarkActions from '@/components/notes/BookmarkActions.vue';
+import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
 import CopyLink from '@/components/CopyLink.vue';
-
+import type { Chapter } from '@/@types';
 import { hidden } from '@/helpers/visibility';
 import { CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE } from '@/consts/types';
+import { useStore } from 'vuex';
 
 import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
 import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
+import { getMe } from '@/mixins/me';
+import { useMutation } from '@vue/apollo-composable';
 
-import me from '@/mixins/me';
+export interface Props {
+  chapter: Chapter;
+  index: number;
+  editMode: boolean;
+}
 
-export default {
-  props: {
-    chapter: {
-      type: Object,
-      default: () => ({}),
-    },
-    index: {
-      type: Number,
-      default: 0,
-    },
-    editMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const { schoolClass } = getMe();
 
-  mixins: [me],
+const store = useStore();
 
-  components: {
-    BookmarkActions,
-    VisibilityAction,
-    ContentBlock,
-    AddContentButton,
-    CopyLink,
-  },
+const props = withDefaults(defineProps<Props>(), {
+  index: 0,
+  editMode: false,
+});
 
-  computed: {
-    filteredContentBlocks() {
-      if (!(this.chapter && this.chapter.contentBlocks)) {
+const filteredContentBlocks = computed(() => {
+  if (!(props.chapter && props.chapter.contentBlocks)) {
     return [];
   }
-      if (this.editMode) {
-        return this.chapter.contentBlocks;
+  if (props.editMode) {
+    return props.chapter.contentBlocks;
   }
-      return this.chapter.contentBlocks.filter(
+  return props.chapter.contentBlocks.filter(
     (contentBlock) =>
       !hidden({
         block: contentBlock,
-            schoolClass: this.schoolClass,
+        schoolClass: schoolClass,
         type: CONTENT_TYPE,
       })
   );
-    },
-    note() {
-      if (this.chapter && this.chapter.bookmark) {
-        return this.chapter.bookmark.note;
+});
+const note = computed(() => {
+  if (props.chapter && props.chapter.bookmark) {
+    return props.chapter.bookmark.note;
   }
   return false;
-    },
-    titleGreyedOut() {
-      return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
-    },
+});
+const titleGreyedOut = computed(() => {
+  return textHidden(CHAPTER_TITLE_TYPE) && props.editMode;
+});
+const titleHidden = computed(() => {
   // never hidden when editing the module
-    titleHidden() {
-      if (this.chapter.titleHidden === true) {
+  if (props.chapter.titleHidden === true) {
     return true;
   }
-      return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
-    },
-    descriptionGreyedOut() {
-      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
-    },
+  return textHidden(CHAPTER_TITLE_TYPE) && !props.editMode;
+});
+const descriptionGreyedOut = computed(() => {
+  return textHidden(CHAPTER_DESCRIPTION_TYPE) && props.editMode;
+});
+const descriptionHidden = computed(() => {
   // never hidden when editing the module
-    descriptionHidden() {
-      if (this.chapter.descriptionHidden === true) {
+  if (props.chapter.descriptionHidden === true) {
     return true;
   }
-      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
-    },
-  },
+  return textHidden(CHAPTER_DESCRIPTION_TYPE) && !props.editMode;
+});
 
-  methods: {
-    bookmark(bookmarked) {
-      const id = this.chapter.id;
-      this.$apollo.mutate({
-        mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
+const { mutate: bookmark } = useMutation(UPDATE_CHAPTER_BOOKMARK_MUTATION, () => {
+  const bookmarked = !props.chapter.bookmark;
+  const id = props.chapter.id;
+  return {
     variables: {
       input: {
         chapter: id,
         bookmarked,
       },
     },
-        update: (store) => {
+    update: (store: any) => {
       const query = CHAPTER_QUERY;
       const variables = { id };
       const { chapter } = store.readQuery({
@@ -194,6 +182,7 @@ export default {
         variables,
       });
     },
+
     optimisticResponse: {
       __typename: 'Mutation',
       updateChapterBookmark: {
@@ -201,28 +190,29 @@ export default {
         success: true,
       },
     },
-      });
-    },
-    addNote(id) {
-      this.$store.dispatch('addNote', {
+  };
+});
+
+const addNote = (id: string) => {
+  store.dispatch('addNote', {
     content: id,
-        parent: this.chapter.id,
+    parent: props.chapter.id,
   });
-    },
-    editNote() {
-      this.$store.dispatch('editNote', this.chapter.bookmark.note);
-    },
-    textHidden(type) {
+};
+const editNote = () => {
+  store.dispatch('editNote', props.chapter.bookmark.note);
+};
+const textHidden = (type: string) => {
   return hidden({
-        block: this.chapter,
-        schoolClass: this.schoolClass,
+    block: props.chapter,
+    schoolClass: schoolClass,
     type,
   });
-    },
-  },
 };
 </script>
 
+<script></script>
+
 <style scoped lang="scss">
 @import '~styles/helpers';
 

client/src/components/ContentBlock.vue

@@ -121,7 +121,7 @@ import type { Modal } from '@/plugins/modal.types';
 export interface Props {
   contentBlock: ContentBlock;
   parent?: any;
-  editMode: boolean;
+  editMode?: boolean;
 }
 
 const ContentComponent = defineAsyncComponent(

client/src/helpers/visibility.ts

@@ -10,7 +10,7 @@ import UPDATE_OBJECTIVE_VISIBILITY_MUTATION from '@/graphql/gql/mutations/update
 import UPDATE_OBJECTIVE_GROUP_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateObjectiveGroupVisibility.gql';
 import UPDATE_CHAPTER_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateChapterVisibility.gql';
 
-export const createVisibilityMutation = (type, id, visibility) => {
+export const createVisibilityMutation = (type: string, id: string, visibility: string) => {
   let mutation, variables;
   switch (type) {
     case CONTENT_TYPE:
@@ -61,9 +61,20 @@ export const createVisibilityMutation = (type, id, visibility) => {
   };
 };
 
-const containsClass = (arr = [], schoolClass) => arr.map((entry) => entry.id).includes(schoolClass.id);
+const containsClass = (arr: any[] = [], schoolClass: any) => arr.map((entry) => entry.id).includes(schoolClass.id);
 
-export const hidden = ({
+export const hidden: (options: {
+  type: string;
+  block: {
+    userCreated: boolean;
+    visibleFor: any[];
+    hiddenFor: any[];
+    titleHiddenFor: any[];
+    descriptionHiddenFor: any[];
+    hidden: boolean;
+  };
+  schoolClass: any;
+}) => boolean = ({
   type,
   block: { userCreated, visibleFor, hiddenFor, titleHiddenFor, descriptionHiddenFor, hidden },
   schoolClass,
@@ -89,4 +100,4 @@ export const hidden = ({
       default:
         return false;
     }
-};
+  };