From c167f3cdeda742dca17e2e547b8f85f675448b68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 10 Sep 2022 12:49:42 +0200
Subject: [PATCH 01/23] Upgrade neode from v^0.4.7 to v^0.4.8 in main folder

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a36063f04..d7463adac 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "jsonwebtoken": "^8.5.1",
     "mock-socket": "^9.0.3",
     "neo4j-driver": "^4.3.4",
-    "neode": "^0.4.7",
+    "neode": "^0.4.8",
     "npm-run-all": "^4.1.5",
     "rosie": "^2.1.0",
     "slug": "^6.0.0"
diff --git a/yarn.lock b/yarn.lock
index 7b1c5eb79..6103f10a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4481,10 +4481,10 @@ neo4j-driver@^4.2.2, neo4j-driver@^4.3.4:
     neo4j-driver-core "^4.3.4"
     rxjs "^6.6.3"
 
-neode@^0.4.7:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.7.tgz#033007b57a2ee167e9ee5537493086db08d005eb"
-  integrity sha512-YXlc187JRpeKCBcUIkY6nimXXG+Tvlopfe71/FPno2THrwmYt5mm0RPHZ+mXF2O1Xg6zvjKvOpCpDz2vHBfroQ==
+neode@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.8.tgz#0889b4fc7f1bf0b470b01fa5b8870373b5d47ad6"
+  integrity sha512-pb91NfCOg4Fj5o+98H+S2XYC+ByQfbdhwcc1UVuzuUQ0Ezzj+jWz8NmKWU8ZfCH6l4plk71yDAPd2eTwpt+Xvg==
   dependencies:
     "@hapi/joi" "^15.1.1"
     dotenv "^4.0.0"

From ee026a3e1547a377403205873c7f02421b518bff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 10 Sep 2022 13:16:34 +0200
Subject: [PATCH 02/23] Remove unused parameters in 'GroupMembers' query

---
 backend/src/db/graphql/groups.js | 4 ++--
 webapp/graphql/groups.js         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/src/db/graphql/groups.js b/backend/src/db/graphql/groups.js
index c5c6756ed..640a70009 100644
--- a/backend/src/db/graphql/groups.js
+++ b/backend/src/db/graphql/groups.js
@@ -149,8 +149,8 @@ export const groupQuery = gql`
 `
 
 export const groupMembersQuery = gql`
-  query ($id: ID!, $first: Int, $offset: Int, $orderBy: [_UserOrdering], $filter: _UserFilter) {
-    GroupMembers(id: $id, first: $first, offset: $offset, orderBy: $orderBy, filter: $filter) {
+  query ($id: ID!) {
+    GroupMembers(id: $id) {
       id
       name
       slug
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index c5c6756ed..640a70009 100644
--- a/webapp/graphql/groups.js
+++ b/webapp/graphql/groups.js
@@ -149,8 +149,8 @@ export const groupQuery = gql`
 `
 
 export const groupMembersQuery = gql`
-  query ($id: ID!, $first: Int, $offset: Int, $orderBy: [_UserOrdering], $filter: _UserFilter) {
-    GroupMembers(id: $id, first: $first, offset: $offset, orderBy: $orderBy, filter: $filter) {
+  query ($id: ID!) {
+    GroupMembers(id: $id) {
       id
       name
       slug

From a9376cb9790d9a0b451047b6e1c36210d1afe830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 07:32:18 +0200
Subject: [PATCH 03/23] Renamed folder 'FollowList' to 'ProfileList'

---
 .../features/{FollowList => ProfileList}/FollowList.spec.js     | 0
 .../features/{FollowList => ProfileList}/FollowList.story.js    | 0
 .../features/{FollowList => ProfileList}/FollowList.story.json  | 0
 .../features/{FollowList => ProfileList}/FollowList.vue         | 0
 webapp/pages/profile/_id/_slug.vue                              | 2 +-
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename webapp/components/features/{FollowList => ProfileList}/FollowList.spec.js (100%)
 rename webapp/components/features/{FollowList => ProfileList}/FollowList.story.js (100%)
 rename webapp/components/features/{FollowList => ProfileList}/FollowList.story.json (100%)
 rename webapp/components/features/{FollowList => ProfileList}/FollowList.vue (100%)

diff --git a/webapp/components/features/FollowList/FollowList.spec.js b/webapp/components/features/ProfileList/FollowList.spec.js
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.spec.js
rename to webapp/components/features/ProfileList/FollowList.spec.js
diff --git a/webapp/components/features/FollowList/FollowList.story.js b/webapp/components/features/ProfileList/FollowList.story.js
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.story.js
rename to webapp/components/features/ProfileList/FollowList.story.js
diff --git a/webapp/components/features/FollowList/FollowList.story.json b/webapp/components/features/ProfileList/FollowList.story.json
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.story.json
rename to webapp/components/features/ProfileList/FollowList.story.json
diff --git a/webapp/components/features/FollowList/FollowList.vue b/webapp/components/features/ProfileList/FollowList.vue
similarity index 100%
rename from webapp/components/features/FollowList/FollowList.vue
rename to webapp/components/features/ProfileList/FollowList.vue
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index bfb7adf0d..c4945db45 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -175,7 +175,7 @@ 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 FollowList from '~/components/features/ProfileList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'

From b7be7018e885bcffbe806f9f6f78d9876b70456e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 08:26:10 +0200
Subject: [PATCH 04/23] Move important parts of 'FollowList' to sub component
 'ProfileList'

---
 .../features/ProfileList/FollowList.vue       | 147 ++--------------
 .../features/ProfileList/ProfileList.vue      | 158 ++++++++++++++++++
 2 files changed, 169 insertions(+), 136 deletions(-)
 create mode 100644 webapp/components/features/ProfileList/ProfileList.vue

diff --git a/webapp/components/features/ProfileList/FollowList.vue b/webapp/components/features/ProfileList/FollowList.vue
index 114a610f1..635eccd5b 100644
--- a/webapp/components/features/ProfileList/FollowList.vue
+++ b/webapp/components/features/ProfileList/FollowList.vue
@@ -1,64 +1,28 @@
 <template>
-  <base-card class="follow-list">
-    <template v-if="connections && connections.length">
-      <h5 class="title spacer-x-small">
-        {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
-      </h5>
-      <ul :class="connectionsClass">
-        <li
-          v-for="connection in filteredConnections"
-          :key="connection.id"
-          class="connections__item"
-        >
-          <user-teaser :user="connection" />
-        </li>
-      </ul>
-      <base-button
-        v-if="hasMore"
-        :loading="loading"
-        class="spacer-x-small"
-        size="small"
-        @click="$emit('fetchAllConnections', type)"
-      >
-        {{
-          $t('profile.network.andMore', {
-            number: allConnectionsCount - connections.length,
-          })
-        }}
-      </base-button>
-      <ds-input
-        v-if="!hasMore"
-        :name="`${type}Filter`"
-        :placeholder="filter"
-        class="spacer-x-small"
-        icon="filter"
-        size="small"
-        @input.native="setFilter"
-      />
-    </template>
-    <p v-else class="nobody-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
-  </base-card>
+  <profile-list
+    :uniqueName="`${type}Filter`"
+    :title="$filters.truncate(userName, 15) + ' ' + $t(`profile.network.${type}`)"
+    :titleNobody="$filters.truncate(userName, 15) + ' ' + $t(`profile.network.${type}Nobody`)"
+    :allConnectionsCount="allConnectionsCount"
+    :connections="connections"
+    :loading="loading"
+    @fetchAllConnections="$emit('fetchAllConnections', type)"
+  />
 </template>
 
 <script>
-import { escape } from 'xregexp/xregexp-all.js'
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
+import ProfileList from '~/components/features/ProfileList/ProfileList'
 
 export default {
   name: 'FollowerList',
   components: {
-    UserTeaser,
+    ProfileList,
   },
   props: {
     user: { type: Object, default: null },
     type: { type: String, default: 'following' },
     loading: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      filter: null,
-    }
-  },
   computed: {
     userName() {
       const { name } = this.user || {}
@@ -70,95 +34,6 @@ export default {
     connections() {
       return this.user[this.type]
     },
-    hasMore() {
-      return this.allConnectionsCount > this.connections.length
-    },
-    connectionsClass() {
-      return `connections${this.hasMore ? '' : ' --overflow'}`
-    },
-    filteredConnections() {
-      if (!this.filter) {
-        return this.connections
-      }
-
-      // @example
-      //  this.filter = 'foo';
-      //  fuzzyExpression = /([^f]*f)([^o]*o)([^o]*o)/i
-      const fuzzyExpression = new RegExp(
-        `${this.filter.split('').reduce((expr, c) => `${expr}([^${escape(c)}]*${escape(c)})`, '')}`,
-        'i',
-      )
-
-      const fuzzyScores = this.connections
-        .map((user) => {
-          const match = user.name.match(fuzzyExpression)
-
-          if (!match) {
-            return false
-          }
-
-          let score = 1
-          for (let i = 1; i <= this.filter.length; i++) {
-            score *= match[i].length
-          }
-
-          return {
-            user,
-            score,
-          }
-        })
-        .filter(Boolean)
-        .sort((a, b) => a.score - b.score)
-
-      return fuzzyScores.map((score) => score.user)
-    },
-  },
-  methods: {
-    setFilter(evt) {
-      this.filter = evt.target.value
-    },
   },
 }
 </script>
-
-<style lang="scss">
-.follow-list {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: auto;
-
-  > .title {
-    color: $text-color-soft;
-    font-size: $font-size-base;
-  }
-
-  .connections {
-    height: $size-height-connections;
-    padding: $space-none;
-    list-style-type: none;
-
-    &.--overflow {
-      overflow-y: auto;
-    }
-
-    > .connections__item {
-      padding: $space-xx-small;
-
-      &.is-selected,
-      &:hover {
-        background-color: $background-color-primary-inverse;
-      }
-    }
-  }
-
-  .nobody-message {
-    text-align: center;
-    color: $text-color-soft;
-  }
-
-  > :nth-child(n):not(:last-child) {
-    margin-bottom: $space-small;
-  }
-}
-</style>
diff --git a/webapp/components/features/ProfileList/ProfileList.vue b/webapp/components/features/ProfileList/ProfileList.vue
new file mode 100644
index 000000000..c619da8fc
--- /dev/null
+++ b/webapp/components/features/ProfileList/ProfileList.vue
@@ -0,0 +1,158 @@
+<template>
+  <base-card class="follow-list">
+    <template v-if="connections && connections.length">
+      <h5 class="title spacer-x-small">
+        {{ title }}
+      </h5>
+      <ul :class="connectionsClass">
+        <li
+          v-for="connection in filteredConnections"
+          :key="connection.id"
+          class="connections__item"
+        >
+          <user-teaser :user="connection" />
+        </li>
+      </ul>
+      <base-button
+        v-if="hasMore"
+        :loading="loading"
+        class="spacer-x-small"
+        size="small"
+        @click="$emit('fetchAllConnections')"
+      >
+        {{
+          $t('profile.network.andMore', {
+            number: allConnectionsCount - connections.length,
+          })
+        }}
+      </base-button>
+      <ds-input
+        v-if="!hasMore"
+        :name="uniqueName"
+        :placeholder="filter"
+        class="spacer-x-small"
+        icon="filter"
+        size="small"
+        @input.native="setFilter"
+      />
+    </template>
+    <p v-else class="nobody-message">{{ titleNobody }}</p>
+  </base-card>
+</template>
+
+<script>
+import { escape } from 'xregexp/xregexp-all.js'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
+
+export default {
+  name: 'ProfileList',
+  components: {
+    UserTeaser,
+  },
+  props: {
+    uniqueName: { type: String, required: true },
+    title: { type: String, required: true },
+    titleNobody: { type: String, required: true },
+    allConnectionsCount: { type: Number, required: true },
+    connections: { type: Array, required: true },
+    type: { type: String, default: 'following' },
+    loading: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      filter: null,
+    }
+  },
+  computed: {
+    hasMore() {
+      return this.allConnectionsCount > this.connections.length
+    },
+    connectionsClass() {
+      return `connections${this.hasMore ? '' : ' --overflow'}`
+    },
+    filteredConnections() {
+      if (!this.filter) {
+        return this.connections
+      }
+
+      // @example
+      //  this.filter = 'foo';
+      //  fuzzyExpression = /([^f]*f)([^o]*o)([^o]*o)/i
+      const fuzzyExpression = new RegExp(
+        `${this.filter.split('').reduce((expr, c) => `${expr}([^${escape(c)}]*${escape(c)})`, '')}`,
+        'i',
+      )
+
+      const fuzzyScores = this.connections
+        .map((user) => {
+          const match = user.name.match(fuzzyExpression)
+
+          if (!match) {
+            return false
+          }
+
+          let score = 1
+          for (let i = 1; i <= this.filter.length; i++) {
+            score *= match[i].length
+          }
+
+          return {
+            user,
+            score,
+          }
+        })
+        .filter(Boolean)
+        .sort((a, b) => a.score - b.score)
+
+      return fuzzyScores.map((score) => score.user)
+    },
+  },
+  methods: {
+    setFilter(evt) {
+      this.filter = evt.target.value
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.follow-list {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: auto;
+
+  > .title {
+    color: $text-color-soft;
+    font-size: $font-size-base;
+  }
+
+  .connections {
+    height: $size-height-connections;
+    padding: $space-none;
+    list-style-type: none;
+
+    &.--overflow {
+      overflow-y: auto;
+    }
+
+    > .connections__item {
+      padding: $space-xx-small;
+
+      &.is-selected,
+      &:hover {
+        background-color: $background-color-primary-inverse;
+      }
+    }
+  }
+
+  .nobody-message {
+    text-align: center;
+    color: $text-color-soft;
+  }
+
+  > :nth-child(n):not(:last-child) {
+    margin-bottom: $space-small;
+  }
+}
+</style>

From 9e544b0e64ed65959fb198ea6702327af2f9c3f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 08:35:52 +0200
Subject: [PATCH 05/23] Rename props and classes in 'ProfileList'

---
 .../features/ProfileList/FollowList.vue       |  6 ++---
 .../features/ProfileList/ProfileList.vue      | 24 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/webapp/components/features/ProfileList/FollowList.vue b/webapp/components/features/ProfileList/FollowList.vue
index 635eccd5b..366c01be5 100644
--- a/webapp/components/features/ProfileList/FollowList.vue
+++ b/webapp/components/features/ProfileList/FollowList.vue
@@ -3,10 +3,10 @@
     :uniqueName="`${type}Filter`"
     :title="$filters.truncate(userName, 15) + ' ' + $t(`profile.network.${type}`)"
     :titleNobody="$filters.truncate(userName, 15) + ' ' + $t(`profile.network.${type}Nobody`)"
-    :allConnectionsCount="allConnectionsCount"
-    :connections="connections"
+    :allProfilesCount="allConnectionsCount"
+    :profiles="connections"
     :loading="loading"
-    @fetchAllConnections="$emit('fetchAllConnections', type)"
+    @fetchAllProfiles="$emit('fetchAllConnections', type)"
   />
 </template>
 
diff --git a/webapp/components/features/ProfileList/ProfileList.vue b/webapp/components/features/ProfileList/ProfileList.vue
index c619da8fc..44de2eab5 100644
--- a/webapp/components/features/ProfileList/ProfileList.vue
+++ b/webapp/components/features/ProfileList/ProfileList.vue
@@ -1,6 +1,6 @@
 <template>
-  <base-card class="follow-list">
-    <template v-if="connections && connections.length">
+  <base-card class="profile-list">
+    <template v-if="profiles && profiles.length">
       <h5 class="title spacer-x-small">
         {{ title }}
       </h5>
@@ -18,11 +18,11 @@
         :loading="loading"
         class="spacer-x-small"
         size="small"
-        @click="$emit('fetchAllConnections')"
+        @click="$emit('fetchAllProfiles')"
       >
         {{
           $t('profile.network.andMore', {
-            number: allConnectionsCount - connections.length,
+            number: allProfilesCount - profiles.length,
           })
         }}
       </base-button>
@@ -53,8 +53,8 @@ export default {
     uniqueName: { type: String, required: true },
     title: { type: String, required: true },
     titleNobody: { type: String, required: true },
-    allConnectionsCount: { type: Number, required: true },
-    connections: { type: Array, required: true },
+    allProfilesCount: { type: Number, required: true },
+    profiles: { type: Array, required: true },
     type: { type: String, default: 'following' },
     loading: { type: Boolean, default: false },
   },
@@ -65,14 +65,14 @@ export default {
   },
   computed: {
     hasMore() {
-      return this.allConnectionsCount > this.connections.length
+      return this.allProfilesCount > this.profiles.length
     },
     connectionsClass() {
-      return `connections${this.hasMore ? '' : ' --overflow'}`
+      return `profiles${this.hasMore ? '' : ' --overflow'}`
     },
     filteredConnections() {
       if (!this.filter) {
-        return this.connections
+        return this.profiles
       }
 
       // @example
@@ -83,7 +83,7 @@ export default {
         'i',
       )
 
-      const fuzzyScores = this.connections
+      const fuzzyScores = this.profiles
         .map((user) => {
           const match = user.name.match(fuzzyExpression)
 
@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss">
-.follow-list {
+.profile-list {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -127,7 +127,7 @@ export default {
     font-size: $font-size-base;
   }
 
-  .connections {
+  .profiles {
     height: $size-height-connections;
     padding: $space-none;
     list-style-type: none;

From 8e1355e5eec103e12a5ecbcde276181d0adefcb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 09:42:03 +0200
Subject: [PATCH 06/23] Change 'titleNobody' in component 'ProfileList' to
 not(!) required

---
 webapp/components/features/ProfileList/ProfileList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/features/ProfileList/ProfileList.vue b/webapp/components/features/ProfileList/ProfileList.vue
index 44de2eab5..052fef041 100644
--- a/webapp/components/features/ProfileList/ProfileList.vue
+++ b/webapp/components/features/ProfileList/ProfileList.vue
@@ -36,7 +36,7 @@
         @input.native="setFilter"
       />
     </template>
-    <p v-else class="nobody-message">{{ titleNobody }}</p>
+    <p v-else-if="titleNobody" class="nobody-message">{{ titleNobody }}</p>
   </base-card>
 </template>
 
@@ -52,7 +52,7 @@ export default {
   props: {
     uniqueName: { type: String, required: true },
     title: { type: String, required: true },
-    titleNobody: { type: String, required: true },
+    titleNobody: { type: String, default: null },
     allProfilesCount: { type: Number, required: true },
     profiles: { type: Array, required: true },
     type: { type: String, default: 'following' },

From 621b1a0ba0b8b07297eb3a3c62c08cdf39138e40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 09:44:23 +0200
Subject: [PATCH 07/23] Implement members list on group profile

---
 webapp/locales/de.json           |  7 +++-
 webapp/locales/en.json           |  7 +++-
 webapp/locales/es.json           |  5 +++
 webapp/locales/fr.json           |  5 +++
 webapp/locales/it.json           |  5 +++
 webapp/locales/nl.json           |  5 +++
 webapp/locales/pl.json           |  5 +++
 webapp/locales/pt.json           |  5 +++
 webapp/locales/ru.json           |  5 +++
 webapp/pages/group/_id/_slug.vue | 68 ++++++++++++++++++++++----------
 10 files changed, 92 insertions(+), 25 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index a980b5a8e..78de34f5a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -370,6 +370,11 @@
     "follow": "Folgen",
     "following": "Folge Ich"
   },
+  "group": {
+    "foundation": "Gründung",
+    "goal": "Ziel:",
+    "membersListTitle": "Gruppenmitglieder"
+  },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
     "hashtag-search": "Suche nach #{hashtag}",
@@ -527,8 +532,6 @@
     "follow": "Folgen",
     "followers": "Folgen",
     "following": "Folge Ich",
-    "groupGoal": "Ziel:",
-    "groupSince": "Gründung",
     "invites": {
       "description": "Zur Einladung die E-Mail-Adresse hier eintragen.",
       "emailPlaceholder": "E-Mail-Adresse für die Einladung",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f964969b3..76cace251 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -370,6 +370,11 @@
     "follow": "Follow",
     "following": "Following"
   },
+  "group": {
+    "foundation": "Foundation",
+    "goal": "Goal:",
+    "membersListTitle": "Group Members"
+  },
   "hashtags-filter": {
     "clearSearch": "Clear search",
     "hashtag-search": "Searching for #{hashtag}",
@@ -527,8 +532,6 @@
     "follow": "Follow",
     "followers": "Followers",
     "following": "Following",
-    "groupGoal": "Goal:",
-    "groupSince": "Foundation",
     "invites": {
       "description": "Enter their e-mail address for invitation.",
       "emailPlaceholder": "E-mail to invite",
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 55d654231..1d4ec1593 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -297,6 +297,11 @@
     "follow": "Seguir",
     "following": "Siguiendo"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Borrar búsqueda",
     "hashtag-search": "Buscando a #{hashtag}",
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 8c5a731a3..640bea278 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -286,6 +286,11 @@
     "follow": "Suivre",
     "following": "Je suis les"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Réinitialiser la recherche",
     "hashtag-search": "Recherche de #{hashtag}",
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index 694dee532..cf47f5eb9 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -294,6 +294,11 @@
     "follow": null,
     "following": null
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": null,
     "hashtag-search": null,
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index fc2e90a34..da36b5046 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -82,6 +82,11 @@
     "follow": "Volgen",
     "following": "Volgt"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "login": {
     "email": "Uw E-mail",
     "hello": "Hallo",
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index 49405d0a9..ff6839719 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -166,6 +166,11 @@
     "follow": "naśladować",
     "following": "w skutek"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "title": "Twoja bańka filtrująca"
   },
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index f85e7b0e2..19c44f0a3 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -332,6 +332,11 @@
     "follow": "Seguir",
     "following": "Seguindo"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Limpar pesquisa",
     "hashtag-search": "Procurando por #{hashtag}",
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index de7b06326..9adc43298 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -311,6 +311,11 @@
     "follow": "Подписаться",
     "following": "Вы подписаны"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Очистить поиск",
     "hashtag-search": "Поиск по #{hashtag}",
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index ee895c0a8..8b0f78c89 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -42,7 +42,7 @@
               {{ user.location.name }}
             </ds-text> -->
             <ds-text align="center" color="soft" size="small">
-              {{ $t('profile.groupSince') }} {{ group.createdAt | date('MMMM yyyy') }}
+              {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
           <ds-flex>
@@ -84,7 +84,7 @@
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
               <ds-text color="soft" size="small" class="hyphenate-text">
-                {{ $t('profile.groupGoal') }} {{ group.about }}
+                {{ $t('group.goal') }} {{ group.about }}
               </ds-text>
             </ds-space>
           </template>
@@ -93,7 +93,16 @@
         <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
           {{ $t('profile.network.title') }}
         </ds-heading>
-        <!-- <follow-list
+        <profile-list
+          :uniqueName="`grouMembersFilter`"
+          :title="$t('group.membersListTitle')"
+          :allProfilesCount="groupMembers.length"
+          :profiles="groupMembers"
+          :loading="$apollo.loading"
+          @fetchAllProfiles="fetchAllMembers"
+        />
+        <!-- <ds-space />
+        <follow-list
           :loading="$apollo.loading"
           :user="user"
           type="followedBy"
@@ -178,7 +187,7 @@ 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 FollowList from '~/components/features/ProfileList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 // import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
@@ -187,12 +196,12 @@ 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 { groupQuery } from '~/graphql/groups'
-import { updateGroupMutation } from '~/graphql/groups.js'
+import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/groups'
 // 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'
+import ProfileList from '~/components/features/ProfileList/ProfileList'
 
 // const tabToFilterMapping = ({ tab, id }) => {
 //   return {
@@ -211,11 +220,12 @@ export default {
     // HcBadges,
     HcEmpty,
     ProfileAvatar,
+    ProfileList,
     // ContentMenu,
     AvatarUploader,
     MasonryGrid,
     MasonryGridItem,
-    // FollowList,
+    FollowList,
     // TabNavigation,
   },
   mixins: [postListActions],
@@ -227,28 +237,34 @@ export default {
     // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
       Group: [],
+      GroupMembers: [],
       posts: [],
-      hasMore: true,
-      offset: 0,
-      pageSize: 6,
-      tabActive: 'post',
+      // hasMore: true,
+      // offset: 0,
+      // pageSize: 6,
+      // tabActive: 'post',
       // filter,
-      followedByCountStartValue: 0,
-      followedByCount: 7,
-      followingCount: 7,
+      // followedByCountStartValue: 0,
+      // followedByCount: 7,
+      // followingCount: 7,
+      membersCount: Infinity,
       updateGroupMutation,
     }
   },
   computed: {
+    group() {
+      return this.Group ? this.Group[0] : {}
+    },
+    groupMembers() {
+      console.log('this.GroupMembers: ', this.GroupMembers)
+      return this.GroupMembers ? this.GroupMembers : []
+    },
     isGroupOwner() {
       return this.group.myRole === 'owner'
     },
     isGroupMember() {
       return this.group.myRole
     },
-    group() {
-      return this.Group ? this.Group[0] : {}
-    },
     groupName() {
       const { name } = this.group || {}
       return name || this.$t('profile.userAnonym')
@@ -384,10 +400,9 @@ export default {
     //   this.user.followedByCurrentUser = followedByCurrentUser
     //   this.user.followedBy = followedBy
     // },
-    // fetchAllConnections(type) {
-    //   if (type === 'following') this.followingCount = Infinity
-    //   if (type === 'followedBy') this.followedByCount = Infinity
-    // },
+    fetchAllMembers() {
+      this.membersCount = Infinity
+    },
   },
   apollo: {
     // profilePagePosts: {
@@ -421,6 +436,17 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    GroupMembers: {
+      query() {
+        return groupMembersQuery
+      },
+      variables() {
+        return {
+          id: this.$route.params.id,
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>

From c6b9cfac6766f75a5ef87cb060c0265dcf082cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 11:56:00 +0200
Subject: [PATCH 08/23] Implement group members count on group profile

- Rename 'Hc*' components to '*'.
---
 webapp/locales/de.json           |  1 +
 webapp/locales/en.json           |  1 +
 webapp/locales/es.json           |  1 +
 webapp/locales/fr.json           |  1 +
 webapp/locales/it.json           |  1 +
 webapp/locales/nl.json           |  1 +
 webapp/locales/pl.json           |  1 +
 webapp/locales/pt.json           |  1 +
 webapp/locales/ru.json           |  1 +
 webapp/pages/group/_id/_slug.vue | 72 +++++++++++++++++---------------
 10 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 78de34f5a..86602a7c1 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -373,6 +373,7 @@
   "group": {
     "foundation": "Gründung",
     "goal": "Ziel:",
+    "membersCount": "Mitglieder",
     "membersListTitle": "Gruppenmitglieder"
   },
   "hashtags-filter": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 76cace251..7e0def985 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -373,6 +373,7 @@
   "group": {
     "foundation": "Foundation",
     "goal": "Goal:",
+    "membersCount": "Members",
     "membersListTitle": "Group Members"
   },
   "hashtags-filter": {
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 1d4ec1593..791874729 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -300,6 +300,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "hashtags-filter": {
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 640bea278..66675942c 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -289,6 +289,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "hashtags-filter": {
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index cf47f5eb9..c9ff7870b 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -297,6 +297,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "hashtags-filter": {
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index da36b5046..02039e0db 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -85,6 +85,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "login": {
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index ff6839719..c371a8831 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -169,6 +169,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "hashtags-filter": {
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 19c44f0a3..fe419f053 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -335,6 +335,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "hashtags-filter": {
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index 9adc43298..bb0f34086 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -314,6 +314,7 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "membersCount": null,
     "membersListTitle": null
   },
   "hashtags-filter": {
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 8b0f78c89..7ecf2410d 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -47,23 +47,30 @@
           </ds-space>
           <ds-flex>
             <ds-flex-item>
-              <!-- <client-only>
+              <client-only>
+                <ds-number :label="$t('group.membersCount')">
+                  <count-to slot="count" :start-val="0" :end-val="groupMembers.length" />
+                </ds-number>
+              </client-only>
+            </ds-flex-item>
+            <!-- <ds-flex-item>
+              <client-only>
                 <ds-number :label="$t('profile.followers')">
-                  <hc-count-to
+                  <count-to
                     slot="count"
                     :start-val="followedByCountStartValue"
                     :end-val="user.followedByCount"
                   />
                 </ds-number>
-              </client-only> -->
-            </ds-flex-item>
-            <ds-flex-item>
-              <!-- <client-only>
+              </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" />
+                  <count-to slot="count" :end-val="user.followingCount" />
                 </ds-number>
-              </client-only> -->
-            </ds-flex-item>
+              </client-only>
+            </ds-flex-item> -->
           </ds-flex>
           <div v-if="!isGroupMember" class="action-buttons">
             <!-- <base-button v-if="user.isBlocked" @click="unblockUser(user)">
@@ -72,7 +79,7 @@
             <base-button v-if="user.isMuted" @click="unmuteUser(user)">
               {{ $t('settings.muted-users.unmute') }}
             </base-button>
-            <hc-follow-button
+            <follow-button
               v-if="!user.isMuted && !user.isBlocked"
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
@@ -168,7 +175,7 @@
           </template>
           <template v-else>
             <ds-grid-item column-span="fullWidth">
-              <hc-empty margin="xx-large" icon="file" />
+              <empty margin="xx-large" icon="file" />
             </ds-grid-item>
           </template>
         </masonry-grid>
@@ -182,26 +189,25 @@
 
 <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/ProfileList/FollowList'
-import HcEmpty from '~/components/Empty/Empty'
-// import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import AvatarUploader from '~/components/Uploader/AvatarUploader'
-import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
-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 { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/groups'
 // 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'
+import postListActions from '~/mixins/postListActions'
+import AvatarUploader from '~/components/Uploader/AvatarUploader'
+// import ContentMenu from '~/components/ContentMenu/ContentMenu'
+import CountTo from '~/components/CountTo.vue'
+import Empty from '~/components/Empty/Empty'
+// import FollowButton from '~/components/FollowButton.vue'
+// import FollowList from '~/components/features/ProfileList/FollowList'
+import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import ProfileList from '~/components/features/ProfileList/ProfileList'
+// import SocialMedia from '~/components/SocialMedia/SocialMedia'
+// import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 
 // const tabToFilterMapping = ({ tab, id }) => {
 //   return {
@@ -213,19 +219,18 @@ import ProfileList from '~/components/features/ProfileList/ProfileList'
 
 export default {
   components: {
-    // SocialMedia,
+    AvatarUploader,
+    // ContentMenu,
+    CountTo,
+    Empty,
+    // FollowButton,
+    // FollowList,
     PostTeaser,
-    // HcFollowButton,
-    // HcCountTo,
-    // HcBadges,
-    HcEmpty,
     ProfileAvatar,
     ProfileList,
-    // ContentMenu,
-    AvatarUploader,
     MasonryGrid,
     MasonryGridItem,
-    FollowList,
+    // SocialMedia,
     // TabNavigation,
   },
   mixins: [postListActions],
@@ -256,7 +261,6 @@ export default {
       return this.Group ? this.Group[0] : {}
     },
     groupMembers() {
-      console.log('this.GroupMembers: ', this.GroupMembers)
       return this.GroupMembers ? this.GroupMembers : []
     },
     isGroupOwner() {

From 6f1c718d39196e010c1ca92d1c42d460f909ef7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 13:20:36 +0200
Subject: [PATCH 09/23] Fix 'uniqueName' at group members list on group profile

---
 webapp/pages/group/_id/_slug.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 7ecf2410d..c655e295b 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -101,7 +101,7 @@
           {{ $t('profile.network.title') }}
         </ds-heading>
         <profile-list
-          :uniqueName="`grouMembersFilter`"
+          :uniqueName="`groupMembersFilter`"
           :title="$t('group.membersListTitle')"
           :allProfilesCount="groupMembers.length"
           :profiles="groupMembers"

From aac951e7a7bdf0be187a2d362ff88d3ebc96a9ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 13:22:30 +0200
Subject: [PATCH 10/23] Refine profile and follow list

---
 .../features/ProfileList/FollowList.vue       |  4 ++-
 .../features/ProfileList/ProfileList.vue      | 33 +++++++++++--------
 webapp/pages/group/_id/_slug.vue              |  1 +
 webapp/pages/profile/_id/_slug.vue            |  7 ++--
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/webapp/components/features/ProfileList/FollowList.vue b/webapp/components/features/ProfileList/FollowList.vue
index 366c01be5..7e626308b 100644
--- a/webapp/components/features/ProfileList/FollowList.vue
+++ b/webapp/components/features/ProfileList/FollowList.vue
@@ -11,7 +11,9 @@
 </template>
 
 <script>
-import ProfileList from '~/components/features/ProfileList/ProfileList'
+import ProfileList, { profileListVisibleCount } from '~/components/features/ProfileList/ProfileList'
+
+export const followListVisibleCount = profileListVisibleCount
 
 export default {
   name: 'FollowerList',
diff --git a/webapp/components/features/ProfileList/ProfileList.vue b/webapp/components/features/ProfileList/ProfileList.vue
index 052fef041..29fdb2872 100644
--- a/webapp/components/features/ProfileList/ProfileList.vue
+++ b/webapp/components/features/ProfileList/ProfileList.vue
@@ -1,10 +1,10 @@
 <template>
   <base-card class="profile-list">
-    <template v-if="profiles && profiles.length">
+    <template v-if="profiles.length">
       <h5 class="title spacer-x-small">
         {{ title }}
       </h5>
-      <ul :class="connectionsClass">
+      <ul :class="profilesClass">
         <li
           v-for="connection in filteredConnections"
           :key="connection.id"
@@ -13,6 +13,15 @@
           <user-teaser :user="connection" />
         </li>
       </ul>
+      <ds-input
+        v-if="isMoreAsVisible"
+        :name="uniqueName"
+        :placeholder="filter"
+        class="spacer-x-small"
+        icon="filter"
+        size="small"
+        @input.native="setFilter"
+      />
       <base-button
         v-if="hasMore"
         :loading="loading"
@@ -26,15 +35,6 @@
           })
         }}
       </base-button>
-      <ds-input
-        v-if="!hasMore"
-        :name="uniqueName"
-        :placeholder="filter"
-        class="spacer-x-small"
-        icon="filter"
-        size="small"
-        @input.native="setFilter"
-      />
     </template>
     <p v-else-if="titleNobody" class="nobody-message">{{ titleNobody }}</p>
   </base-card>
@@ -44,6 +44,8 @@
 import { escape } from 'xregexp/xregexp-all.js'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
+export const profileListVisibleCount = 7
+
 export default {
   name: 'ProfileList',
   components: {
@@ -55,11 +57,11 @@ export default {
     titleNobody: { type: String, default: null },
     allProfilesCount: { type: Number, required: true },
     profiles: { type: Array, required: true },
-    type: { type: String, default: 'following' },
     loading: { type: Boolean, default: false },
   },
   data() {
     return {
+      profileListVisibleCount,
       filter: null,
     }
   },
@@ -67,8 +69,11 @@ export default {
     hasMore() {
       return this.allProfilesCount > this.profiles.length
     },
-    connectionsClass() {
-      return `profiles${this.hasMore ? '' : ' --overflow'}`
+    isMoreAsVisible() {
+      return this.profiles.length > this.profileListVisibleCount
+    },
+    profilesClass() {
+      return `profiles${this.isMoreAsVisible ? ' --overflow' : ''}`
     },
     filteredConnections() {
       if (!this.filter) {
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index c655e295b..2011e0a8c 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -100,6 +100,7 @@
         <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
           {{ $t('profile.network.title') }}
         </ds-heading>
+        <!-- Group members list -->
         <profile-list
           :uniqueName="`groupMembersFilter`"
           :title="$t('group.membersListTitle')"
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index c4945db45..7b091c297 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -175,7 +175,8 @@ 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/ProfileList/FollowList'
+import FollowList, { followListVisibleCount } from '~/components/features/ProfileList/FollowList'
+
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
@@ -231,8 +232,8 @@ export default {
       tabActive: 'post',
       filter,
       followedByCountStartValue: 0,
-      followedByCount: 7,
-      followingCount: 7,
+      followedByCount: followListVisibleCount,
+      followingCount: followListVisibleCount,
       updateUserMutation: updateUserMutation(),
     }
   },

From 330bdd4df5a71c490fb600d5e142597df979c875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 20:00:48 +0200
Subject: [PATCH 11/23] Implement join/leave button on group profile

---
 .../{ => Button}/FollowButton.spec.js         |  0
 .../components/{ => Button}/FollowButton.vue  |  1 -
 webapp/components/Button/JoinLeaveButton.vue  | 91 +++++++++++++++++++
 webapp/locales/de.json                        |  4 +
 webapp/locales/en.json                        |  4 +
 webapp/locales/es.json                        |  4 +
 webapp/locales/fr.json                        |  4 +
 webapp/locales/it.json                        |  4 +
 webapp/locales/nl.json                        |  4 +
 webapp/locales/pl.json                        |  4 +
 webapp/locales/pt.json                        |  4 +
 webapp/locales/ru.json                        |  4 +
 webapp/pages/group/_id/_slug.vue              | 59 ++++++++++--
 webapp/pages/profile/_id/_slug.vue            |  2 +-
 14 files changed, 179 insertions(+), 10 deletions(-)
 rename webapp/components/{ => Button}/FollowButton.spec.js (100%)
 rename webapp/components/{ => Button}/FollowButton.vue (99%)
 create mode 100644 webapp/components/Button/JoinLeaveButton.vue

diff --git a/webapp/components/FollowButton.spec.js b/webapp/components/Button/FollowButton.spec.js
similarity index 100%
rename from webapp/components/FollowButton.spec.js
rename to webapp/components/Button/FollowButton.spec.js
diff --git a/webapp/components/FollowButton.vue b/webapp/components/Button/FollowButton.vue
similarity index 99%
rename from webapp/components/FollowButton.vue
rename to webapp/components/Button/FollowButton.vue
index 126a3891d..a0807ed6c 100644
--- a/webapp/components/FollowButton.vue
+++ b/webapp/components/Button/FollowButton.vue
@@ -19,7 +19,6 @@ import { followUserMutation, unfollowUserMutation } from '~/graphql/User'
 
 export default {
   name: 'HcFollowButton',
-
   props: {
     followId: { type: String, default: null },
     isFollowed: { type: Boolean, default: false },
diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
new file mode 100644
index 000000000..bb284dbef
--- /dev/null
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -0,0 +1,91 @@
+<template>
+  <base-button
+    class="track-button"
+    :disabled="disabled"
+    :loading="loading"
+    :icon="icon"
+    :filled="isMember && !hovered"
+    :danger="isMember && hovered"
+    @mouseenter.native="onHover"
+    @mouseleave.native="hovered = false"
+    @click.prevent="toggle"
+  >
+    {{ label }}
+  </base-button>
+</template>
+
+<script>
+import { joinGroupMutation } from '~/graphql/groups'
+
+export default {
+  name: 'JoinLeaveButton',
+  props: {
+    groupId: { type: String, required: true },
+    userId: { type: String, required: true },
+    isMember: { type: Boolean, required: true },
+  },
+  data() {
+    return {
+      disabled: false,
+      loading: false,
+      hovered: false,
+    }
+  },
+  computed: {
+    icon() {
+      if (this.isMember && this.hovered) {
+        return 'close'
+      } else {
+        return this.isMember ? 'check' : 'plus'
+      }
+    },
+    label() {
+      if (this.isMember) {
+        return this.$t('group.joinLeaveButton.iAmMember')
+      } else {
+        return this.$t('group.joinLeaveButton.join')
+      }
+    },
+  },
+  watch: {
+    isMember() {
+      this.loading = false
+      this.hovered = false
+    },
+  },
+  methods: {
+    onHover() {
+      if (!this.disabled && !this.loading) {
+        this.hovered = true
+      }
+    },
+    async toggle() {
+      const join = !this.isMember
+      const mutation = join ? joinGroupMutation : null // Wolle: implement "leaveGroupMutation"
+
+      this.hovered = false
+      const optimisticResult = { joinedByCurrentUser: join }
+      this.$emit('optimistic', optimisticResult)
+
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation,
+          variables: { groupId: this.groupId, userId: this.userId },
+        })
+        const joinedGroup = join ? data.JoinGroup : { myRoleInGroup: null } // Wolle: implement "leaveGroupMutation"
+        this.$emit('update', joinedGroup)
+      } catch (error) {
+        optimisticResult.joinedByCurrentUser = !join
+        this.$emit('optimistic', optimisticResult)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.track-button {
+  display: block;
+  width: 100%;
+}
+</style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 86602a7c1..1fc4e3fa7 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -373,6 +373,10 @@
   "group": {
     "foundation": "Gründung",
     "goal": "Ziel:",
+    "joinLeaveButton": {
+      "iAmMember": "Bin Mitglied",
+      "join": "Beitreten"
+    },
     "membersCount": "Mitglieder",
     "membersListTitle": "Gruppenmitglieder"
   },
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7e0def985..b1a9356a9 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -373,6 +373,10 @@
   "group": {
     "foundation": "Foundation",
     "goal": "Goal:",
+    "joinLeaveButton": {
+      "iAmMember": "I'm a member",
+      "join": "Join"
+    },
     "membersCount": "Members",
     "membersListTitle": "Group Members"
   },
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 791874729..63070ee4b 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -300,6 +300,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 66675942c..91b91abe9 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -289,6 +289,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index c9ff7870b..342550a14 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -297,6 +297,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index 02039e0db..c7e474a3a 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -85,6 +85,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index c371a8831..840698487 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -169,6 +169,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index fe419f053..bec922edb 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -335,6 +335,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index bb0f34086..f50121635 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -314,6 +314,10 @@
   "group": {
     "foundation": null,
     "goal": null,
+    "joinLeaveButton": {
+      "iAmMember": null,
+      "join": null
+    },
     "membersCount": null,
     "membersListTitle": null
   },
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 2011e0a8c..f21a71942 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -49,7 +49,11 @@
             <ds-flex-item>
               <client-only>
                 <ds-number :label="$t('group.membersCount')">
-                  <count-to slot="count" :start-val="0" :end-val="groupMembers.length" />
+                  <count-to
+                    slot="count"
+                    :start-val="membersCountStartValue"
+                    :end-val="groupMembers.length"
+                  />
                 </ds-number>
               </client-only>
             </ds-flex-item>
@@ -72,7 +76,7 @@
               </client-only>
             </ds-flex-item> -->
           </ds-flex>
-          <div v-if="!isGroupMember" class="action-buttons">
+          <div class="action-buttons">
             <!-- <base-button v-if="user.isBlocked" @click="unblockUser(user)">
               {{ $t('settings.blocked-users.unblock') }}
             </base-button>
@@ -86,6 +90,15 @@
               @optimistic="optimisticFollow"
               @update="updateFollow"
             /> -->
+            <join-leave-button
+              :groupId="group ? group.id : ''"
+              :userId="currentUser.id"
+              :isMember="isGroupMember"
+              @optimistic="optimisticJoinLeave"
+              @update="updateJoinLeave"
+            />
+            <!-- implement:
+              v-if="!user.isMuted && !user.isBlocked" -->
           </div>
           <template v-if="group.about">
             <hr />
@@ -200,8 +213,9 @@ import AvatarUploader from '~/components/Uploader/AvatarUploader'
 // import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import CountTo from '~/components/CountTo.vue'
 import Empty from '~/components/Empty/Empty'
-// import FollowButton from '~/components/FollowButton.vue'
+// import FollowButton from '~/components/Button/FollowButton'
 // import FollowList from '~/components/features/ProfileList/FollowList'
+import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
@@ -226,6 +240,7 @@ export default {
     Empty,
     // FollowButton,
     // FollowList,
+    JoinLeaveButton,
     PostTeaser,
     ProfileAvatar,
     ProfileList,
@@ -253,22 +268,26 @@ export default {
       // followedByCountStartValue: 0,
       // followedByCount: 7,
       // followingCount: 7,
-      membersCount: Infinity,
+      membersCountStartValue: 0,
+      membersCountToLoad: Infinity,
       updateGroupMutation,
     }
   },
   computed: {
+    currentUser() {
+      return this.$store.getters['auth/user']
+    },
     group() {
-      return this.Group ? this.Group[0] : {}
+      return this.Group[0] ? this.Group[0] : {}
     },
     groupMembers() {
       return this.GroupMembers ? this.GroupMembers : []
     },
     isGroupOwner() {
-      return this.group.myRole === 'owner'
+      return this.group ? this.group.myRole === 'owner' : false
     },
     isGroupMember() {
-      return this.group.myRole
+      return this.group ? !!this.group.myRole : false
     },
     groupName() {
       const { name } = this.group || {}
@@ -405,8 +424,32 @@ export default {
     //   this.user.followedByCurrentUser = followedByCurrentUser
     //   this.user.followedBy = followedBy
     // },
+    optimisticJoinLeave({ joinedByCurrentUser }) {
+      /*
+       * Note: "membersCountStartValue" is updated to avoid counting from 0 when join/leave
+       */
+      this.membersCountStartValue = this.GroupMembers.length
+      if (joinedByCurrentUser) {
+        // this.membersCountToLoad++
+        this.GroupMembers = [this.currentUser, ...this.GroupMembers]
+      } else {
+        // this.membersCountToLoad--
+        this.GroupMembers = this.GroupMembers.filter((user) => user.id !== this.currentUser.id)
+      }
+    },
+    updateJoinLeave({ myRoleInGroup }) {
+      this.Group = [{ ...this.Group[0], myRole: myRoleInGroup }] // if we assign it directly "this.group" will not be updated
+      const currentUserInGroupMembers = this.GroupMembers.find(
+        (user) => user.id === this.currentUser.id,
+      )
+      if (currentUserInGroupMembers) {
+        currentUserInGroupMembers.myRoleInGroup = myRoleInGroup
+      } else {
+        this.$apollo.queries.GroupMembers.refetch()
+      }
+    },
     fetchAllMembers() {
-      this.membersCount = Infinity
+      this.membersCountToLoad = Infinity
     },
   },
   apollo: {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 7b091c297..0b3212a0b 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -172,7 +172,7 @@
 import uniqBy from 'lodash/uniqBy'
 import postListActions from '~/mixins/postListActions'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
-import HcFollowButton from '~/components/FollowButton.vue'
+import HcFollowButton from '~/components/Button/FollowButton'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import FollowList, { followListVisibleCount } from '~/components/features/ProfileList/FollowList'

From 4e845284fcfda7c44a45b1282fe167edb969916b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 12 Sep 2022 20:08:04 +0200
Subject: [PATCH 12/23] Fix error that the prop 'groupId' in 'JoinLeaveButton'
 is undefined at the beginning

---
 webapp/pages/group/_id/_slug.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index f21a71942..88c7d76b4 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -91,7 +91,7 @@
               @update="updateFollow"
             /> -->
             <join-leave-button
-              :groupId="group ? group.id : ''"
+              :groupId="group && group.id ? group.id : ''"
               :userId="currentUser.id"
               :isMember="isGroupMember"
               @optimistic="optimisticJoinLeave"

From 13e7b1fb9c01e82310cf318e75a6956352058a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 06:03:50 +0200
Subject: [PATCH 13/23] Simplify assignment to 'Group[0]' after refining things

---
 webapp/pages/group/_id/_slug.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 88c7d76b4..7d978293b 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -438,7 +438,7 @@ export default {
       }
     },
     updateJoinLeave({ myRoleInGroup }) {
-      this.Group = [{ ...this.Group[0], myRole: myRoleInGroup }] // if we assign it directly "this.group" will not be updated
+      this.Group[0].myRole = myRoleInGroup
       const currentUserInGroupMembers = this.GroupMembers.find(
         (user) => user.id === this.currentUser.id,
       )

From 6a9c0407226ef116cd26dea98ac9489affadc6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 20:23:34 +0200
Subject: [PATCH 14/23] Implement 'LeaveGroup' resolver

---
 backend/src/db/graphql/groups.js              | 11 +++++++
 .../src/middleware/permissionsMiddleware.js   | 31 +++++++++++++++++++
 backend/src/schema/resolvers/groups.js        | 21 +++++++++++++
 backend/src/schema/types/type/Group.gql       |  5 +++
 webapp/graphql/groups.js                      | 11 +++++++
 5 files changed, 79 insertions(+)

diff --git a/backend/src/db/graphql/groups.js b/backend/src/db/graphql/groups.js
index 640a70009..4350e19c9 100644
--- a/backend/src/db/graphql/groups.js
+++ b/backend/src/db/graphql/groups.js
@@ -106,6 +106,17 @@ export const joinGroupMutation = gql`
   }
 `
 
+export const leaveGroupMutation = gql`
+  mutation ($groupId: ID!, $userId: ID!) {
+    LeaveGroup(groupId: $groupId, userId: $userId) {
+      id
+      name
+      slug
+      myRoleInGroup
+    }
+  }
+`
+
 export const changeGroupMemberRoleMutation = gql`
   mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
     ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {
diff --git a/backend/src/middleware/permissionsMiddleware.js b/backend/src/middleware/permissionsMiddleware.js
index e588e1b62..8f3d6947a 100644
--- a/backend/src/middleware/permissionsMiddleware.js
+++ b/backend/src/middleware/permissionsMiddleware.js
@@ -191,6 +191,36 @@ const isAllowedToJoinGroup = rule({
   }
 })
 
+const isAllowedToLeaveGroup = rule({
+  cache: 'no_cache',
+})(async (_parent, args, { user, driver }) => {
+  if (!(user && user.id)) return false
+  const { groupId, userId } = args
+  if (user.id !== userId) return false
+  const session = driver.session()
+  const readTxPromise = session.readTransaction(async (transaction) => {
+    const transactionResponse = await transaction.run(
+      `
+        MATCH (member:User {id: $userId})-[membership:MEMBER_OF]->(group:Group {id: $groupId})
+        RETURN group {.*}, member {.*, myRoleInGroup: membership.role}
+      `,
+      { groupId, userId },
+    )
+    return {
+      group: transactionResponse.records.map((record) => record.get('group'))[0],
+      member: transactionResponse.records.map((record) => record.get('member'))[0],
+    }
+  })
+  try {
+    const { group, member } = await readTxPromise
+    return !!group && !!member && !!member.myRoleInGroup && member.myRoleInGroup !== 'owner'
+  } catch (error) {
+    throw new Error(error)
+  } finally {
+    session.close()
+  }
+})
+
 const isAuthor = rule({
   cache: 'no_cache',
 })(async (_parent, args, { user, driver }) => {
@@ -284,6 +314,7 @@ export default shield(
       CreateGroup: isAuthenticated,
       UpdateGroup: isAllowedToChangeGroupSettings,
       JoinGroup: isAllowedToJoinGroup,
+      LeaveGroup: isAllowedToLeaveGroup,
       ChangeGroupMemberRole: isAllowedToChangeGroupMemberRole,
       CreatePost: isAuthenticated,
       UpdatePost: isAuthor,
diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
index 73ce56c0c..6e942d60a 100644
--- a/backend/src/schema/resolvers/groups.js
+++ b/backend/src/schema/resolvers/groups.js
@@ -251,6 +251,27 @@ export default {
         session.close()
       }
     },
+    LeaveGroup: async (_parent, params, context, _resolveInfo) => {
+      const { groupId, userId } = params
+      const session = context.driver.session()
+      const writeTxResultPromise = session.writeTransaction(async (transaction) => {
+        const leaveGroupCypher = `
+          MATCH (member:User {id: $userId})-[membership:MEMBER_OF]->(group:Group {id: $groupId})
+          DELETE membership
+          RETURN member {.*, myRoleInGroup: NULL}
+        `
+        const transactionResponse = await transaction.run(leaveGroupCypher, { groupId, userId })
+        const [member] = await transactionResponse.records.map((record) => record.get('member'))
+        return member
+      })
+      try {
+        return await writeTxResultPromise
+      } catch (error) {
+        throw new Error(error)
+      } finally {
+        session.close()
+      }
+    },
     ChangeGroupMemberRole: async (_parent, params, context, _resolveInfo) => {
       const { groupId, userId, roleInGroup } = params
       const session = context.driver.session()
diff --git a/backend/src/schema/types/type/Group.gql b/backend/src/schema/types/type/Group.gql
index 8c881ef1d..d586f6b53 100644
--- a/backend/src/schema/types/type/Group.gql
+++ b/backend/src/schema/types/type/Group.gql
@@ -117,6 +117,11 @@ type Mutation {
     userId: ID!
   ): User
 
+  LeaveGroup(
+    groupId: ID!
+    userId: ID!
+  ): User
+
   ChangeGroupMemberRole(
     groupId: ID!
     userId: ID!
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index 640a70009..4350e19c9 100644
--- a/webapp/graphql/groups.js
+++ b/webapp/graphql/groups.js
@@ -106,6 +106,17 @@ export const joinGroupMutation = gql`
   }
 `
 
+export const leaveGroupMutation = gql`
+  mutation ($groupId: ID!, $userId: ID!) {
+    LeaveGroup(groupId: $groupId, userId: $userId) {
+      id
+      name
+      slug
+      myRoleInGroup
+    }
+  }
+`
+
 export const changeGroupMemberRoleMutation = gql`
   mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
     ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {

From 6fec36470c3368efecb1ec385095f728a4b732a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 20:23:48 +0200
Subject: [PATCH 15/23] Test 'LeaveGroup' resolver

---
 backend/src/schema/resolvers/groups.spec.js | 561 ++++++++++++++------
 1 file changed, 406 insertions(+), 155 deletions(-)

diff --git a/backend/src/schema/resolvers/groups.spec.js b/backend/src/schema/resolvers/groups.spec.js
index 03b49e64a..c2725c867 100644
--- a/backend/src/schema/resolvers/groups.spec.js
+++ b/backend/src/schema/resolvers/groups.spec.js
@@ -4,6 +4,7 @@ import {
   createGroupMutation,
   updateGroupMutation,
   joinGroupMutation,
+  leaveGroupMutation,
   changeGroupMemberRoleMutation,
   groupMembersQuery,
   groupQuery,
@@ -17,6 +18,12 @@ const neode = getNeode()
 
 let authenticatedUser
 let user
+let noMemberUser
+let pendingMemberUser
+let usualMemberUser
+let adminMemberUser
+let ownerMemberUser
+let secondOwnerMemberUser
 
 const categoryIds = ['cat9', 'cat4', 'cat15']
 const descriptionAdditional100 =
@@ -76,6 +83,169 @@ const seedBasicsAndClearAuthentication = async () => {
   authenticatedUser = null
 }
 
+const seedComplexScenarioAndClearAuthentication = async () => {
+  await seedBasicsAndClearAuthentication()
+  // create users
+  noMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'none-member-user',
+      name: 'None Member TestUser',
+    },
+    {
+      email: 'none-member-user@example.org',
+      password: '1234',
+    },
+  )
+  pendingMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'pending-member-user',
+      name: 'Pending Member TestUser',
+    },
+    {
+      email: 'pending-member-user@example.org',
+      password: '1234',
+    },
+  )
+  usualMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'usual-member-user',
+      name: 'Usual Member TestUser',
+    },
+    {
+      email: 'usual-member-user@example.org',
+      password: '1234',
+    },
+  )
+  adminMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'admin-member-user',
+      name: 'Admin Member TestUser',
+    },
+    {
+      email: 'admin-member-user@example.org',
+      password: '1234',
+    },
+  )
+  ownerMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'owner-member-user',
+      name: 'Owner Member TestUser',
+    },
+    {
+      email: 'owner-member-user@example.org',
+      password: '1234',
+    },
+  )
+  secondOwnerMemberUser = await Factory.build(
+    'user',
+    {
+      id: 'second-owner-member-user',
+      name: 'Second Owner Member TestUser',
+    },
+    {
+      email: 'second-owner-member-user@example.org',
+      password: '1234',
+    },
+  )
+  // create groups
+  // public-group
+  authenticatedUser = await usualMemberUser.toJson()
+  await mutate({
+    mutation: createGroupMutation,
+    variables: {
+      id: 'public-group',
+      name: 'The Best Group',
+      about: 'We will change the world!',
+      description: 'Some description' + descriptionAdditional100,
+      groupType: 'public',
+      actionRadius: 'regional',
+      categoryIds,
+    },
+  })
+  await mutate({
+    mutation: joinGroupMutation,
+    variables: {
+      groupId: 'public-group',
+      userId: 'owner-of-closed-group',
+    },
+  })
+  await mutate({
+    mutation: joinGroupMutation,
+    variables: {
+      groupId: 'public-group',
+      userId: 'owner-of-hidden-group',
+    },
+  })
+  // closed-group
+  authenticatedUser = await ownerMemberUser.toJson()
+  await mutate({
+    mutation: createGroupMutation,
+    variables: {
+      id: 'closed-group',
+      name: 'Uninteresting Group',
+      about: 'We will change nothing!',
+      description: 'We love it like it is!?' + descriptionAdditional100,
+      groupType: 'closed',
+      actionRadius: 'national',
+      categoryIds,
+    },
+  })
+  // hidden-group
+  authenticatedUser = await adminMemberUser.toJson()
+  await mutate({
+    mutation: createGroupMutation,
+    variables: {
+      id: 'hidden-group',
+      name: 'Investigative Journalism Group',
+      about: 'We will change all.',
+      description: 'We research …' + descriptionAdditional100,
+      groupType: 'hidden',
+      actionRadius: 'global',
+      categoryIds,
+    },
+  })
+  // 'JoinGroup' mutation does not work in hidden groups so we join them by 'ChangeGroupMemberRole' through the owner
+  await mutate({
+    mutation: changeGroupMemberRoleMutation,
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'admin-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+  await mutate({
+    mutation: changeGroupMemberRoleMutation,
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'second-owner-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+  await mutate({
+    mutation: changeGroupMemberRoleMutation,
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'admin-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+  await mutate({
+    mutation: changeGroupMemberRoleMutation,
+    variables: {
+      groupId: 'hidden-group',
+      userId: 'second-owner-member-user',
+      roleInGroup: 'usual',
+    },
+  })
+
+  authenticatedUser = null
+}
+
 beforeAll(async () => {
   await cleanDatabase()
 })
@@ -1371,162 +1541,8 @@ describe('in mode', () => {
     })
 
     describe('ChangeGroupMemberRole', () => {
-      let pendingMemberUser
-      let usualMemberUser
-      let adminMemberUser
-      let ownerMemberUser
-      let secondOwnerMemberUser
-
       beforeAll(async () => {
-        await seedBasicsAndClearAuthentication()
-        // create users
-        pendingMemberUser = await Factory.build(
-          'user',
-          {
-            id: 'pending-member-user',
-            name: 'Pending Member TestUser',
-          },
-          {
-            email: 'pending-member-user@example.org',
-            password: '1234',
-          },
-        )
-        usualMemberUser = await Factory.build(
-          'user',
-          {
-            id: 'usual-member-user',
-            name: 'Usual Member TestUser',
-          },
-          {
-            email: 'usual-member-user@example.org',
-            password: '1234',
-          },
-        )
-        adminMemberUser = await Factory.build(
-          'user',
-          {
-            id: 'admin-member-user',
-            name: 'Admin Member TestUser',
-          },
-          {
-            email: 'admin-member-user@example.org',
-            password: '1234',
-          },
-        )
-        ownerMemberUser = await Factory.build(
-          'user',
-          {
-            id: 'owner-member-user',
-            name: 'Owner Member TestUser',
-          },
-          {
-            email: 'owner-member-user@example.org',
-            password: '1234',
-          },
-        )
-        secondOwnerMemberUser = await Factory.build(
-          'user',
-          {
-            id: 'second-owner-member-user',
-            name: 'Second Owner Member TestUser',
-          },
-          {
-            email: 'second-owner-member-user@example.org',
-            password: '1234',
-          },
-        )
-        // create groups
-        // public-group
-        authenticatedUser = await usualMemberUser.toJson()
-        await mutate({
-          mutation: createGroupMutation,
-          variables: {
-            id: 'public-group',
-            name: 'The Best Group',
-            about: 'We will change the world!',
-            description: 'Some description' + descriptionAdditional100,
-            groupType: 'public',
-            actionRadius: 'regional',
-            categoryIds,
-          },
-        })
-        await mutate({
-          mutation: joinGroupMutation,
-          variables: {
-            groupId: 'public-group',
-            userId: 'owner-of-closed-group',
-          },
-        })
-        await mutate({
-          mutation: joinGroupMutation,
-          variables: {
-            groupId: 'public-group',
-            userId: 'owner-of-hidden-group',
-          },
-        })
-        // closed-group
-        authenticatedUser = await ownerMemberUser.toJson()
-        await mutate({
-          mutation: createGroupMutation,
-          variables: {
-            id: 'closed-group',
-            name: 'Uninteresting Group',
-            about: 'We will change nothing!',
-            description: 'We love it like it is!?' + descriptionAdditional100,
-            groupType: 'closed',
-            actionRadius: 'national',
-            categoryIds,
-          },
-        })
-        // hidden-group
-        authenticatedUser = await adminMemberUser.toJson()
-        await mutate({
-          mutation: createGroupMutation,
-          variables: {
-            id: 'hidden-group',
-            name: 'Investigative Journalism Group',
-            about: 'We will change all.',
-            description: 'We research …' + descriptionAdditional100,
-            groupType: 'hidden',
-            actionRadius: 'global',
-            categoryIds,
-          },
-        })
-        // 'JoinGroup' mutation does not work in hidden groups so we join them by 'ChangeGroupMemberRole' through the owner
-        await mutate({
-          mutation: changeGroupMemberRoleMutation,
-          variables: {
-            groupId: 'hidden-group',
-            userId: 'admin-member-user',
-            roleInGroup: 'usual',
-          },
-        })
-        await mutate({
-          mutation: changeGroupMemberRoleMutation,
-          variables: {
-            groupId: 'hidden-group',
-            userId: 'second-owner-member-user',
-            roleInGroup: 'usual',
-          },
-        })
-        await mutate({
-          mutation: changeGroupMemberRoleMutation,
-          variables: {
-            groupId: 'hidden-group',
-            userId: 'admin-member-user',
-            roleInGroup: 'usual',
-          },
-        })
-        await mutate({
-          mutation: changeGroupMemberRoleMutation,
-          variables: {
-            groupId: 'hidden-group',
-            userId: 'second-owner-member-user',
-            roleInGroup: 'usual',
-          },
-        })
-
-        authenticatedUser = null
+        await seedComplexScenarioAndClearAuthentication()
       })
 
       afterAll(async () => {
@@ -2330,6 +2346,241 @@ describe('in mode', () => {
       })
     })
 
+    describe('LeaveGroup', () => {
+      beforeAll(async () => {
+        await seedComplexScenarioAndClearAuthentication()
+        // closed-group
+        authenticatedUser = await ownerMemberUser.toJson()
+        await mutate({
+          mutation: changeGroupMemberRoleMutation,
+          variables: {
+            groupId: 'closed-group',
+            userId: 'pending-member-user',
+            roleInGroup: 'pending',
+          },
+        })
+        await mutate({
+          mutation: changeGroupMemberRoleMutation,
+          variables: {
+            groupId: 'closed-group',
+            userId: 'usual-member-user',
+            roleInGroup: 'usual',
+          },
+        })
+        await mutate({
+          mutation: changeGroupMemberRoleMutation,
+          variables: {
+            groupId: 'closed-group',
+            userId: 'admin-member-user',
+            roleInGroup: 'admin',
+          },
+        })
+        await mutate({
+          mutation: changeGroupMemberRoleMutation,
+          variables: {
+            groupId: 'closed-group',
+            userId: 'second-owner-member-user',
+            roleInGroup: 'owner',
+          },
+        })
+
+        authenticatedUser = null
+      })
+
+      afterAll(async () => {
+        await cleanDatabase()
+      })
+
+      describe('unauthenticated', () => {
+        it('throws authorization error', async () => {
+          const { errors } = await mutate({
+            mutation: leaveGroupMutation,
+            variables: {
+              groupId: 'not-existing-group',
+              userId: 'current-user',
+            },
+          })
+          expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+        })
+      })
+
+      describe('authenticated', () => {
+        describe('in all group types', () => {
+          describe('here "closed-group" for example', () => {
+            const memberInGroup = async (userId, groupId) => {
+              const result = await query({
+                query: groupMembersQuery,
+                variables: {
+                  id: groupId,
+                },
+              })
+              return result.data && result.data.GroupMembers
+                ? !!result.data.GroupMembers.find((member) => member.id === userId)
+                : null
+            }
+
+            beforeEach(async () => {
+              authenticatedUser = null
+              variables = {
+                groupId: 'closed-group',
+              }
+            })
+
+            describe('left by "pending-member-user"', () => {
+              it('has "null" as membership role, was in the group, and left the group', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('pending-member-user', 'closed-group')).toBe(true)
+                authenticatedUser = await pendingMemberUser.toJson()
+                await expect(
+                  mutate({
+                    mutation: leaveGroupMutation,
+                    variables: {
+                      ...variables,
+                      userId: 'pending-member-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    LeaveGroup: {
+                      id: 'pending-member-user',
+                      myRoleInGroup: null,
+                    },
+                  },
+                  errors: undefined,
+                })
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('pending-member-user', 'closed-group')).toBe(false)
+              })
+            })
+
+            describe('left by "usual-member-user"', () => {
+              it('has "null" as membership role, was in the group, and left the group', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('usual-member-user', 'closed-group')).toBe(true)
+                authenticatedUser = await usualMemberUser.toJson()
+                await expect(
+                  mutate({
+                    mutation: leaveGroupMutation,
+                    variables: {
+                      ...variables,
+                      userId: 'usual-member-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    LeaveGroup: {
+                      id: 'usual-member-user',
+                      myRoleInGroup: null,
+                    },
+                  },
+                  errors: undefined,
+                })
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('usual-member-user', 'closed-group')).toBe(false)
+              })
+            })
+
+            describe('left by "admin-member-user"', () => {
+              it('has "null" as membership role, was in the group, and left the group', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('admin-member-user', 'closed-group')).toBe(true)
+                authenticatedUser = await adminMemberUser.toJson()
+                await expect(
+                  mutate({
+                    mutation: leaveGroupMutation,
+                    variables: {
+                      ...variables,
+                      userId: 'admin-member-user',
+                    },
+                  }),
+                ).resolves.toMatchObject({
+                  data: {
+                    LeaveGroup: {
+                      id: 'admin-member-user',
+                      myRoleInGroup: null,
+                    },
+                  },
+                  errors: undefined,
+                })
+                authenticatedUser = await ownerMemberUser.toJson()
+                expect(await memberInGroup('admin-member-user', 'closed-group')).toBe(false)
+              })
+            })
+
+            describe('left by "owner-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation,
+                  variables: {
+                    ...variables,
+                    userId: 'owner-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('left by "second-owner-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await secondOwnerMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation,
+                  variables: {
+                    ...variables,
+                    userId: 'second-owner-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('left by "none-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await noMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation,
+                  variables: {
+                    ...variables,
+                    userId: 'none-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('as "owner-member-user" try to leave member "usual-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await ownerMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation,
+                  variables: {
+                    ...variables,
+                    userId: 'usual-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+
+            describe('as "usual-member-user" try to leave member "admin-member-user"', () => {
+              it('throws authorization error', async () => {
+                authenticatedUser = await usualMemberUser.toJson()
+                const { errors } = await mutate({
+                  mutation: leaveGroupMutation,
+                  variables: {
+                    ...variables,
+                    userId: 'admin-member-user',
+                  },
+                })
+                expect(errors[0]).toHaveProperty('message', 'Not Authorized!')
+              })
+            })
+          })
+        })
+      })
+    })
+
     describe('UpdateGroup', () => {
       beforeAll(async () => {
         await seedBasicsAndClearAuthentication()

From 0cd3617f655b3d6b5c3c9eee71d1646b66ce9129 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 20:42:08 +0200
Subject: [PATCH 16/23] Implement working leave button on group profile

---
 webapp/components/Button/JoinLeaveButton.vue | 10 +++++-----
 webapp/pages/group/_id/_slug.vue             |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
index bb284dbef..e1d47a7b4 100644
--- a/webapp/components/Button/JoinLeaveButton.vue
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { joinGroupMutation } from '~/graphql/groups'
+import { joinGroupMutation, leaveGroupMutation } from '~/graphql/groups'
 
 export default {
   name: 'JoinLeaveButton',
@@ -23,11 +23,11 @@ export default {
     groupId: { type: String, required: true },
     userId: { type: String, required: true },
     isMember: { type: Boolean, required: true },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
   },
   data() {
     return {
-      disabled: false,
-      loading: false,
       hovered: false,
     }
   },
@@ -61,7 +61,7 @@ export default {
     },
     async toggle() {
       const join = !this.isMember
-      const mutation = join ? joinGroupMutation : null // Wolle: implement "leaveGroupMutation"
+      const mutation = join ? joinGroupMutation : leaveGroupMutation
 
       this.hovered = false
       const optimisticResult = { joinedByCurrentUser: join }
@@ -72,7 +72,7 @@ export default {
           mutation,
           variables: { groupId: this.groupId, userId: this.userId },
         })
-        const joinedGroup = join ? data.JoinGroup : { myRoleInGroup: null } // Wolle: implement "leaveGroupMutation"
+        const joinedGroup = join ? data.JoinGroup : data.LeaveGroup
         this.$emit('update', joinedGroup)
       } catch (error) {
         optimisticResult.joinedByCurrentUser = !join
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 7d978293b..661e584f2 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -94,6 +94,8 @@
               :groupId="group && group.id ? group.id : ''"
               :userId="currentUser.id"
               :isMember="isGroupMember"
+              :disabled="isGroupOwner"
+              :loading="$apollo.loading"
               @optimistic="optimisticJoinLeave"
               @update="updateJoinLeave"
             />

From e04bfe74849243172d5c2fd77500485442c1fb31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 22:06:16 +0200
Subject: [PATCH 17/23] Implement displaying of 'myRole', 'groupType', and
 'actionRadius' on group profile

---
 webapp/locales/de.json           | 25 +++++++++++++++++--
 webapp/locales/en.json           | 25 +++++++++++++++++--
 webapp/pages/group/_id/_slug.vue | 43 ++++++++++++++++++++++++++++++--
 3 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1fc4e3fa7..035586934 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -371,14 +371,35 @@
     "following": "Folge Ich"
   },
   "group": {
+    "actionRadii": {
+      "continental": "Kontinentale Gruppe",
+      "global": "Globale Gruppe",
+      "interplanetary": "Interplanetare Gruppe",
+      "national": "Nationale Gruppe",
+      "regional": "Regionale Gruppe"
+    },
+    "actionRadius": "Aktionsradius",
     "foundation": "Gründung",
-    "goal": "Ziel:",
+    "goal": "Ziel der Gruppe",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
     },
     "membersCount": "Mitglieder",
-    "membersListTitle": "Gruppenmitglieder"
+    "membersListTitle": "Gruppenmitglieder",
+    "role": "Deine Rolle in der Gruppe",
+    "roles": {
+      "admin": "Administrator",
+      "owner": "Inhaber",
+      "pending": "Ausstehendes Mitglied",
+      "usual": "Einfaches Mitglied"
+    },
+    "type": "Gruppentyp",
+    "types": {
+      "closed": "Geschlossene Gruppe",
+      "hidden": "Versteckte Gruppe",
+      "public": "Öffentliche Gruppe"
+    }
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index b1a9356a9..f2dc472db 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -371,14 +371,35 @@
     "following": "Following"
   },
   "group": {
+    "actionRadii": {
+      "continental": "Continental Group",
+      "global": "Global Group",
+      "interplanetary": "Interplanetary Group",
+      "national": "National Group",
+      "regional": "Regional Group"
+    },
+    "actionRadius": "Action radius",
     "foundation": "Foundation",
-    "goal": "Goal:",
+    "goal": "Goal of group",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"
     },
     "membersCount": "Members",
-    "membersListTitle": "Group Members"
+    "membersListTitle": "Group Members",
+    "role": "Your role in the group",
+    "roles": {
+      "admin": "Administrator",
+      "owner": "Owner",
+      "pending": "Pending Member",
+      "usual": "Simple Member"
+    },
+    "type": "Group type",
+    "types": {
+      "closed": "Closed Group",
+      "hidden": "Hidden Group",
+      "public": "Public Group"
+    }
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 661e584f2..afbe5a52a 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -102,11 +102,44 @@
             <!-- implement:
               v-if="!user.isMuted && !user.isBlocked" -->
           </div>
+          <hr />
+          <ds-space margin-top="small" margin-bottom="small">
+            <ds-text
+              v-if="isGroupMember"
+              class="centered-text hyphenate-text"
+              color="soft"
+              size="small"
+            >
+              <div class="describing-text">
+                {{ $t('group.role') }}
+              </div>
+              <br />
+              <ds-chip color="primary">{{ $t('group.roles.' + group.myRole) }}</ds-chip>
+            </ds-text>
+            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              <div class="describing-text">
+                {{ $t('group.type') }}
+              </div>
+              <br />
+              <ds-chip color="primary">{{ $t('group.types.' + group.groupType) }}</ds-chip>
+            </ds-text>
+            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              <div class="describing-text">
+                {{ $t('group.actionRadius') }}
+              </div>
+              <br />
+              <ds-chip color="primary">{{ $t('group.actionRadii.' + group.actionRadius) }}</ds-chip>
+            </ds-text>
+          </ds-space>
           <template v-if="group.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
-              <ds-text color="soft" size="small" class="hyphenate-text">
-                {{ $t('group.goal') }} {{ group.about }}
+              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+                <div class="describing-text">
+                  {{ $t('group.goal') }}
+                </div>
+                <br />
+                <ds-chip>{{ group.about }}</ds-chip>
               </ds-text>
             </ds-space>
           </template>
@@ -525,4 +558,10 @@ export default {
     margin-bottom: $space-x-small;
   }
 }
+.centered-text {
+  text-align: center;
+}
+.describing-text {
+  margin-bottom: -12px;
+}
 </style>

From d42afff17e694752017ed34935bd701bbf620131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 22:47:55 +0200
Subject: [PATCH 18/23] Fix mutate to query for some tests using the
 'GroupMembers' resolver

---
 backend/src/schema/resolvers/groups.spec.js | 32 ++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/backend/src/schema/resolvers/groups.spec.js b/backend/src/schema/resolvers/groups.spec.js
index c2725c867..b4653edaf 100644
--- a/backend/src/schema/resolvers/groups.spec.js
+++ b/backend/src/schema/resolvers/groups.spec.js
@@ -1202,8 +1202,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1235,8 +1235,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1268,8 +1268,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1311,8 +1311,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1344,8 +1344,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1409,8 +1409,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1446,8 +1446,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({
@@ -1483,8 +1483,8 @@ describe('in mode', () => {
               })
 
               it('finds all members', async () => {
-                const result = await mutate({
-                  mutation: groupMembersQuery,
+                const result = await query({
+                  query: groupMembersQuery,
                   variables,
                 })
                 expect(result).toMatchObject({

From 9472a68bcdbc061ba9a3a74622e346d6e9a7c1e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 13 Sep 2022 22:49:46 +0200
Subject: [PATCH 19/23] Add Vue 'head' element to group and user profile

---
 webapp/pages/group/_id/_slug.vue   | 5 +++++
 webapp/pages/profile/_id/_slug.vue | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index afbe5a52a..5c0bbd01c 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -289,6 +289,11 @@ export default {
     name: 'slide-up',
     mode: 'out-in',
   },
+  head() {
+    return {
+      title: this.groupName,
+    }
+  },
   data() {
     // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 0b3212a0b..1807a5c5e 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -221,6 +221,11 @@ export default {
     name: 'slide-up',
     mode: 'out-in',
   },
+  head() {
+    return {
+      title: this.userName,
+    }
+  },
   data() {
     const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {

From bfef47a2a1f69c762d4eafa950cfd8684c18cc65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 14 Sep 2022 08:28:56 +0200
Subject: [PATCH 20/23] fix assignment to prop in 'JoinLeaveButton'

---
 webapp/components/Button/JoinLeaveButton.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
index e1d47a7b4..bc36482aa 100644
--- a/webapp/components/Button/JoinLeaveButton.vue
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -2,7 +2,7 @@
   <base-button
     class="track-button"
     :disabled="disabled"
-    :loading="loading"
+    :loading="localLoading"
     :icon="icon"
     :filled="isMember && !hovered"
     :danger="isMember && hovered"
@@ -28,6 +28,7 @@ export default {
   },
   data() {
     return {
+      localLoading: this.loading,
       hovered: false,
     }
   },
@@ -49,13 +50,16 @@ export default {
   },
   watch: {
     isMember() {
-      this.loading = false
+      this.localLoading = false
       this.hovered = false
     },
+    loading() {
+      this.localLoading = this.loading
+    },
   },
   methods: {
     onHover() {
-      if (!this.disabled && !this.loading) {
+      if (!this.disabled && !this.localLoading) {
         this.hovered = true
       }
     },

From 176fb3919a7d9353865c41b352bae091c4bc1328 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 14 Sep 2022 08:30:00 +0200
Subject: [PATCH 21/23] Fix Vue HTML errors in group profile 'groupType' etc.

---
 webapp/pages/group/_id/_slug.vue   | 54 ++++++++++++++----------------
 webapp/pages/profile/_id/_slug.vue |  1 -
 2 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 5c0bbd01c..bd8640677 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -104,43 +104,36 @@
           </div>
           <hr />
           <ds-space margin-top="small" margin-bottom="small">
-            <ds-text
-              v-if="isGroupMember"
-              class="centered-text hyphenate-text"
-              color="soft"
-              size="small"
-            >
-              <div class="describing-text">
+            <template v-if="isGroupMember">
+              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
                 {{ $t('group.role') }}
+              </ds-text>
+              <div class="chip" align="center">
+                <ds-chip color="primary">{{ $t('group.roles.' + group.myRole) }}</ds-chip>
               </div>
-              <br />
-              <ds-chip color="primary">{{ $t('group.roles.' + group.myRole) }}</ds-chip>
-            </ds-text>
+            </template>
             <ds-text class="centered-text hyphenate-text" color="soft" size="small">
-              <div class="describing-text">
-                {{ $t('group.type') }}
-              </div>
-              <br />
+              {{ $t('group.type') }}
+            </ds-text>
+            <div class="chip" align="center">
               <ds-chip color="primary">{{ $t('group.types.' + group.groupType) }}</ds-chip>
-            </ds-text>
+            </div>
             <ds-text class="centered-text hyphenate-text" color="soft" size="small">
-              <div class="describing-text">
-                {{ $t('group.actionRadius') }}
-              </div>
-              <br />
-              <ds-chip color="primary">{{ $t('group.actionRadii.' + group.actionRadius) }}</ds-chip>
+              {{ $t('group.actionRadius') }}
             </ds-text>
+            <div class="chip" align="center">
+              <ds-chip color="primary">{{ $t('group.actionRadii.' + group.actionRadius) }}</ds-chip>
+            </div>
           </ds-space>
           <template v-if="group.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
               <ds-text class="centered-text hyphenate-text" color="soft" size="small">
-                <div class="describing-text">
-                  {{ $t('group.goal') }}
-                </div>
-                <br />
-                <ds-chip>{{ group.about }}</ds-chip>
+                {{ $t('group.goal') }}
               </ds-text>
+              <div class="chip" align="center">
+                <ds-chip>{{ group.about }}</ds-chip>
+              </div>
             </ds-space>
           </template>
         </base-card>
@@ -468,14 +461,16 @@ export default {
       /*
        * Note: "membersCountStartValue" is updated to avoid counting from 0 when join/leave
        */
+      let members
       this.membersCountStartValue = this.GroupMembers.length
       if (joinedByCurrentUser) {
         // this.membersCountToLoad++
-        this.GroupMembers = [this.currentUser, ...this.GroupMembers]
+        members = [this.currentUser, ...this.GroupMembers]
       } else {
         // this.membersCountToLoad--
-        this.GroupMembers = this.GroupMembers.filter((user) => user.id !== this.currentUser.id)
+        members = this.GroupMembers.filter((user) => user.id !== this.currentUser.id)
       }
+      this.GroupMembers = members
     },
     updateJoinLeave({ myRoleInGroup }) {
       this.Group[0].myRole = myRoleInGroup
@@ -565,8 +560,9 @@ export default {
 }
 .centered-text {
   text-align: center;
+  margin-bottom: $space-xxx-small;
 }
-.describing-text {
-  margin-bottom: -12px;
+.chip {
+  margin-bottom: $space-x-small;
 }
 </style>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 1807a5c5e..b4ed11e79 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -176,7 +176,6 @@ import HcFollowButton from '~/components/Button/FollowButton'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import FollowList, { followListVisibleCount } from '~/components/features/ProfileList/FollowList'
-
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'

From 13727729a5032802098a789f37aedcef7d783d57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 14 Sep 2022 13:01:07 +0200
Subject: [PATCH 22/23] Refactor join/leave button function and the related
 events

---
 webapp/components/Button/JoinLeaveButton.vue | 10 +++-----
 webapp/pages/group/_id/_slug.vue             | 26 +++-----------------
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
index bc36482aa..915406bd5 100644
--- a/webapp/components/Button/JoinLeaveButton.vue
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -68,19 +68,17 @@ export default {
       const mutation = join ? joinGroupMutation : leaveGroupMutation
 
       this.hovered = false
-      const optimisticResult = { joinedByCurrentUser: join }
-      this.$emit('optimistic', optimisticResult)
+      this.$emit('prepare', join)
 
       try {
         const { data } = await this.$apollo.mutate({
           mutation,
           variables: { groupId: this.groupId, userId: this.userId },
         })
-        const joinedGroup = join ? data.JoinGroup : data.LeaveGroup
-        this.$emit('update', joinedGroup)
+        const joinedLeftGroupResult = join ? data.JoinGroup : data.LeaveGroup
+        this.$emit('update', joinedLeftGroupResult)
       } catch (error) {
-        optimisticResult.joinedByCurrentUser = !join
-        this.$emit('optimistic', optimisticResult)
+        this.$toast.error(error.message)
       }
     },
   },
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index bd8640677..85f8301fc 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -96,7 +96,7 @@
               :isMember="isGroupMember"
               :disabled="isGroupOwner"
               :loading="$apollo.loading"
-              @optimistic="optimisticJoinLeave"
+              @prepare="prepareJoinLeave"
               @update="updateJoinLeave"
             />
             <!-- implement:
@@ -457,31 +457,13 @@ export default {
     //   this.user.followedByCurrentUser = followedByCurrentUser
     //   this.user.followedBy = followedBy
     // },
-    optimisticJoinLeave({ joinedByCurrentUser }) {
-      /*
-       * Note: "membersCountStartValue" is updated to avoid counting from 0 when join/leave
-       */
-      let members
+    prepareJoinLeave() {
+      // "membersCountStartValue" is updated to avoid counting from 0 when join/leave
       this.membersCountStartValue = this.GroupMembers.length
-      if (joinedByCurrentUser) {
-        // this.membersCountToLoad++
-        members = [this.currentUser, ...this.GroupMembers]
-      } else {
-        // this.membersCountToLoad--
-        members = this.GroupMembers.filter((user) => user.id !== this.currentUser.id)
-      }
-      this.GroupMembers = members
     },
     updateJoinLeave({ myRoleInGroup }) {
       this.Group[0].myRole = myRoleInGroup
-      const currentUserInGroupMembers = this.GroupMembers.find(
-        (user) => user.id === this.currentUser.id,
-      )
-      if (currentUserInGroupMembers) {
-        currentUserInGroupMembers.myRoleInGroup = myRoleInGroup
-      } else {
-        this.$apollo.queries.GroupMembers.refetch()
-      }
+      this.$apollo.queries.GroupMembers.refetch()
     },
     fetchAllMembers() {
       this.membersCountToLoad = Infinity

From ff8f3fed7aa51bf036003be5b2e1df6ab7014b36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 14 Sep 2022 14:12:06 +0200
Subject: [PATCH 23/23] Implement confirm modal for leaving a group

---
 webapp/components/Button/JoinLeaveButton.vue | 49 ++++++++++++++++++--
 webapp/locales/de.json                       |  5 ++
 webapp/locales/en.json                       |  5 ++
 webapp/pages/group/_id/_slug.vue             |  2 +-
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Button/JoinLeaveButton.vue b/webapp/components/Button/JoinLeaveButton.vue
index 915406bd5..993631065 100644
--- a/webapp/components/Button/JoinLeaveButton.vue
+++ b/webapp/components/Button/JoinLeaveButton.vue
@@ -15,12 +15,13 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import { joinGroupMutation, leaveGroupMutation } from '~/graphql/groups'
 
 export default {
   name: 'JoinLeaveButton',
   props: {
-    groupId: { type: String, required: true },
+    group: { type: Object, required: true },
     userId: { type: String, required: true },
     isMember: { type: Boolean, required: true },
     disabled: { type: Boolean, default: false },
@@ -58,12 +59,54 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      commitModalData: 'modal/SET_OPEN',
+    }),
     onHover() {
       if (!this.disabled && !this.localLoading) {
         this.hovered = true
       }
     },
-    async toggle() {
+    toggle() {
+      if (this.isMember) {
+        this.openLeaveModal()
+      } else {
+        this.joinLeave()
+      }
+    },
+    openLeaveModal() {
+      this.commitModalData(this.leaveModalData())
+    },
+    leaveModalData() {
+      return {
+        name: 'confirm',
+        data: {
+          type: '',
+          resource: { id: '' },
+          modalData: {
+            titleIdent: 'group.leaveModal.title',
+            messageIdent: 'group.leaveModal.message',
+            messageParams: {
+              name: this.group.name,
+            },
+            buttons: {
+              confirm: {
+                danger: true,
+                icon: 'sign-out',
+                textIdent: 'group.leaveModal.confirmButton',
+                callback: this.joinLeave,
+              },
+              cancel: {
+                icon: 'close',
+                textIdent: 'actions.cancel',
+                callback: () => {},
+              },
+            },
+          },
+        },
+      }
+    },
+    async joinLeave() {
       const join = !this.isMember
       const mutation = join ? joinGroupMutation : leaveGroupMutation
 
@@ -73,7 +116,7 @@ export default {
       try {
         const { data } = await this.$apollo.mutate({
           mutation,
-          variables: { groupId: this.groupId, userId: this.userId },
+          variables: { groupId: this.group.id, userId: this.userId },
         })
         const joinedLeftGroupResult = join ? data.JoinGroup : data.LeaveGroup
         this.$emit('update', joinedLeftGroupResult)
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 035586934..7222b7c72 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -385,6 +385,11 @@
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
     },
+    "leaveModal": {
+      "confirmButton": "Verlassen",
+      "message": "Eine Gruppe zu verlassen ist möglicherweise nicht rückgängig zu machen!<br>Gruppe <b>„{name}“</b> verlassen!",
+      "title": "Möchtest du wirklich die Gruppe verlassen?"
+    },
     "membersCount": "Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
     "role": "Deine Rolle in der Gruppe",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f2dc472db..1717eee5f 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -385,6 +385,11 @@
       "iAmMember": "I'm a member",
       "join": "Join"
     },
+    "leaveModal": {
+      "confirmButton": "Leave",
+      "message": "Leaving a group may be irreversible!<br>Leave group <b>“{name}”</b>!",
+      "title": "Do you really want to leave the group?"
+    },
     "membersCount": "Members",
     "membersListTitle": "Group Members",
     "role": "Your role in the group",
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 85f8301fc..82f8f270e 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -91,7 +91,7 @@
               @update="updateFollow"
             /> -->
             <join-leave-button
-              :groupId="group && group.id ? group.id : ''"
+              :group="group || {}"
               :userId="currentUser.id"
               :isMember="isGroupMember"
               :disabled="isGroupOwner"