Merge pull request #5074 from withspectrum/3.1.9

3.1.9

api/models/community.js

@@ -543,7 +543,7 @@ export const deleteCommunity = (communityId: string, userId: string): Promise<DB
 };
 
 // prettier-ignore
-export const setPinnedThreadInCommunity = (communityId: string, value: string, userId: string): Promise<DBCommunity> => {
+export const setPinnedThreadInCommunity = (communityId: string, value: ?string, userId: string): Promise<DBCommunity> => {
   return db
     .table('communities')
     .get(communityId)

api/mutations/thread/moveThread.js

@@ -3,7 +3,11 @@ import type { GraphQLContext } from '../../';
 import UserError from '../../utils/UserError';
 import { getThread, moveThread } from '../../models/thread';
 import { getUserPermissionsInCommunity } from '../../models/usersCommunities';
-import { getChannels } from '../../models/channel';
+import { getChannelById } from '../../models/channel';
+import {
+  getCommunityById,
+  setPinnedThreadInCommunity,
+} from '../../models/community';
 import { isAuthedResolver as requireAuth } from '../../utils/permissions';
 import { events } from 'shared/analytics';
 import { trackQueue } from 'shared/bull/queues';
@@ -18,6 +22,7 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
   const { threadId, channelId } = args;
 
   const thread = await getThread(threadId);
+
   if (!thread) {
     trackQueue.add({
       userId: user.id,
@@ -65,7 +70,11 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     );
   }
 
-  const [newChannel] = await getChannels([channelId]);
+  const [newChannel, community] = await Promise.all([
+    getChannelById(channelId),
+    getCommunityById(thread.communityId),
+  ]);
+
   if (newChannel.communityId !== thread.communityId) {
     trackQueue.add({
       userId: user.id,
@@ -81,6 +90,16 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     );
   }
 
+  // if the thread is being moved into a private channel, make sure it is not pinned
+  // in the community
+  if (
+    newChannel.isPrivate &&
+    community.pinnedThreadId &&
+    thread.id === community.pinnedThreadId
+  ) {
+    await setPinnedThreadInCommunity(thread.communityId, null, user.id);
+  }
+
   return moveThread(threadId, channelId, user.id).then(res => {
     if (res) return res;
 

api/yarn.lock

@@ -3309,11 +3309,6 @@ decorate-component-with-props@^1.0.2:
   resolved "https://registry.yarnpkg.com/decorate-component-with-props/-/decorate-component-with-props-1.1.0.tgz#b496c814c6a2aba0cf2ad26e44cbedb8ead42f15"
   integrity sha512-tTYQojixN64yK3/WBODMfvss/zbmyUx9HQXhzSxZiSiofeekVeRyyuToy9BCiTMrVEIKWxTcla2t3y5qdaUF7Q==
 
-deep-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
-  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
-
 deep-extend@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
@@ -8021,14 +8016,19 @@ react-dom@^15.4.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-fast-compare@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 [email protected]:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"
-  integrity sha1-qBgR3yExOm1VxfBYxK66XW89l6c=
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
+  integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
   dependencies:
-    deep-equal "^1.0.1"
     object-assign "^4.1.1"
     prop-types "^15.5.4"
+    react-fast-compare "^2.0.2"
     react-side-effect "^1.1.0"
 
 react-infinite-scroller-with-scroll-element@^1.0.4:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Spectrum",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",

src/components/composer/style.js

@@ -3,7 +3,15 @@ import styled, { css } from 'styled-components';
 import theme from 'shared/theme';
 import Icon from 'src/components/icon';
 import { hexa, FlexRow, FlexCol, zIndex } from '../globals';
-import { MAX_WIDTH, MEDIA_BREAK, TITLEBAR_HEIGHT } from 'src/components/layout';
+import {
+  COL_GAP,
+  MAX_WIDTH,
+  MEDIA_BREAK,
+  TITLEBAR_HEIGHT,
+  NAVBAR_EXPANDED_WIDTH,
+  NAVBAR_WIDTH,
+  MIN_WIDTH_TO_EXPAND_NAVIGATION,
+} from 'src/components/layout';
 
 export const DropzoneWrapper = styled.div`
   position: sticky;
@@ -30,13 +38,26 @@ export const DropImageOverlay = (props: {
 };
 
 export const Wrapper = styled.div`
-  grid-area: main;
   display: flex;
   justify-content: center;
   z-index: 9995;
+  position: fixed;
+  max-width: ${MAX_WIDTH}px;
+  left: ${NAVBAR_WIDTH + COL_GAP}px;
+  width: 100%;
+  max-width: calc(100% - ${NAVBAR_WIDTH * 2}px);
 
   @media (max-width: ${MEDIA_BREAK}px) {
     height: calc(100vh - ${TITLEBAR_HEIGHT}px);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+  }
+
+  @media (min-width: ${MIN_WIDTH_TO_EXPAND_NAVIGATION}px) {
+    left: ${NAVBAR_EXPANDED_WIDTH + COL_GAP}px;
+    max-width: calc(100% - ${NAVBAR_EXPANDED_WIDTH * 2}px);
   }
 `;
 

src/components/entities/listItems/channel.js

@@ -145,7 +145,7 @@ const Channel = (props: Props) => {
 
   return (
     <ErrorBoundary>
-      <Link to={`/${channel.community.slug}/${channel.slug}`}>
+      <Link to={`/${channel.community.slug}/${channel.slug}?tab=posts`}>
         <Row isActive={isActive}>
           <Content>
             {name && (

src/components/message/index.js

@@ -191,7 +191,8 @@ class Message extends React.Component<Props, State> {
     const searchObj = queryString.parse(location.search);
     const { m = null } = searchObj;
     const isSelected = m && m === selectedMessageId;
-
+    const isOptimistic =
+      message && typeof message.id === 'number' && message.id < 0;
     return (
       <ConditionalWrap
         condition={!!isSelected}
@@ -298,7 +299,7 @@ class Message extends React.Component<Props, State> {
               />
             )}
 
-            {!isEditing && (
+            {!isEditing && !isOptimistic && (
               <ActionsContainer>
                 <Actions>
                   {canEditMessage && (

src/components/message/threadAttachment/attachment.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import { Link } from 'react-router-dom';
 import type { Props } from './';
 import compose from 'recompose/compose';
 import { Loading } from 'src/components/loading';
@@ -12,7 +13,7 @@ import getThreadLink from 'src/helpers/get-thread-link';
 
 class Attachment extends React.Component<Props> {
   render() {
-    const { data, currentUser } = this.props;
+    const { data, currentUser, id } = this.props;
     const { thread, loading, error } = data;
 
     if (loading)
@@ -23,9 +24,11 @@ class Attachment extends React.Component<Props> {
           </Container>
         </div>
       );
-    if (error) return null;
 
-    if (!thread) return null;
+    if (error || !thread)
+      return (
+        <Link to={`/thread/${id}`}>https://spectrum.chat/thread/{id}</Link>
+      );
 
     return (
       <div className="attachment-container">

src/components/message/threadAttachment/index.js

@@ -12,15 +12,16 @@ import Attachment from './attachment';
 export type Props = {
   currentUser: UserInfoType,
   message: MessageInfoType,
+  id: string,
   data: {
     thread: GetThreadType,
     loading: boolean,
     error: ?string,
   },
 };
 
-const Query = ({ data, message, ...rest }: Props) => (
-  <Attachment message={message} data={data} />
+const Query = ({ data, message, id, ...rest }: Props) => (
+  <Attachment message={message} id={id} data={data} />
 );
 
 const ThreadAttachment = compose(getThreadById)(Query);

src/views/thread/style.js

@@ -475,7 +475,7 @@ export const StickyHeaderContent = styled.div`
   display: flex;
   padding: 12px 16px;
   cursor: pointer;
-  max-width: 70%;
+  max-width: 560px;
 
   @media (max-width: 728px) {
     padding: 16px;