Address PR feedback

2018-06-04 17:02:10 -07:00
parent a74597c7cd
commit cf73363016
8 changed files with 46 additions and 40 deletions
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -22,7 +22,6 @@ const baseColors = {
    heroGrey: '#404040',
    projectsGrey: '#343333',
    darkestGrey: '#272727',
-    darkButtonGrey: '#252525',
    lightBlue: '#60A4F4',
    lightBlueA700: '#0091EA',
    linkBlue: '#1D5CDE',
--- a/packages/website/ts/components/forms/subscribe_form.tsx
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -1,7 +1,6 @@
 import { colors } from '@0xproject/react-shared';
 import * as React from 'react';

-import { logUtils } from '@0xproject/utils';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Input } from 'ts/components/ui/input';
@@ -16,6 +15,7 @@ export enum SubscribeFormStatus {
    Error,
    Success,
    Loading,
+    Other,
 }

 export interface SubscribeFormState {
@@ -24,6 +24,9 @@ export interface SubscribeFormState {
    status: SubscribeFormStatus;
 }

+const FORM_FONT_SIZE = '15px';
+
+// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001
 export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
    public state = {
        emailText: '',
@@ -31,7 +34,6 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
        status: SubscribeFormStatus.None,
    };
    public render(): React.ReactNode {
-        const formFontSize = '15px';
        return (
            <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2">
                <Container marginBottom="15px">
@@ -46,18 +48,18 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
                                placeholder="you@email.com"
                                value={this.state.emailText}
                                fontColor={colors.white}
-                                fontSize={formFontSize}
+                                fontSize={FORM_FONT_SIZE}
                                backgroundColor={colors.projectsGrey}
-                                width="275px"
+                                width="300px"
                                onChange={this._handleEmailInputChange.bind(this)}
                            />
                        </Container>
                        <Container marginLeft="15px" marginTop="15px">
                            <Button
                                type="submit"
-                                backgroundColor={colors.darkButtonGrey}
+                                backgroundColor={colors.darkestGrey}
                                fontColor={colors.white}
-                                fontSize={formFontSize}
+                                fontSize={FORM_FONT_SIZE}
                            >
                                Subscribe
                            </Button>
@@ -82,16 +84,19 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
                break;
            case SubscribeFormStatus.None:
                break;
+            default:
+                throw new Error(
+                    'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.',
+                );
        }
        return (
            <Container isHidden={!message} marginTop="30px">
                <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
-                    {message || 'spacer text'}
+                    {message || 'spacer text (never shown to user)'}
                </Text>
            </Container>
        );
    }
-
    private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
        this.setState({ emailText: event.target.value });
    }
@@ -107,15 +112,12 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
        try {
            const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
            const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
-            this._setStatus(status);
+            this.setState({ status, emailText: '' });
        } catch (error) {
-            logUtils.log(error);
            this._setStatus(SubscribeFormStatus.Error);
-        } finally {
-            this.setState({ emailText: '' });
        }
    }
-    private _setStatus(status: SubscribeFormStatus, then?: () => void): void {
-        this.setState({ status }, then);
+    private _setStatus(status: SubscribeFormStatus): void {
+        this.setState({ status });
    }
 }
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -48,15 +48,15 @@ Button.defaultProps = {

 Button.displayName = 'Button';

-type CTAType = 'light' | 'dark';
+type CallToActionType = 'light' | 'dark';

-export interface CTAProps {
-    type?: CTAType;
+export interface CallToActionProps {
+    type?: CallToActionType;
    fontSize?: string;
    width?: string;
 }

-export const CTA: React.StatelessComponent<CTAProps> = ({ children, type, fontSize, width }) => {
+export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => {
    const isLight = type === 'light';
    const backgroundColor = isLight ? colors.white : colors.heroGrey;
    const fontColor = isLight ? colors.heroGrey : colors.white;
@@ -74,6 +74,6 @@ export const CTA: React.StatelessComponent<CTAProps> = ({ children, type, fontSi
    );
 };

-CTA.defaultProps = {
+CallToAction.defaultProps = {
    type: 'dark',
 };
--- a/packages/website/ts/components/ui/input.tsx
+++ b/packages/website/ts/components/ui/input.tsx
@@ -28,7 +28,7 @@ export const Input = styled(PlainInput)`
    border: none;
    background-color: ${props => props.backgroundColor};
    &::placeholder {
-        color: ${props => props.placeholder};
+        color: ${props => props.placeholderColor};
    }
 `;

@@ -36,7 +36,7 @@ Input.defaultProps = {
    width: 'auto',
    backgroundColor: colors.white,
    fontColor: colors.darkestGrey,
-    placeholderColor: colors.grey500,
+    placeholderColor: colors.darkGrey,
    fontSize: '12px',
 };

--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent<TranslatedTextProps> = ({
    translate,
    children,
    deco,
-    ...textProps,
+    ...textProps
 }) => <Text {...textProps}>{translate.get(children, deco)}</Text>;
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { Footer } from 'ts/components/footer';
 import { SubscribeForm } from 'ts/components/forms/subscribe_form';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { CTA } from 'ts/components/ui/button';
+import { CallToAction } from 'ts/components/ui/button';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -272,9 +272,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 389 }}>
                                    <div className="lg-pr2 md-pr2 col col-6 sm-center">
                                        <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                                            <CTA width="175px" type="light">
+                                            <CallToAction width="175px" type="light">
                                                {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
-                                            </CTA>
+                                            </CallToAction>
                                        </Link>
                                    </div>
                                    <div className="col col-6 sm-center">
@@ -283,9 +283,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                            target="_blank"
                                            className="text-decoration-none"
                                        >
-                                            <CTA width="175px">
+                                            <CallToAction width="175px">
                                                {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)}
-                                            </CTA>
+                                            </CallToAction>
                                        </a>
                                    </div>
                                </div>
@@ -774,7 +774,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                        </div>
                        <div className="sm-center sm-pt2 lg-table-cell md-table-cell">
                            <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                                <CTA fontSize="15px">{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}</CTA>
+                                <CallToAction fontSize="15px">
+                                    {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
+                                </CallToAction>
                            </Link>
                        </div>
                    </div>
--- a/packages/website/ts/utils/fetch_utils.ts
+++ b/packages/website/ts/utils/fetch_utils.ts
@@ -4,23 +4,26 @@ import * as queryString from 'query-string';

 import { errorReporter } from 'ts/utils/error_reporter';

+const logErrorIfPresent = (response: Response, requestedURL: string) => {
+    if (response.status !== 200) {
+        const errorText = `Error requesting url: ${requestedURL}, ${response.status}: ${response.statusText}`;
+        logUtils.log(errorText);
+        const error = Error(errorText);
+        // tslint:disable-next-line:no-floating-promises
+        errorReporter.reportAsync(error);
+        throw error;
+    }
+};
+
 export const fetchUtils = {
    async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> {
        const query = queryStringFromQueryParams(queryParams);
        const url = `${baseUrl}${path}${query}`;
        const response = await fetch(url);
-        if (response.status !== 200) {
-            const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
-            logUtils.log(errorText);
-            const error = Error(errorText);
-            // tslint:disable-next-line:no-floating-promises
-            errorReporter.reportAsync(error);
-            throw error;
-        }
+        logErrorIfPresent(response, url);
        const result = await response.json();
        return result;
    },
-
    async postAsync(baseUrl: string, path: string, body: object): Promise<Response> {
        const url = `${baseUrl}${path}`;
        const response = await fetch(url, {
@@ -30,6 +33,7 @@ export const fetchUtils = {
            },
            body: JSON.stringify(body),
        });
+        logErrorIfPresent(response, url);
        return response;
    },
 };
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -306,8 +306,7 @@ export const utils = {
        return parsedProviderName;
    },
    getBackendBaseUrl(): string {
-        return 'http://localhost:3000';
-        // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
+        return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
    },
    isDevelopment(): boolean {
        return configs.ENVIRONMENT === Environments.DEVELOPMENT;