Setup Flow

[justtoconfirm]

The purpose of this ticket is to implement Flow. This will allows us to typecheck our props within each React component.

To begin, Flow will be applied to check the Button component initially.

Useful links:

Add flow type checking to React: https://flow.org/en/ https://flow.org/en/docs/react/ https://www.robinwieruch.de/the-soundcloud-client-in-react-redux-flow/#setupFlow

Typechecking in React: https://reactjs.org/docs/typechecking-with-proptypes.html

Further useful links: https://reactjs.org/docs/optimizing-performance.html https://webpack.js.org/guides/production/ https://reactjs.org/docs/static-type-checking.html https://datarockets.com/blog/react-components-flow-tutorial https://ropig.com/blog/type-checking-javascript-worth/ https://hackernoon.com/type-checking-in-javascript-getting-started-with-flow-8532c11aceb3 https://blog.cogent.co/type-checking-your-javascript-makes-coding-fun-again-78fc1d6d8597 https://stackoverflow.com/questions/40651126/flow-type-annotation-for-children-react-elements

Example code:

import React, { Component, PropTypes } from ‘react’;

    type SectionProps = {
                title: string,
                content: string,
                link: string
        };

const Section = ({ title, content, link }: SectionProps) => (
    <div>
        <title>{title}</title>
            <p>{content}</p>
            <div>{link}</div>
        </div>
) ;

• [x] Install Flow using NPM (Node Package Manager) as a devDependency.

• [x] Add build script within the package.json file to run Flow.

• [x] Apply Flow to the React Button component.

• [ ] Test that Flow is running as expected.

[justtoconfirm]

Flow is running as expected, however, we are encountering an issue with the Jest tests due to the changes we have made. This will be looked further.

[justtoconfirm]

Useful link relating to Flow config: https://flow.org/en/docs/config/

[justtoconfirm]

Possible fix for the issue that appears in the terminal: https://github.com/vuejs/vue-cli/issues/1584