Initial commit

alexanderalmstrom · Dec 16, 2020 · 5f17b52 · 5f17b52
1 parent 9ef3c2d
commit 5f17b52
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 306 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.eslintcache
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -3,29 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
+    "@apollo/client": "^3.3.6",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "graphql": "^15.4.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
+    "typescript": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

diff --git a/schema.graphql b/schema.graphql
@@ -0,0 +1,9 @@
+type Product {
+  name: String!
+  description: String
+  price: Float!
+}
+
+type Query {
+  allProducts: [Product!]
+}
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,51 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { gql, useQuery } from "@apollo/client";
+
+interface Products {
+  allProducts: ProductsData;
+}
+
+interface ProductsData {
+  data: [Product];
+}
+
+interface Product {
+  _id: string;
+  name: string;
+  description: string;
+  price: Float32Array;
+}
+
+const App = () => {
+  const { data } = useQuery<Products>(gql`
+    query getProducts {
+      allProducts {
+        data {
+          _id
+          name
+          description
+          price
+        }
+      }
+    }
+  `);
+
+  if (!data) return null;
 
-function App() {
   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>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+      {data.allProducts.data.map((product) => {
+        return (
+          <div key={product._id}>
+            <h2>{product.name}</h2>
+            <div>{product.description}</div>
+            <div>{product.price} SEK</div>
+          </div>
+        );
+      })}
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,8 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,17 +1,34 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+
+import {
+  ApolloClient,
+  ApolloProvider,
+  createHttpLink,
+  InMemoryCache,
+} from "@apollo/client";
+
+const cache = new InMemoryCache();
+
+const link = createHttpLink({
+  uri: "https://graphql.fauna.com/graphql",
+  headers: {
+    authorization: `Bearer ${process.env.REACT_APP_FAUNA_SECRET}`,
+  },
+});
+
+const client = new ApolloClient({
+  cache,
+  link,
+});
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  <ApolloProvider client={client}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </ApolloProvider>,
+  document.getElementById("root")
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
diff --git a/src/setupTests.ts b/src/setupTests.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }