updates client starter code [Ready to merge]

README.md

@@ -1,10 +1,11 @@
 # Apollo tutorial
 
-This is the fullstack app for the [Apollo tutorial](http://apollographql.com/docs/tutorial/introduction.html). 🚀
+This is the fullstack app for the [Apollo tutorial](https://www.apollographql.com/tutorials/fullstack-quickstart/introduction). 🚀
 
 ## File structure
 
 The app is split out into two folders:
+
 - `start`: Starting point for the tutorial
 - `final`: Final version
 

final/client/package.json

@@ -1,22 +1,21 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.4.6",
-    "@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",
-    "emotion": "^9.2.12",
-    "graphql": "^14.7.0",
-    "polished": "^3.4.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-emotion": "^9.2.12",
-    "react-scripts": "^3.4.1",
-    "typescript": "^3.7.3"
+    "@apollo/client": "^3.7.0",
+    "@emotion/css": "^11.10.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "graphql": "^16.5.0",
+    "history": "^5.3.0",
+    "polished": "^4.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.4.1",
+    "react-router-dom": "^6.4.1",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,11 +35,14 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^8.0.7",
-    "@types/jest": "^24.0.23",
-    "apollo": "^2.32.5",
-    "artillery": "^1.6.0-26",
-    "npm-watch": "^0.6.0"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.1.1",
+    "@types/node": "^18.7.3",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router": "^5.1.19",
+    "artillery": "^2.0.0-23",
+    "npm-watch": "^0.11.0"
   }
 }

final/client/src/components/__tests__/launch-tile.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 
 import { render, cleanup } from '../../test-utils';
 import LaunchTile from '../launch-tile';
+import { renderApollo } from '../../test-utils';
 
 describe('Launch Tile', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(
+    renderApollo(
       <LaunchTile
         launch={{
           __typename: 'Launch',

final/client/src/components/__tests__/menu-item.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 
 import { render, cleanup } from '../../test-utils';
 import MenuItem from '../menu-item';
+import { renderApollo } from '../../test-utils';
 
 describe('Menu Item', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<MenuItem to="/wow" />);
+    renderApollo(<MenuItem to="/wow" />);
   });
 });

final/client/src/components/button.tsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { lighten } from 'polished';
 
 import { unit, colors } from '../styles';

final/client/src/components/footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import MenuItem from './menu-item';
 import LogoutButton from '../containers/logout-button';

final/client/src/components/header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { size } from 'polished';
 
 import { unit, colors } from '../styles';
@@ -24,7 +24,7 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({ image, children = 'Space Explorer' }) => {
-  const email = atob(localStorage.getItem('token') as string);
+  const email = window.atob(localStorage.getItem('token') as string);
   const avatar = image || pickAvatarByEmail(email);
 
   return (
@@ -36,7 +36,7 @@ const Header: React.FC<HeaderProps> = ({ image, children = 'Space Explorer' }) =
       </div>
     </Container>
   );
-}
+};
 
 export default Header;
 

final/client/src/components/launch-detail.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { unit } from '../styles';
 import { cardClassName, getBackgroundImage } from './launch-tile';
 import { LaunchDetails_launch } from '../pages/__generated__/LaunchDetails';
 
-type LaunchDetailProps = Partial<LaunchDetails_launch>
+type LaunchDetailProps = Partial<LaunchDetails_launch>;
 
 const LaunchDetail: React.FC<LaunchDetailProps> = ({ id, site, rocket }) => (
   <Card

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import styled, { css } from 'react-emotion';
-import { Link } from '@reach/router';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { Link } from 'react-router-dom';
 
 import galaxy from '../assets/images/galaxy.jpg';
 import iss from '../assets/images/iss.jpg';
@@ -30,7 +31,7 @@ const LaunchTile: React.FC<LaunchTileProps> = ({ launch }) => {
       <h5>{rocket && rocket.name}</h5>
     </StyledLink>
   );
-}
+};
 
 export default LaunchTile;
 

final/client/src/components/loading.tsx

@@ -1,4 +1,5 @@
-import styled, { keyframes} from 'react-emotion';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
 import { size } from 'polished';
 
 import { ReactComponent as Logo } from '../assets/logo.svg';

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { size } from 'polished';
 
 import Button from './button';
@@ -23,7 +24,7 @@ export default class LoginForm extends Component<LoginFormProps, LoginFormState>
 
   onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const email = (event.target as HTMLInputElement).value;
-    this.setState(s => ({ email }));
+    this.setState((s) => ({ email }));
   };
 
   onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -41,14 +42,7 @@ export default class LoginForm extends Component<LoginFormProps, LoginFormState>
         <StyledRocket />
         <Heading>Space Explorer</Heading>
         <StyledForm onSubmit={(e) => this.onSubmit(e)}>
-          <StyledInput
-            required
-            type="email"
-            name="email"
-            placeholder="Email"
-            data-testid="login-input"
-            onChange={(e) => this.onChange(e)}
-          />
+          <StyledInput required type="email" name="email" placeholder="Email" data-testid="login-input" onChange={(e) => this.onChange(e)} />
           <Button type="submit">Log in</Button>
         </StyledForm>
       </Container>
@@ -78,33 +72,45 @@ const svgClassName = css({
   fill: 'currentColor',
 });
 
-const Header = styled('header')(svgClassName, {
-  width: '100%',
-  marginBottom: unit * 5,
-  padding: unit * 2.5,
-  position: 'relative',
-});
-
-const StyledLogo = styled(Logo)(size(56), {
-  display: 'block',
-  margin: '0 auto',
-  position: 'relative',
-});
-
-const StyledCurve = styled(Curve)(size('100%'), {
-  fill: colors.primary,
-  position: 'absolute',
-  top: 0,
-  left: 0,
-});
+const Header = styled('header')([
+  svgClassName,
+  {
+    width: '100%',
+    marginBottom: unit * 5,
+    padding: unit * 2.5,
+    position: 'relative',
+  },
+]);
+
+const StyledLogo = styled(Logo)([
+  size(56),
+  {
+    display: 'block',
+    margin: '0 auto',
+    position: 'relative',
+  },
+]);
+
+const StyledCurve = styled(Curve)([
+  size('100%'),
+  {
+    fill: colors.primary,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+]);
 
 const Heading = styled('h1')({
   margin: `${unit * 3}px 0 ${unit * 6}px`,
 });
 
-const StyledRocket = styled(Rocket)(svgClassName, {
-  width: 250,
-});
+const StyledRocket = styled(Rocket)([
+  svgClassName,
+  {
+    width: 250,
+  },
+]);
 
 const StyledForm = styled('form')({
   width: '100%',

final/client/src/components/menu-item.tsx

@@ -1,5 +1,6 @@
-import styled, { css } from 'react-emotion';
-import { Link } from '@reach/router';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { Link } from 'react-router-dom';
 import { colors, unit } from '../styles';
 
 export const menuItemClassName = css({

final/client/src/components/page-container.tsx

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { renderApollo, cleanup } from '../../test-utils';
+import { renderApollo, cleanup, waitFor } from '../../test-utils';
 import ActionButton from '../action-button';
 import { cartItemsVar } from '../../cache';
 
@@ -18,7 +18,7 @@ describe('action button', () => {
     getByText(/add to cart/i);
 
     // rerender with different props to same container
-    cartItemsVar(['1']);
+    waitFor(() => cartItemsVar(['1']));
     renderApollo(<ActionButton id="1" />, { container });
     getByText(/remove from cart/i);
     cartItemsVar([]);

final/client/src/containers/__tests__/book-trips.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-import {
-  renderApollo,
-  cleanup,
-  fireEvent,
-  waitForElement,
-} from '../../test-utils';
+import { renderApollo, cleanup, fireEvent, waitFor } from '../../test-utils';
 import BookTrips, { BOOK_TRIPS } from '../book-trips';
 import { GET_LAUNCH } from '../cart-item';
 
@@ -48,18 +43,15 @@ describe('book trips', () => {
         result: { data: { launch: mockLaunch } },
       },
     ];
-    const { getByTestId } = renderApollo(
-      <BookTrips cartItems={['1']} />,
-      { mocks, addTypename: false },
-    );
+    const { getByTestId } = renderApollo(<BookTrips cartItems={['1']} />, { mocks, addTypename: false });
 
     fireEvent.click(getByTestId('book-button'));
 
     // Let's wait until our mocked mutation resolves and
     // the component re-renders.
     // getByTestId throws an error if it cannot find an element with the given ID
-    // and waitForElement will wait until the callback doesn't throw an error
-    await waitForElement(() => getByTestId('message'));
+    // and waitFor will wait until the callback doesn't throw an error
+    await waitFor(() => getByTestId('message'));
   });
 
   // >>>> TODO

final/client/src/containers/__tests__/cart-item.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 
-import {
-  renderApollo,
-  cleanup,
-  waitForElement,
-} from '../../test-utils';
+import { renderApollo, cleanup, waitFor } from '../../test-utils';
 import CartItem, { GET_LAUNCH } from '../cart-item';
 
 const mockLaunch = {
@@ -43,7 +39,7 @@ describe('cart item', () => {
     // check the loading state
     getByText(/loading/i);
 
-    return waitForElement(() => getByText(/test mission/i));
+    return waitFor(() => getByText(/test mission/i));
   });
 
   it('renders with error state', () => {
@@ -61,6 +57,6 @@ describe('cart item', () => {
       addTypename: false,
     });
 
-    waitForElement(() => getByText(/error: aw shucks/i));
+    waitFor(() => getByText(/aw shucks/i));
   });
-});
+});

final/client/src/containers/__tests__/logout-button.tsx

@@ -14,8 +14,8 @@ describe('logout button', () => {
 
   it('complete logout', async () => {
     isLoggedInVar(true);
-    localStorage.setItem('token', 'testTokenValue');
-    localStorage.setItem('userId', 'abc123');
+    localStorage.setItem('token', window.btoa('testTokenValue'));
+    localStorage.setItem('userId', window.btoa('abc123'));
     const { getByTestId } = renderApollo(<LogoutButton />, { cache });
     fireEvent.click(getByTestId('logout-button'));
     expect(isLoggedInVar()).toBeFalsy();