initial commit

Author: vladwulf

.prettierrc

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "SpaceX API",
+      url: "https://api.spacex.land/graphql",
+    },
+  },
+};

__generated__/globalTypes.ts

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.5.6",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -12,11 +13,14 @@
     "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-loading-skeleton": "^3.0.2",
     "react-scripts": "5.0.0",
     "typescript": "^4.5.4",
     "web-vitals": "^2.1.3"
   },
   "scripts": {
+    "gen:types": "npx apollo client:codegen --target typescript --includes **/*.graphql.ts --excludes **/__generated__",
+    "prestart": "yarn gen:types",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -39,5 +43,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "apollo": "^2.33.9",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.12"
   }
 }

apollo.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package.json

@@ -1,24 +1,57 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { useQuery } from "@apollo/client";
+import Skeleton from "react-loading-skeleton";
+import { LaunchCard } from "./components/LaunchCard";
+import { GET_LAUNCHES } from "./graphql/queries.graphql";
+import {
+  GetLaunches,
+  GetLaunchesVariables,
+} from "./graphql/__generated__/GetLaunches";
 
 function App() {
+  const { data, loading } = useQuery<GetLaunches, GetLaunchesVariables>(
+    GET_LAUNCHES,
+    {
+      variables: {
+        limit: 10,
+      },
+    }
+  );
+
+  function renderLoader() {
+    if (loading && !data) {
+      return (
+        <div>
+          <Skeleton height={50} />
+          <Skeleton height={50} />
+          <Skeleton height={50} />
+          <Skeleton height={50} />
+          <Skeleton height={50} />
+          <Skeleton height={50} />
+          <Skeleton height={50} />
+        </div>
+      );
+    }
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="min-h-screen bg-gray-900 text-white pt-40">
+      <h1 className="text-4xl font-bold text-center mb-10">SpaceX Launches</h1>
+      <div
+        className="max-w-screen-sm mx-auto bg-gray-100 shadow-md rounded-md p-5 overflow-auto"
+        style={{ maxHeight: 600 }}
+      >
+        {renderLoader()}
+        {data?.launches?.map((launch) => {
+          return (
+            <LaunchCard
+              key={Number(launch?.id)}
+              id={Number(launch?.id)}
+              missionName={launch?.mission_name!}
+              details={launch?.details!}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }

postcss.config.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+type LaunchCardProps = {
+  id: number;
+  missionName?: string;
+  details?: string;
+};
+export const LaunchCard: React.FC<LaunchCardProps> = (props) => {
+  return (
+    <div
+      className="bg-white p-4 rounded-md shadow text-gray-900 mb-4"
+      key={props.id}
+    >
+      <div className="text-base font-medium text-gray-900">
+        {props.missionName}
+      </div>
+      <p className="text-gray-600 text-xs font-light">{props.details}</p>
+    </div>
+  );
+};

src/App.css

@@ -0,0 +1,17 @@
+import {
+  HttpLink,
+  ApolloClient,
+  InMemoryCache,
+  NormalizedCacheObject,
+} from "@apollo/client";
+
+const httpLink = new HttpLink({
+  uri: "https://api.spacex.land/graphql",
+});
+
+export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  link: httpLink,
+  cache: new InMemoryCache({
+    addTypename: false,
+  }),
+});