From ec291b912e44336c6f8dcc4b5458b9cf074e2c28 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Mon, 17 Jun 2024 15:20:56 -0700
Subject: [PATCH] add some change to avoid referencing empty last message

---
 frontend/src/headers/HeaderUser.vue           |  14 +-
 .../src/pages/user/account/UserProfile.vue    | 199 ++++++++++++------
 frontend/src/pages/user/messages/Home.vue     |   8 +-
 3 files changed, 144 insertions(+), 77 deletions(-)

diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index ff3a804..fc61e04 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -42,11 +42,19 @@
           Post
         </button>
         <div class="form-check form-switch header-switch-container">
-          <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled>
+          <input
+            class="form-check-input"
+            type="checkbox"
+            role="switch"
+            id="personal-earning-now-checkbox"
+            disabled
+          />
           <label class="form-check-label" for="personal-earning-now-checkbox">
             <span>Providing service</span>
           </label>
-          <div class="header-switch-desc">Please go to profile page to add money receiving method</div>
+          <div class="header-switch-desc">
+            Please go to profile page to add money receiving method
+          </div>
         </div>
       </div>
       <div class="profile-container">
@@ -230,7 +238,7 @@ export default {
     left: 0;
     bottom: -20px;
     font-size: 12px;
-    color: #3D455F;
+    color: #3d455f;
     white-space: nowrap;
     padding: 2px 5px;
   }
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index b93c4c6..8df333b 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -265,7 +265,9 @@
                 id="personal-photo-operation-image"
                 src="@/assets/profile.png"
               />
-              <label class="profile-item-label" for="personal-photo-operation-image">Portrait</label>
+              <label class="profile-item-label" for="personal-photo-operation-image"
+                >Portrait</label
+              >
             </div>
           </button>
           <button
@@ -373,9 +375,18 @@
       >
         <div class="collapse-item-container">
           <div class="collapse-item-editor">
-            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html" :disabled="!personalOperation.self_intro.is_editing" />
+            <freeleaps-editor
+              v-model:content="personalOperation.self_intro.content_html"
+              :disabled="!personalOperation.self_intro.is_editing"
+            />
             <div class="btn-group-container">
-              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link" @click="personalOperation.self_intro.is_editing = true">Edit</button>
+              <button
+                v-if="!personalOperation.self_intro.is_editing"
+                class="btn btn-link"
+                @click="personalOperation.self_intro.is_editing = true"
+              >
+                Edit
+              </button>
               <button
                 v-if="personalOperation.self_intro.is_editing"
                 class="btn btn-link"
@@ -386,8 +397,18 @@
               >
                 Templates
               </button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button>
-              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link">
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="updateSelfIntro()"
+                class="btn btn-link"
+              >
+                Update
+              </button>
+              <button
+                v-if="personalOperation.self_intro.is_editing"
+                @click="stopEdittingSelfintro($event)"
+                class="btn btn-link"
+              >
                 Cancel
               </button>
             </div>
@@ -402,10 +423,20 @@
       >
         <div class="collapse-checkbox-container">
           <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)" :disabled="!paymentOperation.ready_to_receive_money">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+              id="personal-earning-now-checkbox"
+              v-model="personalOperation.accepting_request"
+              @click="updateAcceptingRequest($event)"
+              :disabled="!paymentOperation.ready_to_receive_money"
+            />
             <label class="form-check-label" for="personal-earning-now-checkbox">
               <span>I want to be a service provider and earn money</span>
-              <span v-if="personalOperation.show_stripe_status" style="color: red">* Stripe account onboarding is not completed.</span>
+              <span v-if="personalOperation.show_stripe_status" style="color: red"
+                >* Stripe account onboarding is not completed.</span
+              >
             </label>
           </div>
           <div class="flex-1" />
@@ -427,14 +458,24 @@
           </div>
         </div>
         <div class="collapse-item-container">
-          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
+          <label
+            v-if="Is_Wechat_QR_Code_Payment()"
+            class="collapse-item-uploader"
+            for="qr-uploader"
+          >
             <img
               v-if="paymentOperation.wechat_qr_code_img.data"
               class="uploader-img-show"
               :src="paymentOperation.wechat_qr_code_img.data"
             />
-            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn" src="@/assets/images/qr-code.png" />
-            <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">Upload QR code to receive payment</span>
+            <img
+              v-if="!paymentOperation.wechat_qr_code_img.data"
+              class="uploader-img-btn"
+              src="@/assets/images/qr-code.png"
+            />
+            <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn"
+              >Upload QR code to receive payment</span
+            >
           </label>
           <input
             v-if="Is_Wechat_QR_Code_Payment()"
@@ -447,10 +488,14 @@
           />
         </div>
         <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
-          <span>Have you linked your strip account?</span><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
+          <span>Have you linked your strip account?</span
+          ><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
         </div>
         <div v-if="personalOperation.accepting_request" class="collapse-item-container">
-          <span>You are a service provider now. Please review your self-intro to reflect your skills to deliver projects.</span>
+          <span
+            >You are a service provider now. Please review your self-intro to reflect your skills to
+            deliver projects.</span
+          >
         </div>
       </div>
     </div>
@@ -597,7 +642,10 @@
               <div class="panel-table-content">
                 <span class="panel-table-label">Delivering time</span>
                 <span class="panel-table-span">
-                  {{ userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day }} days
+                  {{
+                    userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
+                  }}
+                  days
                 </span>
               </div>
             </td>
@@ -1229,7 +1277,7 @@ export default {
   padding: 12px;
   // overflow: hidden;
   border-radius: 12px;
-  box-shadow: 0px 0px 24px 0px #D4D3E380;
+  box-shadow: 0px 0px 24px 0px #d4d3e380;
   background-color: white;
   margin-bottom: 20px;
 
@@ -1247,7 +1295,7 @@ export default {
 
     .panel-item-container {
       width: calc(25% - 9px);
-      border: 1px dashed #1748F8;
+      border: 1px dashed #1748f8;
       background-color: white;
       padding: 0 12px;
       height: 46px;
@@ -1258,13 +1306,13 @@ export default {
       outline: none;
 
       &:hover {
-        background-color: #F3F6FF;
+        background-color: #f3f6ff;
       }
       // &.active {
       //   background-color: #F3F6FF;
       // }
-      &[aria-expanded=true] {
-        background-color: #F3F6FF;
+      &[aria-expanded='true'] {
+        background-color: #f3f6ff;
       }
 
       .profile-item-container {
@@ -1291,13 +1339,22 @@ export default {
           color: #666666;
           line-height: 1;
         }
-        .profile-item-span {font-size: 14px; font-weight: bold; color: #242424; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; line-height: 1}
+        .profile-item-span {
+          font-size: 14px;
+          font-weight: bold;
+          color: #242424;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: block;
+          line-height: 1;
+        }
       }
     }
   }
   .collapse-content-container {
     margin: 12px -12px -12px -12px;
-    border-top: 1px solid #E7E8EB;
+    border-top: 1px solid #e7e8eb;
 
     .collapse-item-container {
       padding: 32px;
@@ -1314,7 +1371,7 @@ export default {
         width: 100%;
         position: relative;
 
-        .btn-group-container{
+        .btn-group-container {
           position: absolute;
           right: 32px;
           top: 10px;
@@ -1323,55 +1380,55 @@ export default {
     }
 
     .collapse-item-input {
-        height: 37px;
-        width: 350px;
-        border: 1px solid #E1E1E1;
-        border-radius: 3px;
-        margin: 0 8px;
-        box-shadow: none;
-        padding: 0 8px;
-        display: flex;
-        align-items: center;
-        position: relative;
-        
-        &:focus-within {
-          border: 1px solid #1748F8;
-        }
+      height: 37px;
+      width: 350px;
+      border: 1px solid #e1e1e1;
+      border-radius: 3px;
+      margin: 0 8px;
+      box-shadow: none;
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      position: relative;
 
-        input {
-          flex: 1;
-          height: 100%;
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }
-
-        .error-message {
-          color: #916AD4;
-          font-size: 16px;
-          position: absolute;
-          left: 0;
-          bottom: -26px;
-          margin: 0;
-        }
-
-        .enter-icon {
-          width: 13px;
-          height: 13px;
-          margin-left: 12px;
-          background-color: #E7E9ED;
-          border-radius: 3px;
-          padding: 2px;
-        }
-
-        .collapse-item-currency {
-          font-size: 14px;
-          font-weight: bold;
-          color: #0D1637;
-          margin-left: 12px;
-        }
+      &:focus-within {
+        border: 1px solid #1748f8;
       }
 
+      input {
+        flex: 1;
+        height: 100%;
+        border: none;
+        outline: none;
+        box-shadow: none;
+      }
+
+      .error-message {
+        color: #916ad4;
+        font-size: 16px;
+        position: absolute;
+        left: 0;
+        bottom: -26px;
+        margin: 0;
+      }
+
+      .enter-icon {
+        width: 13px;
+        height: 13px;
+        margin-left: 12px;
+        background-color: #e7e9ed;
+        border-radius: 3px;
+        padding: 2px;
+      }
+
+      .collapse-item-currency {
+        font-size: 14px;
+        font-weight: bold;
+        color: #0d1637;
+        margin-left: 12px;
+      }
+    }
+
     .collapse-item-uploader {
       width: 150px;
       height: 150px;
@@ -1382,7 +1439,9 @@ export default {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      &:hover {opacity: .78;}
+      &:hover {
+        opacity: 0.78;
+      }
 
       .uploader-img-btn {
         width: 50px;
@@ -1405,13 +1464,13 @@ export default {
       padding: 12px;
       display: flex;
       align-items: center;
-      border-bottom: 1px solid #E7E8EB
+      border-bottom: 1px solid #e7e8eb;
     }
   }
 
   .panel-table-container {
     border: 0;
-	  border-collapse: collapse;
+    border-collapse: collapse;
     width: 100%;
 
     .panel-table-content {
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 23cee8f..a322ece 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -8,8 +8,8 @@
           class="conversation-container"
           :class="{
             selected:
-              current_thread?.conversation?.information?.conversation_id ===
-              conversation.summary.last_message.conversation_id
+              current_thread?.conversation?.information?.id ===
+              conversation.summary.last_message?.conversation_id
           }"
           @click="selectConversation(conversation)"
         >
@@ -21,11 +21,11 @@
                 {{ conversation.summary.contact.last_name }}
               </span>
               <span class="conversation-last-update-date">{{
-                getDateFromFulltimeString(conversation.summary.last_message.create_time)
+                getDateFromFulltimeString(conversation.summary.last_message?.create_time)
               }}</span>
             </div>
             <div class="conversation-summary-highlight-container">
-              {{ conversation.summary.last_message.message_body }}
+              {{ conversation.summary.last_message?.message_body }}
             </div>
           </div>
         </div>