Merge branch 'joinOpenCommunities' into 'main'

Join open communities

See merge request !69

src/components/BaseComponents/CommunityHeader.vue

@@ -28,29 +28,53 @@
       </div>
     </div>
     <div>
-      <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
+      <!-- If the user is not a member in the community, this button will show -->
+      <div v-if="!member">
+        <ColoredButton
+            v-if="!member"
+            :text="'Bli med'"
+            @click="joinCommunity(community.communityId)"
+            class="m-2"
+        />
 
-        <svg @click="toggle" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
+      <CustomFooterModal
+          @close="this.dialogOpen = false"
+          :visible="dialogOpen"
+          title="Kan ikke bli med"
+          message="Logg inn først for å bli med i en gruppe."
+      />
+      </div>
 
-        <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+      <!-- If the user is member of the community, this hamburger menu will show -->
+      <div v-if="member">
+        <svg @click="toggle" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
 
-      </span>
+      <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import { JoinOpenCommunity, GetIfUserAlreadyInCommunity } from "@/utils/apiutil";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+
 export default {
   name: "CommunityHeader",
   components: {
     CommunityHamburger,
+    ColoredButton,
+    CustomFooterModal,
   },
   data(){
     return{
       hamburgerOpen: false,
+      dialogOpen: false,
+      member: true,
     }
   },
   props: {
@@ -65,6 +89,7 @@ export default {
     }
   },
   methods: {
+    //To open and close the hamburger menu
     toggle: function (){
       if(this.hamburgerOpen){
         this.hamburgerOpen = false;
@@ -72,7 +97,26 @@ export default {
       else{
         this.hamburgerOpen = true;
       }
+    },
+    joinCommunity: async function(id){
+      const response = await JoinOpenCommunity(id);
+      if(response === "Login to join any community"){
+        this.dialogOpen = true;
+      }
+      else{
+        window.location.reload();
+      }
+    },
+    getIfUserInCommunity: async function(){
+      try{
+        this.member = await GetIfUserAlreadyInCommunity(this.$router.currentRoute.value.params.communityID);
+      } catch (error){
+        console.log(error);
+      }
     }
   },
+  beforeMount() {
+    this.getIfUserInCommunity();
+  }
 };
 </script>

src/components/CommunityComponents/CommunityHome.vue

@@ -6,6 +6,7 @@
       class="mb-5"
     />
 
+
     <!-- Search field -->
     <div class="relative" id="searchComponent">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">

src/components/CommunityComponents/CommunityListItem.vue

@@ -6,17 +6,37 @@
     :message="community.description"
   >
     <div class="flex justify-center p-2">
+      <!-- If a user is not a member in the community, this button will show -->
       <ColoredButton
         v-if="!member"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
+        class="m-2"
       />
+
+      <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
         :text="'Gå til'"
         @click="goToGroup(community.communityId)"
+        class="m-2"
+      />
+
+      <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
+      <ColoredButton
+          v-if="!member && community.visibility===1"
+          :text="'Gå til'"
+          @click="goToGroup(community.communityId)"
+          class="m-2"
       />
     </div>
+
+    <!-- If a user is not logges in and tries to join a community, this message shows -->
+    <div class="flex justify-center p-2">
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        {{ responseToUser }}
+      </p>
+    </div>
   </CustomFooterModal>
   <div
     @click="toggleDialog()"
@@ -44,6 +64,7 @@
 import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
 import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
 import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
+import { JoinOpenCommunity } from "@/utils/apiutil";
 
 export default {
   name: "CommunityListItem",
@@ -56,6 +77,7 @@ export default {
   data() {
     return {
       dialogOpen: false,
+      responseToUser: '',
     };
   },
   props: {
@@ -66,8 +88,14 @@ export default {
     goToGroup(id) {
       this.$router.push("/community/" + id);
     },
-    goToJoin(id) {
-      this.$router.push("/community/" + id + "/join");
+    async goToJoin(id) {
+      const response = await JoinOpenCommunity(id);
+      if(response === "Login to join any community"){
+        this.responseToUser = "Logg inn først for å bli med i en gruppe";
+      }
+      else{
+        this.$router.push("/community/" + id);
+      }
     },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;

src/components/CommunityComponents/ItemCard.vue

 <template>
   <div class="mt-5">
-    <div class="w-52 rounded bg-gray-200">
+    <div class="w-4/5 rounded bg-gray-200">
       <img
         class="w-full"
         :src="item.img || require('../../assets/default-product.png')"

src/utils/apiutil.js

@@ -186,3 +186,40 @@ export async function GetMembersOfCommunity(communityID) {
             console.error(error);
         });
 }
+
+export function JoinOpenCommunity(communityId) {
+
+    if(tokenHeader().Authorization == "Bearer " + null){
+        console.log("ikke logget på!");
+        return "Login to join any community";
+    }
+
+    return axios
+        .post(API_URL + "communities/" + communityId + "/join", communityId, {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            return error;
+        });
+}
+
+export async function GetIfUserAlreadyInCommunity(communityID) {
+    if(tokenHeader().Authorization == "Bearer " + null){
+        return false;
+    }
+
+    return axios
+        .get(API_URL + "communities/" + communityID + "/user/status", {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch((error) => {
+            return error;
+        });
+}

tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap

@@ -36,10 +36,10 @@ exports[`CommunityHeader component renders correctly 1`] = `
     </div>
   </div>
   <div>
-    <span
-      class="hidden sm:block"
-    >
-      <!-- Legg dette til i button: v-if="adminStatus" -->
+    <!-- If the user is not a member in the community, this button will show -->
+    <!--v-if-->
+    <!-- If the user is member of the community, this hamburger menu will show -->
+    <div>
       <svg
         class="w-9 h-9 cursor-pointer"
         fill="none"
@@ -56,7 +56,7 @@ exports[`CommunityHeader component renders correctly 1`] = `
       </svg>
       <!--v-if-->
       <!-- class="absolute" -->
-    </span>
+    </div>
   </div>
 </div>
 `;

tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap

@@ -5,7 +5,7 @@ exports[`ItemCard component renders correctly 1`] = `
   class="mt-5"
 >
   <div
-    class="w-52 rounded bg-gray-200"
+    class="w-4/5 rounded bg-gray-200"
   >
     <img
       alt="Item image"