CommunityHome implemented with connection to backend/api.

src/components/CommunityComponents/CommunityHome.vue

 <template>
   <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
     <div class="mb-5 mt-5 border-b-2 border-blue-900">
-      <label class="text-xl font-bold">Tøyenhus borettslag</label>
+      <label class="text-xl font-bold">{{ community.name }}</label>
     </div>
     <div class="relative" id="searchComponent">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">
@@ -35,6 +35,7 @@
 
 <script>
 import ItemCard from "@/components/CommunityComponents/ItemCard";
+import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
 export default {
   name: "SearchItemListComponent",
 
@@ -49,37 +50,42 @@ export default {
       filteredItems = this.items.filter(
         (p) =>
           p.title.toLowerCase().includes(this.search.toLowerCase()) ||
-          p.adresse.toLowerCase().includes(this.search.toLowerCase()) ||
-          p.price === Number(this.search)
+          p.address.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.pricePerDay === Number(this.search)
       );
 
       return filteredItems;
     },
   },
 
-  /**
-   * Her må det lages en metode som henter alle items (i en gruppe) fra databasen.
-   * De kan deretter bli pusha inn i items array, og da burde de bli displayet i lista.
-   * Når denne metoden er på plass kan items[] i data tømmes. Da vil alt dataen komme fra db.
-   */
-
   data() {
     return {
-      items: [
-        { img: "", adresse: "Oslo", title: "Dyson", price: 1000 },
-
-        { img: "", adresse: "Trondheim", title: "Gressklipper", price: 500 },
-
-        { img: "", adresse: "Bergen", title: "Bil", price: 500 },
-      ],
+      items: [],
       item: {
         img: "",
-        adresse: "",
+        address: "",
         title: "",
-        price: 0,
+        pricePerDay: 0,
       },
       search: "",
+      communityID: -1,
+      community: {},
     };
   },
+  methods: {
+    getCommunityFromAPI: async function (){
+      this.communityID = await this.$router.currentRoute.value.params.communityID;
+      this.community = await GetCommunity(this.communityID);
+      console.log("community: " + this.community.name);
+    },
+    getListingsOfCommunityFromAPI: async function(){
+      this.communityID = await this.$router.currentRoute.value.params.communityID;
+      this.items = await GetListingsInCommunity(this.communityID);
+    },
+  },
+  beforeMount() {
+    this.getCommunityFromAPI(); //To get the id of the community before mounting the view
+    this.getListingsOfCommunityFromAPI();
+  }
 };
 </script>

src/components/CommunityComponents/ItemCard.vue

@@ -8,10 +8,10 @@
       />
       <div class="p-1 m-1">
         <p class="text-gray-700 text-xs font-bold" id="adress">
-          {{ item.adresse }}
+          {{ item.address }}
         </p>
         <p class="font-bold text-sm" id="title">{{ item.title }}</p>
-        <p class="text-gray-700 text-xs" id="price">{{ item.price }} kr</p>
+        <p class="text-gray-700 text-xs" id="price">{{ item.pricePerDay }} kr</p>
       </div>
     </div>
   </div>
@@ -22,9 +22,9 @@ export default {
   props: {
     item: {
       img: String,
-      adresse: String,
+      address: String,
       title: String,
-      price: Number,
+      pricePerDay: Number,
     },
   },
 };

src/router/index.js

@@ -93,7 +93,7 @@ const routes = [
     component: () => import("../views/CommunityViews/MyCommunitiesView.vue"),
   },
   {
-    path: "/groupHomePage",
+    path: "/community/:communityID",
     name: "GroupHome",
     component: () => import("../views/CommunityViews/CommunityHomeView.vue"),
     beforeEnter: guardRoute,

src/utils/apiutil.js

@@ -147,3 +147,29 @@ export function getVisibleGroups() {
       console.error(error);
     });
 }
+
+export async function GetCommunity(communityID) {
+    return axios
+        .get(API_URL + "community/" + communityID, {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch((error) => {
+            console.error(error);
+        });
+}
+
+export async function GetListingsInCommunity(communityID) {
+    return axios
+        .get(API_URL + "community/" + communityID + "/listings", {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch((error) => {
+            console.error(error);
+        });
+}