From 91d797dcfa5817dbfa5eae6d2fb4228b4522b284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 22 Aug 2022 12:14:54 +0200
Subject: [PATCH] Copy profile Vue pages for the group profile

---
 webapp/pages/group/_id.spec.js       |  33 ++
 webapp/pages/group/_id.vue           |  34 ++
 webapp/pages/group/_id/_slug.spec.js |  95 ++++++
 webapp/pages/group/_id/_slug.vue     | 443 +++++++++++++++++++++++++++
 4 files changed, 605 insertions(+)
 create mode 100644 webapp/pages/group/_id.spec.js
 create mode 100644 webapp/pages/group/_id.vue
 create mode 100644 webapp/pages/group/_id/_slug.spec.js
 create mode 100644 webapp/pages/group/_id/_slug.vue

diff --git a/webapp/pages/group/_id.spec.js b/webapp/pages/group/_id.spec.js
new file mode 100644
index 000000000..aab216569
--- /dev/null
+++ b/webapp/pages/group/_id.spec.js
@@ -0,0 +1,33 @@
+import { config, mount } from '@vue/test-utils'
+import _id from './_id.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+
+describe('Profile _id.vue', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {}
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(_id, {
+        mocks,
+        localVue,
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.nuxt-child')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
new file mode 100644
index 000000000..b9bbef83e
--- /dev/null
+++ b/webapp/pages/group/_id.vue
@@ -0,0 +1,34 @@
+<template>
+  <nuxt-child />
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
+
+const options = {
+  queryId: gql`
+    query($idOrSlug: ID) {
+      User(id: $idOrSlug) {
+        id
+        slug
+      }
+    }
+  `,
+  querySlug: gql`
+    query($idOrSlug: String) {
+      User(slug: $idOrSlug) {
+        id
+        slug
+      }
+    }
+  `,
+  message: 'error-pages.profile-not-found',
+  path: 'profile',
+}
+const persistentLinks = PersistentLinks(options)
+
+export default {
+  mixins: [persistentLinks],
+}
+</script>
diff --git a/webapp/pages/group/_id/_slug.spec.js b/webapp/pages/group/_id/_slug.spec.js
new file mode 100644
index 000000000..477174485
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.spec.js
@@ -0,0 +1,95 @@
+import { config, mount } from '@vue/test-utils'
+import ProfileSlug from './_slug.vue'
+
+const localVue = global.localVue
+
+localVue.filter('date', (d) => d)
+
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+config.stubs['infinite-loading'] = '<span><slot /></span>'
+config.stubs['follow-list'] = '<span><slot /></span>'
+
+describe('ProfileSlug', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      post: {
+        id: 'p23',
+        name: 'It is a post',
+      },
+      $t: jest.fn(),
+      // If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      $route: {
+        params: {
+          id: '4711',
+          slug: 'john-doe',
+        },
+      },
+      $router: {
+        history: {
+          push: jest.fn(),
+        },
+      },
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(ProfileSlug, {
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('given an authenticated user', () => {
+      beforeEach(() => {
+        mocks.$filters = {
+          removeLinks: (c) => c,
+          truncate: (a) => a,
+        }
+        mocks.$store = {
+          getters: {
+            'auth/isModerator': () => false,
+            'auth/user': {
+              id: 'u23',
+            },
+          },
+        }
+      })
+
+      describe('given a user for the profile', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.setData({
+            User: [
+              {
+                id: 'u3',
+                name: 'Bob the builder',
+                contributionsCount: 6,
+                shoutedCount: 7,
+                commentedCount: 8,
+              },
+            ],
+          })
+        })
+
+        it('displays name of the user', () => {
+          expect(wrapper.text()).toContain('Bob the builder')
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
new file mode 100644
index 000000000..4fef7d3aa
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.vue
@@ -0,0 +1,443 @@
+<template>
+  <div>
+    <ds-space />
+    <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+        <base-card
+          :class="{ 'disabled-content': user.disabled }"
+          style="position: relative; height: auto; overflow: visible"
+        >
+          <hc-upload v-if="myProfile" :user="user">
+            <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
+          </hc-upload>
+          <user-avatar v-else :user="user" class="profile-avatar" size="large" />
+          <!-- Menu -->
+          <client-only>
+            <content-menu
+              placement="bottom-end"
+              resource-type="user"
+              :resource="user"
+              :is-owner="myProfile"
+              class="user-content-menu"
+              @mute="muteUser"
+              @unmute="unmuteUser"
+              @block="blockUser"
+              @unblock="unblockUser"
+              @delete="deleteUser"
+            />
+          </client-only>
+          <ds-space margin="small">
+            <ds-heading tag="h3" align="center" no-margin>
+              {{ userName }}
+            </ds-heading>
+            <ds-text align="center" color="soft">
+              {{ userSlug }}
+            </ds-text>
+            <ds-text v-if="user.location" align="center" color="soft" size="small">
+              <base-icon name="map-marker" />
+              {{ user.location.name }}
+            </ds-text>
+            <ds-text align="center" color="soft" size="small">
+              {{ $t('profile.memberSince') }} {{ user.createdAt | date('MMMM yyyy') }}
+            </ds-text>
+          </ds-space>
+          <ds-space v-if="user.badges && user.badges.length" margin="x-small">
+            <hc-badges :badges="user.badges" />
+          </ds-space>
+          <ds-flex>
+            <ds-flex-item>
+              <client-only>
+                <ds-number :label="$t('profile.followers')">
+                  <hc-count-to
+                    slot="count"
+                    :start-val="followedByCountStartValue"
+                    :end-val="user.followedByCount"
+                  />
+                </ds-number>
+              </client-only>
+            </ds-flex-item>
+            <ds-flex-item>
+              <client-only>
+                <ds-number :label="$t('profile.following')">
+                  <hc-count-to slot="count" :end-val="user.followingCount" />
+                </ds-number>
+              </client-only>
+            </ds-flex-item>
+          </ds-flex>
+          <div v-if="!myProfile" class="action-buttons">
+            <base-button v-if="user.isBlocked" @click="unblockUser(user)">
+              {{ $t('settings.blocked-users.unblock') }}
+            </base-button>
+            <base-button v-if="user.isMuted" @click="unmuteUser(user)">
+              {{ $t('settings.muted-users.unmute') }}
+            </base-button>
+            <hc-follow-button
+              v-if="!user.isMuted && !user.isBlocked"
+              :follow-id="user.id"
+              :is-followed="user.followedByCurrentUser"
+              @optimistic="optimisticFollow"
+              @update="updateFollow"
+            />
+          </div>
+          <template v-if="user.about">
+            <hr />
+            <ds-space margin-top="small" margin-bottom="small">
+              <ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text>
+            </ds-space>
+          </template>
+        </base-card>
+        <ds-space />
+        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
+          {{ $t('profile.network.title') }}
+        </ds-heading>
+        <follow-list
+          :loading="$apollo.loading"
+          :user="user"
+          type="followedBy"
+          @fetchAllConnections="fetchAllConnections"
+        />
+        <ds-space />
+        <follow-list
+          :loading="$apollo.loading"
+          :user="user"
+          type="following"
+          @fetchAllConnections="fetchAllConnections"
+        />
+        <social-media :user-name="userName" :user="user" />
+      </ds-flex-item>
+
+      <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+        <masonry-grid>
+          <!-- TapNavigation -->
+          <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
+
+          <!-- feed -->
+          <ds-grid-item :row-span="2" column-span="fullWidth">
+            <ds-space centered>
+              <nuxt-link :to="{ name: 'post-create' }">
+                <base-button
+                  v-if="myProfile"
+                  v-tooltip="{
+                    content: $t('contribution.newPost'),
+                    placement: 'left',
+                    delay: { show: 500 },
+                  }"
+                  :path="{ name: 'post-create' }"
+                  class="profile-post-add-button"
+                  icon="plus"
+                  circle
+                  filled
+                />
+              </nuxt-link>
+            </ds-space>
+          </ds-grid-item>
+
+          <template v-if="posts.length">
+            <masonry-grid-item
+              v-for="post in posts"
+              :key="post.id"
+              :imageAspectRatio="post.image && post.image.aspectRatio"
+            >
+              <post-teaser
+                :post="post"
+                :width="{ base: '100%', md: '100%', xl: '50%' }"
+                @removePostFromList="posts = removePostFromList(post, posts)"
+                @pinPost="pinPost(post, refetchPostList)"
+                @unpinPost="unpinPost(post, refetchPostList)"
+              />
+            </masonry-grid-item>
+          </template>
+          <template v-else-if="$apollo.loading">
+            <ds-grid-item column-span="fullWidth">
+              <ds-space centered>
+                <ds-spinner size="base"></ds-spinner>
+              </ds-space>
+            </ds-grid-item>
+          </template>
+          <template v-else>
+            <ds-grid-item column-span="fullWidth">
+              <hc-empty margin="xx-large" icon="file" />
+            </ds-grid-item>
+          </template>
+        </masonry-grid>
+        <client-only>
+          <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
+        </client-only>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<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'
+import HcBadges from '~/components/Badges.vue'
+import FollowList from '~/components/features/FollowList/FollowList'
+import HcEmpty from '~/components/Empty/Empty'
+import ContentMenu from '~/components/ContentMenu/ContentMenu'
+import HcUpload from '~/components/Upload'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+import { profilePagePosts } from '~/graphql/PostQuery'
+import UserQuery from '~/graphql/User'
+import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
+import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
+import UpdateQuery from '~/components/utils/UpdateQuery'
+import SocialMedia from '~/components/SocialMedia/SocialMedia'
+
+const tabToFilterMapping = ({ tab, id }) => {
+  return {
+    post: { author: { id } },
+    comment: { comments_some: { author: { id } } },
+    shout: { shoutedBy_some: { id } },
+  }[tab]
+}
+
+export default {
+  components: {
+    SocialMedia,
+    PostTeaser,
+    HcFollowButton,
+    HcCountTo,
+    HcBadges,
+    HcEmpty,
+    UserAvatar,
+    ContentMenu,
+    HcUpload,
+    MasonryGrid,
+    MasonryGridItem,
+    FollowList,
+    TabNavigation,
+  },
+  mixins: [postListActions],
+  transition: {
+    name: 'slide-up',
+    mode: 'out-in',
+  },
+  data() {
+    const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
+    return {
+      User: [],
+      posts: [],
+      hasMore: true,
+      offset: 0,
+      pageSize: 6,
+      tabActive: 'post',
+      filter,
+      followedByCountStartValue: 0,
+      followedByCount: 7,
+      followingCount: 7,
+    }
+  },
+  computed: {
+    myProfile() {
+      return this.$route.params.id === this.$store.getters['auth/user'].id
+    },
+    user() {
+      return this.User ? this.User[0] : {}
+    },
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
+    },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
+    tabOptions() {
+      return [
+        {
+          type: 'post',
+          title: this.$t('common.post', null, this.user.contributionsCount),
+          count: this.user.contributionsCount,
+          disabled: this.user.contributionsCount === 0,
+        },
+        {
+          type: 'comment',
+          title: this.$t('profile.commented'),
+          count: this.user.commentedCount,
+          disabled: this.user.commentedCount === 0,
+        },
+        {
+          type: 'shout',
+          title: this.$t('profile.shouted'),
+          count: this.user.shoutedCount,
+          disabled: this.user.shoutedCount === 0,
+        },
+      ]
+    },
+  },
+  methods: {
+    handleTab(tab) {
+      if (this.tabActive !== tab) {
+        this.tabActive = tab
+        this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+        this.resetPostList()
+      }
+    },
+    uniq(items, field = 'id') {
+      return uniqBy(items, field)
+    },
+    showMoreContributions($state) {
+      const { profilePagePosts: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+      this.offset += this.pageSize
+
+      PostQuery.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.filter,
+          first: this.pageSize,
+          orderBy: 'createdAt_desc',
+        },
+        updateQuery: UpdateQuery(this, { $state, pageKey: 'profilePagePosts' }),
+      })
+    },
+    resetPostList() {
+      this.offset = 0
+      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 } })
+      } catch (error) {
+        this.$toast.error(error.message)
+      } finally {
+        this.$apollo.queries.User.refetch()
+        this.resetPostList()
+        this.$apollo.queries.profilePagePosts.refetch()
+      }
+    },
+    async unmuteUser(user) {
+      try {
+        this.$apollo.mutate({ mutation: unmuteUser(), variables: { id: user.id } })
+      } catch (error) {
+        this.$toast.error(error.message)
+      } finally {
+        this.$apollo.queries.User.refetch()
+        this.resetPostList()
+        this.$apollo.queries.profilePagePosts.refetch()
+      }
+    },
+    async blockUser(user) {
+      try {
+        await this.$apollo.mutate({ mutation: blockUser(), variables: { id: user.id } })
+      } catch (error) {
+        this.$toast.error(error.message)
+      } finally {
+        this.$apollo.queries.User.refetch()
+      }
+    },
+    async unblockUser(user) {
+      try {
+        this.$apollo.mutate({ mutation: unblockUser(), variables: { id: user.id } })
+      } catch (error) {
+        this.$toast.error(error.message)
+      } finally {
+        this.$apollo.queries.User.refetch()
+      }
+    },
+    async deleteUser(userdata) {
+      this.$store.commit('modal/SET_OPEN', {
+        name: 'delete',
+        data: {
+          userdata: userdata,
+        },
+      })
+    },
+    optimisticFollow({ followedByCurrentUser }) {
+      /*
+       * Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow
+       */
+      this.followedByCountStartValue = this.user.followedByCount
+      const currentUser = this.$store.getters['auth/user']
+      if (followedByCurrentUser) {
+        this.user.followedByCount++
+        this.user.followedBy = [currentUser, ...this.user.followedBy]
+      } else {
+        this.user.followedByCount--
+        this.user.followedBy = this.user.followedBy.filter((user) => user.id !== currentUser.id)
+      }
+      this.user.followedByCurrentUser = followedByCurrentUser
+    },
+    updateFollow({ followedByCurrentUser, followedBy, followedByCount }) {
+      this.followedByCountStartValue = this.user.followedByCount
+      this.user.followedByCount = followedByCount
+      this.user.followedByCurrentUser = followedByCurrentUser
+      this.user.followedBy = followedBy
+    },
+    fetchAllConnections(type) {
+      if (type === 'following') this.followingCount = Infinity
+      if (type === 'followedBy') this.followedByCount = Infinity
+    },
+  },
+  apollo: {
+    profilePagePosts: {
+      query() {
+        return profilePagePosts(this.$i18n)
+      },
+      variables() {
+        return {
+          filter: this.filter,
+          first: this.pageSize,
+          offset: 0,
+          orderBy: 'createdAt_desc',
+        }
+      },
+      update({ profilePagePosts }) {
+        this.posts = profilePagePosts
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+    User: {
+      query() {
+        return UserQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          id: this.$route.params.id,
+          followedByCount: this.followedByCount,
+          followingCount: this.followingCount,
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.profile-avatar.user-avatar {
+  margin: auto;
+  margin-top: -60px;
+}
+.page-name-profile-id-slug {
+  .ds-flex-item:first-child .content-menu {
+    position: absolute;
+    top: $space-x-small;
+    right: $space-x-small;
+  }
+}
+.profile-post-add-button {
+  box-shadow: $box-shadow-x-large;
+}
+.action-buttons {
+  margin: $space-small 0;
+
+  > .base-button {
+    display: block;
+    width: 100%;
+    margin-bottom: $space-x-small;
+  }
+}
+</style>