slate: profile and URL

components/core/Section.js

@@ -22,7 +22,7 @@ const STYLES_HEADER = css`
   font-family: ${Constants.font.medium};
   font-size: ${Constants.typescale.lvl1};
   border-radius: 4px 4px 0 0;
-  padding: 24px;
+  padding: 24px 24px 24px 20px;
   overflow: hidden;
   display: flex;
   align-items: center;

components/sidebars/SidebarCreateSlate.js

@@ -17,8 +17,9 @@ export default class SidebarCreateSlate extends React.Component {
   _handleSubmit = async () => {
     this.setState({ loading: true });
 
-    if (!Strings.isEmpty) {
+    if (Strings.isEmpty(this.state.name)) {
       alert("TODO: Provide a name");
+      this.setState({ loading: false });
       return;
     }
 

components/system/components/fragments/TableComponents.js

@@ -317,6 +317,18 @@ export const TableContent = ({
       return Strings.toDate(text);
     case "FILE_SIZE":
       return Strings.bytesToSize(text, 2);
+    case "NEW_WINDOW":
+      // NOTE(jim): Special case to prevent navigation.
+      if (!data) {
+        return text;
+      }
+
+      // NOTE(jim): Navigates to file.
+      return (
+        <span css={STYLES_TABLE_CONTENT_LINK} onClick={() => window.open(text)}>
+          {text}
+        </span>
+      );
     case "SLATE_LINK":
       // NOTE(jim): Special case to prevent navigation.
       if (!data) {

pages/application.js

@@ -298,6 +298,10 @@ export default class ApplicationPage extends React.Component {
       return this._handleNavigateTo({ id: options.value }, options.data);
     }
 
+    if (options.type === "NEW_WINDOW") {
+      return window.open(options.value);
+    }
+
     if (options.type === "ACTION") {
       return alert(JSON.stringify(options));
     }

pages/profile.js

@@ -72,7 +72,7 @@ export default class ProfilePage extends React.Component {
               This user is not found.
               <br />
               <br />
-              <a href="/application">Run Slate</a>
+              <a href="/application">Run Slate {Constants.values.version}</a>
               <br />
               <a href="/system">Use Slate's Design System</a>
             </p>
@@ -101,6 +101,21 @@ export default class ProfilePage extends React.Component {
             really cool soon!
             <br />
             <br />
+            {this.props.creator.slates.map((row) => {
+              const url = `https://slate.host/@${this.props.creator.username}/${
+                row.slatename
+              }`;
+              return (
+                <React.Fragment key={url}>
+                  <a href={`/@${this.props.creator.username}/${row.slatename}`}>
+                    {url}
+                  </a>
+                  <br />
+                </React.Fragment>
+              );
+            })}
+            <br />
+            <br />
             <a href="/application">Run Slate {Constants.values.version}</a>
             <br />
             <a href="/system">Use Slate's Design System</a>

pages/slate.js

@@ -0,0 +1,123 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import { css } from "@emotion/react";
+
+import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+
+export const getServerSideProps = async (context) => {
+  return {
+    props: { ...context.query },
+  };
+};
+
+const STYLES_ROOT = css`
+  padding: 128px 88px 256px 88px;
+
+  @media (max-width: 768px) {
+    padding: 128px 24px 128px 24px;
+  }
+`;
+
+const STYLES_HEADING = css`
+  font-weight: 400;
+  font-size: 2.88rem;
+  line-height: 1.5;
+  color: ${Constants.system.black};
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+`;
+
+const STYLES_PARAGRAPH = css`
+  font-weight: 400;
+  font-size: 2.88rem;
+  line-height: 1.5;
+  color: ${Constants.system.pitchBlack};
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+`;
+
+const STYLES_IMAGE = css`
+  display: inline-flex;
+  border-radius: 4px;
+  background-size: cover;
+  background-position: 50% 50%;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
+  height: 288px;
+  width: 288px;
+  margin: 0 24px 24px 0;
+`;
+
+export default class SlatePage extends React.Component {
+  render() {
+    console.log(this.props);
+
+    const title = this.props.slate
+      ? `@${this.props.slate.ownername}/${this.props.slate.slatename}`
+      : "404";
+    const url = `https://slate.host/${title}`;
+
+    if (!this.props.slate) {
+      return (
+        <WebsitePrototypeWrapper
+          title={title}
+          description="This Slate can not be found."
+          url={url}
+        >
+          <div css={STYLES_ROOT}>
+            <h1 css={STYLES_HEADING}>404</h1>
+            <p css={STYLES_PARAGRAPH}>
+              This slate is not found.
+              <br />
+              <br />
+              <a href="/application">Run Slate {Constants.values.version}</a>
+              <br />
+              <a href="/system">Use Slate's Design System</a>
+            </p>
+          </div>
+        </WebsitePrototypeWrapper>
+      );
+    }
+
+    const description = "A slate.";
+
+    return (
+      <WebsitePrototypeWrapper
+        title={title}
+        description={description}
+        url={url}
+      >
+        <div css={STYLES_ROOT}>
+          {this.props.slate.data.objects.map((each) => {
+            console.log(each);
+            return (
+              <div
+                css={STYLES_IMAGE}
+                key={each.url}
+                style={{ backgroundImage: `url("${each.url}")` }}
+              />
+            );
+          })}
+          <h1 css={STYLES_HEADING} style={{ marginTop: 64 }}>
+            {title}
+          </h1>
+          <p css={STYLES_PARAGRAPH}>
+            This is a Slate page on Slate. It will be cool some day.
+            <br />
+            <a href="/application">Run Slate {Constants.values.version}</a>
+            <br />
+            <a href="/system">Use Slate's Design System</a>
+            <br />
+            <a href="https://github.com/filecoin-project/slate">
+              View Source ☺
+            </a>
+          </p>
+        </div>
+      </WebsitePrototypeWrapper>
+    );
+  }
+}

scenes/SceneHome.js

@@ -61,7 +61,7 @@ export default class SceneHome extends React.Component {
           width: "228px",
           type: "SLATE_LINK",
         },
-        { key: "url", name: "URL", width: "268px" },
+        { key: "url", name: "URL", width: "268px", type: "NEW_WINDOW" },
         {
           key: "public",
           name: "Public",
@@ -72,9 +72,7 @@ export default class SceneHome extends React.Component {
       rows: this.props.viewer.slates.map((each) => {
         return {
           ...each,
-          url: `https://slate.host/@${this.props.viewer.username}/${
+          url: `/@${this.props.viewer.username}/${each.slatename}`,
-            each.slatename
-          }`,
           public: each.data.public,
         };
       }),

scenes/SceneSlate.js

@@ -10,8 +10,8 @@ export default class SceneSlate extends React.Component {
   static defaultProps = { data: { data: { objects: [] } } };
 
   render() {
-    console.log(this.props);
     const images = this.props.current.data.objects;
+    const url = `/@${this.props.viewer.username}/${this.props.data.slatename}`;
 
     const slates = {
       columns: [
@@ -27,6 +27,11 @@ export default class SceneSlate extends React.Component {
       { name: "Make public", type: "SIDEBAR", value: "" },
       { name: "Make private", type: "SIDEBAR", value: "" },
       */
+      {
+        name: "View slate",
+        type: "NEW_WINDOW",
+        value: url,
+      },
       {
         name: "Add image",
         type: "SIDEBAR",
@@ -45,7 +50,9 @@ export default class SceneSlate extends React.Component {
         >
           <System.Table
             data={slates}
-            name="slate"
+            name={`/@${this.props.viewer.username}/${
+              this.props.data.slatename
+            }`}
             onAction={this.props.onAction}
             onNavigateTo={this.props.onNavigateTo}
           />

scenes/SceneSlates.js

@@ -12,9 +12,14 @@ export default class SceneSlates extends React.Component {
     // TODO(jim): Refactor later.
     const slates = {
       columns: [
-        { key: "id", id: "id", name: "ID", type: "SLATE_LINK" },
+        { key: "id", id: "id", name: "ID" },
-        { key: "slatename", name: "Slate Name", width: "228px" },
+        {
-        { key: "url", name: "URL", width: "268px" },
+          key: "slatename",
+          name: "Slate Name",
+          width: "228px",
+          type: "SLATE_LINK",
+        },
+        { key: "url", name: "URL", width: "268px", type: "NEW_WINDOW" },
         {
           key: "public",
           name: "Public",
@@ -25,9 +30,7 @@ export default class SceneSlates extends React.Component {
       rows: this.props.viewer.slates.map((each) => {
         return {
           ...each,
-          url: `https://slate.host/@${this.props.viewer.username}/${
+          url: `/@${this.props.viewer.username}/${each.slatename}`,
-            each.slatename
-          }`,
           public: each.data.public,
         };
       }),

server.js

@@ -57,6 +57,8 @@ app.prepare().then(async () => {
       username: req.params.username,
     });
 
+    const slates = await Data.getSlatesByUserId({ userId: creator.id });
+
     return app.render(req, res, "/profile", {
       viewer,
       creator:
@@ -64,11 +66,26 @@ app.prepare().then(async () => {
           ? {
               username: creator.username,
               data: { photo: creator.data.photo },
+              slates: JSON.parse(JSON.stringify(slates)),
             }
           : null,
     });
   });
 
+  server.get("/@:username/:slatename", async (req, res) => {
+    const slate = await Data.getSlateByName({
+      slatename: req.params.slatename,
+    });
+
+    if (slate) {
+      slate.ownername = req.params.username;
+    }
+
+    return app.render(req, res, "/slate", {
+      slate: JSON.parse(JSON.stringify(slate)),
+    });
+  });
+
   server.all("*", async (req, res) => {
     return handler(req, res, req.url);
   });