Merge pull request #3312 from tylershuster/reactive-head

interface: made head reactive

pkg/interface/package-lock.json

@@ -7700,6 +7700,24 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
     "react-hot-loader": {
       "version": "4.12.21",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
@@ -7781,6 +7799,11 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
+      "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
+    },
     "react-window": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",

pkg/interface/package.json

@@ -23,6 +23,7 @@
     "react": "^16.5.2",
     "react-codemirror2": "^6.0.1",
     "react-dom": "^16.8.6",
+    "react-helmet": "^6.1.0",
     "react-markdown": "^4.3.1",
     "react-router-dom": "^5.0.0",
     "react-window": "^1.8.5",

pkg/interface/src/views/App.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { BrowserRouter as Router, Route, withRouter, Switch } from 'react-router-dom';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { sigil as sigiljs, stringRenderer } from 'urbit-sigil-js';
+import Helmet from 'react-helmet';
 
 import Mousetrap from 'mousetrap';
 import 'mousetrap-global-bind';
@@ -50,7 +51,7 @@ class App extends React.Component {
       new GlobalSubscription(this.store, this.api, this.appChannel);
 
     this.updateTheme = this.updateTheme.bind(this);
-    this.setFavicon = this.setFavicon.bind(this);
+    this.faviconString = this.faviconString.bind(this);
   }
 
   componentDidMount() {
@@ -64,23 +65,17 @@ class App extends React.Component {
       e.stopImmediatePropagation();
       this.api.local.setOmnibox();
     });
-    this.setFavicon();
   }
 
   componentWillUnmount() {
     this.themeWatcher.removeListener(this.updateTheme);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.setFavicon();
-  }
-
   updateTheme(e) {
     this.api.local.setDark(e.matches);
   }
 
-  setFavicon() {
-    if (window.ship.length < 14) {
+  faviconString() {
     let background = '#ffffff';
     if (this.state.contacts.hasOwnProperty('/~/default')) {
       background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
@@ -93,10 +88,7 @@ class App extends React.Component {
       colors: [background, foreground]
     });
     const dataurl = 'data:image/svg+xml;base64,' + btoa(svg);
-      const favicon = document.querySelector('[rel=icon]');
-      favicon.href = dataurl;
-      favicon.type = 'image/svg+xml';
-    }
+    return dataurl;
   }
 
   render() {
@@ -107,6 +99,11 @@ class App extends React.Component {
 
     return (
       <ThemeProvider theme={theme}>
+        <Helmet>
+          {window.ship.length < 14
+            ? <link rel="icon" type="image/svg+xml" href={this.faviconString()} /> 
+            : null}
+        </Helmet>
         <Root>
           <Router>
             <StatusBarWithRouter

pkg/interface/src/views/apps/chat/app.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import Helmet from 'react-helmet';
 
 import './css/custom.css';
 
@@ -24,14 +25,11 @@ type ChatAppProps = StoreState & {
 };
 
 export default class ChatApp extends React.Component<ChatAppProps, {}> {
-  totalUnreads = 0;
-
   constructor(props) {
     super(props);
   }
 
   componentDidMount() {
-    document.title = 'OS1 - Chat';
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
 
@@ -79,12 +77,6 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
       }
     });
 
-    if (totalUnreads !== this.totalUnreads) {
-      document.title =
-        totalUnreads > 0 ? `(${totalUnreads}) OS1 - Chat` : 'OS1 - Chat';
-      this.totalUnreads = totalUnreads;
-    }
-
     const {
       invites,
       s3,
@@ -113,6 +105,10 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
     );
 
     return (
+      <>
+        <Helmet>
+          <title>{totalUnreads > 0 ? `(${totalUnreads}) ` : ''}OS1 - Chat</title>
+        </Helmet>
         <Switch>
           <Route
             exact
@@ -315,6 +311,7 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
             }}
           />
         </Switch>
+      </>
     );
   }
 }

pkg/interface/src/views/apps/dojo/app.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom';
 import classnames from 'classnames';
+import Helmet from 'react-helmet';
 
 import { Popout } from './components/lib/icons/popout';
 import { History } from './components/history';
@@ -28,8 +29,6 @@ export default class DojoApp extends Component {
   }
 
   componentDidMount() {
-    document.title = 'OS1 - Dojo';
-
     const channel = new window.channel();
     this.api = new Api(this.props.ship, channel);
     this.store.api = this.api;
@@ -46,6 +45,10 @@ export default class DojoApp extends Component {
 
   render() {
     return (
+      <>
+        <Helmet>
+          <title>OS1 - Dojo</title>
+        </Helmet>
         <div
           className="bg-white bg-gray0-d"
           style={{ height: '100%' }}
@@ -96,6 +99,7 @@ export default class DojoApp extends Component {
             }}
           />
         </div>
+      </>
     );
   }
 }

pkg/interface/src/views/apps/groups/app.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Route, Switch } from 'react-router-dom';
+import Helmet from 'react-helmet';
 
 import './css/custom.css';
 
@@ -25,7 +26,6 @@ type GroupsAppProps = StoreState & {
 
 export default class GroupsApp extends Component<GroupsAppProps, {}> {
   componentDidMount() {
-    document.title = 'OS1 - Groups';
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
 
@@ -55,6 +55,10 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
 
 
     return (
+      <>
+        <Helmet>
+          <title>OS1 - Groups</title>
+        </Helmet>
         <Switch>
           <Route exact path="/~groups"
             render={(props) => {
@@ -357,6 +361,7 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
             }}
           />
         </Switch>
+      </>
     );
   }
 }

pkg/interface/src/views/apps/launch/app.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 
 import './css/custom.css';
 
@@ -8,7 +9,6 @@ import Welcome from './components/welcome';
 export default class LaunchApp extends React.Component {
 
   componentDidMount() {
-    document.title = 'OS1 - Home';
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
 
@@ -18,6 +18,10 @@ export default class LaunchApp extends React.Component {
     const { props } = this;
 
     return (
+      <>
+        <Helmet>
+          <title>OS1 - Home</title>
+        </Helmet>
         <div className="h-100 flex flex-column h-100">
           <div className='v-mid ph2 dtc-m dtc-l dtc-xl flex justify-between flex-wrap' style={{ maxWidth: '40rem' }}>
             <Welcome firstTime={props.launch.firstTime} api={props.api} />
@@ -31,6 +35,7 @@ export default class LaunchApp extends React.Component {
           </div>
           <div className="absolute mono bottom-0 left-0 f9 gray2 ml4 mb4 f8"> {props.baseHash} </div>
         </div>
+      </>
     );
   }
 }

pkg/interface/src/views/apps/links/app.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Switch, Route } from 'react-router-dom';
+import Helmet from 'react-helmet';
 
 import _ from 'lodash';
 
@@ -22,11 +23,9 @@ import {
 export class LinksApp extends Component {
   constructor(props) {
     super(props);
-    this.totalUnseen = 0;
   }
 
   componentDidMount() {
-    document.title = 'OS1 - Links';
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
 
@@ -61,11 +60,6 @@ export class LinksApp extends Component {
       0
     );
 
-    if(totalUnseen !== this.totalUnseen) {
-      document.title = totalUnseen !== 0 ? `(${totalUnseen}) OS1 - Links` : 'OS1 - Links';
-      this.totalUnseen = totalUnseen;
-    }
-
     const invites = props.invites ?
       props.invites : {};
 
@@ -75,6 +69,10 @@ export class LinksApp extends Component {
     const { api, sidebarShown } = this.props;
 
     return (
+      <>
+        <Helmet>
+          <title>{totalUnseen > 0 ? `(${totalUnseen}) ` : ''}OS1 - Links</title>
+        </Helmet>
         <Switch>
           <Route exact path="/~link"
             render={ (props) => {
@@ -329,6 +327,7 @@ export class LinksApp extends Component {
               }}
             />
         </Switch>
+      </>
     );
   }
 }

pkg/interface/src/views/apps/publish/app.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
 import { Route, Switch, useLocation, withRouter } from "react-router-dom";
 import { Center, Text } from "@tlon/indigo-react";
 import _ from "lodash";
+import Helmet from 'react-helmet';
 
 import "./css/custom.css";
 
@@ -61,6 +62,10 @@ export default function PublishApp(props: PublishAppProps) {
     : "rightPanel";
 
   return (
+    <>
+      <Helmet>
+        <title>{unreadTotal > 0 ? `(${unreadTotal}) ` : ''}OS1 - Publish</title>
+      </Helmet>
       <Route
         path={[
           "/~publish/notebook/:ship/:notebook/note/:noteId",
@@ -155,5 +160,6 @@ export default function PublishApp(props: PublishAppProps) {
           </Switch>
         </RouterSkeleton>
       </Route>
+    </>
   );
 }