debugging upload undefined bug

components/core/Application.js

@@ -353,7 +353,7 @@ export default class ApplicationPage extends React.Component {
   };
 
   _handleDismissSidebar = () => {
-    this.setState({ sidebar: null, sidebarLoading: false });
+    this.setState({ sidebar: null, sidebarLoading: false, sidebarData: null });
   };
 
   _handleAction = (options) => {
@@ -380,7 +380,7 @@ export default class ApplicationPage extends React.Component {
     if (options.type === "SIDEBAR") {
       return this.setState({
         sidebar: SIDEBARS[options.value],
-        data: options.data,
+        sidebarData: options.data,
       });
     }
 

components/core/ScenePageHeader.js

@@ -11,7 +11,6 @@ const STYLES_ROOT = css`
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  max-width: 648px;
   width: 100%;
 `;
 
@@ -22,7 +21,7 @@ const STYLES_LEFT = css`
 
 const STYLES_RIGHT = css`
   flex-shrink: 0;
-  padding-left: 24px;
+  justify-self: end;
 `;
 
 const STYLES_HEADER = css`

components/core/SlatePreviewBlock.js

@@ -12,7 +12,7 @@ const STYLES_IMAGE_ROW = css`
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  height: 186px;
+  max-height: 186px;
   overflow: hidden;
 `;
 

scenes/SceneSlate.js

@@ -12,6 +12,14 @@ import Slate, { generateLayout } from "~/components/core/Slate";
 import SlateMediaObject from "~/components/core/SlateMediaObject";
 import CircleButtonGray from "~/components/core/CircleButtonGray";
 
+const STYLES_USERNAME = css`
+  cursor: pointer;
+
+  :hover {
+    color: ${Constants.system.brand};
+  }
+`;
+
 const moveIndex = (set, fromIndex, toIndex) => {
   const element = set[fromIndex];
   set.splice(fromIndex, 1);
@@ -23,7 +31,7 @@ const moveIndex = (set, fromIndex, toIndex) => {
 export default class SceneSlate extends React.Component {
   state = {
     name: this.props.data.data.name,
-    username: this.props.data.owner.username,
+    username: this.props.data.owner ? this.props.data.owner.username : null,
     slatename: this.props.data.slatename,
     public: this.props.data.data.public,
     objects: this.props.data.data.objects,
@@ -64,7 +72,7 @@ export default class SceneSlate extends React.Component {
       }
 
       this.setState({
-        username: this.props.data.owner.username,
+        username: this.props.data.owner ? this.props.data.owner.username : null,
         slatename: this.props.data.slatename,
         public: this.props.data.data.public,
         objects: this.props.data.data.objects,
@@ -278,7 +286,28 @@ export default class SceneSlate extends React.Component {
       <ScenePage style={{ padding: `88px 24px 128px 24px` }}>
         <ScenePageHeader
           style={{ padding: `0 24px 0 24px` }}
-          title={`${username} / ${name}`}
+          title={
+            username ? (
+              <span>
+                <span
+                  onClick={() =>
+                    this.props.onAction({
+                      type: "NAVIGATE",
+                      value: this.props.sceneId,
+                      scene: "PROFILE",
+                      data: this.props.data.owner,
+                    })
+                  }
+                  css={STYLES_USERNAME}
+                >
+                  {username}
+                </span>{" "}
+                / {slatename}
+              </span>
+            ) : (
+              slatename
+            )
+          }
           actions={
             this.state.editing ? (
               <React.Fragment>

scenes/SceneSlates.js

@@ -14,6 +14,40 @@ const STYLES_NUMBER = css`
   font-weight: 400;
 `;
 
+const STYLES_ACTIONS = css`
+  z-index: ${Constants.zindex.navigation};
+  bottom: 16px;
+  right: 8px;
+  position: absolute;
+  flex-direction: column;
+  display: flex;
+`;
+
+const STYLES_ACTION_BUTTON = css`
+  font-family: ${Constants.font.code};
+  font-size: 10px;
+  text-transform: uppercase;
+  user-select: none;
+  height: 32px;
+  padding: 0 16px 0 16px;
+  border-radius: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: ${Constants.zindex.modal};
+  background: ${Constants.system.pitchBlack};
+  transition: 200ms ease all;
+  color: ${Constants.system.white};
+  cursor: pointer;
+  margin: auto;
+  margin: 4px 16px 4px 16px;
+  flex-shrink: 0;
+  text-decoration: none;
+  :hover {
+    background-color: ${Constants.system.black};
+  }
+`;
+
 // TODO(jim): Slates design.
 export default class SceneSlates extends React.Component {
   render() {
@@ -40,16 +74,31 @@ export default class SceneSlates extends React.Component {
         {this.props.data.children.map((slate) => (
           <div
             key={slate.id}
-            // onClick={() =>
-            //   this.props.onAction({
-            //     type: "NAVIGATE",
-            //     value: slate.id,
-            //   })
-            // }
+            onClick={() =>
+              this.props.onAction({
+                type: "NAVIGATE",
+                value: slate.id,
+                data: slate,
+              })
+            }
           >
             <SlatePreviewBlock slate={slate} />
           </div>
         ))}
+        <div css={STYLES_ACTIONS}>
+          <span
+            css={STYLES_ACTION_BUTTON}
+            onClick={() =>
+              this.props.onAction({
+                name: "Create slate",
+                type: "SIDEBAR",
+                value: "SIDEBAR_CREATE_SLATE",
+              })
+            }
+          >
+            Create slate
+          </span>
+        </div>
       </ScenePage>
     );
   }