diff --git a/client/cypress/fixtures/mocks.js b/client/cypress/fixtures/mocks.js index 7bcf564e..a59486fb 100644 --- a/client/cypress/fixtures/mocks.js +++ b/client/cypress/fixtures/mocks.js @@ -113,5 +113,6 @@ export default { title: 'instrument-title', slug: 'instrument-slug', id: getInstrumentId(), + bookmarks: null }) }; diff --git a/client/cypress/integration/frontend/bookmarks.spec.js b/client/cypress/integration/frontend/bookmarks.spec.js index b28e178e..c86b93d9 100644 --- a/client/cypress/integration/frontend/bookmarks.spec.js +++ b/client/cypress/integration/frontend/bookmarks.spec.js @@ -36,6 +36,19 @@ describe('Bookmarks', () => { ] } }, + InstrumentQuery: { + instrument: { + contents: [ + { + type: 'text_block', + value: { + text: 'Hallo Sam' + }, + id: "df8212ee-3e82-49fa-977e-c4b60789163e" + } + ] + } + }, UpdateLastModule: {}, UpdateContentBookmark: { updateContentBookmark: { @@ -47,6 +60,11 @@ describe('Bookmarks', () => { success: true } }, + UpdateInstrumentBookmark: { + updateModuleBookmark: { + success: true + } + }, UpdateChapterBookmark: { updateChapterBookmark: { success: true @@ -67,7 +85,31 @@ describe('Bookmarks', () => { }); it('should bookmark instrument', () => { - cy.visit(); + cy.visit('/instrument/an-instrument'); + + cy.getByDataCy('content-component').first().as('contentComponent'); + + cy.get('@contentComponent').within(() => { + cy.get('.bookmark-actions__bookmark').click(); + cy.get('.bookmark-actions__add-note').click(); + }); + + cy.get('[data-cy=bookmark-note]').within(() => { + cy.get('.skillbox-input').type('Hallo Velo'); + }); + + cy.get('[data-cy=modal-save-button]').click(); + + cy.get('@contentComponent').within(() => { + cy.get('.bookmark-actions__edit-note').click(); + }); + + cy.get('[data-cy=bookmark-note]').within(() => { + cy.get('.skillbox-input').clear().type('Hello Bike'); + }); + + cy.get('[data-cy=modal-save-button]').click(); + }); it('should bookmark module', () => { diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue index 68cf2884..50a5d95e 100644 --- a/client/src/components/portfolio/ProjectEntry.vue +++ b/client/src/components/portfolio/ProjectEntry.vue @@ -52,17 +52,9 @@ import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql'; import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql'; import {dateFilter, dateTimeFilter} from '@/filters/date-filter'; + import {removeAtIndex} from '@/graphql/immutable-operations'; const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'); - const insertAtIndexImmutably = (arr, el, idx) => { - - }; - const removeAtIndexImmutably = (arr, idx) => { - return [ - ...arr.slice(0, idx), - ...arr.slice(idx + 1) , - ]; - }; export default { props: ['description', 'documentUrl', 'created', 'id', 'readOnly'], @@ -102,7 +94,7 @@ const {project} = store.readQuery({query, variables}); if (project) { const index = project.entries.findIndex(entry => entry.id === projectEntry.id); - const entries = removeAtIndexImmutably(project.entries, index); + const entries = removeAtIndex(project.entries, index); const data = { project: { ...project, diff --git a/client/src/graphql/immutable-operations.js b/client/src/graphql/immutable-operations.js new file mode 100644 index 00000000..b9f1664f --- /dev/null +++ b/client/src/graphql/immutable-operations.js @@ -0,0 +1,28 @@ +// signature should be in order: arr, idx, el, for readability +export const pushToArray = (arr, el) => { + if (!arr) { + return [el]; + } + return [...arr, el]; +}; +export const insertAtIndex = (arr, idx, el) => { + return [ + ...arr.slice(0, idx), + el, + ...arr.slice(idx) + ]; +}; +export const removeAtIndex = (arr, idx) => { + return [ + ...arr.slice(0, idx), + ...arr.slice(idx + 1) , + ]; +}; +export const replaceAtIndex = (arr, idx, el) => { + console.log(idx); + return [ + ...arr.slice(0, idx), + el, + ...arr.slice(idx+1) + ]; +}; diff --git a/client/src/helpers/new-note-mutation.js b/client/src/helpers/new-note-mutation.js index a4f10fcd..749849ed 100644 --- a/client/src/helpers/new-note-mutation.js +++ b/client/src/helpers/new-note-mutation.js @@ -5,6 +5,7 @@ import MODULE_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql'; import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql'; import gql from 'graphql-tag'; import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql'; +import {replaceAtIndex} from '@/graphql/immutable-operations'; const compareUuid = note => element => element.uuid === note.content; @@ -54,23 +55,34 @@ export const constructNoteMutation = (n) => { }); } else { const fragment = INSTRUMENT_FRAGMENT; - const id = `InstrumentNode:${n.block}`; - const data = store.readFragment({ + const id = store.identify({ + __typename: 'InstrumentNode', + slug: n.block + }); + const instrument = store.readFragment({ fragment, id }); - const bookmarks = data.bookmarks; + const prevBookmarks = instrument.bookmarks; + let bookmarks; - let index = bookmarks.findIndex(compareUuid(n)); + let index = prevBookmarks.findIndex(compareUuid(n)); if (index > -1) { - let el = bookmarks[index]; - el.note = note; - bookmarks.splice(index, 1, el); + let el = prevBookmarks[index]; + bookmarks = replaceAtIndex(prevBookmarks, index, { + ...el, + note + }); + } else { + bookmarks = [...prevBookmarks]; } - data.bookmarks = bookmarks; + const data = { + ...instrument, + bookmarks + }; store.writeFragment({ data, diff --git a/client/src/helpers/update-content-bookmark-mutation.js b/client/src/helpers/update-content-bookmark-mutation.js index 81e19f1c..1c6c674b 100644 --- a/client/src/helpers/update-content-bookmark-mutation.js +++ b/client/src/helpers/update-content-bookmark-mutation.js @@ -2,6 +2,7 @@ import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookma import UPDATE_INSTRUMENT_BOOKMARK from '@/graphql/gql/mutations/updateInstrumentBookmark.gql'; import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql'; import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql'; +import {pushToArray, removeAtIndex} from '@/graphql/immutable-operations'; const compareUuid = uuid => element => element.uuid === uuid; @@ -20,28 +21,37 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare }, update: (store) => { const fragment = INSTRUMENT_FRAGMENT; - const id = `InstrumentNode:${root}`; - const data = store.readFragment({ + const id = store.identify({ + __typename: 'InstrumentNode', + slug: root + }); + const instrument = store.readFragment({ fragment, id }); - const bookmarks = data.bookmarks; + let bookmarks; if (bookmarked) { - bookmarks.push({ + const element = { note: null, uuid, __typename: 'InstrumentBookmarkNode' - }); + }; + bookmarks = pushToArray(instrument.bookmarks, element); } else { - let index = bookmarks.findIndex(compareUuid(uuid)); + let index = instrument.bookmarks.findIndex(compareUuid(uuid)); if (index > -1) { - bookmarks.splice(index, 1); + bookmarks = removeAtIndex(instrument.bookmarks, index); + } else { + bookmarks = [...instrument.bookmarks]; } } - data.bookmarks = bookmarks; + const data = { + ...instrument, + bookmarks + }; store.writeFragment({ data, @@ -79,23 +89,19 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare let bookmarks; if (bookmarked) { - bookmarks = [ - ...contentBlock.bookmarks, - { + let element = { note: null, uuid, __typename: 'ContentBlockBookmarkNode' - } - ]; + }; + bookmarks = pushToArray(contentBlock.bookmarks, element); } else { - let index = bookmarks.findIndex(compareUuid(uuid)); + let index = contentBlock.bookmarks.findIndex(compareUuid(uuid)); if (index > -1) { - bookmarks.splice(index, 1); + bookmarks = removeAtIndex(contentBlock.bookmarks, index); + } else { + bookmarks = [...contentBlock.bookmarks]; } - bookmarks = [ - ...contentBlock.bookmarks.slice(0, index), - ...contentBlock.bookmarks.slice(index + 1) - ]; } const data = { diff --git a/client/tests/unit/immutable-operations.spec.js b/client/tests/unit/immutable-operations.spec.js new file mode 100644 index 00000000..c098a414 --- /dev/null +++ b/client/tests/unit/immutable-operations.spec.js @@ -0,0 +1,5 @@ +describe('Cache operations', () => { + it('fails', () => { + expect(1).toEqual(2); + }); +});