diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index d3d57765c969b47818e6833cfd45abf96b004ae7..8004946f513cee97738fbd7b432d5651dd7e117c 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,17 +1,12 @@
<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
diff --git a/src/components/CommunityComponents/ItemCard.vue b/src/components/CommunityComponents/ItemCard.vue
index 8aa8f1c9b37fc30a4c1630837d4b25345b540ccb..4f4b52526a96f32d29ed839245254a5c12228f1e 100644
--- a/src/components/CommunityComponents/ItemCard.vue
+++ b/src/components/CommunityComponents/ItemCard.vue
@@ -1,6 +1,6 @@
<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>
diff --git a/src/components/NavigationComponents/NavBar.vue b/src/components/NavigationComponents/NavBar.vue
index c440c3555f76aae08a30cb70d29002fdf3bf718a..a14c390128eea359968f895e823ecc620be36645 100644
--- a/src/components/NavigationComponents/NavBar.vue
+++ b/src/components/NavigationComponents/NavBar.vue
@@ -1,6 +1,6 @@
<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
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index b3aa02de8b647da5780bc6bafdcf542ecc59a784..c45384cb725f515cb30f17e0104a0b3a02ab9972 100644
--- a/src/utils/apiutil.js
+++ b/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);
+ });
}
diff --git a/tests/unit/apiutil-communityHome-mock.spec.js b/tests/unit/apiutil-communityHome-mock.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ab75d6469cf79e31546054eebae45ce5976284d
--- /dev/null
+++ b/tests/unit/apiutil-communityHome-mock.spec.js
@@ -0,0 +1,55 @@
+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);
+ });
+});