From fa79c25e9b288a7b283a8fa485efa1ea43d1ffb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Sep 2022 11:12:34 +0200
Subject: [PATCH] Implement join button on Group profile, a start

---
 webapp/pages/group/_id/_slug.vue | 35 +++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index a7fe48eea..102a72b94 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -7,7 +7,11 @@
           :class="{ 'disabled-content': group.disabled }"
           style="position: relative; height: auto; overflow: visible"
         >
-          <avatar-uploader v-if="isGroupOwner" :profile="group" :updateMutation="updateGroupMutation">
+          <avatar-uploader
+            v-if="isGroupOwner"
+            :profile="group"
+            :updateMutation="updateGroupMutation"
+          >
             <profile-avatar :profile="group" class="profile-page-avatar" size="large" />
           </avatar-uploader>
           <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
@@ -41,9 +45,6 @@
               {{ $t('profile.groupSince') }} {{ group.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
-          <!-- Wolle: <ds-space v-if="user.badges && user.badges.length" margin="x-small">
-            <hc-badges :badges="user.badges" />
-          </ds-space> -->
           <ds-flex>
             <ds-flex-item>
               <!-- Wolle: <client-only>
@@ -64,13 +65,20 @@
               </client-only> -->
             </ds-flex-item>
           </ds-flex>
-          <!-- Wolle: <div v-if="!isGroupMember" class="action-buttons">
-            <base-button v-if="user.isBlocked" @click="unblockUser(user)">
+          <div v-if="!isGroupMember" class="action-buttons">
+            <!-- Wolle: <base-button v-if="user.isBlocked" @click="unblockUser(user)">
               {{ $t('settings.blocked-users.unblock') }}
             </base-button>
             <base-button v-if="user.isMuted" @click="unmuteUser(user)">
               {{ $t('settings.muted-users.unmute') }}
             </base-button>
+            <hc-follow-button
+              v-if="!user.isMuted && !user.isBlocked"
+              :follow-id="user.id"
+              :is-followed="user.followedByCurrentUser"
+              @optimistic="optimisticFollow"
+              @update="updateFollow"
+            /> -->
             <hc-follow-button
               v-if="!user.isMuted && !user.isBlocked"
               :follow-id="user.id"
@@ -78,7 +86,20 @@
               @optimistic="optimisticFollow"
               @update="updateFollow"
             />
-          </div> -->
+            <base-button
+              class="track-button"
+              :disabled="disabled || !followId"
+              :loading="loading"
+              :icon="icon"
+              :filled="isFollowed && !hovered"
+              :danger="isFollowed && hovered"
+              @mouseenter.native="onHover"
+              @mouseleave.native="hovered = false"
+              @click.prevent="toggle"
+            >
+              {{ label }}
+            </base-button>
+          </div>
           <template v-if="group.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">