Merge pull request #93 from apollographql/hooks-conversion

Hello Hooks
apollographql · Aug 6, 2019 · 6988f69 · 6988f69
2 parents db0aca1 + 91b18fe
commit 6988f69
Show file tree

Hide file tree

Showing 24 changed files with 12,385 additions and 20,905 deletions.
diff --git a/final/client/package-lock.json b/final/client/package-lock.json
diff --git a/final/client/package.json b/final/client/package.json
@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/react-hooks": "3.0.0",
     "@reach/router": "^1.2.1",
-    "apollo-cache-inmemory": "^1.5.1",
-    "apollo-client": "^2.6.1",
-    "apollo-link-http": "^1.5.9",
-    "emotion": "^10.0.6",
-    "graphql": "^14.2.1",
-    "graphql-tag": "^2.10.0",
-    "polished": "^2.3.3",
-    "react": "^16.7.0",
-    "react-apollo": "^2.5.1",
-    "react-dom": "^16.7.0",
+    "apollo-cache-inmemory": "^1.6.2",
+    "apollo-client": "^2.6.3",
+    "apollo-link-http": "^1.5.15",
+    "emotion": "^9.2.12",
+    "graphql": "^14.4.2",
+    "graphql-tag": "^2.10.1",
+    "polished": "^3.4.1",
+    "react": "^16.9.0-alpha.0",
+    "react-dom": "^16.9.0-alpha.0",
     "react-emotion": "^9.2.12",
-    "react-scripts": "2.1.3"
+    "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,9 +34,10 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "apollo": "^2.5.3",
-    "artillery": "^1.6.0-26",
-    "jest-dom": "^3.0.0",
-    "react-testing-library": "^5.4.4"
+    "@apollo/react-testing": "3.0.0",
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^8.0.7",
+    "apollo": "^2.16.3",
+    "artillery": "^1.6.0-26"
   }
 }
diff --git a/final/client/src/components/loading.js b/final/client/src/components/loading.js
@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'react-emotion';
+import styled, { keyframes} from 'react-emotion';
 import { size } from 'polished';
 
 import { ReactComponent as Logo } from '../assets/logo.svg';

diff --git a/final/client/src/containers/__tests__/action-button.js b/final/client/src/containers/__tests__/action-button.js
@@ -89,7 +89,8 @@ describe('action button', () => {
       <ActionButton id={1} isBooked={false} />,
       {
         mocks,
-        cache
+        cache,
+        resolvers: {}
       },
     );
     fireEvent.click(getByTestId('action-button'));

diff --git a/final/client/src/containers/action-button.js b/final/client/src/containers/action-button.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mutation } from 'react-apollo';
+import { useMutation } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 import { GET_LAUNCH_DETAILS } from '../pages/launch';
@@ -28,37 +28,35 @@ export const CANCEL_TRIP = gql`
 `;
 
 export default function ActionButton({ isBooked, id, isInCart }) {
-  return (
-    <Mutation
-      mutation={isBooked ? CANCEL_TRIP : TOGGLE_CART}
-      variables={{ launchId: id }}
-      refetchQueries={[
+  const [mutate, { loading, error }] = useMutation(
+    isBooked ? CANCEL_TRIP : TOGGLE_CART,
+    {
+      variables: { launchId: id },
+      refetchQueries: [
         {
           query: GET_LAUNCH_DETAILS,
           variables: { launchId: id },
         },
-      ]}
-    >
-      {(mutate, { loading, error }) => {
-        if (loading) return <p>Loading...</p>;
-        if (error) return <p>An error occurred</p>;
+      ]
+    }
+  );
 
-        return (
-          <div>
-            <Button
-              onClick={mutate}
-              isBooked={isBooked}
-              data-testid={'action-button'}
-            >
-              {isBooked
-                ? 'Cancel This Trip'
-                : isInCart
-                  ? 'Remove from Cart'
-                  : 'Add to Cart'}
-            </Button>
-          </div>
-        );
-      }}
-    </Mutation>
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>An error occurred</p>;
+
+  return (
+    <div>
+      <Button
+        onClick={mutate}
+        isBooked={isBooked}
+        data-testid={'action-button'}
+      >
+        {isBooked
+          ? 'Cancel This Trip'
+          : isInCart
+            ? 'Remove from Cart'
+            : 'Add to Cart'}
+      </Button>
+    </div>
   );
 }
diff --git a/final/client/src/containers/book-trips.js b/final/client/src/containers/book-trips.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mutation } from 'react-apollo';
+import { useMutation } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 import Button from '../components/button';
@@ -20,27 +20,25 @@ export const BOOK_TRIPS = gql`
 `;
 
 export default function BookTrips({ cartItems }) {
-  return (
-    <Mutation
-      mutation={BOOK_TRIPS}
-      variables={{ launchIds: cartItems }}
-      refetchQueries={cartItems.map(launchId => ({
+  const [bookTrips, { data }] = useMutation(
+    BOOK_TRIPS,
+    {
+      variables: { launchIds: cartItems },
+      refetchQueries: cartItems.map(launchId => ({
         query: GET_LAUNCH,
         variables: { launchId },
-      }))}
-      update={cache => {
+      })),
+      update(cache) {
         cache.writeData({ data: { cartItems: [] } });
-      }}
-    >
-      {(bookTrips, { data, loading, error }) =>
-        data && data.bookTrips && !data.bookTrips.success ? (
-          <p data-testid="message">{data.bookTrips.message}</p>
-        ) : (
-          <Button onClick={bookTrips} data-testid="book-button">
-            Book All
-          </Button>
-        )
       }
-    </Mutation>
+    }
   );
+
+  return data && data.bookTrips && !data.bookTrips.success
+    ? <p data-testid="message">{data.bookTrips.message}</p>
+    : (
+      <Button onClick={bookTrips} data-testid="book-button">
+        Book All
+      </Button>
+    );
 }
diff --git a/final/client/src/containers/cart-item.js b/final/client/src/containers/cart-item.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Query } from 'react-apollo';
+import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 import LaunchTile from '../components/launch-tile';
@@ -15,13 +15,11 @@ export const GET_LAUNCH = gql`
 `;
 
 export default function CartItem({ launchId }) {
-  return (
-    <Query query={GET_LAUNCH} variables={{ launchId }}>
-      {({ data, loading, error }) => {
-        if (loading) return <p>Loading...</p>;
-        if (error) return <p>ERROR: {error.message}</p>;
-        return data && <LaunchTile launch={data.launch} />;
-      }}
-    </Query>
+  const { data, loading, error } = useQuery(
+    GET_LAUNCH,
+    { variables: { launchId } }
   );
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>ERROR: {error.message}</p>;
+  return data && <LaunchTile launch={data.launch} />;
 }
diff --git a/final/client/src/containers/logout-button.js b/final/client/src/containers/logout-button.js
@@ -1,26 +1,23 @@
 import React from 'react';
 import styled from 'react-emotion';
-import { ApolloConsumer } from 'react-apollo';
+import { useApolloClient } from '@apollo/react-hooks';
 
 import { menuItemClassName } from '../components/menu-item';
 import { ReactComponent as ExitIcon } from '../assets/icons/exit.svg';
 
 export default function LogoutButton() {
+  const client = useApolloClient();
   return (
-    <ApolloConsumer>
-      {client => (
-        <StyledButton
-          data-testid="logout-button"
-          onClick={() => {
-            client.writeData({ data: { isLoggedIn: false } });
-            localStorage.clear();
-          }}
-        >
-          <ExitIcon />
-          Logout
-        </StyledButton>
-      )}
-    </ApolloConsumer>
+    <StyledButton
+      data-testid="logout-button"
+      onClick={() => {
+        client.writeData({ data: { isLoggedIn: false } });
+        localStorage.clear();
+      }}
+    >
+      <ExitIcon />
+      Logout
+    </StyledButton>
   );
 }
 

diff --git a/final/client/src/index.js b/final/client/src/index.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import {ApolloClient} from 'apollo-client';
-import {InMemoryCache} from 'apollo-cache-inmemory';
-import {HttpLink} from 'apollo-link-http';
-import {Query, ApolloProvider} from 'react-apollo';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { HttpLink } from 'apollo-link-http';
+import { ApolloProvider, useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 import Pages from './pages';
 import Login from './pages/login';
-import {resolvers, typeDefs} from './resolvers';
+import { resolvers, typeDefs } from './resolvers';
 import injectStyles from './styles';
 
 // Set up our apollo-client to point at the server we created
@@ -52,12 +52,16 @@ const IS_LOGGED_IN = gql`
   }
 `;
 
+function IsLoggedIn() {
+  const { data } = useQuery(IS_LOGGED_IN);
+  return data.isLoggedIn ? <Pages /> : <Login />;
+}
+
 injectStyles();
 ReactDOM.render(
+
   <ApolloProvider client={client}>
-    <Query query={IS_LOGGED_IN}>
-      {({data}) => (data.isLoggedIn ? <Pages /> : <Login />)}
-    </Query>
+    <IsLoggedIn />
   </ApolloProvider>,
   document.getElementById('root'),
 );
diff --git a/final/client/src/pages/__tests__/cart.js b/final/client/src/pages/__tests__/cart.js
@@ -30,6 +30,6 @@ describe('Cart Page', () => {
       },
     ];
     const { getByTestId } = renderApollo(<Cart />, { mocks });
-    return waitForElement(() => getByTestId('empty-message'));
+    return waitForElement(() => getByTestId('book-button'));
   });
 });
diff --git a/final/client/src/pages/__tests__/launch.js b/final/client/src/pages/__tests__/launch.js
@@ -40,6 +40,7 @@ describe('Launch Page', () => {
     ];
     const { getByText } = await renderApollo(<Launch launchId={1} />, {
       mocks,
+      resolvers: {}
     });
     await waitForElement(() => getByText(/test mission/i));
   });

diff --git a/final/client/src/pages/cart.js b/final/client/src/pages/cart.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { Query } from 'react-apollo';
+import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 import { Header, Loading } from '../components';
@@ -12,27 +12,22 @@ export const GET_CART_ITEMS = gql`
 `;
 
 export default function Cart() {
+  const { data, loading, error } = useQuery(GET_CART_ITEMS);
+  if (loading) return <Loading />;
+  if (error) return <p>ERROR: {error.message}</p>;
   return (
-    <Query query={GET_CART_ITEMS}>
-      {({ data, loading, error }) => {
-        if (loading) return <Loading />;
-        if (error) return <p>ERROR: {error.message}</p>;
-        return (
-          <Fragment>
-            <Header>My Cart</Header>
-            {!data.cartItems || !data.cartItems.length ? (
-              <p data-testid="empty-message">No items in your cart</p>
-            ) : (
-              <Fragment>
-                {data.cartItems.map(launchId => (
-                  <CartItem key={launchId} launchId={launchId} />
-                ))}
-                <BookTrips cartItems={data.cartItems} />
-              </Fragment>
-            )}
-          </Fragment>
-        );
-      }}
-    </Query>
+    <Fragment>
+      <Header>My Cart</Header>
+      {!data.cartItems || !data.cartItems.length ? (
+        <p data-testid="empty-message">No items in your cart</p>
+      ) : (
+        <Fragment>
+          {data.cartItems.map(launchId => (
+            <CartItem key={launchId} launchId={launchId} />
+          ))}
+          <BookTrips cartItems={data.cartItems} />
+        </Fragment>
+      )}
+    </Fragment>
   );
 }