Added correct image display to rental message

src/components/ChatComponents/ChatMessage.vue

@@ -58,18 +58,18 @@ export default {
     calculateTime() {
       var time = this?.message.timestamp;
       var date = new Date(time);
-    
+
       var mmOfMessage = String(date.getMinutes());
       var hhOfMessage = String(date.getHours());
-      if(mmOfMessage <= 9){
+      if (mmOfMessage <= 9) {
         mmOfMessage = "0" + mmOfMessage;
       }
-      if(hhOfMessage<=9){
+      if (hhOfMessage <= 9) {
         hhOfMessage = "0" + hhOfMessage;
       }
       var ddOfMessage = String(date.getDate()).padStart(2, "0");
       var dayOfMessage = date.toLocaleString("default", { weekday: "short" });
-      var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0"); 
+      var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0");
       const shortMonthOfMessage = date.toLocaleString("default", {
         month: "short",
       });
@@ -77,7 +77,7 @@ export default {
 
       var today = new Date();
       var dd = String(today.getDate()).padStart(2, "0");
-      var mm = String(today.getMonth() + 1).padStart(2, "0"); 
+      var mm = String(today.getMonth() + 1).padStart(2, "0");
       var yyyy = today.getFullYear();
       if (ddOfMessage == dd) {
         return "" + hhOfMessage + ":" + mmOfMessage + "";

src/components/ChatComponents/RentalMessage.vue

@@ -60,13 +60,16 @@ export default {
   },
   data() {
     return {
-      image: "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80",
+      image: null,
     }
   },
   computed: {
     userID() {
       return parseCurrentUser().accountId;
     },
+    img() {
+      return "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80"; //this.rent.listing.imageUrl;
+    },
     from() {
       // take ms and turn into date and return date
       return new Date(this.rent.fromTime).toLocaleDateString();
@@ -105,13 +108,14 @@ export default {
       );
     },
     async getImage() {
-      console.log(this.rent);
       let images = await getItemPictures(this.rent.listingId);
-      console.log(images);
 
-       if (images.length > 0) {
-         this.image = images[0].picture;
-       }
+      if (images.length > 0) {
+        this.image = images[0].picture;
+      } else {
+        this.image = "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80";
+
+      }
     },
   },
   async beforeMount() {

src/components/UserProfileComponents/UserProfile.vue

@@ -98,7 +98,11 @@
         <rating-component :rating="ownerRating" :ratingType="'Utleier'" />
       </div>
 
-      <div v-show="!isCurrentUser" @click="$router.push('/messages?userID=' + id)" class="flex mt-4 space-x-3 lg:mt-6">
+      <div
+        v-show="!isCurrentUser"
+        @click="$router.push('/messages?userID=' + id)"
+        class="flex mt-4 space-x-3 lg:mt-6"
+      >
         <a
           href="#"
           class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"

tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js

@@ -13,6 +13,16 @@ jest.mock("@/utils/token-utils", () => {
   };
 });
 
+jest.mock("@/utils/apiutil", () => {
+  return {
+    getItemPictures: () => {
+      return new Promise((resolve) => {
+        resolve([]);
+      });
+    },
+  };
+});
+
 jest.mock("axios");
 
 describe("RentalMessage.vue", () => {