Add message popup to experinece and education (#193)

Author: thamudi

components/Message.vue

@@ -2,7 +2,8 @@
   <div
     v-if="state.shown"
     class="flex flex-col justify-start border p-4"
-    :class="props.type">
+    :class="props.type"
+  >
     <div class="flex flex-row justify-between items-center mb-2">
       <img
         class="msg-icon w-5 h-5 bg-contain"
@@ -11,41 +12,42 @@
       <i
         v-if="props.showCloseBtn"
         class="close-icon w-5 h-5 bg-contain"
-        @click="state.shown = false">
+        @click="state.shown = false"
+      >
       </i>
     </div>
     <p class="msg-title font-bold">{{ props.title }}</p>
-    <p class="msg-body"> <slot/> </p>
+    <p class="msg-body"><slot /></p>
   </div>
 </template>
 <script setup>
 const props = defineProps({
   type: { type: String, default: 'info' },
   title: { type: String, default: '' },
-  showCloseBtn: {type: Boolean, default: true}
+  showCloseBtn: { type: Boolean, default: true },
 })
 const state = reactive({
-  shown: true
+  shown: true,
 })
 </script>
 <style scoped>
 .success {
   background-color: rgba(109, 185, 129, 0.1);
-  border-color: #6DB981;
-  color: #6DB981;
+  border-color: #6db981;
+  color: #6db981;
 }
 .error {
   background-color: rgba(242, 111, 84, 0.1);
-  border-color: #F26F54;
-  color: #F26F54;
+  border-color: #f26f54;
+  color: #f26f54;
 }
 .info {
   background-color: rgba(11, 150, 171, 0.1);
-  border-color: #0B96AB;
-  color: #0B96AB;
+  border-color: #0b96ab;
+  color: #0b96ab;
 }
 .close-icon {
-  background-image: url('/assets/icons/message/close.svg');
+  @apply bg-xIcon;
 }
 .close-icon:hover {
   cursor: pointer;

components/member/Banner.vue

@@ -1,5 +1,21 @@
 <template>
   <div id="banner" class="details-container">
+    <Message
+      v-if="state.error && !state.loading"
+      title="Error"
+      type="error"
+      class="mb-4"
+    >
+      Something went wrong!
+    </Message>
+    <Message
+      v-if="state.success && !state.loading"
+      title="Saved"
+      type="success"
+      class="mb-4"
+    >
+      Settings saved successfully.
+    </Message>
     <div class="relative">
       <div class="relative">
         <img
@@ -142,13 +158,16 @@ const state = reactive({
   images: {
     cover: {
       url: props.member.cover_url,
-      uploading: false
+      uploading: false,
     },
     avatar: {
       url: props.member.avatar_url,
-      uploading: false
+      uploading: false,
     },
-  }
+  },
+  loading: false,
+  success: false,
+  error: false,
 })
 
 // placeholder images for when there are no images
@@ -160,6 +179,8 @@ const placeHolderImages = {
 
 // handle uploading of the cover/avatar photo request
 const uploadImage = async (event, imageType) => {
+  state.error = false
+  state.loading = true
   state.images[imageType].uploading = true
   const { files } = await event.target
   const image = new FormData()
@@ -181,11 +202,20 @@ const uploadImage = async (event, imageType) => {
         // the 'last-updated' query is to prevent the browser from
         // using the cached image whenever a new one is available.
         // This is because the name of the images is based on the userId.
-        state.images.cover.url = cover_url ? cover_url + '?last-updated=' + Date.now() : props.member.cover_url
-        state.images.avatar.url = avatar_url ? avatar_url + '?last-updated=' + Date.now() : props.member.avatar_url
+        state.images.cover.url = cover_url
+          ? cover_url + '?last-updated=' + Date.now()
+          : props.member.cover_url
+        state.images.avatar.url = avatar_url
+          ? avatar_url + '?last-updated=' + Date.now()
+          : props.member.avatar_url
         useMember().value[`${imageType}_url`] = state.images[imageType].url
       }
     })
+    .catch((error) => {
+      state.loading = false
+      state.error = true
+      state.success = false
+    })
     .finally(() => {
       updateGeneralInfo()
     })
@@ -205,14 +235,16 @@ const updateGeneralInfo = async (event) => {
     method: 'PATCH',
     body: JSON.stringify(bodyData),
     onResponse({ response }) {
+      state.loading = false
       if (response._data) {
-        console.log(response._data)
-        console.log('updated!')
+        state.error = false
+        state.success = true
       }
       emit('updateMember')
     },
     onResponseError({ response }) {
-      // TODO: handle errors on client side
+      state.error = true
+      state.success = false
       console.log('something went wrong', response._data.message)
     },
   })
@@ -305,15 +337,15 @@ img {
   max-height: 364px;
 }
 .cover:before {
-    @apply w-full;
-    @apply rounded-b-none rounded-lg;
-    height: 20vw;
-    max-height: 364px;
-    content: ' ';
-    display: block;
-    background-image: url(/images/placeholders/729x164.png);
-    background-size: contain;    
-    text-indent: -9999px;
+  @apply w-full;
+  @apply rounded-b-none rounded-lg;
+  height: 20vw;
+  max-height: 364px;
+  content: ' ';
+  display: block;
+  background-image: url(/images/placeholders/729x164.png);
+  background-size: contain;
+  text-indent: -9999px;
 }
 
 .general-info {

components/member/Details.vue

@@ -1,5 +1,21 @@
 <template>
   <div id="member-detail" class="details-container">
+    <Message
+      v-if="state.error && !state.loading"
+      title="Error"
+      type="error"
+      class="mb-4"
+    >
+      Something went wrong!
+    </Message>
+    <Message
+      v-if="state.success && !state.loading"
+      title="Saved"
+      type="success"
+      class="mb-4"
+    >
+      Settings saved successfully.
+    </Message>
     <div class="flex justify-between w-full">
       <h3 class="heading">About</h3>
       <div v-if="memberAuth" class="flex gap-x-4 items-center">
@@ -73,6 +89,9 @@ const state = reactive({
     memberAbout: props.member.about,
   },
   settings: props.settings,
+  loading: false,
+  success: false,
+  error: false,
 })
 
 const formatDate = (date) => {
@@ -86,6 +105,10 @@ const formatDate = (date) => {
 
 // handle updating the users general info
 const updateMemberDetailsInfo = async (event) => {
+  state.loading = true
+  state.error = false
+  state.success = false
+
   const bodyData = {
     about: state.form.memberAbout,
   }
@@ -94,14 +117,19 @@ const updateMemberDetailsInfo = async (event) => {
     method: 'PATCH',
     body: JSON.stringify(bodyData),
     onResponse({ response }) {
-      if (response._data.success) {
+      state.loading = false
+      if (response.ok) {
         console.log(response._data)
-        console.log('updated!')
+        state.success = true
+        state.error = false
+
+        console.log(state.success)
       }
       emit('updateMember')
     },
     onResponseError({ response }) {
-      // TODO: handle errors on client side
+      state.error = true
+      state.success = false
       console.log('something went wrong', response._data.message)
     },
   })