Merge pull request #109 from stemmlerjs/master

Convert Fullstack Tutorial to use TypeScript

final/client/package.json

@@ -5,6 +5,10 @@
   "dependencies": {
     "@apollo/react-hooks": "3.0.0",
     "@reach/router": "^1.2.1",
+    "@types/node": "^12.12.14",
+    "@types/reach__router": "^1.2.6",
+    "@types/react": "^16.9.15",
+    "@types/react-dom": "^16.9.4",
     "apollo-cache-inmemory": "^1.6.2",
     "apollo-client": "^2.6.3",
     "apollo-link-http": "^1.5.15",
@@ -15,14 +19,16 @@
     "react": "^16.9.0-alpha.0",
     "react-dom": "^16.9.0-alpha.0",
     "react-emotion": "^9.2.12",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "typescript": "^3.7.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "run:ios-demo": "npx artillery run apollo-internal-demos/ios-workload.yml"
+    "run:ios-demo": "npx artillery run apollo-internal-demos/ios-workload.yml",
+    "codegen": "apollo client:codegen --target typescript --watch"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -37,7 +43,9 @@
     "@apollo/react-testing": "3.0.0",
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.7",
+    "@types/jest": "^24.0.23",
     "apollo": "^2.16.3",
-    "artillery": "^1.6.0-26"
+    "artillery": "^1.6.0-26",
+    "npm-watch": "^0.6.0"
   }
 }

start/client/src/components/__tests__/launch-detail.js → final/client/src/components/__tests__/launch-detail.tsx

@@ -10,9 +10,9 @@ describe('Launch Detail View', () => {
   it('renders without error', () => {
     render(
       <LaunchDetail
-        id={1}
+        id={'1'}
         site={'earth'}
-        rocket={{ name: 'that one', type: 'big' }}
+        rocket={{ name: 'that one', type: 'big', __typename: 'Rocket', id: '1' }}
       />,
     );
   });

start/client/src/components/__tests__/launch-tile.js → final/client/src/components/__tests__/launch-tile.tsx

@@ -11,9 +11,11 @@ describe('Launch Tile', () => {
     render(
       <LaunchTile
         launch={{
-          id: 1,
-          mission: { name: 'the first one' },
-          rocket: { name: 'harambe' },
+          __typename: 'Launch',
+          isBooked: false,
+          id: '1',
+          mission: { name: 'the first one', __typename: 'Mission', missionPatch: null },
+          rocket: { name: 'harambe', __typename: 'Rocket', id: '1' },
         }}
       />,
     );

start/client/src/components/__tests__/login-form.js → final/client/src/components/__tests__/login-form.tsx

@@ -8,6 +8,6 @@ describe('Login Form', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<LoginForm />);
+    render(<LoginForm login={() => {}}/>);
   });
 });

final/client/src/components/header.js → final/client/src/components/header.tsx

@@ -11,15 +11,22 @@ const max = 25; // 25 letters in the alphabet
 const offset = 97; // letter A's charcode is 97
 const avatars = [dog1, dog2, dog3];
 const maxIndex = avatars.length - 1;
-function pickAvatarByEmail(email) {
+
+function pickAvatarByEmail(email: string) {
   const charCode = email.toLowerCase().charCodeAt(0) - offset;
   const percentile = Math.max(0, Math.min(max, charCode)) / max;
   return avatars[Math.round(maxIndex * percentile)];
 }
 
-export default function Header({ image, children = 'Space Explorer' }) {
-  const email = atob(localStorage.getItem('token'));
+interface HeaderProps {
+  image?: string | any;
+  children?: any;
+}
+
+const Header: React.FC<HeaderProps> = ({ image, children = 'Space Explorer' }) => {
+  const email = atob(localStorage.getItem('token') as string);
   const avatar = image || pickAvatarByEmail(email);
+
   return (
     <Container>
       <Image round={!image} src={avatar} alt="Space dog" />
@@ -31,6 +38,8 @@ export default function Header({ image, children = 'Space Explorer' }) {
   );
 }
 
+export default Header;
+
 /**
  * STYLED COMPONENTS USED IN THIS FILE ARE BELOW HERE
  */
@@ -41,9 +50,9 @@ const Container = styled('div')({
   marginBottom: unit * 4.5,
 });
 
-const Image = styled('img')(size(134), props => ({
+const Image = styled('img')(size(134), (props: { round: boolean }) => ({
   marginRight: unit * 2.5,
-  borderRadius: props.round && '50%',
+  borderRadius: props.round ? '50%' : '0%',
 }));
 
 const Subheading = styled('h5')({

start/client/src/components/launch-detail.js → final/client/src/components/launch-detail.tsx

@@ -3,15 +3,18 @@ import styled from 'react-emotion';
 
 import { unit } from '../styles';
 import { cardClassName, getBackgroundImage } from './launch-tile';
+import { LaunchDetails_launch } from '../pages/__generated__/LaunchDetails';
 
-const LaunchDetail = ({ id, site, rocket }) => (
+type LaunchDetailProps = Partial<LaunchDetails_launch>
+
+const LaunchDetail: React.FC<LaunchDetailProps> = ({ id, site, rocket }) => (
   <Card
     style={{
-      backgroundImage: getBackgroundImage(id),
+      backgroundImage: getBackgroundImage(id as string),
     }}
   >
     <h3>
-      {rocket.name} ({rocket.type})
+      {rocket && rocket.name} ({rocket && rocket.type})
     </h3>
     <h5>{site}</h5>
   </Card>

final/client/src/components/launch-tile.js → final/client/src/components/launch-tile.tsx

@@ -6,13 +6,18 @@ import galaxy from '../assets/images/galaxy.jpg';
 import iss from '../assets/images/iss.jpg';
 import moon from '../assets/images/moon.jpg';
 import { unit } from '../styles';
+import * as LaunchTileTypes from '../pages/__generated__/LaunchTile';
 
 const backgrounds = [galaxy, iss, moon];
-export function getBackgroundImage(id) {
+export function getBackgroundImage(id: string) {
   return `url(${backgrounds[Number(id) % backgrounds.length]})`;
 }
 
-export default ({ launch }) => {
+interface LaunchTileProps {
+  launch: LaunchTileTypes.LaunchTile;
+}
+
+const LaunchTile: React.FC<LaunchTileProps> = ({ launch }) => {
   const { id, mission, rocket } = launch;
   return (
     <StyledLink
@@ -21,11 +26,13 @@ export default ({ launch }) => {
         backgroundImage: getBackgroundImage(id),
       }}
     >
-      <h3>{mission.name}</h3>
-      <h5>{rocket.name}</h5>
+      <h3>{mission ? mission.name : ''}</h3>
+      <h5>{rocket && rocket.name}</h5>
     </StyledLink>
   );
-};
+}
+
+export default LaunchTile;
 
 /**
  * STYLED COMPONENTS USED IN THIS FILE ARE BELOW HERE

final/client/src/components/login-form.js → final/client/src/components/login-form.tsx

@@ -8,16 +8,25 @@ import { ReactComponent as Logo } from '../assets/logo.svg';
 import { ReactComponent as Curve } from '../assets/curve.svg';
 import { ReactComponent as Rocket } from '../assets/rocket.svg';
 import { colors, unit } from '../styles';
+import * as LoginTypes from '../pages/__generated__/login';
 
-export default class LoginForm extends Component {
+interface LoginFormProps {
+  login: (a: { variables: LoginTypes.loginVariables }) => void;
+}
+
+interface LoginFormState {
+  email: string;
+}
+
+export default class LoginForm extends Component<LoginFormProps, LoginFormState> {
   state = { email: '' };
 
-  onChange = event => {
-    const email = event.target.value;
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const email = (event.target as HTMLInputElement).value;
     this.setState(s => ({ email }));
   };
 
-  onSubmit = event => {
+  onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     this.props.login({ variables: { email: this.state.email } });
   };
@@ -31,14 +40,14 @@ export default class LoginForm extends Component {
         </Header>
         <StyledRocket />
         <Heading>Space Explorer</Heading>
-        <StyledForm onSubmit={this.onSubmit}>
+        <StyledForm onSubmit={(e) => this.onSubmit(e)}>
           <StyledInput
             required
             type="email"
             name="email"
             placeholder="Email"
             data-testid="login-input"
-            onChange={this.onChange}
+            onChange={(e) => this.onChange(e)}
           />
           <Button type="submit">Log in</Button>
         </StyledForm>

start/client/src/components/page-container.js → final/client/src/components/page-container.tsx

@@ -3,7 +3,7 @@ import styled from 'react-emotion';
 
 import { unit, colors } from '../styles';
 
-export default function PageContainer(props) {
+export default function PageContainer (props: any) {
   return (
     <Fragment>
       <Bar />

final/client/src/containers/__tests__/action-button.js → final/client/src/containers/__tests__/action-button.tsx

@@ -4,14 +4,11 @@ import { InMemoryCache } from 'apollo-cache-inmemory';
 import {
   renderApollo,
   cleanup,
-  getByTestId,
   fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
 import ActionButton, {
   GET_LAUNCH_DETAILS,
-  CANCEL_TRIP,
   TOGGLE_CART,
 } from '../action-button';
 import { GET_CART_ITEMS } from '../../pages/cart';
@@ -86,7 +83,7 @@ describe('action button', () => {
     ];
 
     const { getByTestId, container, debug } = renderApollo(
-      <ActionButton id={1} isBooked={false} />,
+      <ActionButton id={'1'} isBooked={false} />,
       {
         mocks,
         cache,