Implement mixins for delete, pin, unpin post in lists, on the way

2025-12-12 23:35:58 +00:00 · 2020-10-08 09:26:20 +02:00 · 2020-10-08 09:26:20 +02:00 · c91c9e263f
commit c91c9e263f
parent 91b64c2360
6 changed files with 121 additions and 112 deletions
--- 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: {
--- 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 {
--- a/webapp/mixins/postListActions.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))
    },
--- 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: {
--- 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: {
--- 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