From 55d062cb022e7574ba395364f9c32aba8d93d856 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 27 Feb 2024 15:03:20 +1100
Subject: [PATCH] feat: refactored empty message view component

use styled components
---
 background.html                               |  2 +-
 password.html                                 |  2 +-
 stylesheets/_global.scss                      | 21 ++++++++++
 stylesheets/_session_left_pane.scss           | 30 -------------
 ts/components/EmptyMessageView.tsx            | 42 +++++++++++++++++++
 ts/components/MainViewController.tsx          | 27 ------------
 .../conversation/SessionConversation.tsx      |  5 +--
 ts/mains/main_renderer.tsx                    |  7 ++--
 8 files changed, 70 insertions(+), 66 deletions(-)
 create mode 100644 ts/components/EmptyMessageView.tsx
 delete mode 100644 ts/components/MainViewController.tsx
diff --git a/background.html b/background.html
index 2c8343a22..69633a779 100644
--- a/background.html
+++ b/background.html
@@ -31,7 +31,7 @@
   <body id="body">
     <div id="root">
       <div class="app-loading-screen">
-        <div class="content session-full-logo">
+        <div class="session-full-logo">
           <img src="images/session/brand.svg" class="session-brand-logo" />
           <img src="images/session/session-text.svg" class="session-text-logo" />
         </div>
diff --git a/password.html b/password.html
index 40e231221..1e61f9f4b 100644
--- a/password.html
+++ b/password.html
@@ -29,7 +29,7 @@
   <body>
     <div id="root">
       <div class="app-loading-screen">
-        <div class="content session-full-logo">
+        <div class="session-full-logo">
           <img src="images/session/brand.svg" class="session-brand-logo" />
           <img src="images/session/session-text.svg" class="session-text-logo" />
         </div>
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 653c1d837..e78ebbf5a 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -122,6 +122,27 @@ a {
       animation: loading 1500ms ease infinite 666ms;
     }
   }
+
+  .session-full-logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+
+    .session-brand-logo {
+      height: 180px;
+      filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
+        brightness(106%) contrast(103%);
+    }
+
+    .session-text-logo {
+      margin-top: 10px;
+      width: 250px;
+      transition: 0s;
+      filter: var(--session-logo-text-current-filter);
+    }
+  }
+
   .session-text-logo {
     filter: var(--session-logo-text-current-filter);
   }
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index 8ca3e21b2..35997b4e2 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -140,33 +140,3 @@ $session-compose-margin: 20px;
     }
   }
 }
-
-.conversation.placeholder {
-  margin: auto;
-  height: 100%;
-
-  .container {
-    display: flex;
-    height: 100%;
-  }
-}
-
-.session-full-logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
-
-  .session-brand-logo {
-    height: 180px;
-    filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
-      brightness(106%) contrast(103%);
-  }
-
-  .session-text-logo {
-    margin-top: 10px;
-    width: 250px;
-    transition: 0s;
-    filter: var(--session-logo-text-current-filter);
-  }
-}
diff --git a/ts/components/EmptyMessageView.tsx b/ts/components/EmptyMessageView.tsx
new file mode 100644
index 000000000..6a3c10515
--- /dev/null
+++ b/ts/components/EmptyMessageView.tsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { Flex } from './basic/Flex';
+
+const StyledPlaceholder = styled(Flex)`
+  margin: auto;
+  height: 100%;
+`;
+
+const StyledSessionFullLogo = styled(Flex)`
+  img:first-child {
+    height: 180px;
+    filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
+      brightness(106%) contrast(103%);
+    -webkit-user-drag: none;
+  }
+
+  img:nth-child(2) {
+    margin-top: 10px;
+    width: 250px;
+    transition: 0s;
+    filter: var(--session-logo-text-current-filter);
+    -webkit-user-drag: none;
+  }
+`;
+
+export const EmptyMessageView = () => {
+  return (
+    <StyledPlaceholder container={true} alignItems="center">
+      <StyledSessionFullLogo
+        container={true}
+        className="content"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        margin="auto"
+      >
+        <img src="images/session/brand.svg" alt="full-brand-logo" />
+        <img src="images/session/session-text.svg" alt="full-brand-text" />
+      </StyledSessionFullLogo>
+    </StyledPlaceholder>
+  );
+};
diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx
deleted file mode 100644
index 27a062a45..000000000
--- a/ts/components/MainViewController.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CSSProperties } from 'styled-components';
-
-export const MessageView = () => {
-  const noDragStyle = { '-webkit-user-drag': 'none' } as CSSProperties;
-
-  return (
-    <div className="conversation placeholder">
-      <div className="conversation-header" />
-      <div className="container">
-        <div className="content session-full-logo">
-          <img
-            src="images/session/brand.svg"
-            className="session-brand-logo"
-            alt="full-brand-logo"
-            style={noDragStyle}
-          />
-          <img
-            src="images/session/session-text.svg"
-            className="session-text-logo"
-            alt="full-brand-logo"
-            style={noDragStyle}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx
index 1438becc5..91d6cd392 100644
--- a/ts/components/conversation/SessionConversation.tsx
+++ b/ts/components/conversation/SessionConversation.tsx
@@ -45,7 +45,7 @@ import {
 } from '../../types/attachments/VisualAttachment';
 import { AttachmentUtil, GoogleChrome, arrayBufferToObjectURL } from '../../util';
 import { getCurrentRecoveryPhrase } from '../../util/storage';
-import { MessageView } from '../MainViewController';
+import { EmptyMessageView } from '../EmptyMessageView';
 import { SplitViewContainer } from '../SplitViewContainer';
 import { SessionButtonColor } from '../basic/SessionButton';
 import { InConversationCallContainer } from '../calling/InConversationCallContainer';
@@ -246,8 +246,7 @@ export class SessionConversation extends Component<Props, State> {
     } = this.props;
 
     if (!selectedConversation || !messagesProps) {
-      // return an empty message view
-      return <MessageView />;
+      return <EmptyMessageView />;
     }
     // TODOLATER break selectionMode into it's own container component so we can use hooks to fetch relevant state from the store
     const selectionMode = selectedMessages.length > 0;
diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx
index 6adfb5a56..d078cb616 100644
--- a/ts/mains/main_renderer.tsx
+++ b/ts/mains/main_renderer.tsx
@@ -284,11 +284,9 @@ async function start() {
   window.log.info('Cleanup: complete');
 
   window.log.info('listening for registration events');
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  WhisperEvents.on('registration_done', async () => {
+  WhisperEvents.on('registration_done', () => {
     window.log.info('handling registration event');
-
-    await connect();
+    void connect();
   });
 
   function switchBodyToRtlIfNeeded() {
@@ -321,6 +319,7 @@ async function start() {
     root.render(<SessionRegistrationView />);
     switchBodyToRtlIfNeeded();
   }
+
   DisappearingMessages.initExpiringMessageListener();
 
   if (Registration.isDone() && !isSignInByLinking()) {
