2.4.21

api/mutations/communityMember/removeCommunityMember.js

@@ -11,6 +11,10 @@ import { getChannelsByUserAndCommunity } from '../../models/channel';
 import { isAuthedResolver as requireAuth } from '../../utils/permissions';
 import { events } from 'shared/analytics';
 import { trackQueue } from 'shared/bull/queues';
+import {
+  getThreadNotificationStatusForUser,
+  updateThreadNotificationStatusForUser,
+} from '../../models/usersThreads';
 
 type Input = {
   input: {
@@ -105,14 +109,41 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
       communityId,
       user.id
     );
+
     const leaveChannelsPromises = allChannelsInCommunity.map(channel =>
       removeMemberInChannel(channel, user.id)
     );
 
     return await Promise.all([
       removeMemberInCommunity(communityId, user.id),
       ...leaveChannelsPromises,
-    ]).then(() => community);
+    ])
+      .then(async () => {
+        // if the community has a watercooler and the current user has a subscription
+        // to it, remove the subscription
+        if (community.watercoolerId) {
+          const threadId = community.watercoolerId;
+          const threadNotificationStatus = await getThreadNotificationStatusForUser(
+            threadId,
+            user.id
+          );
+          if (
+            !threadNotificationStatus ||
+            !threadNotificationStatus.receiveNotifications
+          ) {
+            return;
+          }
+
+          return await updateThreadNotificationStatusForUser(
+            threadId,
+            user.id,
+            false
+          );
+        }
+
+        return;
+      })
+      .then(() => community);
   }
 
   trackQueue.add({

athena/queues/thread-notification.js

@@ -114,7 +114,7 @@ export default async (job: Job<ThreadNotificationJobData>) => {
             footer: 'Spectrum',
             footer_icon:
               'https://spectrum.chat/img/apple-icon-57x57-precomposed.png',
-            ts: incomingThread.createdAt,
+            ts: new Date(incomingThread.createdAt).getTime() / 1000,
             color: '#4400CC',
             actions: [
               {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Spectrum",
-  "version": "2.4.20",
+  "version": "2.4.21",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "babel-cli": "^6.24.1",

shared/notification-to-text.js

@@ -160,7 +160,7 @@ const formatNotification = (incomingNotification, currentUserId) => {
 
       href = `/thread/${message.threadId}`;
       body =
-        message.messageType === 'draftjs'
+        message.messageType.toLowerCase() === 'draftjs'
           ? toPlainText(toState(message.content.body))
           : message.content.body;
       break;
@@ -170,7 +170,7 @@ const formatNotification = (incomingNotification, currentUserId) => {
 
       href = `/thread/${thread.id}`;
       body =
-        thread.type === 'draftjs'
+        thread.type.toLowerCase() === 'draftjs'
           ? toPlainText(toState(thread.content.body))
           : thread.content.body;
       break;

src/components/badges/style.js

@@ -4,7 +4,6 @@ import { Tooltip, Gradient } from '../globals';
 
 export const Span = styled.span`
   display: inline;
-  align-self: center;
   color: ${({ theme }) => theme.text.reverse};
   background-color: ${props => props.theme.text.alt};
   text-transform: uppercase;

src/components/message/authorByline.js

@@ -3,7 +3,13 @@ import * as React from 'react';
 import { convertTimestampToTime } from 'shared/time-formatting';
 import Link from 'src/components/link';
 import Badge from '../badges';
-import { Byline, Name, Username, GutterTimestamp } from './style';
+import {
+  Byline,
+  Name,
+  Username,
+  GutterTimestamp,
+  BadgesContainer,
+} from './style';
 import { UserHoverProfile } from 'src/components/hoverProfile';
 import ConditionalWrap from 'src/components/conditionalWrap';
 import { MessagesContext } from 'src/components/messageGroup';
@@ -26,7 +32,10 @@ export default (props: Props) => {
             <ConditionalWrap
               condition={!!user.username}
               wrap={children => (
-                <UserHoverProfile username={user.username}>
+                <UserHoverProfile
+                  username={user.username}
+                  style={{ flexWrap: 'wrap', flex: '0 1 auto' }}
+                >
                   <Link
                     to={`/users/${user.username}`}
                     onClick={e => e.stopPropagation()}
@@ -40,17 +49,19 @@ export default (props: Props) => {
               <Name>{user.name}</Name>
             </ConditionalWrap>
 
-            {roles &&
-              roles.map((role, index) => (
-                <Badge
-                  type={role}
-                  key={index}
-                  onClick={e => e.stopPropagation()}
-                />
-              ))}
-            {user.isPro && (
-              <Badge type="pro" onClick={e => e.stopPropagation()} />
-            )}
+            <BadgesContainer>
+              {roles &&
+                roles.map((role, index) => (
+                  <Badge
+                    type={role}
+                    key={index}
+                    onClick={e => e.stopPropagation()}
+                  />
+                ))}
+              {user.isPro && (
+                <Badge type="pro" onClick={e => e.stopPropagation()} />
+              )}
+            </BadgesContainer>
             <GutterTimestamp
               to={messageUrl}
               data-cy="message-timestamp"

src/components/message/style.js

@@ -20,25 +20,46 @@ export const Byline = styled.span`
   color: ${props => props.theme.text.default};
   max-width: 100%;
   position: relative;
+  flex-wrap: wrap;
+
+  a {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 400px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 `;
 
 export const Name = styled.span`
   font-weight: 600;
   font-size: 15px;
   color: ${({ theme }) => theme.text.default};
   margin-right: 2px;
+  display: flex;
 
   &:hover {
     color: ${({ theme }) => theme.text.default};
     cursor: pointer;
   }
+
+  @media (max-width: 400px) {
+    line-height: 1.4;
+  }
 `;
 
 export const Username = styled(Name)`
   font-weight: 400;
   margin-left: 2px;
   margin-right: 2px;
   color: ${props => props.theme.text.alt};
+  display: flex;
+
+  @media (max-width: 400px) {
+    line-height: 1.4;
+  }
 `;
 
 export const ActionsContainer = styled.span`
@@ -108,6 +129,10 @@ export const GutterTimestamp = styled(Link)`
   color: ${props => props.theme.text.placeholder};
   opacity: 0;
   ${Truncate};
+
+  @media (max-width: 400px) {
+    display: none !important;
+  }
 `;
 
 export const OuterMessageContainer = styled.div`
@@ -384,3 +409,11 @@ export const QuoteWrapper = styled.div`
     color: ${props => props.theme.text.alt};
   }
 `;
+
+export const BadgesContainer = styled.div`
+  display: flex;
+
+  @media (max-width: 400px) {
+    margin-top: 4px;
+  }
+`;

src/views/directMessages/components/style.js

@@ -283,7 +283,7 @@ export const SearchResultsDropdown = styled.ul`
   width: 320px;
   max-height: 420px;
   overflow-y: scroll;
-  z-index: ${zIndex.dropdown};
+  z-index: ${zIndex.dropDown};
 
   @media (max-width: 768px) {
     width: 100%;