Merge master

Freegle · Jan 24, 2020 · 36877df · 36877df
2 parents cd0d65a + 9833ff0
commit 36877df
Show file tree

Hide file tree

Showing 33 changed files with 609 additions and 247 deletions.
diff --git a/api/BaseAPI.js b/api/BaseAPI.js
@@ -85,7 +85,7 @@ export default class BaseAPI {
     // - POSTs to session can return errors we want to handle.
     // - 999 can happen if people double-click, and we should just quietly drop it because the first click will
     //   probably do the right thing.
-    // - otherwise pop up an error.
+    // - otherwise throw an exception.
     if (
       status !== 200 ||
       !data ||
@@ -97,7 +97,14 @@ export default class BaseAPI {
       const retstr = data && data.ret ? data.ret : 'Unknown'
       const statusstr = data && data.status ? data.status : 'Unknown'
 
-      if (logError) {
+      // Whether or not we log this error to Sentry depends.  Most errors are worth logging, because they're unexpected.
+      // But some API calls are expected to fail, and throw an exception which is then handled in the code.  We don't
+      // want to log those, otherwise we will spend time investigating them in Sentry.  So we have a parameter which
+      // indicates whether we want to log this to Sentry - which can be a boolean or a function for more complex
+      // decisions.
+      const log = typeof logError === 'function' ? logError(data) : logError
+
+      if (log) {
         Sentry.captureException(
           'API request failed ' +
             path +

diff --git a/api/ChatAPI.js b/api/ChatAPI.js
@@ -40,4 +40,8 @@ export default class ChatAPI extends BaseAPI {
   blockChat(chatid) {
     return this.$post('/chatrooms', { id: chatid, status: 'Blocked' })
   }
+
+  unseenCount(chatid) {
+    return this.$get('/chatrooms', { count: true })
+  }
 }
diff --git a/api/GroupAPI.js b/api/GroupAPI.js
@@ -6,8 +6,8 @@ export default class GroupAPI extends BaseAPI {
     return groups
   }
 
-  async fetch(id) {
-    const { group } = await this.$get('/group', { id })
+  async fetch(id, log) {
+    const { group } = await this.$get('/group', { id }, log)
     return group
   }
 }
diff --git a/components/ChatButton.vue b/components/ChatButton.vue
@@ -59,15 +59,17 @@ export default {
       this.openChat(null, null, null, popup)
     },
 
-    async openChat(event, firstmessage, firstmsgid, popup) {
+    async openChat(event, firstmessage, firstmsgid, popup, route = true) {
       this.$emit('click')
       console.log(
         'Open chat',
         firstmessage,
         firstmsgid,
         this.groupid,
-        this.userid
+        this.userid,
+        popup
       )
+      console.trace()
 
       if (this.groupid > 0) {
         // Open a chat to the mods
@@ -103,8 +105,8 @@ export default {
           await this.$store.dispatch('popupchats/popup', {
             id: chatid
           })
-        } else {
-          this.$router.go('/chats/' + chatid)
+        } else if (route) {
+          this.$router.push('/chats/' + chatid)
         }
       }
     }

diff --git a/components/ChatMessageText.vue b/components/ChatMessageText.vue
@@ -2,22 +2,22 @@
   <div>
     <b-row class="pb-1">
       <b-col>
-        <div v-if="chatmessage.userid != $store.state.auth.user.id">
+        <div v-if="chatmessage.userid != $store.state.auth.user.id" class="chatMessageWrapper">
           <div class="chatMessageProfilePic">
             <div>
               <profile-image v-if="othericon" :image="othericon" class="mr-1 mb-1 mt-1 inline" is-thumbnail size="sm" />
             </div>
           </div>
-          <div :class="emessage ? 'media-body chatMessage theirs' : 'media-body'">
+          <div :class="emessage ? 'chatMessage theirs' : ''">
             <span>
               <span v-if="(chatmessage.secondsago < 60) || (chatmessage.id > chat.lastmsgseen)" class="prewrap"><b>{{ emessage }}</b></span>
               <span v-else class="prewrap forcebreak">{{ emessage }}</span>
               <b-img v-if="chatmessage.image" fluid :src="chatmessage.image.path" lazy rounded />
             </span>
           </div>
         </div>
-        <div v-else class="myChatMessage">
-          <div :class="emessage ? 'media-body chatMessage mine' : 'media-body'">
+        <div v-else class="myChatMessage chatMessageWrapper">
+          <div :class="emessage ? 'chatMessage mine' : ''">
             <span>
               <span v-if="(chatmessage.secondsago < 60) || (chatmessage.id > chat.lastmsgseen)" class="prewrap"><b>{{ emessage }}</b></span>
               <span v-else class="prewrap forcebreak">{{ emessage }}</span>
@@ -37,6 +37,9 @@
 
 <style scoped lang="scss">
 @import 'color-vars';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
 
 .chatMessage {
   border: 1px solid $color-gray--light;
@@ -47,15 +50,37 @@
   padding-right: 4px;
   word-wrap: break-word;
   line-height: 1.75;
-  display: inline-block;
+}
+
+.myChatMessage {
+  .chatMessage {
+    margin-left: auto;
+  }
+
+  .chatMessageProfilePic {
+    left: 0;
+  }
 }
 
 .chatMessageProfilePic {
-  display: inline-block;
+  min-width: 25px;
+  position: relative;
+  top: 3px;
+  left: 3px;
+
+  @include media-breakpoint-up(md) {
+    min-width: 35px;
+  }
 }
 
-.myChatMessage {
-  text-align: right;
+.chatMessageWrapper {
+  display: flex;
+  padding-right: 10px;
+
+  &.myChatMessage {
+    padding-left: 10px;
+    padding-right: 0;
+  }
 }
 
 .theirs {

diff --git a/components/ChatPane.vue b/components/ChatPane.vue
@@ -6,7 +6,7 @@
           <b-col v-if="chat">
             <b-row>
               <b-col cols="8" class="p-0 pl-1">
-                <span v-if="(chat.chattype == 'User2User' || chat.chattype == 'User2Mod')" class="d-inline">
+                <span v-if="(chat.chattype == 'User2User' || chat.chattype == 'User2Mod')" class="d-inline clickme">
                   <span @click="showInfo">
                     {{ chat.name }}
                   </span>
@@ -119,7 +119,7 @@
           </b-row>
           <b-row v-if="!spammer" class="bg-white">
             <b-col class="p-0 pt-1 pb-1">
-              <div class="d-none d-xl-block">
+              <div class="d-none d-lg-block">
                 <span v-if="chat && chat.chattype === 'User2User' && otheruser">
                   <b-btn v-b-tooltip.hover.top variant="white" title="Promise an item to this person" @click="promise">
                     <v-icon name="handshake" />&nbsp;Promise
@@ -146,7 +146,7 @@
                   <v-icon name="camera" />
                 </b-btn>
               </div>
-              <div class="d-flex d-xl-none justify-content-between align-middle">
+              <div class="d-flex d-lg-none justify-content-between align-middle">
                 <span v-if="chat && chat.chattype === 'User2User' && otheruser" v-b-tooltip.hover.top title="Promise an item to this person" class="ml-1 mr-2" @click="promise">
                   <v-icon scale="2" name="handshake" />
                 </span>

diff --git a/components/CommunityEventSidebar.vue b/components/CommunityEventSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2">
+  <div>
     <b-card v-if="events.length" variant="white" no-body>
       <b-card-body class="p-0">
         <b-btn variant="white" class="float-right m-1" @click="showEventModal">

diff --git a/components/JobsSidebar.vue b/components/JobsSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="location" class="mt-2">
+  <div v-if="location">
     <NoticeMessage v-if="blocked" variant="warning">
       <h3>Please help keep Freegle running</h3>
       <p>
@@ -26,25 +26,39 @@
         <p class="text-center small">
           Jobs near you.  Freegle gets a small amount if you click.
         </p>
-        <div v-for="job in jobs" :key="'job-' + job.onmousedown" class="">
+        <div v-for="job in visibleJobs" :key="'job-' + job.onmousedown" class="">
           <Job :summary="true" :job="job" />
         </div>
+        <client-only>
+          <infinite-loading key="infinitejobs" @infinite="loadMore">
+            <span slot="no-results">
+              <notice-message v-if="!jobs || !jobs.length">
+                We can't find any jobs at the moment.
+              </notice-message>
+            </span>
+            <span slot="no-more" />
+            <span slot="spinner" />
+          </infinite-loading>
+        </client-only>
       </b-card-body>
     </b-card>
   </div>
 </template>
 <script>
+import InfiniteLoading from 'vue-infinite-loading'
 import Job from './Job'
 const NoticeMessage = () => import('~/components/NoticeMessage')
 
 export default {
   components: {
     Job,
-    NoticeMessage
+    NoticeMessage,
+    InfiniteLoading
   },
   data: function() {
     return {
-      location: null
+      location: null,
+      show: 0
     }
   },
   computed: {
@@ -53,6 +67,15 @@ export default {
     },
     blocked() {
       return this.$store.getters['jobs/blocked']
+    },
+    visibleJobs() {
+      if (process.browser) {
+        // We have an infinite scroll - return as many as we're currently showing.
+        return this.jobs.slice(0, this.show)
+      } else {
+        // SSR - return all for SEO.
+        return this.job
+      }
     }
   },
   mounted() {
@@ -75,6 +98,16 @@ export default {
       }, 1000)
     }
   },
-  methods: {}
+  methods: {
+    loadMore($state) {
+      // We use an infinite load for the list because it's a lot of DOM to add at initial page load.
+      if (this.show < this.jobs.length) {
+        this.show++
+        $state.loaded()
+      } else {
+        $state.complete()
+      }
+    }
+  }
 }
 </script>
diff --git a/components/JobsTopBar.vue b/components/JobsTopBar.vue
@@ -16,7 +16,7 @@
     <div v-else>
       <div class="mb-1 text-center small text-muted">
         Jobs near you.  Freegle gets a small amount if you click, which helps keep us going.  <nuxt-link to="/jobs">
-          See more
+          See more jobs
         </nuxt-link>.
       </div>
       <div v-for="job in jobs" :key="'job-' + job.onmousedown" class="">