add threaded chat + new TextButton component, refactor Chat API (#1374)

Threaded chat implementation

Co-authored-by: Glenn 'devalias' Grant <[email protected]>

Author: mike-lvov

src/api/chat.ts

@@ -1,7 +1,18 @@
+import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
+import noop from "lodash/noop";
 
 import { VenueChatMessage, PrivateChatMessage } from "types/chat";
 
+import { getVenueRef } from "./venue";
+
+export const userChatsCollectionRef = (userId: string) =>
+  firebase
+    .firestore()
+    .collection("privatechats")
+    .doc(userId)
+    .collection("chats");
+
 export interface SendVenueMessageProps {
   venueId: string;
   message: VenueChatMessage;
@@ -10,24 +21,42 @@ export interface SendVenueMessageProps {
 export const sendVenueMessage = async ({
   venueId,
   message,
-}: SendVenueMessageProps) =>
-  await firebase
-    .firestore()
-    .collection("venues")
-    .doc(venueId)
+}: SendVenueMessageProps): Promise<void> =>
+  getVenueRef(venueId)
     .collection("chats")
-    .add(message);
+    .add(message)
+    .then(noop)
+    .catch((err) => {
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("context", {
+          location: "api/chat::sendVenueMessage",
+          venueId,
+          message,
+        });
+      });
+      // @debt rethrow error, when we can handle it to show UI error
+    });
+
+export const sendPrivateMessage = async (
+  message: PrivateChatMessage
+): Promise<void> => {
+  const batch = firebase.firestore().batch();
+
+  const authorRef = userChatsCollectionRef(message.from).doc();
+  const recipientRef = userChatsCollectionRef(message.to).doc();
+
+  batch.set(authorRef, message);
+  batch.set(recipientRef, message);
 
-export const sendPrivateMessage = async (message: PrivateChatMessage) => {
-  // @debt This is the legacy way of saving private messages. Would be nice to have it saved in one operation
-  [message.from, message.to].forEach((messageUser) =>
-    firebase
-      .firestore()
-      .collection("privatechats")
-      .doc(messageUser)
-      .collection("chats")
-      .add(message)
-  );
+  return batch.commit().catch((err) => {
+    Bugsnag.notify(err, (event) => {
+      event.addMetadata("context", {
+        location: "api/chat::sendPrivateMessage",
+        message,
+      });
+    });
+    // @debt rethrow error, when we can handle it to show UI error
+  });
 };
 
 export type SetChatMessageIsReadProps = {
@@ -38,14 +67,20 @@ export type SetChatMessageIsReadProps = {
 export const setChatMessageRead = async ({
   userId,
   messageId,
-}: SetChatMessageIsReadProps) =>
-  firebase
-    .firestore()
-    .collection("privatechats")
-    .doc(userId)
-    .collection("chats")
+}: SetChatMessageIsReadProps): Promise<void> =>
+  userChatsCollectionRef(userId)
     .doc(messageId)
-    .update({ isRead: true });
+    .update({ isRead: true })
+    .catch((err) => {
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("context", {
+          location: "api/chat::setChatMessageRead",
+          userId,
+          messageId,
+        });
+      });
+      // @debt rethrow error, when we can handle it to show UI error
+    });
 
 export type DeleteVenueMessageProps = {
   venueId: string;
@@ -55,14 +90,21 @@ export type DeleteVenueMessageProps = {
 export const deleteVenueMessage = async ({
   venueId,
   messageId,
-}: DeleteVenueMessageProps) =>
-  await firebase
-    .firestore()
-    .collection("venues")
-    .doc(venueId)
+}: DeleteVenueMessageProps): Promise<void> =>
+  getVenueRef(venueId)
     .collection("chats")
     .doc(messageId)
-    .update({ deleted: true });
+    .update({ deleted: true })
+    .catch((err) => {
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("context", {
+          location: "api/chat::deleteVenueMessage",
+          venueId,
+          messageId,
+        });
+      });
+      // @debt rethrow error, when we can handle it to show UI error
+    });
 
 export type DeletePrivateMessageProps = {
   userId: string;
@@ -72,11 +114,17 @@ export type DeletePrivateMessageProps = {
 export const deletePrivateMessage = async ({
   userId,
   messageId,
-}: DeletePrivateMessageProps) =>
-  await firebase
-    .firestore()
-    .collection("privatechats")
-    .doc(userId)
-    .collection("chats")
+}: DeletePrivateMessageProps): Promise<void> =>
+  userChatsCollectionRef(userId)
     .doc(messageId)
-    .update({ deleted: true });
+    .update({ deleted: true })
+    .catch((err) => {
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("context", {
+          location: "api/chat::deletePrivateMessage",
+          userId,
+          messageId,
+        });
+      });
+      // @debt rethrow error, when we can handle it to show UI error
+    });

src/api/venue.ts

@@ -1,6 +1,12 @@
 import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
 
+export const getVenueCollectionRef = () =>
+  firebase.firestore().collection("venues");
+
+export const getVenueRef = (venueId: string) =>
+  getVenueCollectionRef().doc(venueId);
+
 export interface SetVenueLiveStatusProps {
   venueId: string;
   isLive: boolean;

src/components/atoms/ChatMessage/ChatMessage.scss

@@ -1,82 +1,137 @@
 @import "scss/constants";
 
-$counterparty-text-border-radius: 28px 28px 28px 4px;
-$my-text-border-radius: 28px 28px 4px 28px;
+$counterparty-bottom-border-radius: 0 0 $spacing--xxl $spacing--xs;
+$counterparty-text-border-radius: $spacing--xxl $spacing--xxl $spacing--xxl
+  $spacing--xs;
+$my-text-bottom-border-radius: 0 0 $spacing--xs $spacing--xxl;
+$my-text-border-radius: $spacing--xxl $spacing--xxl $spacing--xs $spacing--xxl;
 
-.chat-message {
+$replies-max-height: 200px;
+
+$reply-icon-radius: 20px;
+
+.ChatMessage {
   align-self: flex-start;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
-  margin-bottom: 16px;
+  margin-bottom: $spacing--lg;
 
-  &__text {
-    margin-bottom: 6px;
+  &:hover {
+    .ChatMessage__reply-icon {
+      display: flex;
+    }
+  }
+
+  &__bulb {
+    margin-bottom: $spacing--sm;
     width: auto;
     border-radius: $counterparty-text-border-radius;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
     hyphens: auto;
-    background-color: $intermediate-grey;
-    padding: 12px 16px;
-    font-size: 0.9rem;
+    background-color: $secondary;
+
+    font-size: $font-size--md;
   }
 
-  &__info {
+  &__text-content {
+    position: relative;
     display: flex;
-    align-items: center;
-    font-size: 0.8rem;
+    flex-flow: column;
+    padding: $spacing--md $spacing--lg;
   }
 
-  &__author {
-    opacity: 0.8;
-    color: $white;
-    margin: 0 8px 0 4px;
+  &__text {
+    font-size: $font-size--md;
+  }
+
+  &__show-replies-button {
+    margin-top: $spacing--sm;
+    align-self: flex-start;
+  }
+
+  &__reply-icon {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    // Overflow the userAvatar in the replies list
+    z-index: z(chatmessage-reply-button);
+
+    position: absolute;
+
     cursor: pointer;
 
+    width: $reply-icon-radius;
+    height: $reply-icon-radius;
+
+    right: $spacing--sm;
+
+    bottom: calc(-#{$reply-icon-radius / 2});
+
+    border-radius: $border-radius--max;
+    background-color: $secondary--light;
+
     &:hover {
-      opacity: 1;
+      background-color: $secondary--lightest;
     }
   }
 
-  &__time {
-    opacity: 0.6;
-    font-weight: 300;
+  &__replies-content {
+    border-radius: $counterparty-bottom-border-radius;
+    overflow: hidden;
+    max-height: $replies-max-height;
   }
 
-  &__delete-icon {
-    margin-left: 5px;
-    opacity: 0.6;
-    cursor: pointer;
+  &__replies {
+    @include scrollbar;
+    background-color: opaque-black(0.14);
+    padding: 0 $spacing--lg $spacing--lg $spacing--lg;
+    font-size: $font-size--md;
+    display: flex;
+    flex-flow: column-reverse;
 
-    &:hover {
-      opacity: 0.8;
-    }
+    max-height: $replies-max-height;
+
+    overflow: auto;
+
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  &__reply {
+    // We add padding to single reply instead of margin so that the container has spacing at the top
+    // https://stackoverflow.com/questions/13471910/no-padding-when-using-overflow-auto
+    padding-top: $spacing--md;
   }
 
   &--me {
     align-self: flex-end;
     align-items: flex-end;
 
-    .chat-message__text {
+    .ChatMessage__bulb {
       text-align: right;
       background-color: $primary;
       border-radius: $my-text-border-radius;
     }
 
-    .chat-message__info {
-      flex-direction: row-reverse;
+    .ChatMessage__show-replies-button {
       align-self: flex-end;
     }
 
-    .chat-message__author {
-      margin: 0 4px 0 8px;
+    .ChatMessage__replies-content {
+      border-radius: $my-text-bottom-border-radius;
     }
 
-    .chat-message__delete-icon {
-      margin-left: 0;
-      margin-right: 5px;
+    .ChatMessage__reply-icon {
+      background-color: $primary--light;
+      right: unset;
+      left: $spacing--sm;
+
+      &:hover {
+        background-color: $primary--lightest;
+      }
     }
   }
 }