Merge branch 'communityHome-view' into 'main'

Community home view

See merge request !58

src/components/CommunityComponents/CommunityHome.vue

 <template>
-  <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
-    <div>
-      <img
-          class="cursor-pointer h-8  float-right"
-          v-if="isLoggedIn"
-          src="@/assets/members.png"
-          alt="Medlemmer"
-          @click="$router.push('/group/:id/memberlist')"
-      />
-    </div>
-    <div class="mb-5 mt-5 border-b-2 border-blue-900">
-      <label class="text-xl font-bold">Tøyenhus borettslag</label>
-    </div>
+  <section class="w-full px-5 py-4 mx-auto rounded-md">
+
+    <CommunityHeader :admin-status="false" :community="community"  class="mb-5"/>
+
+    <!-- Search field -->
     <div class="relative" id="searchComponent">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">
         <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
@@ -34,8 +26,9 @@
       />
     </div>
 
-    <div class="absolute inset-x-0 px-6 py-3 mt-4">
-      <div class="grid grid-cols-2">
+    <!-- Item cards -->
+    <div class="absolute inset-x-0 px-6 py-3">
+      <div class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center">
         <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
       </div>
     </div>
@@ -44,12 +37,16 @@
 
 <script>
 import ItemCard from "@/components/CommunityComponents/ItemCard";
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
+import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
 export default {
   name: "SearchItemListComponent",
 
   components: {
+    CommunityHeader,
     ItemCard,
   },
+
   computed: {
     searchedItems() {
       let filteredItems = [];
@@ -57,43 +54,41 @@ 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;
     },
   },
-  created() {
-    if(this.$store.state.user.token !== null){
-      this.isLoggedIn = true
-    }
-  },
-
-  /**
-   * 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 {
-      isLoggedIn: false,
-      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);
+    },
+    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

 <template>
   <div class="mt-5">
-    <div class="w-4/5 rounded bg-gray-200">
+    <div class="w-52 rounded bg-gray-200">
       <img
         class="w-full"
         :src="item.img || require('../../assets/default-product.png')"
@@ -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,9 +93,10 @@ const routes = [
     component: () => import("../views/CommunityViews/MyCommunitiesView.vue"),
   },
   {
-    path: "/community/:id",
+    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);
+        });
+}

tests/unit/apiutil-communityHome-mock.spec.js

+import {GetCommunity, GetListingsInCommunity} from "@/utils/apiutil";
+import axios from "axios";
+
+jest.mock("axios");
+
+describe("testing mocking of apiutil.js", () => {
+
+    it("check that existing group returns correctly", async () => {
+
+        const expectedResponse = {
+            communityId: 4040,
+            name: "Fisken i vannet",
+            description: "For vi som liker fjell fisk",
+            visibility: 1,
+            location: "Bergen brygge",
+            picture: "fish blub blub"
+        };
+
+        axios.get.mockImplementation(() =>
+            Promise.resolve({ data: expectedResponse })
+        );
+
+        const communityResponse = await GetCommunity(4040);
+        expect(communityResponse.name).toBe(expectedResponse.name);
+    });
+
+    it("check that existing group returns correct listings", async () => {
+
+        const expectedResponse = {
+            item1: {
+                title: "Fiskekurs",
+                description: "Fisking og sånn",
+                pricePerDay: 200,
+                address: "Vannet",
+                userID: 6,
+                categoryNames: null,
+                communityIDs: null
+            },
+
+            item2: {
+                title: "TestFraFrontend",
+                description: "oslo",
+                pricePerDay: 500,
+                address: "oslo",
+                userID: 1,
+                categoryNames: null,
+                communityIDs: null
+            },
+        };
+
+        axios.get.mockImplementation(() =>
+            Promise.resolve({ data: expectedResponse })
+        );
+
+        const communityItemResponse = await GetListingsInCommunity(4040);
+        expect(communityItemResponse).toBe(expectedResponse);
+    })
+});