From 2c606ec304a67a68fa4d12c0982fd11b1cc70c71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= Date: Tue, 26 Feb 2019 21:16:54 +0100 Subject: [PATCH] Settings page component without fetchCurrentUser --- cypress/integration/common/admin.js | 35 ++++++---- cypress/integration/common/report.js | 2 +- cypress/support/factories.js | 2 +- pages/settings/index.vue | 99 +++++++++++++--------------- 4 files changed, 70 insertions(+), 68 deletions(-) diff --git a/cypress/integration/common/admin.js b/cypress/integration/common/admin.js index 03cbe5fca..d922d909f 100644 --- a/cypress/integration/common/admin.js +++ b/cypress/integration/common/admin.js @@ -2,7 +2,6 @@ import { When, Then } from 'cypress-cucumber-preprocessor/steps' /* global cy */ - When('I navigate to the administration dashboard', () => { cy.get('.avatar-menu').click() cy.get('.avatar-menu-popover') @@ -14,11 +13,15 @@ Then('I can see a list of categories ordered by post count:', table => { cy.get('thead') .find('tr th') .should('have.length', 3) - table.hashes().forEach(({Name, Posts}, index) => { - cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(2)`) - .should('contain', Name) - cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(3)`) - .should('contain', Posts) + table.hashes().forEach(({ Name, Posts }, index) => { + cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(2)`).should( + 'contain', + Name + ) + cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(3)`).should( + 'contain', + Posts + ) }) }) @@ -26,12 +29,18 @@ Then('I can see a list of tags ordered by user count:', table => { cy.get('thead') .find('tr th') .should('have.length', 4) - table.hashes().forEach(({Name, Users, Posts}, index) => { - cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(2)`) - .should('contain', Name) - cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(3)`) - .should('contain', Users) - cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(4)`) - .should('contain', Posts) + table.hashes().forEach(({ Name, Users, Posts }, index) => { + cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(2)`).should( + 'contain', + Name + ) + cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(3)`).should( + 'contain', + Users + ) + cy.get(`tbody > :nth-child(${index + 1}) > :nth-child(4)`).should( + 'contain', + Posts + ) }) }) diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js index 3f2895dd9..db264ddde 100644 --- a/cypress/integration/common/report.js +++ b/cypress/integration/common/report.js @@ -111,7 +111,7 @@ Then(`I can't see the moderation menu item`, () => { .should('not.exist') }) -When(/^I confirm the reporting dialog .*:$/, (message) => { +When(/^I confirm the reporting dialog .*:$/, message => { cy.contains(message) // wait for element to become visible cy.get('.ds-modal').within(() => { cy.get('button') diff --git a/cypress/support/factories.js b/cypress/support/factories.js index 95355f414..87bcd1853 100644 --- a/cypress/support/factories.js +++ b/cypress/support/factories.js @@ -15,7 +15,7 @@ beforeEach(async () => { }) Cypress.Commands.add('factory', () => { - return Factory({seedServerHost}) + return Factory({ seedServerHost }) }) Cypress.Commands.add( diff --git a/pages/settings/index.vue b/pages/settings/index.vue index c018061a9..57b5a4fff 100644 --- a/pages/settings/index.vue +++ b/pages/settings/index.vue @@ -55,12 +55,40 @@ import find from 'lodash/find' let timeout const mapboxToken = process.env.MAPBOX_TOKEN +const query = gql` + query getUser($id: ID) { + User(id: $id) { + id + name + locationName + about + } + } +` + +const mutation = gql` + mutation($id: ID!, $name: String, $locationName: String, $about: String) { + UpdateUser( + id: $id + name: $name + locationName: $locationName + about: $about + ) { + id + name + locationName + about + } + } +` + export default { data() { return { axiosSource: null, cities: [], sending: false, + users: [], form: { name: null, locationName: null, @@ -70,18 +98,23 @@ export default { }, computed: { ...mapGetters({ - user: 'auth/user' + currentUser: 'auth/user' }) }, watch: { - user: { - immediate: true, - handler: function(user) { - this.form = { - name: user.name, - locationName: user.locationName, - about: user.about - } + users: function(users) { + const { name, locationName, about } = users[0] + this.form = { name, locationName, about } + } + }, + apollo: { + users: function() { + return { + query, + variables: { + id: this.currentUser.id + }, + update: data => data.User } } }, @@ -90,59 +123,19 @@ export default { this.sending = true this.$apollo .mutate({ - mutation: gql` - mutation( - $id: ID! - $name: String - $locationName: String - $about: String - ) { - UpdateUser( - id: $id - name: $name - locationName: $locationName - about: $about - ) { - id - name - locationName - about - } - } - `, - // Parameters + mutation, variables: { - id: this.user.id, + id: this.currentUser.id, name: this.form.name, locationName: this.form.locationName ? this.form.locationName['label'] || this.form.locationName : null, about: this.form.about }, - // Update the cache with the result - // The query will be updated with the optimistic response - // and then with the real result of the mutation update: (store, { data: { UpdateUser } }) => { - this.$store.dispatch('auth/fetchCurrentUser') - - // Read the data from our cache for this query. - // const data = store.readQuery({ query: TAGS_QUERY }) - // Add our tag from the mutation to the end - // data.tags.push(addTag) - // Write our data back to the cache. - // store.writeQuery({ query: TAGS_QUERY, data }) + const { name, locationName, about } = UpdateUser + this.form = { name, locationName, about } } - // Optimistic UI - // Will be treated as a 'fake' result as soon as the request is made - // so that the UI can react quickly and the user be happy - /* optimisticResponse: { - __typename: 'Mutation', - addTag: { - __typename: 'Tag', - id: -1, - label: newTag - } - } */ }) .then(data => { this.$toast.success('Updated user')