aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-12 03:38:25 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-13 01:41:09 +0800
commit679d60cd5a5debcacff42c38967c1f8b7d972882 (patch)
tree47fc95928051b285c93bf828ec71f0c5bf9b0b70 /packages/website/ts/pages
parentbc36c0faed11d61164027efad5b2ad9d07f0573f (diff)
downloaddexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.tar
dexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.tar.gz
dexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.tar.bz2
dexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.tar.lz
dexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.tar.xz
dexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.tar.zst
dexon-sol-tools-679d60cd5a5debcacff42c38967c1f8b7d972882.zip
Implement large screen open positions
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/jobs/benefits.tsx2
-rw-r--r--packages/website/ts/pages/jobs/mission.tsx2
-rw-r--r--packages/website/ts/pages/jobs/open_positions.tsx196
-rw-r--r--packages/website/ts/pages/jobs/teams.tsx2
4 files changed, 129 insertions, 73 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index ce261592f..a7cc23503 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -41,7 +41,7 @@ export interface BenefitsProps {
}
export const Benefits = (props: BenefitsProps) => (
- <div style={{ backgroundColor: colors.jobsPageGrey }}>
+ <div style={{ backgroundColor: colors.jobsPageBackground }}>
{props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />}
</div>
);
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index a3584e5f6..b4d294623 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -35,7 +35,7 @@ export const Mission = (props: MissionProps) => {
</div>
);
return (
- <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageGrey, color: colors.black }}>
+ <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}>
<div className="mx-auto clearfix sm-py4">
{isSmallScreen ? (
<div>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f9c37d36f..5eb8e429d 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -1,80 +1,136 @@
import * as _ from 'lodash';
+import CircularProgress from 'material-ui/CircularProgress';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import * as React from 'react';
-const POSITIONS = [
- {
- name: 'Community Director',
- department: 'Marketing',
- office: 'Remote / San Francisco',
- },
- {
- name: 'Data Scientist / Data Engineer',
- department: 'Engineering',
- office: 'Remote / San Francisco',
- },
- {
- name: 'Executive Assitant / Office Manager',
- department: 'Operations',
- office: 'Remote / San Francisco',
- },
- {
- name: 'Research Fellow - Economics / Governance',
- department: 'Engineering',
- office: 'Remote / San Francisco',
- },
- {
- name: 'Software Engineer - Blockchain',
- department: 'Engineer',
- office: 'Remote / San Francisco',
- },
- {
- name: 'Software Engineer - Full-stack',
- department: 'Marketing',
- office: 'Remote / San Francisco',
- },
-];
+import { Retry } from 'ts/components/ui/retry';
+import { colors } from 'ts/style/colors';
+import { WebsiteBackendJobInfo } from 'ts/types';
+import { backendClient } from 'ts/utils/backend_client';
+
+const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
export interface OpenPositionsProps {
hash: string;
}
+export interface OpenPositionsState {
+ jobInfos?: WebsiteBackendJobInfo[];
+ error?: Error;
+}
-export const OpenPositions = (props: OpenPositionsProps) => {
- const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
- return (
- <div id={props.hash} className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
- <Table selectable={false}>
- <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
- <TableRow>
- <TableHeaderColumn colSpan={6} style={labelStyle}>
- Position
- </TableHeaderColumn>
- <TableHeaderColumn colSpan={3} style={labelStyle}>
- Department
- </TableHeaderColumn>
- <TableHeaderColumn colSpan={3} style={labelStyle}>
- Office
- </TableHeaderColumn>
- </TableRow>
- </TableHeader>
- <TableBody displayRowCheckbox={false} showRowHover={true}>
- {_.map(POSITIONS, position => {
- return (
- <TableRow hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
- <TableRowColumn colSpan={6} style={labelStyle}>
- {position.name}
- </TableRowColumn>
- <TableRowColumn colSpan={3} style={labelStyle}>
- {position.department}
- </TableRowColumn>
- <TableRowColumn colSpan={3} style={labelStyle}>
- {position.office}
- </TableRowColumn>
+export class OpenPositions extends React.Component<OpenPositionsProps, OpenPositionsState> {
+ private _isUnmounted: boolean;
+ constructor(props: OpenPositionsProps) {
+ super(props);
+ this._isUnmounted = false;
+ this.state = {
+ jobInfos: undefined,
+ error: undefined,
+ };
+ }
+ public componentWillMount(): void {
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchJobInfosAsync();
+ }
+ public componentWillUnmount(): void {
+ this._isUnmounted = true;
+ }
+ public render(): React.ReactNode {
+ const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos);
+ if (!isReadyToRender) {
+ return (
+ // TODO: consolidate this loading component with the one in portal and RelayerIndex
+ // TODO: possibly refactor into a generic loading container with spinner and retry UI
+ <div className="center">
+ {_.isUndefined(this.state.error) ? (
+ <CircularProgress size={40} thickness={5} />
+ ) : (
+ <Retry onRetry={this._fetchJobInfosAsync.bind(this)} />
+ )}
+ </div>
+ );
+ } else {
+ return (
+ <div id={this.props.hash} className="mx-auto max-width-4">
+ <Title />
+ <Table selectable={false} onCellClick={this._onCellClick.bind(this)}>
+ <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+ <TableRow>
+ <TableHeaderColumn colSpan={5} style={labelStyle}>
+ Position
+ </TableHeaderColumn>
+ <TableHeaderColumn colSpan={3} style={labelStyle}>
+ Department
+ </TableHeaderColumn>
+ <TableHeaderColumn colSpan={4} style={labelStyle}>
+ Office
+ </TableHeaderColumn>
</TableRow>
- );
- })}
- </TableBody>
- </Table>
- </div>
- );
-};
+ </TableHeader>
+ <TableBody displayRowCheckbox={false} showRowHover={true}>
+ {_.map(this.state.jobInfos, jobInfo => {
+ return this._renderJobInfo(jobInfo);
+ })}
+ </TableBody>
+ </Table>
+ </div>
+ );
+ }
+ }
+ private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode {
+ return (
+ <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
+ <TableRowColumn colSpan={5} style={labelStyle}>
+ {jobInfo.title}
+ </TableRowColumn>
+ <TableRowColumn colSpan={3} style={labelStyle}>
+ {jobInfo.department}
+ </TableRowColumn>
+ <TableRowColumn colSpan={4} style={labelStyle}>
+ {jobInfo.office}
+ </TableRowColumn>
+ </TableRow>
+ );
+ }
+ private async _fetchJobInfosAsync(): Promise<void> {
+ try {
+ if (!this._isUnmounted) {
+ this.setState({
+ jobInfos: undefined,
+ error: undefined,
+ });
+ }
+ const jobInfos = await backendClient.getJobInfosAsync();
+ if (!this._isUnmounted) {
+ this.setState({
+ jobInfos,
+ });
+ }
+ } catch (error) {
+ if (!this._isUnmounted) {
+ this.setState({
+ error,
+ });
+ }
+ }
+ }
+ private _onCellClick(rowNumber: number): void {
+ if (_.isUndefined(this.state.jobInfos)) {
+ return;
+ }
+ const url = this.state.jobInfos[rowNumber].url;
+ window.open(url, '_blank');
+ }
+}
+
+const Title = () => (
+ <div
+ className="h2 lg-py4 md-py4 sm-py3"
+ style={{
+ paddingLeft: 90,
+ fontFamily: 'Roboto Mono',
+ }}
+ >
+ {'Open Positions'}
+ </div>
+);
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index 3d953c993..465bae7f4 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -42,7 +42,7 @@ export interface TeamsProps {
export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />);
const LargeLayout = () => (
- <div className="mx-auto max-width-4 clearfix">
+ <div className="mx-auto max-width-4 clearfix pb4">
<div className="col lg-col-6 md-col-6 col-12">
<BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
</div>