Merge pull request #2 from dremendes/feat/improvements

Several improvements: Now it looks ok

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "yarn dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "yarn dev",
+        "serverReadyAction": {
+          "pattern": "started server on .+, url: (https?://.+)",
+          "uriFormat": "%s",
+          "action": "debugWithChrome"
+        }
+      }
+    ]
+  }
+

components/ClientOnly.tsx

@@ -0,0 +1,21 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+
+interface ClientOnlyProps {
+  children: React.ReactNode;
+}
+
+const ClientOnly: FunctionComponent<ClientOnlyProps> = ({ children, ...delegated }) => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) {
+    return null;
+  }
+
+  return <div {...delegated}>{children}</div>;
+};
+
+export default ClientOnly;

package.json

@@ -12,23 +12,23 @@
     "@apollo/client": "^3.7.3",
     "@chakra-ui/core": "^0.8.0",
     "@chakra-ui/react": "^2.4.3",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@next/font": "13.0.7",
     "@types/node": "18.11.15",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.7",
+    "framer-motion": "^6",
     "graphql": "^16.6.0",
     "next": "13.0.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.4"
   },
   "devDependencies": {
-    "@emotion/react": "11.10.5",
     "@emotion/core": "10.x",
-    "@emotion/styled": "^10.x",
-    "emotion-theming": "^10.x",
-    "framer-motion": "^7.10.0"
+    "emotion-theming": "^10.x"
   }
 }

pages/_app.tsx

@@ -1,6 +1,11 @@
-import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import { ApolloProvider } from '@apollo/client'
+import client from '../apollo-client'
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+        <ApolloProvider client={client}>
+          <Component {...pageProps} />
+        </ApolloProvider>
+  )
 }

pages/client-side.tsx

@@ -0,0 +1,10 @@
+import ClientOnly from "../components/ClientOnly";
+import Launches from "./launches";
+
+export default function ClientSide() {
+  return (
+        <ClientOnly>
+          <Launches />
+        </ClientOnly>
+  );
+}

pages/index.ts

@@ -1,36 +1,17 @@
-import gql from 'graphql-tag';
 import client from "../apollo-client";
-import { launches } from '../types/launch';
-import Home from './home';
+import ClientSide from "./client-side";
+import { query } from './launches';
 
-export async function getStaticProps() {
-  const query = gql`
-  {
-    launches {
-      id
-      launch_site {
-        site_id
-        site_name
-      }
-      rocket {
-        rocket_name
-        rocket_type
-      }
-      mission_name
-    }
-  }  
-  `;
-
+export async function getServerSideProps(context: any) {
   const { data } = await client.query({ query });
 
-
   return  {
     props: {
-      launches: data.launches,
+      launches: data,
     },
   };
 }
 
-export default function HomePage(launches: launches) {
-  return Home(launches);
+export default function HomePage() {
+  return ClientSide();
 }

pages/launches.tsx

@@ -0,0 +1,60 @@
+import { gql, useQuery } from '@apollo/client';
+import { Flex, Heading, Text } from '@chakra-ui/core';
+import { Card, CardHeader, CardBody, ChakraProvider, Image } from '@chakra-ui/react'
+import launch from '../types/launch';
+
+export const query = gql`
+{
+  launches {
+    id
+    launch_site {
+      site_id
+      site_name
+    }
+    rocket {
+      rocket_name
+      rocket_type
+    }
+    mission_name
+    links {
+      flickr_images
+    }
+    launch_year
+    launch_success
+  }
+}  
+  `;
+export default function Launches() {
+  const { data, loading, error } = useQuery(query);
+
+  if (loading) {
+    return <h2>Loading...</h2>;
+  }
+
+  if (error) {
+    console.error(error);
+    return null;
+  }
+
+  return (
+    <ChakraProvider>
+      <Heading as='h1' size='md' fontSize={ '30px' } textAlign={ 'center' }>SpaceX Launches</Heading>
+      <Flex  align="center" justify="center" flexWrap="wrap">
+        {data?.launches?.map((launch: launch) => (
+          <Card key={launch.id}>
+            <CardHeader>
+              <Heading size='md'>Mission: {launch.mission_name.length >= 15 ? (launch.mission_name.slice(0,13) + '...') : launch.mission_name }</Heading>
+            </CardHeader>
+            <CardBody>
+              <Image src={launch.links.flickr_images[0] ?? 'https://dummyimage.com/250x250/000/fff&text=no+image+provided'} borderRadius='lg' width={ '250px'} height={ '250px' } />
+              <Text>Launch site: <strong>{launch.launch_site.site_name}</strong></Text>
+              <Text>Rocket type: <strong>{launch.rocket.rocket_type}</strong></Text>
+              <Text>Launch year: <strong>{launch.launch_year}</strong></Text>
+              <Text> Was mission successfull? <strong>{launch.launch_success ? 'Yes' : 'No'}</strong></Text>
+            </CardBody>
+          </Card>
+        ))}
+      </Flex>
+    </ChakraProvider>
+  );
+}

types/launch.ts

@@ -8,13 +8,17 @@ export interface rocket {
   rocket_type: string;
 };
 
-export interface launch {
+export interface links {
+  flickr_images: string[]
+}
+
+export default interface launch {
   id: number,
   mission_name: string,
   launch_site: launch_site,
   rocket: rocket,
+  links: links,
+  launch_year: string,
+  launch_success: string,
 };
 
-export interface launches {
-  launches: launch[];
-}

types/launches.ts

@@ -0,0 +1,5 @@
+import launch from "./launch";
+
+export default interface launches {
+    launches: launch[];
+};