Favicon shows the status

Author: Sheng Ran

src/main/webapp/js/components/App.js

@@ -5,6 +5,7 @@ import type { State, Route, BoardView } from '../state';
 import Graph from './Graph';
 import BoardList from './BoardList';
 import ErrorPage from './ErrorPage';
+import StatusFavicon from './StatusFavicon';
 
 type Props = {
   isLoading: boolean,
@@ -26,14 +27,17 @@ class App extends Component {
       return <ErrorPage message={error}/>;
     if (route.path === 'BOARDS') return <BoardList />;
     if (route.path === 'BOARD') {
-      if (board)
+      if (board) {
+        document.title = board.title;
         return (
           <div>
+            <StatusFavicon status={board.status}/>
             <Graph
               board={board}
             />
           </div>
         );
+      }
       else
         return (
           <h1 style={{ color: '#BABABA' }} className="info">

src/main/webapp/js/components/StatusFavicon.js

@@ -0,0 +1,57 @@
+// @flow
+import { PureComponent } from 'react';
+import type { Status } from '../state';
+import { statusToColor } from '../utils';
+
+type Props = {
+  status: Status
+};
+
+const Radius = 32;
+
+class StatusFavicon extends PureComponent {
+  props: Props;
+
+  canvas = null;
+
+  render() {
+    return null;
+  }
+
+  componentDidUpdate() {
+    this.update();
+  }
+
+  componentDidMount() {
+    this.update();
+  }
+
+  componentWillUnmount() {
+    const favicon = document.querySelector('#favicon');
+    if (favicon instanceof HTMLLinkElement) {
+      favicon.href = '';
+    }
+  }
+
+  update() {
+    let { canvas, props: { status } } = this;
+    if (canvas === null) {
+      this.canvas = canvas = document.createElement('canvas');
+      canvas.width = 2 * Radius;
+      canvas.height = 2 * Radius;
+    }
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.beginPath();
+      ctx.arc(Radius, Radius, Radius / 2, 0, 2 * Math.PI);
+      ctx.fillStyle = statusToColor(status);
+      ctx.fill();
+    }
+    const favicon = document.querySelector('#favicon');
+    if (favicon instanceof HTMLLinkElement) {
+      favicon.href = canvas.toDataURL('image/x-icon');
+    }
+  }
+}
+
+export default StatusFavicon;

src/main/webapp/js/state.js

@@ -64,7 +64,7 @@ export type Route = {
 
 export type Link = [string, string];
 
-type Status = 'Unknown' | 'Success' | 'Error' | 'Warning';
+export type Status = 'Unknown' | 'Success' | 'Error' | 'Warning';
 
 export type State = {
   currentBoard: ?string,

src/main/webapp/js/utils/fetcher.js

@@ -5,7 +5,7 @@ const resolve = res => {
   return res.text();
 };
 
-const fetcher = (url, options) =>
+export const fetcher = (url, options) =>
 fetch(url, options)
 .then(
   res => Promise.all([resolve(res), Promise.resolve(res)]),
@@ -21,6 +21,4 @@ fetch(url, options)
     return Promise.resolve(response);
   else
     return Promise.reject(response);
-});
-
-export { fetcher };
+});

src/main/webapp/js/utils/index.js

@@ -1,2 +1,14 @@
-export * from './fetcher';
-export * from './api';
+// @flow
+import type { Status } from '../state';
+
+export { fetcher } from './fetcher';
+export * from './api';
+
+export const statusToColor = (status: Status): string => {
+  switch(status) {
+    case 'SUCCESS': return '#2ebd59';
+    case 'WARNING': return '#fdb843';
+    case 'ERROR': return '#e7624f';
+    default: return '#e0e0e0';
+  }
+};

src/main/webapp/public/index.ejs

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link id="favicon" href="" rel="icon" type="image/x-icon" />
     <% for(var i = 0; i < htmlWebpackPlugin.files.css.length; ++i) { %>
     <link rel="stylesheet" type="text/css" href="<%=htmlWebpackPlugin.files.css[i] %>"></script>
     <% } %>

webpack.config.js

@@ -56,7 +56,7 @@ var config = {
       filename: 'index.html',
       template: path.resolve(baseDir, 'public/index.ejs'),
       inject: false,
-      title: 'Slab'
+      title: 'SLAB'
     }),
     new CopyWebpackPlugin(
       [