filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-23 00:51:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

slate: profile and URL

Browse Source
This commit is contained in:
@wwwjim 2020-07-27 02:50:25 -07:00
parent f858697b13
commit 73c246781f
10 changed files with 195 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Section.js
View File

@ -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;

3
components/sidebars/SidebarCreateSlate.js
View File

@ -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;
}

12
components/system/components/fragments/TableComponents.js
View File

@ -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) {

4
pages/application.js
View File

@ -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));
}

17
pages/profile.js
View File

@ -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>

123
pages/slate.js Normal file
View File

@ -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>
);
}
}

6
scenes/SceneHome.js
View File

@ -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,
};
}),

11
scenes/SceneSlate.js
View File

@ -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}
/>

15
scenes/SceneSlates.js
View File

@ -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,
};
}),

17
server.js
View File

@ -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);
});