ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Wolfgang Huß 2020-10-08 09:26:20 +02:00
parent 91b64c2360
commit c91c9e263f
6 changed files with 121 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
webapp/components/_new/features/SearchResults/SearchResults.vue
View File

@ -1,27 +1,13 @@
<template> <template>
<div id="search-results" class="search-results"> <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 }"> <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<masonry-grid> <masonry-grid>
<!-- search text and result count --> <!-- search text -->
<ds-grid-item class="grid-total-search-results" :row-span="1" column-span="fullWidth"> <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-space margin-bottom="xxx-small" margin-top="xxx-small" centered>
<ds-text class="total-search-results"> <ds-text class="total-search-results">
{{ $t('search.for') }} {{ $t('search.for') }}
<strong>{{ '"' + search + '"' }}</strong> <strong>{{ '"' + (search || '') + '"' }}</strong>
<!-- Wolle "<strong>{{ search }}</strong>":
<strong>{{ searchCount }}</strong>
{{ $t('search.results', {}, searchCount) }} -->
</ds-text> </ds-text>
</ds-space> </ds-space>
</ds-grid-item> </ds-grid-item>
@ -56,16 +42,12 @@
:key="post.id" :key="post.id"
:imageAspectRatio="post.image && post.image.aspectRatio" :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-teaser
:post="post" :post="post"
:width="{ base: '100%', md: '100%', xl: '50%' }" :width="{ base: '100%', md: '100%', xl: '50%' }"
@removePostFromList="removePostFromList(post, posts)"
@pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost(post, refetchPostList)"
/> />
</masonry-grid-item> </masonry-grid-item>
</template> </template>
@ -190,6 +172,7 @@
</template> </template>
<script> <script>
import postListActions from '~/mixins/postListActions'
import { searchPosts, searchUsers, searchHashtags } from '~/graphql/Search.js' import { searchPosts, searchUsers, searchHashtags } from '~/graphql/Search.js'
import HcEmpty from '~/components/Empty/Empty' import HcEmpty from '~/components/Empty/Empty'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid' import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
@ -213,6 +196,7 @@ export default {
UserTeaser, UserTeaser,
HcHashtag, HcHashtag,
}, },
mixins: [postListActions],
props: { props: {
search: { search: {
type: String, type: String,
@ -349,6 +333,9 @@ export default {
break break
} }
}, },
refetchPostList() {
this.$apollo.queries.searchPosts.refetch()
},
}, },
apollo: { apollo: {
searchHashtags: { searchHashtags: {

4
webapp/graphql/Search.js
View File

@ -1,5 +1,5 @@
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { userFragment, postFragment } from './Fragments' import { userFragment, postFragment, tagsCategoriesAndPinnedFragment } from './Fragments'
export const searchQuery = gql` export const searchQuery = gql`
${userFragment} ${userFragment}
@ -29,6 +29,7 @@ export const searchQuery = gql`
export const searchPosts = gql` export const searchPosts = gql`
${userFragment} ${userFragment}
${postFragment} ${postFragment}
${tagsCategoriesAndPinnedFragment}
query($query: String!, $firstPosts: Int, $postsOffset: Int) { query($query: String!, $firstPosts: Int, $postsOffset: Int) {
searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) { searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
@ -36,6 +37,7 @@ export const searchPosts = gql`
posts { posts {
__typename __typename
...post ...post
...tagsCategoriesAndPinned
commentsCount commentsCount
shoutedCount shoutedCount
author { author {

22
webapp/mixins/postActions.js → webapp/mixins/postListActions.js
View File

@ -1,11 +1,15 @@
import PostMutations from '~/graphql/PostMutations'
export default { export default {
methods: { methods: {
deletePost(deletedPost) { removePostFromList(deletedPost, posts) {
this.posts = this.posts.filter((post) => { // Wolle this.posts = this.posts.filter((post) => {
posts = posts.filter((post) => {
return post.id !== deletedPost.id return post.id !== deletedPost.id
}) })
return posts
}, },
pinPost(post) { pinPost(post, refetchPostList = () => {}) {
this.$apollo this.$apollo
.mutate({ .mutate({
mutation: PostMutations().pinPost, mutation: PostMutations().pinPost,
@ -15,12 +19,13 @@ export default {
}) })
.then(() => { .then(() => {
this.$toast.success(this.$t('post.menu.pinnedSuccessfully')) this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
this.resetPostList() // Wolle this.resetPostList()
this.$apollo.queries.Post.refetch() refetchPostList()
// Wolle this.$apollo.queries.Post.refetch()
}) })
.catch((error) => this.$toast.error(error.message)) .catch((error) => this.$toast.error(error.message))
}, },
unpinPost(post) { unpinPost(post, refetchPostList = () => {}) {
this.$apollo this.$apollo
.mutate({ .mutate({
mutation: PostMutations().unpinPost, mutation: PostMutations().unpinPost,
@ -30,8 +35,9 @@ export default {
}) })
.then(() => { .then(() => {
this.$toast.success(this.$t('post.menu.unpinnedSuccessfully')) this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
this.resetPostList() // Wolle this.resetPostList()
this.$apollo.queries.Post.refetch() refetchPostList()
// Wolle this.$apollo.queries.Post.refetch()
}) })
.catch((error) => this.$toast.error(error.message)) .catch((error) => this.$toast.error(error.message))
}, },

76
webapp/pages/index.vue
View File

@ -28,9 +28,9 @@
> >
<post-teaser <post-teaser
:post="post" :post="post"
@removePostFromList="deletePost" @removePostFromList="removePostFromList(post, posts)"
@pinPost="pinPost" @pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost" @unpinPost="unpinPost(post, refetchPostList)"
/> />
</masonry-grid-item> </masonry-grid-item>
</template> </template>
@ -64,7 +64,7 @@
</template> </template>
<script> <script>
// Wolle import postActions from '~/mixins/postActions' import postListActions from '~/mixins/postListActions'
// import DonationInfo from '~/components/DonationInfo/DonationInfo.vue' // import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter.vue' import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter.vue'
import HcEmpty from '~/components/Empty/Empty' 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 MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
import { filterPosts } from '~/graphql/PostQuery.js' import { filterPosts } from '~/graphql/PostQuery.js'
import PostMutations from '~/graphql/PostMutations' // Wolle import PostMutations from '~/graphql/PostMutations'
import UpdateQuery from '~/components/utils/UpdateQuery' import UpdateQuery from '~/components/utils/UpdateQuery'
export default { export default {
@ -85,7 +85,7 @@ export default {
MasonryGrid, MasonryGrid,
MasonryGridItem, MasonryGridItem,
}, },
// Wolle mixins: [postActions], mixins: [postListActions],
data() { data() {
const { hashtag = null } = this.$route.query const { hashtag = null } = this.$route.query
return { return {
@ -162,42 +162,46 @@ export default {
updateQuery: UpdateQuery(this, { $state, pageKey: 'Post' }), updateQuery: UpdateQuery(this, { $state, pageKey: 'Post' }),
}) })
}, },
deletePost(deletedPost) { // Wolle deletePost(deletedPost) {
this.posts = this.posts.filter((post) => { // this.posts = this.posts.filter((post) => {
return post.id !== deletedPost.id // return post.id !== deletedPost.id
}) // })
}, // },
resetPostList() { resetPostList() {
this.offset = 0 this.offset = 0
this.posts = [] this.posts = []
this.hasMore = true this.hasMore = true
}, },
pinPost(post) { refetchPostList() {
this.$apollo this.resetPostList()
.mutate({ this.$apollo.queries.Post.refetch()
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))
}, },
// 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: { apollo: {
Post: { Post: {

24
webapp/pages/post/_id/_slug/more-info.vue
View File

@ -27,7 +27,9 @@
<post-teaser <post-teaser
:post="relatedPost" :post="relatedPost"
:width="{ base: '100%', lg: 1 }" :width="{ base: '100%', lg: 1 }"
@removePostFromList="removePostFromList" @removePostFromList="removePostFromList(relatedPost, post.relatedContributions)"
@pinPost="pinPost(relatedPost)"
@unpinPost="unpinPost(relatedPost)"
/> />
</masonry-grid-item> </masonry-grid-item>
</masonry-grid> </masonry-grid>
@ -37,6 +39,7 @@
</template> </template>
<script> <script>
import postListActions from '~/mixins/postListActions'
import HcEmpty from '~/components/Empty/Empty' import HcEmpty from '~/components/Empty/Empty'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue' import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import HcCategory from '~/components/Category' import HcCategory from '~/components/Category'
@ -46,10 +49,6 @@ import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue' import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
export default { export default {
transition: {
name: 'slide-up',
mode: 'out-in',
},
components: { components: {
PostTeaser, PostTeaser,
HcCategory, HcCategory,
@ -58,17 +57,22 @@ export default {
MasonryGrid, MasonryGrid,
MasonryGridItem, MasonryGridItem,
}, },
transition: {
name: 'slide-up',
mode: 'out-in',
},
mixins: [postListActions],
computed: { computed: {
post() { post() {
return this.Post ? this.Post[0] || {} : {} return this.Post ? this.Post[0] || {} : {}
}, },
}, },
methods: { methods: {
removePostFromList(deletedPost) { // Wolle removePostFromList(deletedPost) {
this.post.relatedContributions = this.post.relatedContributions.filter((contribution) => { // this.post.relatedContributions = this.post.relatedContributions.filter((contribution) => {
return contribution.id !== deletedPost.id // return contribution.id !== deletedPost.id
}) // })
}, // },
}, },
apollo: { apollo: {
Post: { Post: {

74
webapp/pages/profile/_id/_slug.vue
View File

@ -199,9 +199,9 @@
<post-teaser <post-teaser
:post="post" :post="post"
:width="{ base: '100%', md: '100%', xl: '50%' }" :width="{ base: '100%', md: '100%', xl: '50%' }"
@removePostFromList="removePostFromList" @removePostFromList="removePostFromList(post, posts)"
@pinPost="pinPost" @pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost" @unpinPost="unpinPost(post, refetchPostList)"
/> />
</masonry-grid-item> </masonry-grid-item>
</template> </template>
@ -228,6 +228,7 @@
<script> <script>
import uniqBy from 'lodash/uniqBy' import uniqBy from 'lodash/uniqBy'
import postListActions from '~/mixins/postListActions'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue' import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import HcFollowButton from '~/components/FollowButton.vue' import HcFollowButton from '~/components/FollowButton.vue'
import HcCountTo from '~/components/CountTo.vue' import HcCountTo from '~/components/CountTo.vue'
@ -270,6 +271,7 @@ export default {
FollowList, FollowList,
NewTabNavigation, NewTabNavigation,
}, },
mixins: [postListActions],
transition: { transition: {
name: 'slide-up', name: 'slide-up',
mode: 'out-in', mode: 'out-in',
@ -339,11 +341,11 @@ export default {
}, },
}, },
methods: { methods: {
removePostFromList(deletedPost) { // Wolle removePostFromList(deletedPost) {
this.posts = this.posts.filter((post) => { // this.posts = this.posts.filter((post) => {
return post.id !== deletedPost.id // return post.id !== deletedPost.id
}) // })
}, // },
handleTab(tab) { handleTab(tab) {
if (this.tabActive !== tab) { if (this.tabActive !== tab) {
this.tabActive = tab this.tabActive = tab
@ -374,6 +376,10 @@ export default {
this.posts = [] this.posts = []
this.hasMore = true this.hasMore = true
}, },
refetchPostList() {
this.resetPostList()
this.$apollo.queries.profilePagePosts.refetch()
},
async muteUser(user) { async muteUser(user) {
try { try {
await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } }) await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } })
@ -414,32 +420,32 @@ export default {
this.$apollo.queries.User.refetch() this.$apollo.queries.User.refetch()
} }
}, },
pinPost(post) { // Wolle pinPost(post) {
this.$apollo // this.$apollo
.mutate({ // .mutate({
mutation: PostMutations().pinPost, // mutation: PostMutations().pinPost,
variables: { id: post.id }, // variables: { id: post.id },
}) // })
.then(() => { // .then(() => {
this.$toast.success(this.$t('post.menu.pinnedSuccessfully')) // this.$toast.success(this.$t('post.menu.pinnedSuccessfully'))
this.resetPostList() // this.resetPostList()
this.$apollo.queries.profilePagePosts.refetch() // this.$apollo.queries.profilePagePosts.refetch()
}) // })
.catch((error) => this.$toast.error(error.message)) // .catch((error) => this.$toast.error(error.message))
}, // },
unpinPost(post) { // Wolle unpinPost(post) {
this.$apollo // this.$apollo
.mutate({ // .mutate({
mutation: PostMutations().unpinPost, // mutation: PostMutations().unpinPost,
variables: { id: post.id }, // variables: { id: post.id },
}) // })
.then(() => { // .then(() => {
this.$toast.success(this.$t('post.menu.unpinnedSuccessfully')) // this.$toast.success(this.$t('post.menu.unpinnedSuccessfully'))
this.resetPostList() // this.resetPostList()
this.$apollo.queries.profilePagePosts.refetch() // this.$apollo.queries.profilePagePosts.refetch()
}) // })
.catch((error) => this.$toast.error(error.message)) // .catch((error) => this.$toast.error(error.message))
}, // },
optimisticFollow({ followedByCurrentUser }) { optimisticFollow({ followedByCurrentUser }) {
/* /*
* Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow * Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow