netlify spike

Author: starsuit

.gitignore

@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

.netlify/functions/getData.js

@@ -0,0 +1,50 @@
+import { config } from "dotenv";
+config();
+const key = process.env.AIRTABLE_KEY;
+
+const https = require("https");
+
+const request = url => {
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, response => {
+        let allTheData = "";
+        response.on("data", chunk => {
+          allTheData += chunk;
+        });
+        response.on("end", () => {
+          try {
+            resolve(JSON.parse(allTheData));
+          } catch (e) {
+            reject(`There was an error with the JSON`);
+          }
+        });
+      })
+      .on("error", err => reject(`There was an error: ${err}`));
+  });
+};
+
+export async function handler(event, context) {
+  console.log("test");
+  try {
+    const data = await request(
+      `https://api.airtable.com/v0/appkLPDVgr4TwR3lM/Imported%20table?maxRecords=3&view=Grid%20view&api_key=${key}`
+    ).then(res => {
+      if (!res.ok) {
+        const error = new Error("HTTP error");
+        error.status = res.status;
+        throw error;
+      }
+      return res.json();
+    });
+    return {
+      statusCode: 200,
+      body: JSON.stringify(data)
+    };
+  } catch (error) {
+    return {
+      statusCode: error.status || 500,
+      body: error.message
+    };
+  }
+}

.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "0a4736b3-c0be-4efe-9b3f-4810feb0b204"
+}

netlify.toml

@@ -0,0 +1,15 @@
+# Settings in the [build] context are global and are applied to all contexts 
+# unless otherwise overridden by more specific contexts.  
+[build]
+  # Directory to change to before starting a build. 
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = "./"
+
+  # Directory (relative to root of your repo) that contains the deploy-ready 
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "./build"
+
+
+  # Directory with the serverless Lambda functions to deploy to AWS.
+  functions = ".netlify/functions/"

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "dotenv": "^8.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

package.json

@@ -1,15 +1,31 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
+  const [data, setData] = React.useState(null);
+
+  const getData = () => {
+    return fetch(`/.netlify/functions/getData`)
+      .then(result => {
+        console.log(result.json());
+        result.json();
+      })
+      .catch("error");
+  };
+
+  const assignData = () => {
+    getData().then(result => {
+      setData(result.records[0].fields.Item);
+    });
+  };
+  // eslint-disable-next-line
+  React.useEffect(() => assignData(), []);
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
+        <p>{data}</p>
         <a
           className="App-link"
           href="https://reactjs.org"