refactor(backend): throw exception instead of returning null

src/components/FeedItemMenu.vue

@@ -86,12 +86,13 @@ export default {
           body: this.$t('components.tipRecords.TipRecord.claimBodySuccess'),
         });
         this.resolve();
-      } catch (e) {
+      } catch (error) {
         await this.$store.dispatch('modals/open', {
           name: 'failure',
           title: this.$t('components.tipRecords.TipRecord.claimTitle'),
           body: this.$t('components.tipRecords.TipRecord.claimBodyFailure'),
         });
+        console.error(error);
       }
     },
     async pinOrUnPinTip() {

src/components/SendComment.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script>
-import { handleUnknownError } from '../utils';
 import MessageInput from './MessageInput.vue';
 
 export default {
@@ -43,8 +42,8 @@ export default {
           { text: this.comment, tipId: this.tipId, parentId: this.parentId },
         );
         this.comment = '';
-      } catch (e) {
-        if (e.message !== 'Operation rejected by user') handleUnknownError(e);
+      } catch (error) {
+        if (error.message !== 'Operation rejected by user') throw error;
       } finally {
         this.loading = false;
       }

src/components/TipInputPopup.vue

@@ -130,7 +130,7 @@ export default {
         this.resolve(true);
       } catch (error) {
         this.error = true;
-        throw error;
+        console.error(error);
       } finally {
         this.showLoading = false;
       }

src/components/UserInfo.vue

@@ -1,18 +1,26 @@
 <template>
-  <div class="user-info">
+  <Spinner
+    v-if="!profile"
+    class="user-info"
+  />
+  <div
+    v-else
+    class="user-info"
+  >
     <div
       class="profile-section"
-      :style="{ '--cover-image': 'url(' + BACKEND_URL + profile.coverImage + ')' }"
+      :style="profile.coverImage
+        ? { '--cover-image': 'url(' + BACKEND_URL + profile.coverImage + ')' } : {}"
     >
       <div
         class="profile-header"
-        :class="{ 'profile-editable': backendAuth && currentAddress === address }"
+        :class="{ 'profile-editable': backendAuth && isOwn }"
       >
         <ClientOnly>
           <div class="profile-image">
             <Avatar :address="address" />
             <TipInput
-              v-if="currentAddress !== address"
+              v-if="!isOwn"
               :user-address="address"
               class="profile-button avatar-button"
             />
@@ -46,7 +54,7 @@
             :href="explorerTransactionsUrl"
           >
             <div class="chain">
-              {{ userChainName ? userChainName : $t('FellowSuperhero') }}
+              {{ profile.preferredChainName || $t('FellowSuperhero') }}
             </div>
             <div class="text-ellipsis">{{ address }}</div>
           </a>
@@ -62,7 +70,7 @@
             <ClientOnly>
               <div class="location">
                 <img
-                  v-if="profile.location.length || currentAddress === address"
+                  v-if="profile.location.length || isOwn"
                   src="../assets/location.svg"
                 >
                 <input
@@ -72,17 +80,13 @@
                   type="text"
                   :placeholder="$t('views.UserProfileView.LocationPlaceholder')"
                 >
-                <span v-if="!editMode && (profile.location.length || currentAddress === address)">
-                  {{
-                    profile.location.length
-                      ? profile.location
-                      : $t('views.UserProfileView.Location')
-                  }}
+                <span v-if="!editMode && (profile.location || isOwn)">
+                  {{ profile.location || $t('views.UserProfileView.Location') }}
                 </span>
               </div>
             </ClientOnly>
             <div
-              v-if="userStats && hasCreationDate"
+              v-if="profile.createdAt"
               class="joined"
             >
               <span>{{ $t('views.UserProfileView.Joined') }}</span>
@@ -92,7 +96,7 @@
         </div>
         <ClientOnly>
           <div
-            v-if="backendAuth && currentAddress === address"
+            v-if="backendAuth && isOwn"
             class="edit-buttons"
           >
             <label
@@ -185,7 +189,10 @@
         </div>
       </div>
     </div>
-    <div class="profile-stats">
+    <div
+      v-if="userStats"
+      class="profile-stats"
+    >
       <div
         v-for="(divClass, index) in ['tip_stats', 'stats']"
         :key="index"
@@ -221,6 +228,7 @@
 import { mapState, mapActions } from 'vuex';
 import ClientOnly from 'vue-client-only';
 import Backend from '../utils/backend';
+import Spinner from './Loader.vue';
 import AeAmountFiat from './AeAmountFiat.vue';
 import Avatar from './Avatar.vue';
 import { EventBus } from '../utils/eventBus';
@@ -233,6 +241,7 @@ import IconCancel from '../assets/iconCancel.svg?icon-component';
 export default {
   components: {
     ClientOnly,
+    Spinner,
     AeAmountFiat,
     Avatar,
     TipInput,
@@ -247,41 +256,25 @@ export default {
   data() {
     return {
       maxLength: 250,
-      userStats: {
-        tipsLength: '-',
-        retipsLength: '-',
-        totalTipAmount: '0',
-        claimedUrlsLength: '-',
-        unclaimedAmount: '0',
-        claimedAmount: '0',
-        userComments: '-',
-      },
+      userStats: null,
       editMode: false,
-      userCommentCount: 0,
-      profile: {
-        biography: '',
-        createdAt: '',
-        location: '',
-        coverImage: '',
-      },
+      profile: null,
       balance: '',
       BACKEND_URL: process.env.VUE_APP_BACKEND_URL,
     };
   },
   computed: {
     ...mapState(['cookiesConsent', 'chainNames']),
     ...mapState('aeternity', ['sdk']),
-    ...mapState({ currentAddress: 'address' }),
-    userChainName() {
-      return this.profile.preferredChainName;
-    },
-    hasCreationDate() {
-      return this.profile.createdAt.length > 0;
-    },
+    ...mapState({
+      isOwn({ address }) {
+        return this.address === address;
+      },
+    }),
     joinedAtISO() {
       try {
         return new Date(this.profile.createdAt).toISOString();
-      } catch (e) {
+      } catch {
         return '';
       }
     },
@@ -293,36 +286,33 @@ export default {
             month: 'long',
             day: 'numeric',
           });
-      } catch (e) {
+      } catch {
         return '';
       }
     },
     countLength() {
       return `${this.profile.biography.length}/${this.maxLength}`;
     },
     tipStats() {
-      return [
-        {
-          value: this.userStats.totalTipsLength,
-          title: this.$t('views.UserProfileView.TipsSent'),
-          amount: this.userStats.totalAmount,
-        },
-        {
-          value: this.userStats.urlStats?.totaltipslength,
-          title: this.$t('views.UserProfileView.TipsReceived'),
-          amount: this.userStats.urlStats?.totalAmount,
-        },
-      ];
+      return [{
+        value: this.userStats.totalTipsLength ?? 0,
+        title: this.$t('views.UserProfileView.TipsSent'),
+        amount: this.userStats.totalamount ?? '0',
+      }, {
+        value: this.userStats.urlStats.totalTipsLength,
+        title: this.$t('views.UserProfileView.TipsReceived'),
+        amount: this.userStats.urlStats.totalAmount,
+      }];
     },
     showedStats() {
-      return [
-        { value: this.userStats.commentCount, title: this.$t('views.UserProfileView.Comments') },
-        {
-          value: this.userStats.claimedUrlsLength,
-          image: SuccessIcon,
-          title: this.$t('views.UserProfileView.ClaimedUrls'),
-        },
-      ];
+      return [{
+        value: this.userStats.commentCount,
+        title: this.$t('views.UserProfileView.Comments'),
+      }, {
+        value: this.userStats.claimedUrlsLength,
+        image: SuccessIcon,
+        title: this.$t('views.UserProfileView.ClaimedUrls'),
+      }];
     },
     explorerTransactionsUrl() {
       return `${process.env.VUE_APP_EXPLORER_URL}/account/transactions/${this.address}`;
@@ -334,10 +324,8 @@ export default {
   mounted() {
     this.$watch(
       () => this.address,
-      () => {
-        this.reloadData();
-        this.reloadBalance();
-      },
+      () => this.reloadData(),
+      { immediate: true },
     );
     this.reloadBalance();
 
@@ -350,13 +338,9 @@ export default {
   },
   methods: {
     ...mapActions('backend', ['setCookies']),
-    async reloadBalance() {
-      await this.$watchUntilTruly(() => this.sdk);
-      this.balance = await this.sdk.balance(this.address).catch(() => 0);
-    },
     async resetEditedValues() {
       this.editMode = false;
-      await this.getProfile();
+      await this.reloadProfile();
     },
     async saveProfile() {
       await this.backendAuth('sendProfileData', {
@@ -376,24 +360,24 @@ export default {
       await this.resetEditedValues();
     },
     async reloadData() {
-      this.getProfile();
-      await Backend.getSenderStats(this.address).then((stats) => {
-        this.userStats = stats;
-      });
+      await Promise.all([
+        this.reloadProfile(),
+        Backend.getSenderStats(this.address).then((stats) => {
+          this.userStats = stats;
+        }),
+        (async () => {
+          await this.$watchUntilTruly(() => this.sdk);
+          this.balance = await this.sdk.balance(this.address).catch((error) => {
+            if (error.status !== 404) throw error;
+            return 0;
+          });
+        })(),
+      ]);
     },
-    async getProfile() {
-      await Backend.getProfile(this.address)
-        .then((profile) => {
-          if (!profile) {
-            return;
-          }
-          this.profile = profile;
-          this.profile.location = this.profile.location || '';
-          this.profile.biography = this.profile.biography || '';
-          this.profile.coverImage = this.profile.coverImage || '';
-          this.$store.commit('setUserProfile', profile);
-        })
-        .catch(console.error);
+    async reloadProfile() {
+      this.profile = await Backend.getProfile(this.address);
+      this.profile.biography = this.profile.biography || '';
+      if (this.isOwn) this.$store.commit('setUserProfile', this.profile);
     },
   },
 };
@@ -633,8 +617,7 @@ input[type="file"] {
 .profile-section {
   background:
     linear-gradient(rgba($light_color, 0.8), rgba($light_color, 0.8)),
-    var(--cover-image),
-    $light_color;
+    var(--cover-image, $light_color);
   background-size: cover;
   background-position: center;
   position: relative;

src/components/layout/sendTip/GiphySearch.vue

@@ -38,6 +38,7 @@
 </template>
 
 <script>
+import { fetchJson } from '../../../utils';
 import Loading from '../../Loading.vue';
 import SearchInput from '../SearchInput.vue';
 
@@ -68,8 +69,12 @@ export default {
     },
     async search() {
       try {
-        const results = await fetch(`https://api.giphy.com/v1/gifs/${this.query ? `search?q=${this.query}&` : 'trending?'}api_key=${process.env.VUE_APP_GIPHY_API_KEY}&limit=10&offset=${this.offset}`);
-        const { data, pagination } = await results.json();
+        const url = new URL(`https://api.giphy.com/v1/gifs/${this.query ? 'search' : 'trending'}`);
+        if (this.query) url.searchParams.set('q', this.query);
+        url.searchParams.set('limit', 10);
+        url.searchParams.set('offset', this.offset);
+        url.searchParams.set('api_key', process.env.VUE_APP_GIPHY_API_KEY);
+        const { data, pagination } = await fetchJson(url);
         this.resultsCount = `${pagination.total_count.toLocaleString()} Results`;
         this.results.push(...data.map(({ images }) => ({
           still: images.fixed_width_still.url,

src/components/layout/sendTip/SendPost.vue

@@ -60,6 +60,7 @@
 
 <script>
 import { mapState } from 'vuex';
+import { fetchJson } from '../../../utils';
 import { EventBus } from '../../../utils/eventBus';
 import Backend from '../../../utils/backend';
 import MessageInput from '../../MessageInput.vue';
@@ -149,14 +150,13 @@ export default {
       const formData = new FormData();
       formData.append('image', event.target.files[0]);
       try {
-        const result = await fetch('https://api.imgur.com/3/image.json', {
+        const { data } = await fetchJson('https://api.imgur.com/3/image.json', {
           method: 'post',
           body: formData,
           headers: {
             Authorization: `Client-ID ${process.env.VUE_APP_IMGUR_API_CLIENT_ID}`,
           },
         });
-        const { data } = await result.json();
         this.media.push({ link: data.link, deletehash: data.deletehash });
       } finally { this.uploadingMedia = false; }
     },