Join channel generalisation

_locales/en/messages.json

@@ -1445,7 +1445,7 @@
     "description": "Title of the read receipts setting"
   },
   "typingIndicatorsSettingDescription": {
-    "message": "Enable the sending and receiving of typing indicators",
+    "message": "See and share when messages are being typed (applies to all sessions).",
     "description": "Description of the typing indicators setting"
   },
   "typingIndicatorsSettingTitle": {

preload.js

@@ -11,6 +11,7 @@ const { app } = electron.remote;
 const { clipboard } = electron;
 
 window.PROTO_ROOT = 'protos';
+const appConfig = require('./app/config');
 const config = require('url').parse(window.location.toString(), true).query;
 
 let title = config.name;
@@ -62,7 +63,7 @@ window.CONSTANTS = {
   MAX_LOGIN_TRIES: 3,
   MAX_PASSWORD_LENGTH: 32,
   MAX_USERNAME_LENGTH: 20,
-  DEFAULT_PUBLIC_CHAT_URL: 'https://chat.lokinet.org',
+  DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),
   MAX_CONNECTION_DURATION: 5000,
 };
 

stylesheets/_modules.scss

@@ -520,8 +520,20 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-top: 3px;
+  margin-top: 5px;
   margin-bottom: -3px;
+
+  span {
+    opacity: 0.5;
+    transition: 0.25s;
+
+    &:not(.module-message__metadata__badge--separator):hover {
+      opacity: 1;
+    }
+  }
+  .module-message__metadata__badge--separator {
+    margin-top: -2px;
+  }
 }
 
 // With an image and no caption, this section needs to be on top of the image overlay

stylesheets/_session.scss

@@ -1160,6 +1160,7 @@ label {
       font-family: 'SF Pro Text';
       font-size: $session-font-sm;
       font-weight: 100;
+      max-width: 700px;
       @include session-color-subtle($session-color-white);
     }
 

ts/components/conversation/Message.tsx

@@ -224,17 +224,22 @@ export class Message extends React.PureComponent<Props, State> {
         }
 
         return (
-          <span
+          <>
-            className={classNames(
+            <span className="module-message__metadata__badge--separator">
-              'module-message__metadata__badge',
+              &nbsp;•&nbsp;
-              `module-message__metadata__badge--${direction}`,
+            </span>
-              `module-message__metadata__badge--${badgeText.toLowerCase()}`,
+            <span
-              `module-message__metadata__badge--${badgeText.toLowerCase()}--${direction}`
+              className={classNames(
-            )}
+                'module-message__metadata__badge',
-            key={badgeText}
+                `module-message__metadata__badge--${direction}`,
-          >
+                `module-message__metadata__badge--${badgeText.toLowerCase()}`,
-            &nbsp;•&nbsp;{badgeText}
+                `module-message__metadata__badge--${badgeText.toLowerCase()}--${direction}`
-          </span>
+              )}
+              key={badgeText}
+            >
+              {badgeText}
+            </span>
+          </>
         );
       })
       .filter(i => !!i);

ts/components/session/LeftPaneChannelSection.tsx

@@ -327,60 +327,73 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
       return false;
     }
 
-    // TODO: Make this not hard coded
+    joinChannelStateManager(this, channelUrlPasted, this.handleToggleOverlay);
-    const channelId = 1;
-    this.setState({ loading: true });
-    const connectionResult = window.attemptConnection(
-      channelUrlPasted,
-      channelId
-    );
 
-    // Give 5s maximum for promise to revole. Else, throw error.
+    return true;
-    const connectionTimeout = setTimeout(() => {
+  }
-      if (!this.state.connectSuccess) {
+}
-        this.setState({ loading: false });
-        window.pushToast({
-          title: window.i18n('connectToServerFail'),
-          type: 'error',
-          id: 'connectToServerFail',
-        });
 
-        return;
+export function joinChannelStateManager(
-      }
+  thisRef: any,
-    }, window.CONSTANTS.MAX_CONNECTION_DURATION);
+  serverURL: string,
-
+  onSuccess?: any
-    connectionResult
+) {
-      .then(() => {
+  // Any component that uses this function MUST have the keys [loading, connectSuccess]
-        clearTimeout(connectionTimeout);
+  // in their State
-
+
-        if (this.state.loading) {
+  // TODO: Make this not hard coded
-          this.setState({
+  const channelId = 1;
-            connectSuccess: true,
+  thisRef.setState({ loading: true });
-            loading: false,
+  const connectionResult = window.attemptConnection(serverURL, channelId);
-          });
+
-          window.pushToast({
+  // Give 5s maximum for promise to revole. Else, throw error.
-            title: window.i18n('connectToServerSuccess'),
+  const connectionTimeout = setTimeout(() => {
-            id: 'connectToServerSuccess',
+    if (!thisRef.state.connectSuccess) {
-            type: 'success',
+      thisRef.setState({ loading: false });
-          });
+      window.pushToast({
-          this.handleToggleOverlay();
+        title: window.i18n('connectToServerFail'),
-        }
+        type: 'error',
-      })
+        id: 'connectToServerFail',
-      .catch((connectionError: string) => {
+      });
-        clearTimeout(connectionTimeout);
+
-        this.setState({
+      return;
+    }
+  }, window.CONSTANTS.MAX_CONNECTION_DURATION);
+
+  connectionResult
+    .then(() => {
+      clearTimeout(connectionTimeout);
+
+      if (thisRef.state.loading) {
+        thisRef.setState({
           connectSuccess: true,
           loading: false,
         });
         window.pushToast({
-          title: connectionError,
+          title: window.i18n('connectToServerSuccess'),
-          id: 'connectToServerFail',
+          id: 'connectToServerSuccess',
-          type: 'error',
+          type: 'success',
         });
 
-        return false;
+        if (onSuccess) {
+          onSuccess();
+        }
+      }
+    })
+    .catch((connectionError: string) => {
+      clearTimeout(connectionTimeout);
+      thisRef.setState({
+        connectSuccess: true,
+        loading: false,
+      });
+      window.pushToast({
+        title: connectionError,
+        id: 'connectToServerFail',
+        type: 'error',
       });
 
-    return true;
+      return false;
-  }
+    });
+
+  return true;
 }

ts/components/session/LeftPaneMessageSection.tsx

@@ -25,6 +25,7 @@ import {
   SessionButtonType,
 } from './SessionButton';
 import { SessionSpinner } from './SessionSpinner';
+import { joinChannelStateManager } from './LeftPaneChannelSection';
 
 export interface Props {
   searchTerm: string;
@@ -399,58 +400,6 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
 
   private handleJoinPublicChat() {
     const serverURL = window.CONSTANTS.DEFAULT_PUBLIC_CHAT_URL;
-
+    joinChannelStateManager(this, serverURL, this.handleCloseOnboarding);
-    // TODO: Make this not hard coded
-    const channelId = 1;
-    this.setState({ loading: true });
-    const connectionResult = window.attemptConnection(serverURL, channelId);
-
-    // Give 5s maximum for promise to revole. Else, throw error.
-    const connectionTimeout = setTimeout(() => {
-      if (!this.state.connectSuccess) {
-        this.setState({ loading: false });
-        window.pushToast({
-          title: window.i18n('connectToServerFail'),
-          type: 'error',
-          id: 'connectToServerFail',
-        });
-
-        return;
-      }
-    }, window.CONSTANTS.MAX_CONNECTION_DURATION);
-
-    connectionResult
-      .then(() => {
-        clearTimeout(connectionTimeout);
-
-        if (this.state.loading) {
-          this.setState({
-            shouldRenderMessageOnboarding: false,
-            connectSuccess: true,
-            loading: false,
-          });
-          window.pushToast({
-            title: window.i18n('connectToServerSuccess'),
-            id: 'connectToServerSuccess',
-            type: 'success',
-          });
-        }
-      })
-      .catch((connectionError: string) => {
-        clearTimeout(connectionTimeout);
-        this.setState({
-          connectSuccess: true,
-          loading: false,
-        });
-        window.pushToast({
-          title: connectionError,
-          id: 'connectToServerFail',
-          type: 'error',
-        });
-
-        return false;
-      });
-
-    return true;
   }
 }