diff --git a/src/assets/group.png b/src/assets/group.png
new file mode 100644
index 0000000000000000000000000000000000000000..4911eeb33dc59f447a499384573769c137ad339a
Binary files /dev/null and b/src/assets/group.png differ
diff --git a/src/components/GroupeComponents/GroupList.vue b/src/components/GroupeComponents/GroupList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21ef028e5af53aef26aa11d0135f9ea7ae139c7f
--- /dev/null
+++ b/src/components/GroupeComponents/GroupList.vue
@@ -0,0 +1,21 @@
+<template>
+ <ul>
+ <li v-for="(group, index) in groupList" :key="index">
+ <group-list-item :group="group" />
+ </li>
+ </ul>
+</template>
+
+<script>
+import GroupListItem from "@/components/GroupeComponents/GroupListItem.vue";
+
+export default {
+ name: "GroupList",
+ props: {
+ groupList: Array,
+ },
+ components: {
+ GroupListItem,
+ },
+};
+</script>
diff --git a/src/components/GroupeComponents/GroupListItem.vue b/src/components/GroupeComponents/GroupListItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81d2b7dee530d7eae79f97e954ff19a52936bd34
--- /dev/null
+++ b/src/components/GroupeComponents/GroupListItem.vue
@@ -0,0 +1,63 @@
+<template>
+ <div
+ 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>
+ </div>
+ <div class="flex flex-row justify-center">
+ <button
+ @click="goToJoin(group.communityId)"
+ v-if="!isMember"
+ 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)"
+ 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
+ </button>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getMyGroups } from "@/utils/apiutil";
+
+export default {
+ name: "GroupListItem",
+ data() {
+ return {
+ myGroups: [],
+ };
+ },
+ props: {
+ group: Object,
+ },
+ methods: {
+ goToGroup(id) {
+ this.$router.push("/community/" + id);
+ },
+ goToJoin(id) {
+ this.$router.push("/community/" + id + "/join");
+ },
+ async getMyGroups() {
+ this.myGroups = await getMyGroups();
+ },
+ isMember(group) {
+ return this.myGroups.includes(group);
+ },
+ },
+ beforeMount() {
+ this.getMyGroups();
+ },
+};
+</script>
diff --git a/src/components/MemberList.vue b/src/components/GroupeComponents/MemberList.vue
similarity index 87%
rename from src/components/MemberList.vue
rename to src/components/GroupeComponents/MemberList.vue
index 5f935be3e67737b6228cc4113fc0da6a8bb8a934..7b44f5fa5a3fa3ba4ef464e0400a22613eb6c819 100644
--- a/src/components/MemberList.vue
+++ b/src/components/GroupeComponents/MemberList.vue
@@ -7,7 +7,7 @@
</template>
<script>
-import UserListItemCard from "./UserProfileComponents/UserListItemCard.vue";
+import UserListItemCard from "../UserProfileComponents/UserListItemCard.vue";
export default {
data() {
diff --git a/src/components/HomeComponent.vue b/src/components/HomeComponent.vue
deleted file mode 100644
index d2c20ac82db8c41b7ff98f008f5acc328ac4d5ae..0000000000000000000000000000000000000000
--- a/src/components/HomeComponent.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
- <div class="flex justify-center">
- <router-link to="/login" class="m-6">Logg inn</router-link>
-
- <router-link to="/register" class="m-6">Registrer deg</router-link>
-
- <router-link to="/about" class="m-6">Om BoCo</router-link>
-
- <div @click="logout" class="m-6 cursor-pointer"><p>Logout</p></div>
- </div>
-</template>
-
-<script>
-export default {
- name: "HomeComponent",
-
- data: () => ({}),
-
- methods: {
- logout() {
- this.$store.commit("logout");
- },
- },
-};
-</script>
diff --git a/src/router/index.js b/src/router/index.js
index cda3ec8b923cbf8d5a9def1a26e7830efa07cc69..aaf73035d6c411fa3070c9ef04d443d321b4de15 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,7 @@ function guardRoute(to, from, next) {
const routes = [
{
- path: "/", //Endre før push
+ path: "/",
name: "home",
component: HomeView,
},
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index ed6731ef5796315cf802272b68d5f00d6dded1f2..f1f0130280aed7cf51babb51db2f6c40d61bc1c1 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -121,3 +121,29 @@ export function postNewgroup(groupInfo) {
return error;
});
}
+
+export function getMyGroups() {
+ return axios
+ .get(API_URL + "user/communities", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
+
+export function getVisibleGroups() {
+ return axios
+ .get(API_URL + "communities", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 37bac275afe04e62a533e8a63e05db38869d2097..7983ccfd894508b1862cc06d072a74082cbb5a85 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,18 +1,42 @@
<template>
- <Home />
+ <div>
+ <div id="myGroups">
+ <div>Mine grupper:</div>
+ <group-list :groupList="myGroups" />
+ </div>
+ <div id="localGroups">
+ <div>Offentlige grupper:</div>
+ <group-list :groupList="localGroups" />
+ </div>
+ </div>
</template>
<script>
-import { defineComponent } from "vue";
+import GroupList from "@/components/GroupeComponents/GroupList.vue";
+import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-// Components
-import Home from "../components/HomeComponent.vue";
-
-export default defineComponent({
+export default {
name: "HomeView",
-
+ data() {
+ return {
+ myGroups: [],
+ localGroups: [],
+ };
+ },
components: {
- Home,
+ GroupList,
+ },
+ methods: {
+ async getMyGroups() {
+ this.myGroups = await getMyGroups();
+ },
+ async getPotentialGroups() {
+ this.localGroups = await getVisibleGroups();
+ },
+ },
+ beforeMount() {
+ this.getMyGroups();
+ this.getPotentialGroups();
},
-});
+};
</script>
diff --git a/src/views/MemberListView.vue b/src/views/MemberListView.vue
index 5e07022277233e69cbecd17ee711b194157619ad..efbf16c5ed7ed5db3da33d2a47b5c7124e9b86ea 100644
--- a/src/views/MemberListView.vue
+++ b/src/views/MemberListView.vue
@@ -58,7 +58,7 @@
</template>
<script>
-import MemberList from "@/components/MemberList.vue";
+import MemberList from "@/components/GroupeComponents/MemberList.vue";
export default {
data() {