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
 

start/client/apollo.config.js

@@ -0,0 +1 @@
+//empty

start/client/package.json

@@ -1,22 +1,23 @@
 {
   "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": "^15.5.1",
-    "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",
+    "@types/node": "^18.7.3",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router": "^5.1.19",
+    "graphql": "^16.5.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 +37,11 @@
     "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/react": "^18.0.21",
+    "artillery": "^2.0.0-23",
+    "npm-watch": "^0.11.0"
   }
 }

start/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';

start/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';

start/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';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { unit } from '../styles';
 import { cardClassName, getBackgroundImage } from './launch-tile';

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

@@ -1,6 +1,6 @@
-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';
@@ -12,7 +12,7 @@ export function getBackgroundImage(id: string) {
   return `url(${backgrounds[Number(id) % backgrounds.length]})`;
 }
 
-export default ({ launch }: any) => {
+const LaunchTile = ({ launch }: any) => {
   const { id, mission, rocket } = launch;
   return (
     <StyledLink
@@ -27,6 +27,8 @@ export default ({ launch }: any) => {
   );
 };
 
+export default LaunchTile
+
 /**
  * STYLED COMPONENTS USED IN THIS FILE ARE BELOW HERE
  */

start/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';

start/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';

start/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({

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

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { unit, colors } from '../styles';
 

start/client/src/index.tsx

@@ -0,0 +1,20 @@
+import { ApolloClient, ApolloProvider } from '@apollo/client';
+import { cache } from './cache';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Pages from './pages';
+import injectStyles from './styles';
+
+// Initialize ApolloClient
+
+
+injectStyles();
+
+// Pass the ApolloClient instance to the ApolloProvider component
+
+const root = ReactDOM.createRoot(document.getElementById("root")!);
+root.render(
+  <ApolloProvider client={client}>
+    <Pages />
+  </ApolloProvider>,
+);

start/client/src/pages/cart.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { RouteComponentProps } from '@reach/router';
 
-interface CartProps extends RouteComponentProps {
+interface CartProps {
 
 }
 

start/client/src/pages/index.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react';
-import { Router } from '@reach/router';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 
 import Launch from './launch';
 import Launches from './launches';
@@ -9,16 +8,16 @@ import { Footer, PageContainer } from '../components';
 
 export default function Pages() {
   return (
-    <Fragment>
+    <Router>
       <PageContainer>
-        <Router primary={false} component={Fragment}>
-          <Launches path="/" />
-          <Launch path="launch/:launchId" />
-          <Cart path="cart" />
-          <Profile path="profile" />
-        </Router>
+        <Routes>
+          <Route path="/" element={<Launches />} />
+          <Route path="launch/:launchId" element={<Launch />} />
+          <Route path="cart" element={<Cart />} />
+          <Route path="profile" element={<Profile />} />
+        </Routes>
       </PageContainer>
       <Footer />
-    </Fragment>
+    </Router>
   );
 }

start/client/src/pages/launch.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { RouteComponentProps } from '@reach/router';
-
-interface LaunchProps extends RouteComponentProps {
+import { useParams } from 'react-router-dom';
 
+interface LaunchProps {
 }
 
 const Launch: React.FC<LaunchProps> = () => {

start/client/src/pages/launches.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment, useState }  from 'react';
-import { RouteComponentProps } from '@reach/router';
+import React, { }  from 'react';
 import { gql } from '@apollo/client'
 
 export const LAUNCH_TILE_DATA = gql`
@@ -18,7 +17,7 @@ export const LAUNCH_TILE_DATA = gql`
   }
 `;
 
-interface LaunchesProps extends RouteComponentProps {}
+interface LaunchesProps {}
 
 const Launches: React.FC<LaunchesProps> = () => {
   return <div />;

start/client/src/pages/profile.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { RouteComponentProps } from '@reach/router';
 
-interface ProfileProps extends RouteComponentProps {}
+interface ProfileProps {}
 
 const Profile: React.FC<ProfileProps> = () => {
   return <div />;

start/client/src/styles.js

@@ -1,52 +1,55 @@
-import { injectGlobal } from 'react-emotion';
+import { injectGlobal } from "@emotion/css";
 
 export const unit = 8;
 export const colors = {
-  primary: '#220a82',
-  secondary: '#14cbc4',
-  accent: '#e535ab',
-  background: '#f7f8fa',
-  grey: '#d8d9e0',
-  text: '#343c5a',
-  textSecondary: '#747790'
+  primary: "#220a82",
+  secondary: "#14cbc4",
+  accent: "#e535ab",
+  background: "#f7f8fa",
+  grey: "#d8d9e0",
+  text: "#343c5a",
+  textSecondary: "#747790",
 };
 
-export default () => injectGlobal({
-  [['html', 'body']]: {
-    height: '100%',
-  },
-  body: {
-    margin: 0,
-    padding: 0,
-    fontFamily: "'Source Sans Pro', sans-serif",
-    backgroundColor: colors.background,
-    color: colors.text,
-  },
-  '#root': {
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '100%',
-  },
-  '*': {
-    boxSizing: 'border-box',
-  },
-  [['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
-    margin: 0,
-    fontWeight: 600,
-  },
-  h1: {
-    fontSize: 48,
-    lineHeight: 1,
-  },
-  h2: {
-    fontSize: 40,
-  },
-  h3: {
-    fontSize: 36,
-  },
-  h5: {
-    fontSize: 16,
-    textTransform: 'uppercase',
-    letterSpacing: 4,
-  }
-});
+const styles = () =>
+  injectGlobal({
+    [["html", "body"]]: {
+      height: "100%",
+    },
+    body: {
+      margin: 0,
+      padding: 0,
+      fontFamily: "'Source Sans Pro', sans-serif",
+      backgroundColor: colors.background,
+      color: colors.text,
+    },
+    "#root": {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+    },
+    "*": {
+      boxSizing: "border-box",
+    },
+    [["h1", "h2", "h3", "h4", "h5", "h6"]]: {
+      margin: 0,
+      fontWeight: 600,
+    },
+    h1: {
+      fontSize: 48,
+      lineHeight: 1,
+    },
+    h2: {
+      fontSize: 40,
+    },
+    h3: {
+      fontSize: 36,
+    },
+    h5: {
+      fontSize: 16,
+      textTransform: "uppercase",
+      letterSpacing: 4,
+    },
+  });
+
+export default styles;

start/client/tsconfig.json

@@ -17,7 +17,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react"
+
   },
   "include": [
     "src"