Merge branch 'homepage' into 'main'

Homepage

See merge request !42

src/components/GroupeComponents/GroupList.vue

+<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>

src/components/GroupeComponents/GroupListItem.vue

+<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>

src/components/MemberList.vue → 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() {

src/components/HomeComponent.vue

-<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>

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,
   },

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);
+    });
+}

src/views/HomeView.vue

 <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>

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() {