Merge branch 'production' into app

api/BaseAPI.js

@@ -4,7 +4,7 @@ import { useAuthStore } from '~/stores/auth'
 import { useMobileStore } from '~/stores/mobile'
 import { useMiscStore } from '~/stores/misc'
 
-let timer = 0
+// let timer = 0
 
 // We add fetch retrying.
 // Note that $fetch and useFetch cause problems on Node v18, so we don't use them.
@@ -270,11 +270,11 @@ export default class BaseAPI {
   }
 
   async $requestv2(method, path, config, logError = true, body = null) {
-    timer++
-    const timerLabel = path + ' api-' + timer
+    // timer++
+    // const timerLabel = path + ' api-' + timer
 
-    console.log('Start ', timerLabel)
-    console.time(timerLabel)
+    // console.log('Start ', timerLabel)
+    // console.time(timerLabel)
 
     let status = null
     let data = null
@@ -404,7 +404,7 @@ export default class BaseAPI {
       )
     }
 
-    console.timeEnd(timerLabel)
+    // console.timeEnd(timerLabel)
 
     return data
   }

api/ChatAPI.js

@@ -5,12 +5,13 @@ export default class ChatAPI extends BaseAPI {
     return this.$getv2(`/chat/${chatid}/message`)
   }
 
-  async listChats(since, search, logError) {
+  async listChats(since, search, logError, empty) {
     return await this.$getv2(
       '/chat',
       {
         since,
         search,
+        empty,
       },
       logError
     )

components/AdaptiveMap.vue

@@ -132,24 +132,30 @@
             </b-input-group>
           </div>
         </div>
-        <div
-          v-if="
+        <NoticeMessage v-if="noneFound">
+          <p>
+            Sorry, we didn't find anything. Things come and go quickly, though,
+            so you could try later. Or you could:
+          </p>
+          <GiveAsk class="bg-info" />
+        </NoticeMessage>
+        <NoticeMessage
+          v-else-if="
             mapVisible && !postsVisible && messagesOnMap && messagesOnMap.length
           "
-          class="d-flex justify-content-center mt-1 mb-1"
+          variant="info"
         >
-          <NoticeMessage variant="info">
-            <v-icon icon="angle-double-down" class="pulsate" />
-            Scroll down to see
-            <span v-if="searchOn"
-              >results for "<strong>{{ searchOn }}</strong
-              >"</span
-            ><span v-else>the posts</span>.
-            <v-icon icon="angle-double-down" class="pulsate" />
-          </NoticeMessage>
-        </div>
+          <v-icon icon="angle-double-down" class="pulsate" />
+          Scroll down to see
+          <span v-if="searchOn"
+            >results for "<strong>{{ searchOn }}</strong
+            >"</span
+          ><span v-else>the posts</span>.
+          <v-icon icon="angle-double-down" class="pulsate" />
+        </NoticeMessage>
         <MessageList
           v-model:visible="postsVisible"
+          v-model:none="noneFound"
           :selected-group="selectedGroup"
           :selected-type="selectedType"
           :messages-for-list="filteredMessages"
@@ -390,6 +396,7 @@ export default {
       ],
       selectedGroup: 0,
       context: null,
+      none: false,
     }
   },
   computed: {

components/ChatHeader.vue

@@ -4,16 +4,17 @@
       v-if="chat && (chat.chattype !== 'User2User' || otheruser?.info)"
       class="outer position-relative"
     >
-      <div class="nameinfo pt-1 pb-1 pl-1" @click="showInfo">
+      <div class="nameinfo pt-1 pb-1 pl-1">
         <ProfileImage
           v-if="chat.icon"
           :image="chat.icon"
-          class="pr-1 profile"
+          class="pr-1 profile clickme"
           is-thumbnail
           size="xl"
           border
+          @click="showInfo"
         />
-        <div class="font-weight-bold black text--large name pl-1">
+        <div class="name font-weight-bold black text--large pl-1">
           {{ chat.name }}
         </div>
         <div
@@ -45,6 +46,7 @@
               <strong class="ml-1">{{ replytime }}</strong
               >.
             </div>
+            <br class="d-block d-md-none" />
             <div v-if="milesaway" class="d-inline d-md-block">
               About <strong>{{ milesstring }}</strong
               >.
@@ -387,13 +389,16 @@ export default {
   }
 
   .userinfo {
-    grid-column: 2 / 4;
+    grid-column: 1 / 4;
     grid-row: 2 / 3;
     color: $colour-info-fg;
+    padding-top: 0.5rem;
 
     @include media-breakpoint-up(md) {
       grid-row: 1 / 2;
+      grid-column: 2 / 4;
       padding-top: 2rem;
+      padding-left: 0.25rem;
     }
   }
 }

components/ChatListEntry.vue

@@ -18,7 +18,10 @@
           <SupporterInfo v-if="chat.supporter" class="mr-3 mb-1 small" />
         </div>
         <div class="small text-muted" :title="dateFormatted">
-          {{ timeago(chat.lastdate) }}
+          <span v-if="chat.lastdate">
+            {{ timeago(chat.lastdate) }}
+          </span>
+          <span v-else> &nbsp; </span>
         </div>
         <div>
           <b-badge v-if="chat.replyexpected" variant="danger">

components/ChatMessagePromised.vue

@@ -43,6 +43,16 @@
             </h4>
           </nuxt-link>
           <AddToCalendar v-if="tryst" :ics="tryst.ics" class="mr-2" />
+          <notice-message
+            v-if="refmsg.outcomes?.length || refmsg.deleted"
+            class="mt-2 mb-2"
+          >
+            <v-icon icon="info-circle" />
+            <span v-if="refmsg.type === 'Offer'">
+              This is no longer available.
+            </span>
+            <span v-else> They are no longer looking for this. </span>
+          </notice-message>
         </b-card-title>
         <b-card-text>
           <div :class="emessage ? 'media-body chatMessage' : 'media-body'">

components/ChatMessageSummary.vue

@@ -34,9 +34,7 @@
           </div>
         </div>
         <notice-message
-          v-if="
-            (message.outcomes && message.outcomes.length) || message.deleted
-          "
+          v-if="message.outcomes?.length || message.deleted"
           class="mt-2 mb-2"
         >
           <v-icon icon="info-circle" />
@@ -45,7 +43,7 @@
           </span>
           <span v-else> They are no longer looking for this. </span>
         </notice-message>
-        <div v-if="message.promised">
+        <div v-else-if="message.promised">
           <div v-if="message.fromuser === myid">
             <notice-message>
               <div v-if="promisedToThem">

components/EmailBelongsToSomeoneElse.vue

@@ -1,9 +1,9 @@
 <template>
   <NoticeMessage>
     <p>
-      You are logged in
+      You are logged in with
       <!-- eslint-disable-next-line -->
-      <strong v-if="ours">with {{ ours }}</strong><strong v-else>as <v-icon icon="hashtag" class="text-muted fa-0-8x" />{{ myid }}</strong>, but <strong>{{ theirs }}</strong> belongs to another account.
+      <strong v-if="ours">{{ ours }}</strong><strong v-else>as <v-icon icon="hashtag" class="text-muted fa-0-8x" />{{ myid }}</strong>, but <strong>{{ theirs }}</strong> belongs to another account.
     </p>
     <p>
       If they are both yours, you can ask the volunteers to merge your accounts

components/GroupHeader.vue

@@ -60,13 +60,13 @@
       </div>
     </div>
     <div class="group-description">
-      <p v-if="!group.description">
+      <p v-if="!description">
         Give and get stuff for free with {{ group.namedisplay }}. Offer things
         you don't need, and ask for things you'd like. Don't just recycle -
         reuse with Freegle!
       </p>
       <!-- eslint-disable-next-line -->
-      <span v-if="group.description" v-html="group.description"/>
+      <span v-else="description" v-html="description"/>
     </div>
     <div v-if="showGiveFind" class="d-flex justify-content-between flex-wrap">
       <b-button to="/give" class="mt-1" size="lg" block variant="primary">
@@ -188,6 +188,18 @@ export default {
     amAMember() {
       return this.authStore?.member(this.group?.id)
     },
+    description() {
+      let description = this.group?.description
+
+      if (description) {
+        // Remove some whitespace which appears in some group descriptions.
+        description = description.replace(/<p><br><\/p>/g, '')
+        description = description.replace(/<p><\/p>/g, '')
+      }
+
+      console.log('Return', description)
+      return description
+    },
   },
   methods: {
     async leave() {

components/IsochronePostMapAndList.vue

@@ -126,8 +126,15 @@
             </b-input-group>
           </div>
         </div>
+        <NoticeMessage v-if="noneFound">
+          <p>
+            Sorry, we didn't find anything. Things come and go quickly, though,
+            so you could try later. Or you could:
+          </p>
+          <GiveAsk class="bg-info" />
+        </NoticeMessage>
         <div
-          v-if="!postsVisible && messagesOnMap?.length"
+          v-else-if="!postsVisible && messagesOnMap?.length"
           class="d-flex justify-content-center mt-1 mb-1"
         >
           <NoticeMessage variant="info">
@@ -140,11 +147,11 @@
             <v-icon icon="angle-double-down" class="pulsate" />
           </NoticeMessage>
         </div>
-
         <h2 class="visually-hidden">List of wanteds and offers</h2>
         <MessageList
           v-if="updatedMessagesOnMap || messagesOnMap.length"
           v-model:visible="postsVisible"
+          v-model:none="noneFound"
           :selected-group="selectedGroup"
           :selected-type="selectedType"
           :messages-for-list="filteredMessages"
@@ -321,6 +328,7 @@ export default {
       ],
       selectedGroup: null,
       context: null,
+      noneFound: false,
     }
   },
   computed: {

components/JobOne.vue

@@ -120,7 +120,7 @@ export default {
       return val
         .replace(/\\n/g, '\n')
         .replace(/<br>/g, '\n')
-        .replace('£', '£')
+        .replace(/£/g, '£')
         .trim()
         .normalize('NFD')
         .replace(/[\u0300-\u036F]/g, '')

components/LoginModal.vue

@@ -16,6 +16,15 @@
     <template #title>
       <h2>Let's get freegling!</h2>
     </template>
+    <div v-if="signUp" class="d-flex justify-content-around mb-2">
+      <b-button
+        variant="link"
+        class="font-weight-bold pl-1 py-0 border-0 align-top d-block d-md-none"
+        @click="clickShowSignIn"
+      >
+        Already a freegler? Log in
+      </b-button>
+    </div>
     <p v-if="signUp" class="text-center">
       You'll get emails. Name, approximate location, and profile picture are
       public - you can hide your real name and picture from Settings. Logging in
@@ -197,22 +206,22 @@
             <p class="mb-0 text-center">
               <b-button
                 variant="link"
-                class="pl-1 pr-0 py-0 border-0 align-top"
+                class="ps-1 pe-0 py-0 border-0 align-top"
                 @click="clickShowSignUp"
               >
                 New freegler? Register
               </b-button>
             </p>
           </div>
-          <p v-if="signUp" class="text-center font-weight-bold">
+          <div v-if="signUp" class="d-flex justify-content-around">
             <b-button
               variant="link"
-              class="font-weight-bold pl-1 py-0 border-0 align-top"
+              class="font-weight-bold pl-1 py-0 border-0 align-top d-none d-md-block"
               @click="clickShowSignIn"
             >
               Already a freegler? Log in
             </b-button>
-          </p>
+          </div>
         </b-form>
       </div>
     </div>
@@ -924,7 +933,7 @@ $color-apple: #000000;
 .social-button {
   display: flex;
   align-items: center;
-  min-width: 250px;
+  min-width: 315px;
   border-radius: 3px;
   padding: 0;
   margin: 0 auto 20px;
@@ -964,9 +973,9 @@ $color-apple: #000000;
 
 .social-button--google {
   border: 2px solid $color-google;
-  background-color: #dadce0;
+  background-color: $color-white;
   width: 100%;
-  min-height: 44px;
+  min-height: 47px;
 }
 .social-button--google-app {
   border: 2px solid $color-google;

components/MessageExpanded.vue

@@ -41,7 +41,6 @@
           class="messagemap"
           :height="150"
         />
-        <div v-else style="height: 150px" />
       </div>
       <MessageHistoryExpanded :id="id" class="d-block d-md-none mt-2 mt-md-0" />
       <MessageReplySection