Merge pull request #16 from FAC-Sixteen/fetch-test

Fetch test

Author: starsuit

.gitignore

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

.netlify/functions/getData.js

@@ -0,0 +1,32 @@
+/* eslint-disable */
+const fetch = require("node-fetch");
+const { config } = require("dotenv");
+config();
+
+const key = process.env.AIRTABLE_KEY;
+exports.handler = async function(event, context) {
+  try {
+    const response = await fetch(
+      `https://api.airtable.com/v0/appkLPDVgr4TwR3lM/Imported%20table?maxRecords=3&view=Grid%20view&api_key=${key}`,
+      {
+        headers: { Accept: "application/json" }
+      }
+    );
+    if (!response.ok) {
+      // NOT res.status >= 200 && res.status < 300
+      return { statusCode: response.status, body: response.statusText };
+    }
+    const data = await response.json();
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify(data)
+    };
+  } catch (err) {
+    console.log(err); // output to netlify function log
+    return {
+      statusCode: 500,
+      body: JSON.stringify(err.message) // Could be a custom message or object i.e. JSON.stringify(err)
+    };
+  }
+};

.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

@@ -1,46 +1,37 @@
 {
-    "name": "re4-w",
-    "version": "0.1.0",
-    "private": true,
-    "dependencies": {
-        "husky": "^2.4.0",
-        "lint-staged": "^8.2.0",
-        "prettier": "^1.18.1",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
-        "react-scripts": "3.0.1"
-    },
-    "lint-staged": {
-        "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-            "prettier --write",
-            "git add"
-        ]
-    },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "format": "prettier --write '**/*.{js,css,md}'",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
-    },
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged"
-        }
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
+  "name": "re4-w",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "husky": "^2.4.0",
+    "lint-staged": "^8.2.0",
+    "prettier": "^1.18.1",
+    "dotenv": "^8.0.0",
+    "node-fetch": "^2.6.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "format": "prettier --write '**/*.{js,css,md}'",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

package.json

@@ -1,11 +1,36 @@
 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 => 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">
-                <h1>RE4.W</h1>
+                <img src={logo} className="App-logo" alt="logo" />
+                <p>{data}</p>
+                <a
+                    className="App-link"
+                    href="https://reactjs.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Learn React
+                </a>
             </header>
         </div>
     )