slates: add image to slate

common/navigation-data.js

@@ -31,17 +31,15 @@ export const getCurrentById = (navigation, targetId) => {
 // TODO(jim): We don't really need this.
 // Remove it at some point.
 const constructFilesTreeForNavigation = (library) => {
-  for (let i = 0; i < library.length; i++) {
-    library[i].children = [];
-  }
-
-  return library;
+  return { ...library[0], children: [] };
 };
 
 const constructSlatesTreeForNavigation = (slates) => {
   return slates.map((s) => {
     return {
       ...s,
+      id: `slate-${s.slatename}`,
+      slateId: s.id,
       name: s.slatename,
       pageTitle: `Viewing ${s.slatename}`,
       decorator: "SLATE",
@@ -71,7 +69,7 @@ export const generate = ({ library = [], slates = [] }) => [
       },
     ],
   },
-  ...constructFilesTreeForNavigation(library),
+  constructFilesTreeForNavigation(library),
   {
     id: 3,
     name: "Slates",

components/sidebars/SidebarAddFileToBucket.js

@@ -53,10 +53,15 @@ export default class SidebarAddFileToBucket extends React.Component {
       return;
     }
 
-    await this.props.onSetFile({ file });
+    await this.props.onSetFile({
+      file,
+      slate: { id: this.props.data.slateId },
+    });
   };
 
   render() {
+    console.log(this.props);
+
     return (
       <React.Fragment>
         <System.P style={{ fontFamily: Constants.font.semiBold }}>
@@ -69,6 +74,13 @@ export default class SidebarAddFileToBucket extends React.Component {
           onChange={this._handleUpload}
         />
 
+        {this.props.data && this.props.data.decorator === "SLATE" ? (
+          <System.P style={{ marginTop: 24 }}>
+            This will add an image to your Slate named{" "}
+            <strong>{this.props.data.slatename}</strong>.
+          </System.P>
+        ) : null}
+
         <System.ButtonPrimaryFull
           type="label"
           htmlFor="file"

components/system/components/fragments/TableComponents.js

@@ -326,7 +326,7 @@ export const TableContent = ({
       return (
         <span
           css={STYLES_TABLE_CONTENT_LINK}
-          onClick={() => onNavigateTo({ id: 17 }, data)}
+          onClick={() => onNavigateTo({ id: `slate-${data.slatename}` }, data)}
         >
           {text}
         </span>

node_common/data/methods/update-slate-by-id.js

@@ -1,7 +1,7 @@
 import { runQuery } from "~/node_common/data/utilities";
 
-export default async ({ id, slatename, data }) => {
-  const updateObject = { data };
+export default async ({ id, slatename, updated_at, data }) => {
+  const updateObject = { data, updated_at };
 
   if (slatename) {
     updateObject.slatename = slatename;

pages/api/slates/add-url.js

@@ -0,0 +1,89 @@
+import * as MW from "~/node_common/middleware";
+import * as Utilities from "~/node_common/utilities";
+import * as Data from "~/node_common/data";
+import * as Strings from "~/common/strings";
+import * as Powergate from "~/node_common/powergate";
+
+const initCORS = MW.init(MW.CORS);
+const initAuth = MW.init(MW.RequireCookieAuthentication);
+
+export default async (req, res) => {
+  initCORS(req, res);
+  initAuth(req, res);
+
+  const id = Utilities.getIdFromCookie(req);
+  if (!id) {
+    return res
+      .status(403)
+      .json({ decorator: "SERVER_ADD_TO_SLATE_USER_NOT_FOUND", error: true });
+  }
+
+  const user = await Data.getUserById({
+    id,
+  });
+
+  if (!user) {
+    return res.status(404).json({
+      decorator: "SERVER_ADD_TO_SLATE_USER_NOT_FOUND",
+      error: true,
+    });
+  }
+
+  if (user.error) {
+    return res.status(500).json({
+      decorator: "SERVER_ADD_TO_SLATE_USER_NOT_FOUND",
+      error: true,
+    });
+  }
+
+  const slate = await Data.getSlateById({ id: req.body.slate.id });
+
+  if (!slate) {
+    return res.status(404).json({
+      decorator: "SERVER_ADD_TO_SLATE_SLATE_NOT_FOUND",
+      error: true,
+    });
+  }
+
+  if (slate.error) {
+    return res.status(500).json({
+      decorator: "SERVER_ADD_TO_SLATE_SLATE_NOT_FOUND",
+      error: true,
+    });
+  }
+
+  const update = await Data.updateSlateById({
+    id: slate.id,
+    updated_at: new Date(),
+    data: {
+      ...slate.data,
+      objects: [
+        {
+          id: req.body.data.id,
+          ownerId: user.id,
+          name: req.body.data.name,
+          url: req.body.data.ipfs,
+        },
+        ...slate.data.objects,
+      ],
+    },
+  });
+
+  if (!update) {
+    return res.status(500).json({
+      decorator: "SERVER_ADD_TO_SLATE_ERROR",
+      error: true,
+    });
+  }
+
+  if (update.error) {
+    return res.status(500).json({
+      decorator: "SERVER_ADD_TO_SLATE_ERROR",
+      error: true,
+    });
+  }
+
+  return res
+    .status(200)
+    .json({ decorator: "SERVER_SLATE_ADD_TO_SLATE", slate });
+};

pages/application.js

@@ -51,7 +51,7 @@ export default class ApplicationPage extends React.Component {
   state = {
     selected: State.getSelectedState(this.props.viewer),
     viewer: State.getInitialState(this.props.viewer),
-    history: [{ id: 1, scrollTop: 0 }],
+    history: [{ id: 1, scrollTop: 0, data: null }],
     currentIndex: 0,
     data: null,
     sidebar: null,
@@ -72,7 +72,7 @@ export default class ApplicationPage extends React.Component {
     window.removeEventListener("drop", this._handleDrop);
   }
 
-  _handleSetFile = async ({ file }) => {
+  _handleSetFile = async ({ file, slate }) => {
     this.setState({ fileLoading: true });
 
     let data = new FormData();
@@ -97,9 +97,26 @@ export default class ApplicationPage extends React.Component {
       this.setState({ fileLoading: false });
     }
 
+    if (slate) {
+      console.log({ slate, data: { ...json.data } });
+      const addResponse = await fetch(`/api/slates/add-url`, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ slate, data: { ...json.data } }),
+      });
+
+      if (!addResponse || addResponse.error) {
+        console.log(addResponse.error);
+        alert("TODO: Adding an image to Slate went wrong.");
+      }
+    }
+
     await this.rehydrate();
 
-    this.setState({ sidebar: null, data: null, fileLoading: false });
+    this.setState({ sidebar: null, fileLoading: false });
   };
 
   _handleDragEnter = (e) => {
@@ -340,7 +357,6 @@ export default class ApplicationPage extends React.Component {
       {
         currentIndex: this.state.currentIndex - 1,
         sidebar: null,
-        data: null,
       },
       () => {
         const next = this.state.history[this.state.currentIndex];
@@ -357,7 +373,6 @@ export default class ApplicationPage extends React.Component {
       {
         currentIndex: this.state.currentIndex + 1,
         sidebar: null,
-        data: null,
       },
       () => {
         const next = this.state.history[this.state.currentIndex];

scenes/SceneFile.js

@@ -119,7 +119,7 @@ export default class SceneFile extends React.Component {
     const file = this.props.data;
 
     const fileName = `${file.name}`;
-    const fileURL = `https://hub.textile.io${file.ipfs}`;
+    const fileURL = `https://hub.textile.io${file.ipfs ? file.ipfs : file.url}`;
 
     return (
       <div css={STYLES_FLEX}>

scenes/SceneHome.js

@@ -54,8 +54,13 @@ export default class SceneHome extends React.Component {
     // TODO(jim): Refactor later.
     const slates = {
       columns: [
-        { key: "id", id: "id", name: "ID", type: "SLATE_LINK" },
-        { key: "slatename", name: "Slate Name", width: "228px" },
+        { key: "id", id: "id", name: "ID" },
+        {
+          key: "slatename",
+          name: "Slate Name",
+          width: "228px",
+          type: "SLATE_LINK",
+        },
         { key: "url", name: "URL", width: "268px" },
         {
           key: "public",

scenes/SceneSlate.js

@@ -4,11 +4,50 @@ import * as System from "~/components/system";
 import { css } from "@emotion/react";
 
 import ScenePage from "~/components/core/ScenePage";
+import Section from "~/components/core/Section";
 
-// TODO(jim): Figure out the local data story.
 export default class SceneSlate extends React.Component {
   render() {
-    console.log(this.props);
-    return <ScenePage>Scene Slate</ScenePage>;
+    const images = this.props.data.data.objects;
+
+    const slates = {
+      columns: [
+        { key: "name", name: "Data", type: "FILE_LINK", width: "288px" },
+        { key: "url", name: "Asset URL", width: "100%" },
+      ],
+      rows: images,
+    };
+
+    // TODO(jim): Refactor later.
+    const slateButtons = [
+      /*
+      { name: "Make public", type: "SIDEBAR", value: "" },
+      { name: "Make private", type: "SIDEBAR", value: "" },
+      */
+      {
+        name: "Add image",
+        type: "SIDEBAR",
+        value: "SIDEBAR_ADD_FILE_TO_BUCKET",
+        data: this.props.data,
+      },
+    ];
+
+    return (
+      <ScenePage>
+        <System.H1>{this.props.data.slatename}</System.H1>
+        <Section
+          title="Slates"
+          buttons={slateButtons}
+          onAction={this.props.onAction}
+        >
+          <System.Table
+            data={slates}
+            name="slate"
+            onAction={this.props.onAction}
+            onNavigateTo={this.props.onNavigateTo}
+          />
+        </Section>
+      </ScenePage>
+    );
   }
 }

scenes/SceneSlates.js

@@ -4,10 +4,58 @@ import * as System from "~/components/system";
 import { css } from "@emotion/react";
 
 import ScenePage from "~/components/core/ScenePage";
+import Section from "~/components/core/Section";
 
 // TODO(jim): Slates design.
 export default class SceneSlates extends React.Component {
   render() {
-    return <ScenePage>Slates Prototype</ScenePage>;
+    // TODO(jim): Refactor later.
+    const slates = {
+      columns: [
+        { key: "id", id: "id", name: "ID", type: "SLATE_LINK" },
+        { key: "slatename", name: "Slate Name", width: "228px" },
+        { key: "url", name: "URL", width: "268px" },
+        {
+          key: "public",
+          name: "Public",
+          type: "SLATE_PUBLIC_TEXT_TAG",
+          width: "188px",
+        },
+      ],
+      rows: this.props.viewer.slates.map((each) => {
+        return {
+          ...each,
+          url: each.data.public
+            ? `https://slate.host/@${this.props.viewer.username}/${
+                each.slatename
+              }`
+            : null,
+          public: false,
+        };
+      }),
+    };
+
+    // TODO(jim): Refactor later.
+    const slateButtons = [
+      { name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
+    ];
+
+    return (
+      <ScenePage>
+        <System.H1>Slates</System.H1>
+        <Section
+          title="Slates"
+          buttons={slateButtons}
+          onAction={this.props.onAction}
+        >
+          <System.Table
+            data={slates}
+            name="slate"
+            onAction={this.props.onAction}
+            onNavigateTo={this.props.onNavigateTo}
+          />
+        </Section>
+      </ScenePage>
+    );
   }
 }