slates: adds the slates a user makes to the side navigation

common/navigation-data.js

@@ -38,7 +38,18 @@ const constructFilesTreeForNavigation = (library) => {
   return library;
 };
 
-export const generate = (library) => [
+const constructSlatesTreeForNavigation = (slates) => {
+  return slates.map((s) => {
+    return {
+      ...s,
+      name: s.slatename,
+      pageTitle: `Viewing ${s.slatename}`,
+      decorator: "SLATE",
+    };
+  });
+};
+
+export const generate = ({ library = [], slates = [] }) => [
   {
     id: 1,
     name: "Home",
@@ -66,7 +77,7 @@ export const generate = (library) => [
     name: "Slates",
     pageTitle: "Your slates",
     decorator: "SLATES",
-    children: [],
+    children: constructSlatesTreeForNavigation(slates),
   },
   // TODO(colin):
   // re-enable this when we do local offline.

components/core/ApplicationNavigation.js

@@ -23,6 +23,7 @@ const IconMap = {
   MINERS: <SVG.Miners height="20px" />,
   STORAGE_MARKET: <SVG.StorageMarket height="20px" />,
   SLATES: <SVG.Slates height="20px" />,
+  SLATE: <SVG.Slates height="20px" />,
   LOCAL_DATA: <SVG.HardDrive height="20px" />,
   PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
 };

pages/application.js

@@ -390,6 +390,7 @@ export default class ApplicationPage extends React.Component {
   };
 
   render() {
+    // NOTE(jim): Not authenticated.
     if (!this.state.viewer) {
       return (
         <WebsitePrototypeWrapper
@@ -405,7 +406,8 @@ export default class ApplicationPage extends React.Component {
       );
     }
 
-    const navigation = NavigationData.generate(this.state.viewer.library);
+    // NOTE(jim): Authenticated.
+    const navigation = NavigationData.generate(this.state.viewer);
     const next = this.state.history[this.state.currentIndex];
     const current = NavigationData.getCurrentById(navigation, next.id);