diff --git a/client/cypress/e2e/frontend/bookmarks.spec.js b/client/cypress/e2e/frontend/bookmarks.spec.js index 53906aa1..2bb984c1 100644 --- a/client/cypress/e2e/frontend/bookmarks.spec.js +++ b/client/cypress/e2e/frontend/bookmarks.spec.js @@ -38,6 +38,7 @@ describe('Bookmarks', () => { ModuleEditModeQuery: {}, InstrumentQuery: { instrument: { + bookmarks: [], contents: [ { type: 'text_block', diff --git a/client/src/__generated__/gql.ts b/client/src/__generated__/gql.ts index 95203551..8f5d9be2 100644 --- a/client/src/__generated__/gql.ts +++ b/client/src/__generated__/gql.ts @@ -34,8 +34,8 @@ const documents = { "\n mutation AddContentHighlight($input: AddContentHighlightInput!) {\n addContentHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n": types.AddContentHighlightDocument, "\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n ": types.InstrumentHighlightsWithIdOnlyFragmentFragmentDoc, "\n fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {\n highlights {\n id\n }\n }\n ": types.ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc, - "\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateInstrumentBookmarkDocument, - "\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateContentBookmarkDocument, + "\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateInstrumentBookmarkDocument, + "\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateContentBookmarkDocument, "\n query MyActivitiesQuery {\n myActivities {\n instruments {\n id\n slug\n title\n path\n highlights {\n ...HighlightParts\n }\n bookmarks {\n ... on InstrumentBookmarkNode {\n path\n }\n }\n }\n topics {\n id\n title\n modules {\n id\n slug\n title\n metaTitle\n myHighlights {\n ...HighlightParts\n }\n myBookmarks {\n ... on ChapterBookmarkNode {\n chapter {\n path\n }\n path\n note {\n id\n text\n }\n }\n ... on ContentBlockBookmarkNode {\n id\n uuid\n path\n contentBlock {\n id\n path\n }\n note {\n id\n text\n }\n }\n ... on ModuleBookmarkNode {\n path\n note {\n id\n text\n }\n }\n }\n mySubmissions {\n id\n text\n assignment {\n id\n title\n path\n module {\n slug\n }\n }\n }\n myAnswers {\n id\n survey {\n path\n id\n title\n }\n }\n }\n }\n }\n }\n ": types.MyActivitiesQueryDocument, "\n query ChapterQuery($id: ID!) {\n chapter(id: $id) {\n path\n }\n }\n ": types.ChapterQueryDocument, "\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n ": types.ContentBlockQueryDocument, @@ -148,11 +148,11 @@ export function graphql(source: "\n fragment ContentBlockHighlights /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n "): (typeof documents)["\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n "]; +export function graphql(source: "\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n "): (typeof documents)["\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n "]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n "): (typeof documents)["\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n "]; +export function graphql(source: "\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n "): (typeof documents)["\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n "]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue index 4efd1ce0..e7a882f7 100644 --- a/client/src/components/content-blocks/ContentComponent.vue +++ b/client/src/components/content-blocks/ContentComponent.vue @@ -198,25 +198,21 @@ const editNote = () => { store.dispatch('editNote', note); }; -const { mutation, variables, update, optimisticResponse } = constructContentComponentBookmarkMutation( +const { mutation, updateCurry, getVariables, optimisticResponse } = constructContentComponentBookmarkMutation( props.component.id, - bookmarked.value, props.parent, props.root ); const { mutate: mutateBookmarkContent } = useMutation(mutation, { - update, optimisticResponse, }); const bookmarkContent = (bookmarked: boolean) => { - const newVars = { - input: { - ...variables.input, - bookmarked, - }, - }; - mutateBookmarkContent(newVars); + const variables = getVariables(bookmarked); + const update = updateCurry(bookmarked); + mutateBookmarkContent(variables, { + update, + }); }; const markHighlights = () => { diff --git a/client/src/helpers/update-content-bookmark-mutation.ts b/client/src/helpers/update-content-bookmark-mutation.ts index 3bbb2b62..01f9da0d 100644 --- a/client/src/helpers/update-content-bookmark-mutation.ts +++ b/client/src/helpers/update-content-bookmark-mutation.ts @@ -4,150 +4,156 @@ import { pushToArray, removeAtIndex } from '@/graphql/immutable-operations'; import { graphql } from '@/__generated__'; const compareUuid = (uuid: string) => (element) => element.uuid === uuid; +type UpdateCurry = (newBookmarkedValue: boolean) => (store) => void; +type GetVariables = (newBookmarkedValue: boolean) => any; interface Mutation { mutation: any; - variables: any; - update: (store: any) => void; optimisticResponse: any; + updateCurry: UpdateCurry; + getVariables: GetVariables; } -export const constructContentComponentBookmarkMutation: ( - uuid: string, - bookmarked: boolean, - parent: any, - root: any -) => Mutation = (uuid, bookmarked, parent, root) => { - let mutation: Mutation; +export const constructContentComponentBookmarkMutation: (uuid: string, parent: any, root: any) => Mutation = ( + uuid, + parent, + root +) => { + let mutation: any; + let updateCurry: UpdateCurry; + let getVariables: GetVariables; + let optimisticResponse: any; if (parent.__typename === 'InstrumentNode') { - mutation = { - mutation: graphql(` - mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) { - updateInstrumentBookmark(input: $input) { - success - } + updateCurry = (newBookmarkedValue: boolean) => (store) => { + const fragment = INSTRUMENT_FRAGMENT; + const id = store.identify({ + __typename: 'InstrumentNode', + slug: root, + }); + const instrument = store.readFragment({ + fragment, + id, + }); + + let bookmarks: any[]; + console.log(newBookmarkedValue); + + if (newBookmarkedValue) { + const element = { + note: null, + uuid, + __typename: 'InstrumentBookmarkNode', + }; + bookmarks = pushToArray(instrument.bookmarks, element); + } else { + const index = instrument.bookmarks.findIndex(compareUuid(uuid)); + if (index > -1) { + bookmarks = removeAtIndex(instrument.bookmarks, index); + } else { + bookmarks = [...instrument.bookmarks]; } - `), - variables: { + } + + const data = { + ...instrument, + bookmarks, + }; + console.log(data); + + store.writeFragment({ + data, + fragment, + id, + }); + }; + getVariables = (newBookmarkedValue: boolean) => { + return { input: { uuid, instrument: root, - bookmarked, + bookmarked: newBookmarkedValue, }, - }, - update: (store) => { - const fragment = INSTRUMENT_FRAGMENT; - const id = store.identify({ - __typename: 'InstrumentNode', - slug: root, - }); - const instrument = store.readFragment({ - fragment, - id, - }); - - let bookmarks: any[]; - - if (bookmarked) { - const element = { - note: null, - uuid, - __typename: 'InstrumentBookmarkNode', - }; - bookmarks = pushToArray(instrument.bookmarks, element); - } else { - const index = instrument.bookmarks.findIndex(compareUuid(uuid)); - if (index > -1) { - bookmarks = removeAtIndex(instrument.bookmarks, index); - } else { - bookmarks = [...instrument.bookmarks]; - } + }; + }; + mutation = graphql(` + mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) { + updateInstrumentBookmark(input: $input) { + success } - - const data = { - ...instrument, - bookmarks, - }; - - store.writeFragment({ - data, - fragment, - id, - }); - }, - optimisticResponse: { - __typename: 'Mutation', - updateInstrumentBookmark: { - __typename: 'UpdateInstrumentBookmarkPayload', - success: true, - }, + } + `); + optimisticResponse = { + __typename: 'Mutation', + updateInstrumentBookmark: { + __typename: 'UpdateInstrumentBookmarkPayload', + success: true, }, }; } else { - mutation = { - mutation: graphql(` - mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) { - updateContentBookmark(input: $input) { - success - } + updateCurry = (newBookmarkedValue: boolean) => (store) => { + const query = CONTENT_BLOCK_QUERY; + const variables = { id: root }; + const { contentBlock } = store.readQuery({ + query, + variables, + }); + + // const bookmarks = data.contentBlock.bookmarks; + let bookmarks: any[]; + + if (newBookmarkedValue) { + const element = { + note: null, + uuid, + __typename: 'ContentBlockBookmarkNode', + }; + bookmarks = pushToArray(contentBlock.bookmarks, element); + } else { + const index = contentBlock.bookmarks.findIndex(compareUuid(uuid)); + if (index > -1) { + bookmarks = removeAtIndex(contentBlock.bookmarks, index); + } else { + bookmarks = [...contentBlock.bookmarks]; } - `), - variables: { + } + + const data = { + contentBlock: { + ...contentBlock, + bookmarks, + }, + }; + + store.writeQuery({ + data, + query, + variables, + }); + }; + getVariables = (newBookmarkedValue: boolean) => { + return { input: { uuid, contentBlock: root, - bookmarked, + bookmarked: newBookmarkedValue, }, - }, - update: (store) => { - const query = CONTENT_BLOCK_QUERY; - const variables = { id: root }; - const { contentBlock } = store.readQuery({ - query, - variables, - }); - - // const bookmarks = data.contentBlock.bookmarks; - let bookmarks: any[]; - - if (bookmarked) { - const element = { - note: null, - uuid, - __typename: 'ContentBlockBookmarkNode', - }; - bookmarks = pushToArray(contentBlock.bookmarks, element); - } else { - const index = contentBlock.bookmarks.findIndex(compareUuid(uuid)); - if (index > -1) { - bookmarks = removeAtIndex(contentBlock.bookmarks, index); - } else { - bookmarks = [...contentBlock.bookmarks]; - } + }; + }; + mutation = graphql(` + mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) { + updateContentBookmark(input: $input) { + success } - - const data = { - contentBlock: { - ...contentBlock, - bookmarks, - }, - }; - - store.writeQuery({ - data, - query, - variables, - }); - }, - optimisticResponse: { - __typename: 'Mutation', - updateContentBookmark: { - __typename: 'UpdateContentBookmarkPayload', - success: true, - }, + } + `); + optimisticResponse = { + __typename: 'Mutation', + updateContentBookmark: { + __typename: 'UpdateContentBookmarkPayload', + success: true, }, }; } - return mutation; + return { mutation, updateCurry, getVariables, optimisticResponse }; };