Add print view

src/components/app-router/index.js

@@ -3,13 +3,15 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import Home from '../../views/home';
 import Chat from '../../views/chat';
+import Print from '../../views/print';
 
 export default function AppRouter() {
   return (
     <BrowserRouter>
       <Switch>
         <Route path="/" exact component={Home} />
         <Route path="/chat" exact component={Chat} />
+        <Route path="/print" exact component={Print} />
       </Switch>
     </BrowserRouter>
   );

src/views/chat/header/info/index.js

@@ -1,5 +1,6 @@
-import { h } from 'preact';
+import { h, Component } from 'preact';
 import { connect } from 'unistore/preact';
+import { bind } from 'decko';
 
 import Icon from '../../../../components/icon';
 import IconButton from '../../../../components/icon-button';
@@ -8,34 +9,54 @@ import { actions } from '../../../../store/store';
 
 import style from './styles.scss';
 
-function windowPrint() {
-  window.print();
-}
-
 export default connect(
-  'chat',
+  ['chat', 'activeUser'],
   actions
-)(function HeaderInfo({ chat }) {
-  return (
-    <div class={`flex flex-sb flex-cross-center ${style.headerInfoWrapper}`}>
-      <div class={`flex ${style.infoContainer}`}>
-        <div class={style.iconWrapper}>
-          <span class={style.icon}>
-            <Icon name="group-outline" color="var(--color-primary)" />
-          </span>
-        </div>
-        <div class="flex flex-dc flex-main-center">
-          <p class={style.title}>Group Chat</p>
-          <p class={style.subtitle}>
-            {Object.keys(chat.authorList).length} participants
-          </p>
+)(
+  class HeaderInfo extends Component {
+    @bind
+    windowPrint() {
+      sessionStorage.setItem('chat', JSON.stringify(this.props.chat));
+      sessionStorage.setItem(
+        'activeUser',
+        JSON.stringify(this.props.activeUser)
+      );
+      window.open('/print', '_blank');
+    }
+
+    render({ chat }) {
+      const participantCount = Object.keys(chat.authorList).length;
+      return (
+        <div
+          class={`flex flex-sb flex-cross-center ${style.headerInfoWrapper}`}
+        >
+          <div class={`flex ${style.infoContainer}`}>
+            <div class={style.iconWrapper}>
+              <span class={style.icon}>
+                <Icon name="group-outline" color="var(--color-primary)" />
+              </span>
+            </div>
+            <div
+              class={`flex flex-dc flex-main-center ${
+                style.infoDetailsWrapper
+              }`}
+            >
+              <p class={style.title}>
+                {participantCount > 2 ? 'Group Chat' : 'Chat'}
+              </p>
+              <p class={style.subtitle}>{participantCount} participants</p>
+              <p class={style.subtitle}>
+                {Object.keys(chat.messages).length} messages
+              </p>
+            </div>
+          </div>
+          <IconButton
+            onClickExecute={this.windowPrint}
+            icon="printer"
+            color="var(--color-accent)"
+          />
         </div>
-      </div>
-      <IconButton
-        onClickExecute={windowPrint}
-        icon="printer"
-        color="var(--color-accent)"
-      />
-    </div>
-  );
-});
+      );
+    }
+  }
+);

src/views/chat/header/info/styles.scss

@@ -27,12 +27,14 @@
         align-items: center;
         margin: 0;
         font-weight: 500;
-        font-size: 1.1em;
+        font-size: 1em;
     }
 
     .subtitle {
-        font-size: .9em;
+        font-size: .8em;
         color: var(--color-secondary);
         margin: 0;
     }
+
+    .infoDetailsWrapper { line-height: 16px; }
 }

src/views/chat/index.js

@@ -9,16 +9,16 @@ import style from './styles.scss';
 export default connect(['isChatLoaded', 'activeTab'])(
   class ParsedContent extends Component {
     componentWillMount() {
-      if (!this.props.isChatLoaded) {
+      if (!this.props.isChatLoaded && !this.props.disableIntersectionObserver) {
         this.context.router.history.push('/');
       }
     }
 
-    render() {
+    render({ isChatLoaded, disableIntersectionObserver }) {
       return (
         <div class={style.contentWrapper}>
-          <Header />
-          {this.props.isChatLoaded && <Messages />}
+          {!disableIntersectionObserver && <Header />}
+          {(isChatLoaded || disableIntersectionObserver) && <Messages />}
         </div>
       );
     }

src/views/chat/messages/index.js

@@ -15,6 +15,12 @@ export default connect(
   actions
 )(
   class Chat extends Component {
+    componentWillMount() {
+      if (this.props.chat.messages.length <= 0) {
+        this.props.chat = JSON.parse(sessionStorage.getItem('chat'));
+      }
+    }
+
     renderMessageList() {
       const items = [];
       let timeLineDay = this.props.chat.messages[0].dateDay;
@@ -45,6 +51,7 @@ export default connect(
       } else {
         return (
           <UserMessage
+            disableIntersectionObserver={this.props.disableIntersectionObserver}
             message={message}
             isNewDay={isNewDay}
             authorData={this.props.chat.authorList[message.author]}

src/views/chat/messages/user-message/index.js

@@ -25,12 +25,41 @@ export default connect('activeUser')(
       });
     }
 
-    render({ message, isNewDay, activeUser, authorData }) {
+    render({
+      message,
+      isNewDay,
+      activeUser,
+      authorData,
+      intersectionObserver
+    }) {
+      if (!isActiveUser) {
+        activeUser = JSON.parse(sessionStorage.getItem('activeUser'));
+      }
+
       let isActiveUser = activeUser === message.author.toLowerCase();
 
-      return (
-        <Observer onChange={this.handleChange} rootMargin="0px 0px 200px 0px">
-          {this.state.visibility ? (
+      if (intersectionObserver) {
+        return (
+          <Observer onChange={this.handleChange} rootMargin="0px 0px 200px 0px">
+            {this.state.visibility ? (
+              <span class="flex" data-active-user={isActiveUser}>
+                <Message
+                  message={message}
+                  isNewDay={isNewDay}
+                  isActive={isActiveUser}
+                  authorData={authorData}
+                />
+              </span>
+            ) : (
+              <span>
+                <MessagePlaceholder />
+              </span>
+            )}
+          </Observer>
+        );
+      } else {
+        return (
+          <div>
             <span class="flex" data-active-user={isActiveUser}>
               <Message
                 message={message}
@@ -39,13 +68,9 @@ export default connect('activeUser')(
                 authorData={authorData}
               />
             </span>
-          ) : (
-            <span>
-              <MessagePlaceholder />
-            </span>
-          )}
-        </Observer>
-      );
+          </div>
+        );
+      }
     }
   }
 );

src/views/chat/messages/user-message/message/styles.scss

@@ -7,6 +7,8 @@
         border-radius: 12px;
         position: relative;
 
+        @media print { border: 1px solid rgba(0,0,0,.4); }
+
         &::before {
             @media print { content: none; }
 
@@ -33,6 +35,8 @@
             margin-right: 8px;
 
             a { color: var(--color-tertiary); }
+
+            @media print { color: var(--color-bg); }
         }
 
         @media screen and (max-width: 640px) {

src/views/print/index.js

@@ -0,0 +1,16 @@
+import { h, Component } from 'preact';
+import { connect } from 'unistore/preact';
+
+import ParsedContent from '../chat';
+
+export default connect('chat')(
+  class Print extends Component {
+    componentDidMount() {
+      window.print();
+    }
+
+    render() {
+      return <ParsedContent disableIntersectionObserver={true} />;
+    }
+  }
+);