Updated my communities page

src/router/index.js

@@ -37,6 +37,12 @@ const routes = [
     component: () => import("../views/UserProfileViews/RentHistoryView.vue"),
     beforeEnter: guardRoute,
   },
+  {
+    path: "/profile/communities",
+    name: "myCommunities",
+    component: () => import("../views/UserProfileViews/MyCommunitiesView.vue"),
+    beforeEnter: guardRoute,
+  },
   {
     path: "/register",
     name: "register",
@@ -94,12 +100,6 @@ const routes = [
       import("../components/BaseComponents/NotificationsForm.vue"),
     beforeEnter: guardRoute,
   },
-  {
-    path: "/user/:id/communities",
-    name: "myCommunities",
-    component: () => import("../views/CommunityViews/MyCommunitiesView.vue"),
-    beforeEnter: guardRoute,
-  },
   {
     path: "/community/:communityID",
     name: "communityHome",

src/views/CommunityViews/MyCommunitiesView.vue

-<template>
-  <div>
-    <div id="myGroups">
-      <div>Mine grupper:</div>
-      <group-list :groupList="myGroups" />
-    </div>
-  </div>
-</template>
-
-<script>
-import GroupList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups } from "@/utils/apiutil";
-
-export default {
-  data() {
-    return {
-      myGroups: [],
-    };
-  },
-  components: {
-    GroupList,
-  },
-  methods: {
-    async getMyGroups() {
-      this.myGroups = await getMyGroups();
-    },
-  },
-  beforeMount() {
-    this.getMyGroups();
-  },
-};
-</script>

src/views/UserProfileViews/MyCommunitiesView.vue

+<template>
+  <!-- My communities, with pagination -->
+  <div class="flex flex-row p-4 relative">
+    <div class="text-xl md:text-2xl text-primary-light font-medium w-full">
+      Mine grupper
+    </div>
+    <UserAddIcon
+      class="cursor-pointer max-h-6 max-w-6 float-right grow text-primary-dark"
+      @click="$router.push('/newCommunity')"
+      alt="Opprett ny gruppe"
+    />
+  </div>
+  <CommunityList :communities="myCommunities" :member="true" />
+</template>
+
+<script>
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
+import CommunityService from "@/services/community.service";
+import { UserAddIcon } from "@heroicons/vue/outline";
+
+export default {
+  data() {
+    return {
+      myCommunities: [],
+    };
+  },
+  components: {
+    CommunityList,
+    UserAddIcon,
+  },
+  async beforeCreate() {
+    this.myCommunities = await CommunityService.getUserCommunities();
+  },
+};
+</script>