From c91c9e263f304629d1ade592f1a6fe16abd77e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 8 Oct 2020 09:26:20 +0200
Subject: [PATCH] Implement mixins for delete, pin, unpin post in lists, on the
 way

---
 .../features/SearchResults/SearchResults.vue  | 33 +++-----
 webapp/graphql/Search.js                      |  4 +-
 .../{postActions.js => postListActions.js}    | 22 ++++--
 webapp/pages/index.vue                        | 76 ++++++++++---------
 webapp/pages/post/_id/_slug/more-info.vue     | 24 +++---
 webapp/pages/profile/_id/_slug.vue            | 74 +++++++++---------
 6 files changed, 121 insertions(+), 112 deletions(-)
 rename webapp/mixins/{postActions.js => postListActions.js} (57%)

diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue
index 1280ba481..bede9bed5 100644
--- a/webapp/components/_new/features/SearchResults/SearchResults.vue
+++ b/webapp/components/_new/features/SearchResults/SearchResults.vue
@@ -1,27 +1,13 @@
 <template>
   <div id="search-results" class="search-results">
-    <!-- Wolle <div>
-      <ds-text class="total-search-results">
-        {{ $t('search.for') }} "
-        <strong>{{ search }}</strong>
-        "
-        <br />
-        <strong>{{ searchCount }}</strong>
-        {{ $t('search.results', {}, searchCount) }}
-      </ds-text>
-    </div> -->
-
     <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
       <masonry-grid>
-        <!-- search text and result count -->
+        <!-- search text -->
         <ds-grid-item class="grid-total-search-results" :row-span="1" column-span="fullWidth">
           <ds-space margin-bottom="xxx-small" margin-top="xxx-small" centered>
             <ds-text class="total-search-results">
               {{ $t('search.for') }}
-              <strong>{{ '"' + search + '"' }}</strong>
-              <!-- Wolle "<strong>{{ search }}</strong>":
-              <strong>{{ searchCount }}</strong>
-              {{ $t('search.results', {}, searchCount) }} -->
+              <strong>{{ '"' + (search || '') + '"' }}</strong>
             </ds-text>
           </ds-space>
         </ds-grid-item>
@@ -56,16 +42,12 @@
               :key="post.id"
               :imageAspectRatio="post.image && post.image.aspectRatio"
             >
-              <!-- Wolle implement <post-teaser
-                :post="post"
-                :width="{ base: '100%', md: '100%', xl: '50%' }"
-                @removePostFromList="removePostFromList"
-                @pinPost="pinPost"
-                @unpinPost="unpinPost"
-              /> -->
               <post-teaser
                 :post="post"
                 :width="{ base: '100%', md: '100%', xl: '50%' }"
+                @removePostFromList="removePostFromList(post, posts)"
+                @pinPost="pinPost(post, refetchPostList)"
+                @unpinPost="unpinPost(post, refetchPostList)"
               />
             </masonry-grid-item>
           </template>
@@ -190,6 +172,7 @@
 </template>
 
 <script>
+import postListActions from '~/mixins/postListActions'
 import { searchPosts, searchUsers, searchHashtags } from '~/graphql/Search.js'
 import HcEmpty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
@@ -213,6 +196,7 @@ export default {
     UserTeaser,
     HcHashtag,
   },
+  mixins: [postListActions],
   props: {
     search: {
       type: String,
@@ -349,6 +333,9 @@ export default {
           break
       }
     },
+    refetchPostList() {
+      this.$apollo.queries.searchPosts.refetch()
+    },
   },
   apollo: {
     searchHashtags: {
diff --git a/webapp/graphql/Search.js b/webapp/graphql/Search.js
index 2cd48fbfb..51c23b1c6 100644
--- a/webapp/graphql/Search.js
+++ b/webapp/graphql/Search.js
@@ -1,5 +1,5 @@
 import gql from 'graphql-tag'
-import { userFragment, postFragment } from './Fragments'
+import { userFragment, postFragment, tagsCategoriesAndPinnedFragment } from './Fragments'
 
 export const searchQuery = gql`
   ${userFragment}
@@ -29,6 +29,7 @@ export const searchQuery = gql`
 export const searchPosts = gql`
   ${userFragment}
   ${postFragment}
+  ${tagsCategoriesAndPinnedFragment}
 
   query($query: String!, $firstPosts: Int, $postsOffset: Int) {
     searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
@@ -36,6 +37,7 @@ export const searchPosts = gql`
       posts {
         __typename
         ...post
+        ...tagsCategoriesAndPinned
         commentsCount
         shoutedCount
         author {
diff --git a/webapp/mixins/postActions.js b/webapp/mixins/postListActions.js
similarity index 57%
rename from webapp/mixins/postActions.js
rename to webapp/mixins/postListActions.js
index bf77cc300..dada46428 100644
--- a/webapp/mixins/postActions.js
+++ b/webapp/mixins/postListActions.js
@@ -1,11 +1,15 @@
+import PostMutations from '~/graphql/PostMutations'
+
 export default {
   methods: {
-    deletePost(deletedPost) {
-      this.posts = this.posts.filter((post) => {
+    removePostFromList(deletedPost, posts) {
+      // Wolle this.posts = this.posts.filter((post) => {
+      posts = posts.filter((post) => {
         return post.id !== deletedPost.id
       })
+      return posts
     },
-    pinPost(post) {
+    pinPost(post, refetchPostList = () => {}) {
       this.$apollo
         .mutate({
           mutation: PostMutations().pinPost,
@@ -15,12 +19,13 @@ export default {
         })
         .then(() => {
           this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
-          this.resetPostList()
-          this.$apollo.queries.Post.refetch()
+          // Wolle this.resetPostList()
+          refetchPostList()
+          // Wolle this.$apollo.queries.Post.refetch()
         })
         .catch((error) => this.$toast.error(error.message))
     },
-    unpinPost(post) {
+    unpinPost(post, refetchPostList = () => {}) {
       this.$apollo
         .mutate({
           mutation: PostMutations().unpinPost,
@@ -30,8 +35,9 @@ export default {
         })
         .then(() => {
           this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
-          this.resetPostList()
-          this.$apollo.queries.Post.refetch()
+          // Wolle this.resetPostList()
+          refetchPostList()
+          // Wolle this.$apollo.queries.Post.refetch()
         })
         .catch((error) => this.$toast.error(error.message))
     },
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 1bb08ebbd..84f5f22ac 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -28,9 +28,9 @@
         >
           <post-teaser
             :post="post"
-            @removePostFromList="deletePost"
-            @pinPost="pinPost"
-            @unpinPost="unpinPost"
+            @removePostFromList="removePostFromList(post, posts)"
+            @pinPost="pinPost(post, refetchPostList)"
+            @unpinPost="unpinPost(post, refetchPostList)"
           />
         </masonry-grid-item>
       </template>
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-// Wolle import postActions from '~/mixins/postActions'
+import postListActions from '~/mixins/postListActions'
 // import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
 import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter.vue'
 import HcEmpty from '~/components/Empty/Empty'
@@ -73,7 +73,7 @@ import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import { mapGetters, mapMutations } from 'vuex'
 import { filterPosts } from '~/graphql/PostQuery.js'
-import PostMutations from '~/graphql/PostMutations'
+// Wolle import PostMutations from '~/graphql/PostMutations'
 import UpdateQuery from '~/components/utils/UpdateQuery'
 
 export default {
@@ -85,7 +85,7 @@ export default {
     MasonryGrid,
     MasonryGridItem,
   },
-  // Wolle mixins: [postActions],
+  mixins: [postListActions],
   data() {
     const { hashtag = null } = this.$route.query
     return {
@@ -162,42 +162,46 @@ export default {
         updateQuery: UpdateQuery(this, { $state, pageKey: 'Post' }),
       })
     },
-    deletePost(deletedPost) {
-      this.posts = this.posts.filter((post) => {
-        return post.id !== deletedPost.id
-      })
-    },
+    // Wolle deletePost(deletedPost) {
+    //   this.posts = this.posts.filter((post) => {
+    //     return post.id !== deletedPost.id
+    //   })
+    // },
     resetPostList() {
       this.offset = 0
       this.posts = []
       this.hasMore = true
     },
-    pinPost(post) {
-      this.$apollo
-        .mutate({
-          mutation: PostMutations().pinPost,
-          variables: { id: post.id },
-        })
-        .then(() => {
-          this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
-          this.resetPostList()
-          this.$apollo.queries.Post.refetch()
-        })
-        .catch((error) => this.$toast.error(error.message))
-    },
-    unpinPost(post) {
-      this.$apollo
-        .mutate({
-          mutation: PostMutations().unpinPost,
-          variables: { id: post.id },
-        })
-        .then(() => {
-          this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
-          this.resetPostList()
-          this.$apollo.queries.Post.refetch()
-        })
-        .catch((error) => this.$toast.error(error.message))
+    refetchPostList() {
+      this.resetPostList()
+      this.$apollo.queries.Post.refetch()
     },
+    // Wolle pinPost(post) {
+    //   this.$apollo
+    //     .mutate({
+    //       mutation: PostMutations().pinPost,
+    //       variables: { id: post.id },
+    //     })
+    //     .then(() => {
+    //       this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
+    //       this.resetPostList()
+    //       this.$apollo.queries.Post.refetch()
+    //     })
+    //     .catch((error) => this.$toast.error(error.message))
+    // },
+    // unpinPost(post) {
+    //   this.$apollo
+    //     .mutate({
+    //       mutation: PostMutations().unpinPost,
+    //       variables: { id: post.id },
+    //     })
+    //     .then(() => {
+    //       this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
+    //       this.resetPostList()
+    //       this.$apollo.queries.Post.refetch()
+    //     })
+    //     .catch((error) => this.$toast.error(error.message))
+    // },
   },
   apollo: {
     Post: {
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 702de29ed..c5349f630 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -27,7 +27,9 @@
           <post-teaser
             :post="relatedPost"
             :width="{ base: '100%', lg: 1 }"
-            @removePostFromList="removePostFromList"
+            @removePostFromList="removePostFromList(relatedPost, post.relatedContributions)"
+            @pinPost="pinPost(relatedPost)"
+            @unpinPost="unpinPost(relatedPost)"
           />
         </masonry-grid-item>
       </masonry-grid>
@@ -37,6 +39,7 @@
 </template>
 
 <script>
+import postListActions from '~/mixins/postListActions'
 import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcCategory from '~/components/Category'
@@ -46,10 +49,6 @@ import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 
 export default {
-  transition: {
-    name: 'slide-up',
-    mode: 'out-in',
-  },
   components: {
     PostTeaser,
     HcCategory,
@@ -58,17 +57,22 @@ export default {
     MasonryGrid,
     MasonryGridItem,
   },
+  transition: {
+    name: 'slide-up',
+    mode: 'out-in',
+  },
+  mixins: [postListActions],
   computed: {
     post() {
       return this.Post ? this.Post[0] || {} : {}
     },
   },
   methods: {
-    removePostFromList(deletedPost) {
-      this.post.relatedContributions = this.post.relatedContributions.filter((contribution) => {
-        return contribution.id !== deletedPost.id
-      })
-    },
+    // Wolle removePostFromList(deletedPost) {
+    //   this.post.relatedContributions = this.post.relatedContributions.filter((contribution) => {
+    //     return contribution.id !== deletedPost.id
+    //   })
+    // },
   },
   apollo: {
     Post: {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index ce5a76dee..238458ba7 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -199,9 +199,9 @@
               <post-teaser
                 :post="post"
                 :width="{ base: '100%', md: '100%', xl: '50%' }"
-                @removePostFromList="removePostFromList"
-                @pinPost="pinPost"
-                @unpinPost="unpinPost"
+                @removePostFromList="removePostFromList(post, posts)"
+                @pinPost="pinPost(post, refetchPostList)"
+                @unpinPost="unpinPost(post, refetchPostList)"
               />
             </masonry-grid-item>
           </template>
@@ -228,6 +228,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
+import postListActions from '~/mixins/postListActions'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
@@ -270,6 +271,7 @@ export default {
     FollowList,
     NewTabNavigation,
   },
+  mixins: [postListActions],
   transition: {
     name: 'slide-up',
     mode: 'out-in',
@@ -339,11 +341,11 @@ export default {
     },
   },
   methods: {
-    removePostFromList(deletedPost) {
-      this.posts = this.posts.filter((post) => {
-        return post.id !== deletedPost.id
-      })
-    },
+    // Wolle removePostFromList(deletedPost) {
+    //   this.posts = this.posts.filter((post) => {
+    //     return post.id !== deletedPost.id
+    //   })
+    // },
     handleTab(tab) {
       if (this.tabActive !== tab) {
         this.tabActive = tab
@@ -374,6 +376,10 @@ export default {
       this.posts = []
       this.hasMore = true
     },
+    refetchPostList() {
+      this.resetPostList()
+      this.$apollo.queries.profilePagePosts.refetch()
+    },
     async muteUser(user) {
       try {
         await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } })
@@ -414,32 +420,32 @@ export default {
         this.$apollo.queries.User.refetch()
       }
     },
-    pinPost(post) {
-      this.$apollo
-        .mutate({
-          mutation: PostMutations().pinPost,
-          variables: { id: post.id },
-        })
-        .then(() => {
-          this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
-          this.resetPostList()
-          this.$apollo.queries.profilePagePosts.refetch()
-        })
-        .catch((error) => this.$toast.error(error.message))
-    },
-    unpinPost(post) {
-      this.$apollo
-        .mutate({
-          mutation: PostMutations().unpinPost,
-          variables: { id: post.id },
-        })
-        .then(() => {
-          this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
-          this.resetPostList()
-          this.$apollo.queries.profilePagePosts.refetch()
-        })
-        .catch((error) => this.$toast.error(error.message))
-    },
+    // Wolle pinPost(post) {
+    //   this.$apollo
+    //     .mutate({
+    //       mutation: PostMutations().pinPost,
+    //       variables: { id: post.id },
+    //     })
+    //     .then(() => {
+    //       this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
+    //       this.resetPostList()
+    //       this.$apollo.queries.profilePagePosts.refetch()
+    //     })
+    //     .catch((error) => this.$toast.error(error.message))
+    // },
+    // Wolle unpinPost(post) {
+    //   this.$apollo
+    //     .mutate({
+    //       mutation: PostMutations().unpinPost,
+    //       variables: { id: post.id },
+    //     })
+    //     .then(() => {
+    //       this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
+    //       this.resetPostList()
+    //       this.$apollo.queries.profilePagePosts.refetch()
+    //     })
+    //     .catch((error) => this.$toast.error(error.message))
+    // },
     optimisticFollow({ followedByCurrentUser }) {
       /*
        * Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow