Merge branch 'main' into community-popup

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">{{ community.name }}</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 +29,11 @@
       />
     </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,13 +42,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 = [];
@@ -70,7 +71,6 @@ export default {
       this.isLoggedIn = true;
     }
   },
-
   data() {
     return {
       items: [],
@@ -90,7 +90,6 @@ export default {
       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

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')"
@@ -11,7 +11,9 @@
           {{ item.address }}
         </p>
         <p class="font-bold text-sm" id="title">{{ item.title }}</p>
-        <p class="text-gray-700 text-xs" id="price">{{ item.pricePerDay }} kr</p>
+        <p class="text-gray-700 text-xs" id="price">
+          {{ item.pricePerDay }} kr
+        </p>
       </div>
     </div>
   </div>

src/components/NavigationComponents/NavBar.vue

 <template>
   <nav
-    class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid"
+    class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
   >
     <div class="logo">
       <img

src/utils/apiutil.js

@@ -149,27 +149,27 @@ export function getVisibleGroups() {
 }
 
 export async function GetCommunity(communityID) {
-    return axios
-        .get(API_URL + "community/" + communityID, {
-            headers: tokenHeader(),
-        })
-        .then((response) => {
-            return response.data;
-        })
-        .catch((error) => {
-            console.error(error);
-        });
+  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);
-        });
+  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);
+  });
+});