refactor

src/components/CommunityComponents/CommunityList.vue

 <template>
   <ul>
-    <li v-for="(group, index) in groupList" :key="index">
-      <group-list-item :group="group" />
+    <li v-for="community in communities" :key="community">
+      <CommunityListItem :community="community" :member="member" />
     </li>
   </ul>
 </template>
 
 <script>
-import GroupListItem from "@/components/CommunityComponents/CommunityListItem.vue";
+import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
 
 export default {
-  name: "GroupList",
+  name: "CommunityList",
   props: {
-    groupList: Array,
+    communities: Array,
+    member: Boolean,
   },
   components: {
-    GroupListItem,
+    CommunityListItem,
   },
 };
 </script>

src/components/CommunityComponents/CommunityListItem.vue

 <template>
+  <NotificationModal
+    @close="this.dialogOpen = false"
+    :visible="dialogOpen"
+    :title="community.name"
+    :message="community.description"
+  >
+  </NotificationModal>
   <div
+    @click="toggleDialog()"
     class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
   >
     <div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
       <img alt="groupIMG" src="../../assets/group.png" />
     </div>
-    <div class="flex-1 pl-1">
-      <div class="font-medium dark:text-white">
-        {{ group.name }}
+    <div class="flex-1 pl-1 overflow-hidden">
+      <div class="font-medium dark:text-white truncate">
+        {{ community.name }}
       </div>
     </div>
-    <div class="flex flex-row justify-center">
+    <div class="flex flex-row justify-center items-center">
+      <LockClosedIcon
+        v-if="community.visibility === 0"
+        class="max-h-6 max-w-6 shrink m-2"
+      />
+      <LockOpenIcon
+        v-if="community.visibility === 1"
+        class="max-h-6 max-w-6 shrink m-2"
+      />
       <button
-        @click="goToJoin(group.communityId)"
-        v-if="!isMember"
+        @click="goToJoin(community.communityId)"
+        v-if="!member"
         class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
       >
         Bli med
       </button>
       <button
-        v-if="isMember"
-        @click="goToGroup(group.communityId)"
+        v-if="member"
+        @click="goToGroup(community.communityId)"
         class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
       >
         Gå til
@@ -30,17 +46,24 @@
 </template>
 
 <script>
-import { getMyGroups } from "@/utils/apiutil";
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/vue/outline";
+import NotificationModal from "@/components/BaseComponents/NotificationModal.vue";
 
 export default {
-  name: "GroupListItem",
+  name: "CommunityListItem",
+  components: {
+    NotificationModal,
+    LockClosedIcon,
+    LockOpenIcon,
+  },
   data() {
     return {
-      myGroups: [],
+      dialogOpen: false,
     };
   },
   props: {
-    group: Object,
+    community: Object,
+    member: Boolean,
   },
   methods: {
     goToGroup(id) {
@@ -49,15 +72,9 @@ export default {
     goToJoin(id) {
       this.$router.push("/community/" + id + "/join");
     },
-    async getMyGroups() {
-      this.myGroups = await getMyGroups();
+    toggleDialog() {
+      this.dialogOpen = !this.dialogOpen;
     },
-    isMember(group) {
-      return this.myGroups.includes(group);
-    },
-  },
-  beforeMount() {
-    this.getMyGroups();
   },
 };
 </script>

src/views/CommunityViews/CommunityView.vue

 <template>
   <div>
     <img
-        class="cursor-pointer h-8 mr-4 mt-4 float-right"
-        v-if="isLoggedIn"
-        src="@/assets/newCommunity.png"
-        alt="Legg til gruppe"
-        @click="$router.push('/createNewGroup')"
+      class="cursor-pointer h-8 mr-4 mt-4 float-right"
+      v-if="loggedIn"
+      src="@/assets/newCommunity.png"
+      alt="Legg til gruppe"
+      @click="$router.push('/createNewGroup')"
     />
   </div>
   <div>
-    <div id="myGroups" v-if="isLoggedIn">
-      <div class="m-4" >Mine grupper:</div>
-      <group-list :groupList="myGroups" />
+    <div id="myGroups" v-if="loggedIn">
+      <div class="m-4">Mine grupper:</div>
+      <CommunityList :communities="myCommunities" :member="true" />
     </div>
     <div id="localGroups">
       <div class="m-4">Offentlige grupper:</div>
-      <group-list :groupList="localGroups" />
+      <CommunityList :communities="publicCommunities" :member="false" />
     </div>
   </div>
-
 </template>
 
 <script>
-import GroupList from "@/components/CommunityComponents/CommunityList.vue";
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
 import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
 
 export default {
   name: "HomeView",
   data() {
     return {
-      isLoggedIn: false,
-      myGroups: [],
-      localGroups: [],
+      loggedIn: false,
+      myCommunities: [],
+      publicCommunities: [],
     };
   },
   components: {
-    GroupList,
-  },
-  methods: {
-    async getMyGroups() {
-      this.myGroups = await getMyGroups();
-    },
-    async getPotentialGroups() {
-      this.localGroups = await getVisibleGroups();
-    },
+    CommunityList,
   },
   async created() {
-    await this.getMyGroups();
-    await this.getPotentialGroups();
-    if(this.$store.state.user.token !== null){
-      this.isLoggedIn = true
-    }
-    },
+    this.loggedIn = this.$store.state.user.token !== null;
+    this.publicCommunities = await getVisibleGroups();
+    if (!this.loggedIn) return;
+    this.myCommunities = await getMyGroups();
+    this.publicCommunities = this.publicCommunities.filter(
+      (val) => !this.myCommunities.includes(val)
+    );
+  },
 };
 </script>