chat, links: componentise tabBar

pkg/interface/src/views/apps/chat/components/lib/chat-header.js

@@ -1,58 +1,61 @@
-import React, { Component, Fragment } from "react";
-import { Link } from "react-router-dom";
-
-import { ChatTabBar } from "./chat-tabbar";
-import { SidebarSwitcher } from "~/views/components/SidebarSwitch";
-import { deSig } from "~/logic/lib/util";
+import React, { Fragment } from 'react';
+import { Link } from 'react-router-dom';
 
+import { TabBar } from '~/views/components/chat-link-tabbar';
+import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
+import { deSig } from '~/logic/lib/util';
 
 export const ChatHeader = (props) => {
-  const isInPopout = props.popout ? "popout/" : "";
+  const isInPopout = props.popout ? 'popout/' : '';
   const group = Array.from(props.group.members);
   let title = props.station.substr(1);
-  if (props.association && 
-    "metadata" in props.association && 
-    props.association.metadata.tile !== "") {
-    title = props.association.metadata.title
+  if (props.association &&
+    'metadata' in props.association &&
+    props.association.metadata.tile !== '') {
+    title = props.association.metadata.title;
   }
 
   return (
     <Fragment>
       <div
         className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
-        style={{ height: "1rem" }}>
-        <Link to="/~chat/">{"⟵ All Chats"}</Link>
+        style={{ height: '1rem' }}
+      >
+        <Link to="/~chat/">{'⟵ All Chats'}</Link>
       </div>
       <div
         className={
-          "pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative " +
-          "overflow-x-auto overflow-y-hidden flex-shrink-0 "
+          'pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative ' +
+          'overflow-x-auto overflow-y-hidden flex-shrink-0 '
         }
-        style={{ height: 48 }}>
+        style={{ height: 48 }}
+      >
         <SidebarSwitcher
           sidebarShown={props.sidebarShown}
           popout={props.popout}
           api={props.api}
         />
         <Link
-          to={"/~chat/" + isInPopout + "room" + props.station}
-          className="pt2 white-d">
+          to={'/~chat/' + isInPopout + 'room' + props.station}
+          className="pt2 white-d"
+        >
           <h2
             className={
-              "dib f9 fw4 lh-solid v-top " +
-              (title === props.station.substr(1) ? "mono" : "")
+              'dib f9 fw4 lh-solid v-top ' +
+              (title === props.station.substr(1) ? 'mono' : '')
             }
-            style={{ width: "max-content" }}>
+            style={{ width: 'max-content' }}
+          >
             {title}
           </h2>
         </Link>
-        <ChatTabBar
+        <TabBar
           location={props.location}
-          station={props.station}
-          isOwner={deSig(props.match.params.ship) === window.ship}
+          popoutHref={`/~chat/popout/room${props.station}`}
+          settings={`/~chat/${isInPopout}settings${props.station}`}
           popout={props.popout}
         />
       </div>
     </Fragment>
   );
-}
+};

pkg/interface/src/views/apps/links/components/lib/links-tabbar.js

@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { makeRoutePath } from '~/logic/lib/util';
-
-export class LinksTabBar extends Component {
-  render() {
-    const props = this.props;
-
-    let setColor = '';
-
-    if (props.location.pathname.includes('/settings')) {
-      setColor = 'black white-d';
-    } else {
-      setColor = 'gray3';
-    }
-
-    const hidePopoutIcon = (props.popout)
-    ? 'dn-m dn-l dn-xl'
-    : 'dib-m dib-l dib-xl';
-
-    return (
-      <div className="dib flex-shrink-0 flex-grow-1">
-        <div className={'dib pt2 f9 pl6 pr6 lh-solid'}>
-          <Link
-            className={'no-underline ' + setColor}
-            to={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
-          >
-            Settings
-          </Link>
-        </div>
-        <a href={makeRoutePath(props.resourcePath, true, props.page)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="dib fr pt2 pr1"
-        >
-          <img
-            className={'flex-shrink-0 pr3 dn ' + hidePopoutIcon}
-            src="/~link/img/popout.png"
-            height="16"
-            width="16"
-          />
-        </a>
-      </div>
-    );
-  }
-}
-
-export default LinksTabBar;

pkg/interface/src/views/apps/links/components/link.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { LinksTabBar } from './lib/links-tabbar';
+import { TabBar } from '~/views/components/chat-link-tabbar';
 import { LinkPreview } from './lib/link-detail-preview';
 import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
 import { Link } from 'react-router-dom';
@@ -147,7 +147,12 @@ export class LinkDetail extends Component {
           >
             {`<- ${props.resource.metadata.title}`}
           </Link>
-          <LinksTabBar {...props} popout={props.popout} resourcePath={props.resourcePath} />
+          <TabBar
+          location={props.location}
+          popout={props.popout}
+          popoutHref={makeRoutePath(props.resourcePath, true, props.page)}
+          settings={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
+          />
         </div>
         <div className="w-100 mt2 flex justify-center overflow-y-scroll ph4 pb4">
           <div className="w-100 mw7">

pkg/interface/src/views/components/chat-link-tabbar.js

@@ -1,10 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
-export const ChatTabBar = (props) => {
+export const TabBar = (props) => {
   const {
     location,
-    station
+    settings,
+    popoutHref
   } = props;
   let setColor = '', popout = '';
 
@@ -22,11 +23,11 @@ export const ChatTabBar = (props) => {
       <div className={'dib pt2 f9 pl6 pr6 lh-solid'}>
         <Link
           className={'no-underline ' + setColor}
-          to={'/~chat/' + popout + 'settings' + station}>
+          to={settings}>
           Settings
         </Link>
       </div>
-      <a href={'/~chat/popout/room' + station} rel="noopener noreferrer"
+      <a href={popoutHref} rel="noopener noreferrer"
          target="_blank"
          className="dib fr pr1"
          style={{ paddingTop: '8px' }}>
@@ -38,4 +39,4 @@ export const ChatTabBar = (props) => {
       </a>
     </div>
   );
-}
+};