slate/pages/index.js

188 lines
4.7 KiB
JavaScript
Raw Normal View History

2020-07-09 06:19:08 +03:00
import * as React from "react";
2020-07-16 08:48:51 +03:00
import * as Constants from "~/common/constants";
import * as Actions from "~/common/actions";
import * as System from "~/components/system";
2020-07-09 06:19:08 +03:00
2020-07-16 08:48:51 +03:00
import { css } from "@emotion/react";
2020-07-09 06:19:08 +03:00
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
2020-07-16 08:48:51 +03:00
const STYLES_ROOT = css`
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
text-align: center;
font-size: 1rem;
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 0.78rem;
2020-07-16 08:48:51 +03:00
}
`;
const STYLES_MIDDLE = css`
position: relative;
min-height: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 24px;
`;
const STYLES_CARD = css`
margin: 0 auto 0 auto;
max-width: 420px;
width: 100%;
background: ${Constants.system.pitchBlack};
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
`;
const STYLES_CARD_IMAGE = css`
width: 100%;
border-radius: 8px 8px 0 0;
`;
const STYLES_CARD_PARAGRAPH = css`
padding: 48px;
font-size: 1.2rem;
color: ${Constants.system.white};
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 24px;
font-size: 1rem;
}
2020-07-16 08:48:51 +03:00
`;
const STYLES_CARD_ACTIONS = css`
display: flex;
align-items: center;
justify-content: space-between;
color: ${Constants.system.white};
padding: 24px;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 16px;
}
`;
const STYLES_CARD_ACTIONS_LEFT = css`
min-width: 10%;
width: 100%;
font-family: ${Constants.font.code};
text-transform: uppercase;
font-size: 12px;
text-align: left;
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 10px;
}
`;
const STYLES_CARD_ACTIONS_RIGHT = css`
padding: 0 0 0 24px;
flex-shrink: 0;
`;
const STYLES_LINK = css`
color: ${Constants.system.green};
text-decoration: none;
transition: 200ms ease color;
:visited {
color: ${Constants.system.green};
}
:hover {
color: ${Constants.system.brand};
}
2020-07-16 08:48:51 +03:00
`;
2020-08-19 21:17:12 +03:00
// TODO(jim): Refactor this health check later.
export const getServerSideProps = async (context) => {
2020-08-19 21:17:12 +03:00
let buckets = false;
try {
const response = await fetch("https://hub.textile.io/health", {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
if (response.status === 204) {
buckets = true;
}
2020-08-19 21:17:12 +03:00
} catch (e) {
console.log(e);
}
return {
2020-08-19 21:17:12 +03:00
props: { ...context.query, buckets },
};
};
2020-02-19 09:30:47 +03:00
export default class IndexPage extends React.Component {
2020-08-19 21:17:12 +03:00
state = {
available: this.props.buckets,
2020-08-19 21:17:12 +03:00
};
async componentDidMount() {
const response = await Actions.health({});
console.log("HEALTH_CHECK", response);
2020-08-19 21:17:12 +03:00
if (response && response.data) {
return this.setState({ available: this.props.buckets });
2020-08-19 21:17:12 +03:00
}
return this.setState({ available: false });
}
2020-02-19 09:30:47 +03:00
render() {
2020-07-16 08:48:51 +03:00
const title = `Slate`;
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
2020-07-16 08:48:51 +03:00
const url = "https://slate.host";
2020-02-19 09:30:47 +03:00
return (
<WebsitePrototypeWrapper title={title} description={description} url={url}>
2020-07-16 08:48:51 +03:00
<div css={STYLES_ROOT}>
<WebsitePrototypeHeader />
<div css={STYLES_MIDDLE}>
<div css={STYLES_CARD}>
<img css={STYLES_CARD_IMAGE} src="/static/social-github-dark.jpg" />
<p css={STYLES_CARD_PARAGRAPH}>
Store your files, turn them into collections, and share them with the world with{" "}
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
2020-08-04 07:18:15 +03:00
Filecoin & Slate
</a>
.
</p>
{this.state.available ? (
2020-08-19 21:17:12 +03:00
<div css={STYLES_CARD_ACTIONS}>
<div css={STYLES_CARD_ACTIONS_LEFT}>
Try out our alpha testing application v{Constants.values.version} for Filecoin
</div>
<div css={STYLES_CARD_ACTIONS_RIGHT}>
<System.ButtonPrimary onClick={() => window.open("/_")}>Use Slate</System.ButtonPrimary>
</div>
</div>
2020-08-19 21:17:12 +03:00
) : (
<div css={STYLES_CARD_ACTIONS}>
<div css={STYLES_CARD_ACTIONS_LEFT} style={{ textAlign: "center" }}>
Slate is currently down for maintenance.
</div>
</div>
2020-08-19 21:17:12 +03:00
)}
</div>
</div>
<WebsitePrototypeFooter />
2020-07-16 08:48:51 +03:00
</div>
</WebsitePrototypeWrapper>
2020-02-19 09:30:47 +03:00
);
}
}