From 73c246781f0ca9c022290cdf367088698f0087c3 Mon Sep 17 00:00:00 2001 From: "@wwwjim" Date: Mon, 27 Jul 2020 02:50:25 -0700 Subject: [PATCH] slate: profile and URL --- components/core/Section.js | 2 +- components/sidebars/SidebarCreateSlate.js | 3 +- .../components/fragments/TableComponents.js | 12 ++ pages/application.js | 4 + pages/profile.js | 17 ++- pages/slate.js | 123 ++++++++++++++++++ scenes/SceneHome.js | 6 +- scenes/SceneSlate.js | 11 +- scenes/SceneSlates.js | 15 ++- server.js | 17 +++ 10 files changed, 195 insertions(+), 15 deletions(-) create mode 100644 pages/slate.js diff --git a/components/core/Section.js b/components/core/Section.js index f1405a9f..b43d42d4 100644 --- a/components/core/Section.js +++ b/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; diff --git a/components/sidebars/SidebarCreateSlate.js b/components/sidebars/SidebarCreateSlate.js index 1834e136..847ecc3c 100644 --- a/components/sidebars/SidebarCreateSlate.js +++ b/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; } diff --git a/components/system/components/fragments/TableComponents.js b/components/system/components/fragments/TableComponents.js index a278865d..a61aa6b3 100644 --- a/components/system/components/fragments/TableComponents.js +++ b/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 ( + window.open(text)}> + {text} + + ); case "SLATE_LINK": // NOTE(jim): Special case to prevent navigation. if (!data) { diff --git a/pages/application.js b/pages/application.js index 2f623938..63556c5e 100644 --- a/pages/application.js +++ b/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)); } diff --git a/pages/profile.js b/pages/profile.js index f52dcb2f..b2faaeac 100644 --- a/pages/profile.js +++ b/pages/profile.js @@ -72,7 +72,7 @@ export default class ProfilePage extends React.Component { This user is not found.

- Run Slate + Run Slate {Constants.values.version}
Use Slate's Design System

@@ -101,6 +101,21 @@ export default class ProfilePage extends React.Component { really cool soon!

+ {this.props.creator.slates.map((row) => { + const url = `https://slate.host/@${this.props.creator.username}/${ + row.slatename + }`; + return ( + + + {url} + +
+ + ); + })} +
+
Run Slate {Constants.values.version}
Use Slate's Design System diff --git a/pages/slate.js b/pages/slate.js new file mode 100644 index 00000000..d3c5cc8a --- /dev/null +++ b/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 ( + +
+

404

+

+ This slate is not found. +
+
+ Run Slate {Constants.values.version} +
+ Use Slate's Design System +

+
+ + ); + } + + const description = "A slate."; + + return ( + +
+ {this.props.slate.data.objects.map((each) => { + console.log(each); + return ( +
+ ); + })} +

+ {title} +

+

+ This is a Slate page on Slate. It will be cool some day. +
+ Run Slate {Constants.values.version} +
+ Use Slate's Design System +
+ + View Source ☺ + +

+
+ + ); + } +} diff --git a/scenes/SceneHome.js b/scenes/SceneHome.js index 217b2d0e..bcce46aa 100644 --- a/scenes/SceneHome.js +++ b/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}/${ - each.slatename - }`, + url: `/@${this.props.viewer.username}/${each.slatename}`, public: each.data.public, }; }), diff --git a/scenes/SceneSlate.js b/scenes/SceneSlate.js index 42569957..29393dec 100644 --- a/scenes/SceneSlate.js +++ b/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 { > diff --git a/scenes/SceneSlates.js b/scenes/SceneSlates.js index 825b4ad1..2e343cbe 100644 --- a/scenes/SceneSlates.js +++ b/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: "slatename", name: "Slate Name", width: "228px" }, - { key: "url", name: "URL", width: "268px" }, + { key: "id", id: "id", name: "ID" }, + { + 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}/${ - each.slatename - }`, + url: `/@${this.props.viewer.username}/${each.slatename}`, public: each.data.public, }; }), diff --git a/server.js b/server.js index f31fbd0d..3bb7aedf 100644 --- a/server.js +++ b/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); });