From 7a726e2740b8cbc885229ed377ef5fc89502301d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 26 Nov 2018 23:39:34 -0800 Subject: feat(website): scaffolding for instant page --- packages/website/ts/containers/instant.ts | 27 +++++++++++++++++++++++++++ packages/website/ts/index.tsx | 2 ++ packages/website/ts/pages/instant/instant.tsx | 12 ++++++++++++ packages/website/ts/types.ts | 1 + 4 files changed, 42 insertions(+) create mode 100644 packages/website/ts/containers/instant.ts create mode 100644 packages/website/ts/pages/instant/instant.tsx (limited to 'packages/website') diff --git a/packages/website/ts/containers/instant.ts b/packages/website/ts/containers/instant.ts new file mode 100644 index 000000000..9bcfb903b --- /dev/null +++ b/packages/website/ts/containers/instant.ts @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Instant as InstantComponent, InstantProps } from 'ts/pages/instant/instant'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: InstantProps): ConnectedState => ({ + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Instant: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)( + InstantComponent, +); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index faf7d8c87..050c201a3 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -7,6 +7,7 @@ import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; +import { Instant } from 'ts/containers/instant'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; import { LaunchKit } from 'ts/containers/launch_kit'; @@ -92,6 +93,7 @@ render( + diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx new file mode 100644 index 000000000..0ecf39254 --- /dev/null +++ b/packages/website/ts/pages/instant/instant.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Translate } from 'ts/utils/translate'; + +export interface InstantProps { + location: Location; + translate: Translate; + dispatcher: Dispatcher; +} + +export const Instant: React.StatelessComponent = () =>
; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 89c477085..9c4b8a018 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -353,6 +353,7 @@ export enum WebsitePaths { FAQ = '/faq', About = '/about', LaunchKit = '/launch-kit', + Instant = '/instant', Whitepaper = '/pdfs/0x_white_paper.pdf', SmartContracts = '/docs/contracts', Connect = '/docs/connect', -- cgit v1.2.3 From f83c4c51c7bf4319da2833f4068e5804476be2a2 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 26 Nov 2018 23:55:01 -0800 Subject: feat(website): add header and footer to instant page --- packages/website/ts/pages/instant/instant.tsx | 47 ++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index 0ecf39254..ae91d7094 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -1,12 +1,57 @@ +import * as _ from 'lodash'; import * as React from 'react'; +import * as DocumentTitle from 'react-document-title'; +import { Footer } from 'ts/components/footer'; +import { MetaTags } from 'ts/components/meta_tags'; +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; export interface InstantProps { location: Location; translate: Translate; dispatcher: Dispatcher; + screenWidth: ScreenWidths; } -export const Instant: React.StatelessComponent = () =>
; +export interface InstantState {} + +const THROTTLE_TIMEOUT = 100; +const DOCUMENT_TITLE = 'Instant'; +const DOCUMENT_DESCRIPTION = 'Instant'; + +export class Instant extends React.Component { + // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well) + private readonly _throttledScreenWidthUpdate: () => void; + public constructor(props: InstantProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + } + public render(): React.ReactNode { + return ( + + + + +