Merge pull request #4991 from withspectrum/3.1.1

3.1.1

api/models/thread.js

@@ -6,7 +6,7 @@ import {
   trackQueue,
   searchQueue,
 } from 'shared/bull/queues';
-const { parseRange } = require('./utils');
+const { parseRange, NEW_DOCUMENTS } = require('./utils');
 import { createChangefeed } from 'shared/changefeed-utils';
 import { deleteMessagesInThread } from '../models/message';
 import { turnOffAllThreadNotifications } from '../models/usersThreads';
@@ -760,12 +760,30 @@ export const decrementReactionCount = (threadId: string) => {
     .run();
 };
 
+const hasChanged = (field: string) =>
+  db
+    .row('old_val')(field)
+    .ne(db.row('new_val')(field));
+
 const getUpdatedThreadsChangefeed = () =>
   db
     .table('threads')
     .changes({
       includeInitial: false,
-    })('new_val')
+    })
+    .filter(
+      NEW_DOCUMENTS.or(
+        hasChanged('content')
+          .or(hasChanged('lastActive'))
+          .or(hasChanged('channelId'))
+          .or(hasChanged('communityId'))
+          .or(hasChanged('creatorId'))
+          .or(hasChanged('isPublished'))
+          .or(hasChanged('modifiedAt'))
+          .or(hasChanged('messageCount'))
+          .or(hasChanged('reactionCount'))
+      )
+    )('new_val')
     .run();
 
 export const listenToUpdatedThreads = (cb: Function): Function => {

cypress/integration/channel/settings/edit_spec.js

@@ -22,7 +22,7 @@ describe('edit a channel', () => {
 
   it('should edit a channel', () => {
     cy.get('[data-cy="channel-overview"]').should('be.visible');
-
+    cy.get('[data-cy="channel-members"]').should('be.visible');
     cy.get('[data-cy="channel-name-input"]')
       .should('be.visible')
       .click()

package.json

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

shared/clients/draft-js/links-decorator/index.js

@@ -1,11 +1,21 @@
 // @flow
 import React from 'react';
+import { Link } from 'react-router-dom';
 import createLinksDecorator, {
   type LinksDecoratorComponentProps,
 } from './core';
+import { SPECTRUM_URLS } from 'shared/regexps';
 
-export default createLinksDecorator((props: LinksDecoratorComponentProps) => (
-  <a href={props.href} target="_blank" rel="noopener noreferrer">
-    {props.children}
-  </a>
-));
+export default createLinksDecorator((props: LinksDecoratorComponentProps) => {
+  const regexp = new RegExp(SPECTRUM_URLS, 'ig');
+  const match = regexp.exec(props.href);
+
+  if (match && match[0] && match[1])
+    return <Link to={match[1]}>{props.children}</Link>;
+
+  return (
+    <a href={props.href} target={'_blank'} rel={'noopener noreferrer'}>
+      {props.children}
+    </a>
+  );
+});

shared/clients/draft-js/renderer/index.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import { Link } from 'react-router-dom';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
 import {
@@ -13,6 +14,7 @@ import { hasStringElements } from '../utils/hasStringElements';
 import mentionsDecorator from '../mentions-decorator';
 import linksDecorator from '../links-decorator';
 import type { Node } from 'react';
+import { SPECTRUM_URLS } from 'shared/regexps';
 import type { KeyObj, KeysObj, DataObj } from '../message/types';
 import type {
   EmbedData,
@@ -159,16 +161,23 @@ export const createRenderer = (options: Options) => {
       ),
     },
     entities: {
-      LINK: (children: Array<Node>, data: DataObj, { key }: KeyObj) => (
-        <a
-          key={key}
-          href={data.url || data.href}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {children}
-        </a>
-      ),
+      LINK: (children: Array<Node>, data: DataObj, { key }: KeyObj) => {
+        const link = data.url || data.href;
+
+        if (typeof link !== 'string') {
+          return (
+            <a key={key} href={link} target="_blank" rel="noopener noreferrer">
+              {children}
+            </a>
+          );
+        }
+
+        const regexp = new RegExp(SPECTRUM_URLS, 'ig');
+        const match = regexp.exec(link);
+        if (match && match[0] && match[1]) {
+          return <Link to={match[1]}>{children}</Link>;
+        }
+      },
       IMAGE: (
         children: Array<Node>,
         data: { src?: string, alt?: string },

shared/graphql/mutations/community/createCommunity.js

@@ -2,6 +2,7 @@
 import gql from 'graphql-tag';
 import { graphql } from 'react-apollo';
 import communityInfoFragment from '../../fragments/community/communityInfo';
+import { getCommunityBySlugQuery } from '../../queries/community/getCommunity';
 import type { CommunityInfoType } from '../../fragments/community/communityInfo';
 
 export type CreateCommunityType = {
@@ -39,6 +40,16 @@ const createCommunityOptions = {
         },
       }),
   }),
+  options: {
+    refetchQueries: result => [
+      {
+        query: getCommunityBySlugQuery,
+        variables: {
+          slug: result.data.createCommunity.slug,
+        },
+      },
+    ],
+  },
 };
 
 export default graphql(createCommunityMutation, createCommunityOptions);

shared/graphql/queries/community/getCommunity.js

@@ -71,10 +71,15 @@ export const getCommunityByMatchQuery = gql`
 `;
 
 const getCommunityByMatchOptions = {
-  options: ({ match: { params: { communitySlug } } }) => ({
+  options: ({
+    match: {
+      params: { communitySlug },
+    },
+  }) => ({
     variables: {
       slug: communitySlug,
     },
+    fetchPolicy: 'cache-first',
   }),
 };
 

shared/regexps.js

@@ -3,3 +3,4 @@
 module.exports.MENTIONS = /\/?\B@[a-z0-9._-]+[a-z0-9_-]/gi;
 module.exports.URL = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*)/gi;
 module.exports.RELATIVE_URL = /^\/([^\/].*|$)/g;
+module.exports.SPECTRUM_URLS = /(?:(?:https?:\/\/)?|\B)(?:spectrum\.chat|localhost:3000)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?/gi;

src/components/badges/style.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Gradient } from 'src/components/globals';
 
 export const Span = styled.span`
-  display: inline-flex;
+  display: inline-block;
   color: ${theme.text.reverse};
   background-color: ${theme.text.alt};
   text-transform: uppercase;

src/components/button/style.js

@@ -33,7 +33,7 @@ export const StyledButton = styled.button`
   line-height: 1.2;
   transition: box-shadow 0.2s ease-in-out;
 
-  .icon {
+  .icon:not(:first-child):not(:last-child) {
     margin-right: 4px;
   }
 

src/components/chatInput/style.js

@@ -107,6 +107,12 @@ export const Input = styled(MentionsInput).attrs({
     font-size: 16px;
   }
 
+  div,
+  textarea {
+    line-height: 1.4 !important;
+    word-break: break-word;
+  }
+
   &::placeholder {
     color: ${props =>
       props.networkDisabled

src/components/composer/style.js

@@ -262,7 +262,7 @@ export const ThreadTitle = {
   padding: '0',
   outline: 'none',
   border: '0',
-  lineHeight: '1.3',
+  lineHeight: '1.4',
   fontWeight: '600',
   boxShadow: 'none',
   width: '100%',

src/components/composerMini/index.js

@@ -25,7 +25,7 @@ import type { CommunityInfoType } from 'shared/graphql/fragments/community/commu
 import type { History } from 'react-router-dom';
 import { DISCARD_DRAFT_MESSAGE } from 'src/components/composer';
 import { openModal } from 'src/actions/modals';
-import { Container } from './style';
+import { Container, BodyContainer } from './style';
 
 type Props = {
   community: CommunityInfoType,
@@ -278,23 +278,13 @@ const MiniComposer = ({
         {!expanded && <PrimaryButton tabIndex={-1}>Post</PrimaryButton>}
       </div>
       {expanded && (
-        <div
-          css={{
-            width: '100%',
-            paddingLeft: '48px',
-            paddingRight: '8px',
-            marginTop: '8px',
-            fontSize: '16px',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-          }}
-        >
+        <BodyContainer>
           <Dropzone
             accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
             disableClick
             multiple={false}
             onDropAccepted={uploadFiles}
+            style={{ lineHeight: '1.4' }}
           >
             {({ getRootProps, getInputProps, isDragActive }) => (
               <div
@@ -316,6 +306,7 @@ const MiniComposer = ({
                     border: `1px solid ${theme.bg.border}`,
                     borderRadius: '8px',
                     width: '100%',
+                    lineHeight: '1.4',
                     input: {
                       fontSize: '16px',
                       minHeight: '80px',
@@ -404,7 +395,7 @@ const MiniComposer = ({
               </PrimaryButton>
             </div>
           </div>
-        </div>
+        </BodyContainer>
       )}
     </Container>
   );

src/components/composerMini/style.js

@@ -15,3 +15,20 @@ export const Container = styled.div`
     display: none;
   }
 `;
+
+export const BodyContainer = styled.div`
+  width: 100%;
+  padding-left: 48px;
+  padding-right: 8px;
+  margin-top: 8px;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  div,
+  textarea {
+    line-height: 1.4 !important;
+    word-break: break-word;
+  }
+`;

src/components/emailInvitationForm/index.js

@@ -419,7 +419,7 @@ class EmailInvitationForm extends React.Component<Props, State> {
             onClick={this.sendInvitations}
             disabled={hasCustomMessage && customMessageError}
           >
-            Send Invitations
+            {isLoading ? 'Sending...' : 'Send Invitations'}
           </OutlineButton>
         </SectionCardFooter>
       </div>