Cleanup

webapp/components/_new/features/MySomethingList/MySomethingList.spec.js

@@ -1,7 +1,5 @@
 import { mount } from '@vue/test-utils'
-// Wolle import flushPromises from 'flush-promises'
 import MySomethingList from './MySomethingList.vue'
-// Wolle import Vuex from 'vuex'
 import Vue from 'vue'
 
 const localVue = global.localVue
@@ -11,9 +9,6 @@ describe('MySomethingList.vue', () => {
   let propsData
   let data
   let mocks
-  // let getters
-  // Wolle const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
-  // const newSocialMediaUrl = 'https://twitter.com/mattwr18'
 
   beforeEach(() => {
     propsData = {
@@ -34,20 +29,11 @@ describe('MySomethingList.vue', () => {
         success: jest.fn(),
       },
     }
-    // getters = {
-    //   'auth/user': () => {
-    //     return {}
-    //   },
-    // }
   })
 
   describe('mount', () => {
-    // Wolle let form, input, slots, submitButton
     let form, slots
     const Wrapper = () => {
-      // const store = new Vuex.Store({
-      //   getters,
-      // })
       slots = {
         'list-item': '<div class="list-item"></div>',
         'edit-item': '<div class="edit-item"></div>',
@@ -55,88 +41,15 @@ describe('MySomethingList.vue', () => {
       return mount(MySomethingList, {
         propsData,
         data,
-        // store,
         mocks,
         localVue,
         slots,
       })
     }
 
-    // describe('adding social media link', () => {
-    //   beforeEach(async () => {
-    //     wrapper = Wrapper()
-    //     form = wrapper.find('form')
-    //     form.trigger('submit')
-    //     await Vue.nextTick()
-    //     console.log(wrapper.html())
-    //     console.log('wrapper.vm.socialMediaLinks: ', wrapper.vm.socialMediaLinks)
-    //     input = wrapper.find('input#editSocialMedia')
-    //     console.log('input: ', input)
-    //     submitButton = wrapper.find('button')
-    //   })
-
-    // Wolle it('requires the link to be a valid url', async () => {
-    //   input.setValue('some value')
-    //   form.trigger('submit')
-    //   await Vue.nextTick()
-    //   expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-    // })
-
-    // Wolle it('displays an error message when not saved successfully', async () => {
-    //   mocks.$apollo.mutate.mockRejectedValue({ message: 'Ouch!' })
-    //   input.setValue(newSocialMediaUrl)
-    //   form.trigger('submit')
-    //   await Vue.nextTick()
-    //   await flushPromises()
-    //   expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
-    // })
-
-    //   describe('success', () => {
-    //     beforeEach(async () => {
-    //       mocks.$apollo.mutate.mockResolvedValue({
-    //         data: { CreateSocialMedia: { id: 's2', url: newSocialMediaUrl } },
-    //       })
-    //       input.setValue(newSocialMediaUrl)
-    //       form.trigger('submit')
-    //       await Vue.nextTick()
-    //     })
-
-    //     it('sends the new url to the backend', () => {
-    //       const expected = expect.objectContaining({
-    //         variables: { url: newSocialMediaUrl },
-    //       })
-
-    //       expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
-    //     })
-
-    //     it('displays a success message', async () => {
-    //       await flushPromises()
-    //       expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
-    //     })
-
-    //     it('clears the form', async () => {
-    //       await flushPromises()
-    //       expect(input.value).toBe(undefined)
-    //       expect(submitButton.vm.$attrs.disabled).toBe(true)
-    //     })
-    //   })
-    // })
-
     describe('given existing social media links', () => {
       beforeEach(() => {
-        // getters = {
-        //   'auth/user': () => ({
-        //     socialMedia: [{ id: 's1', url: socialMediaUrl }],
-        //   }),
-        // }
-        // Wolle propsData = { editingLink: { id: 's1', url: socialMediaUrl } }
-        // data = () => {
-        //   return {
-        //     editingLink: { id: 's2', url: socialMediaUrl },
-        //   }
-        // }
         wrapper = Wrapper()
-        // form = wrapper.find('form')
       })
 
       describe('for each item it', () => {
@@ -158,7 +71,6 @@ describe('MySomethingList.vue', () => {
           const editButton = wrapper.find('.base-button[data-test="edit-button"]')
           editButton.trigger('click')
           await Vue.nextTick()
-          // Wolle input = wrapper.find('input#editSocialMedia')
         })
 
         it('disables adding items while editing', () => {

webapp/components/_new/features/MySomethingList/MySomethingList.vue

@@ -18,12 +18,6 @@
         </ds-heading>
       </ds-space>
       <ds-space v-if="items" margin-top="base" margin="base">
-        <!-- Wolle <ds-input
-          id="editSocialMedia"
-          model="socialMediaUrl"
-          type="text"
-          :placeholder="$t('settings.social-media.placeholder')"
-        /> -->
         <slot name="edit-item" />
       </ds-space>
     </div>
@@ -33,11 +27,6 @@
           <ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
             <!-- Wolle remove template tag? -->
             <template>
-              <!-- Wolle <a :href="link.url" target="_blank">
-                <img :src="link.favicon" alt="Link:" height="16" width="16" />
-                {{ link.url }}
-              </a> -->
-              <!-- Wolle <slot name="list-item" :link="link" data-test="item-slot" /> -->
               <slot name="list-item" :item="item" />
               <span class="divider">|</span>
               <base-button
@@ -63,13 +52,6 @@
     </div>
 
     <ds-space margin-top="base">
-      <!-- Wolle <ds-input
-        v-if="!isEditing"
-        id="addSocialMedia"
-        model="socialMediaUrl"
-        type="text"
-        :placeholder="$t('settings.social-media.placeholder')"
-      /> -->
       <ds-space margin-top="base">
         <base-button
           filled
@@ -88,10 +70,6 @@
 </template>
 
 <script>
-// Wolle import unionBy from 'lodash/unionBy'
-// import gql from 'graphql-tag'
-// Wolle import { mapGetters, mapMutations } from 'vuex'
-
 export default {
   name: 'MySomethingList',
   props: {
@@ -121,17 +99,7 @@ export default {
     },
   },
   data() {
-    // Wolle console.log(this.useItems)
     return {
-      // Wolle formData: {
-      //   socialMediaUrl: '',
-      // },
-      // formSchema: {
-      //   socialMediaUrl: {
-      //     type: 'url',
-      //     message: this.$t('common.validations.url'),
-      //   },
-      // },
       formData: this.useFormData,
       formSchema: this.useFormSchema,
       items: this.useItems,
@@ -140,49 +108,26 @@ export default {
     }
   },
   computed: {
-    // Wolle ...mapGetters({
-    //   currentUser: 'auth/user',
-    // }),
     isEditing() {
       return this.editingItem !== null
     },
     isCreation() {
       return this.editingItem !== null && this.editingItem.id === ''
     },
-    // Wolle socialMediaLinks() {
-    //   const domainRegex = /^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g
-    //   const { socialMedia = [] } = this.currentUser
-    //   return socialMedia.map(({ id, url }) => {
-    //     const [domain] = url.match(domainRegex) || []
-    //     const favicon = domain ? `${domain}/favicon.ico` : null
-    //     return { id, url, favicon }
-    //   })
-    // },
   },
   watch: {
-    // useFormData(newFormData) {
+    // can change by a parents callback and again given trough by bind from there
-    //   this.formData = newFormData
-    // },
-    // useFormSchema(newFormSchema) {
-    //   this.formSchema = newFormSchema
-    // },
     useItems(newItems) {
       this.items = newItems
     },
   },
   methods: {
-    // Wolle ...mapMutations({
-    //   setCurrentUser: 'auth/SET_USER',
-    // }),
     handleCancel() {
       this.editingItem = null
-      // Wolle ??? this.formData.socialMediaUrl = ''
       this.disabled = true
     },
     handleEditSocialMedia(item) {
       this.editingItem = item
-      // Wolle this.formData.socialMediaUrl = link.url
-      // Wolle this.$refs.socialMediaUrl.$el.focus()
       this.callbacks.edit(this, item)
     },
     handleInput(data) {
@@ -196,101 +141,12 @@ export default {
       }
     },
     async handleDeleteSocialMedia(item) {
-      // Wolle try {
-      //   await this.$apollo.mutate({
-      //     mutation: gql`
-      //       mutation($id: ID!) {
-      //         DeleteSocialMedia(id: $id) {
-      //           id
-      //           url
-      //         }
-      //       }
-      //     `,
-      //     variables: {
-      //       id: item.id,
-      //     },
-      //     update: (store, { data }) => {
-      //       const socialMedia = this.currentUser.socialMedia.filter(
-      //         (element) => element.id !== item.id,
-      //       )
-      //       this.setCurrentUser({
-      //         ...this.currentUser,
-      //         socialMedia,
-      //       })
-      //     },
-      //   })
-
-      //   this.$toast.success(this.$t('settings.social-media.successDelete'))
-      // } catch (err) {
-      //   this.$toast.error(err.message)
-      // }
       await this.callbacks.delete(this, item)
     },
     async handleSubmitSocialMedia() {
-      // Wolle const isEditing = (this.editingLink !== null)
       if (!this.isEditing) {
-        // Wolle this.editingLink = { id: '', url: '' }
-        // this.handleEditSocialMedia({ id: '', url: '' })
         this.handleEditSocialMedia({ ...this.defaultItem, id: '' })
       } else {
-        // // Wolle const url = this.formData.socialMediaUrl
-        // this.editingLink.url = this.formData.socialMediaUrl
-
-        // const duplicateUrl = this.items.find((item) => item.url === this.editingLink.url)
-        // // Wolle console.log('duplicateUrl: ', duplicateUrl)
-        // // console.log('this.isEditing: ', this.isEditing)
-        // // console.log('this.editingLink: ', this.editingLink)
-        // if (duplicateUrl && this.isEditing && duplicateUrl.id !== this.editingLink.id) {
-        //   return this.$toast.error(this.$t('settings.social-media.requireUnique'))
-        // }
-
-        // let mutation, variables, successMessage
-        // if (this.isCreation) {
-        //   mutation = gql`
-        //     mutation($url: String!) {
-        //       CreateSocialMedia(url: $url) {
-        //         id
-        //         url
-        //       }
-        //     }
-        //   `
-        //   variables = { url: this.editingLink.url }
-        //   successMessage = this.$t('settings.social-media.successAdd')
-        // } else {
-        //   mutation = gql`
-        //     mutation($id: ID!, $url: String!) {
-        //       UpdateSocialMedia(id: $id, url: $url) {
-        //         id
-        //         url
-        //       }
-        //     }
-        //   `
-        //   variables = { id: this.editingLink.id, url: this.editingLink.url }
-        //   successMessage = this.$t('settings.data.success')
-        // }
-
-        // try {
-        //   await this.$apollo.mutate({
-        //     mutation,
-        //     variables,
-        //     update: (_store, { data }) => {
-        //       const newSocialMedia = !this.isCreation
-        //         ? data.UpdateSocialMedia
-        //         : data.CreateSocialMedia
-        //       this.setCurrentUser({
-        //         ...this.currentUser,
-        //         socialMedia: unionBy([newSocialMedia], this.currentUser.socialMedia, 'id'),
-        //       })
-        //     },
-        //   })
-
-        //   this.$toast.success(successMessage)
-        //   this.formData.socialMediaUrl = ''
-        //   this.disabled = true
-        //   this.editingLink = null
-        // } catch (err) {
-        //   this.$toast.error(err.message)
-        // }
         if (await this.callbacks.submit(this, this.isCreation, this.editingItem, this.formData)) {
           this.disabled = true
           this.editingItem = null
@@ -302,15 +158,8 @@ export default {
 </script>
 
 <style lang="scss" scope>
-// Wolle .title {
-//   font-size: $font-size-xx-large;
-//   margin-top: $space-small;
-//   // Wolle margin-bottom: $space-small;
-// }
-
 .undertitle {
   font-size: $font-size-base;
-  // margin-top: $space-base;
 }
 
 .divider {

webapp/pages/settings/my-social-media.spec.js

@@ -33,7 +33,6 @@ describe('my-social-media.vue', () => {
   })
 
   describe('mount', () => {
-    // Wolle let form, input, submitButton
     let form, input
     const Wrapper = () => {
       const store = new Vuex.Store({
@@ -49,7 +48,6 @@ describe('my-social-media.vue', () => {
         form.trigger('submit')
         await Vue.nextTick()
         input = wrapper.find('input#editSocialMedia')
-        // Wolle submitButton = wrapper.find('button')
       })
 
       it('requires the link to be a valid url', async () => {
@@ -90,15 +88,8 @@ describe('my-social-media.vue', () => {
           expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
         })
 
-        // Wolle it('clears the form', async () => {
-        //   await flushPromises()
-        //   expect(input.value).toBe(undefined)
-        //   expect(submitButton.vm.$attrs.disabled).toBe(true)
-        // })
         it('switches back to list', async () => {
           await flushPromises()
-          // Wolle expect(input.value).toBe(undefined)
-          // expect(submitButton.vm.$attrs.disabled).toBe(true)
           const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
           expect(submitButton.text()).not.toContain('settings.social-media.submit')
         })
@@ -124,14 +115,6 @@ describe('my-social-media.vue', () => {
         it('displays the url', () => {
           expect(wrapper.find(`a[href="${socialMediaUrl}"]`).exists()).toBe(true)
         })
-
-        // it('displays the edit button', () => {
-        //   expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
-        // })
-
-        // it('displays the delete button', () => {
-        //   expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
-        // })
       })
 
       it('does not accept a duplicate url', async () => {

webapp/pages/settings/my-social-media.vue

@@ -81,8 +81,8 @@ export default {
       setCurrentUser: 'auth/SET_USER',
     }),
     callbackEditSocialMedia(thisList, link) {
-      // Wolle this.editingLink = link
       thisList.formData.socialMediaUrl = link.url
+      // try to set focus on link edit field
       // thisList.$refs.socialMediaUrl.$el.focus()
       // !!! Check for existenz
       // this.$scopedSlots.default()[0].context.$refs
@@ -139,7 +139,6 @@ export default {
         })
 
         thisList.$toast.success(successMessage)
-        // Wolle ??? thisList.formData.socialMediaUrl = ''
 
         return true
       } catch (err) {