make netlify function to establish airtable base connection

.netlify.toml

@@ -1,2 +1,3 @@
 [build]
+  publish = "build"
   functions = "functions"

.prettierrc.js

@@ -3,4 +3,5 @@ module.exports = {
   tabWidth: 2,
   semi: true,
   singleQuote: true,
+  jsxSingleQuote: true,
 };

.travis.yml

@@ -1,2 +1,4 @@
 language: node_js
 cache: node_modules
+node_js:
+  - 12

README.md

@@ -1,11 +1,15 @@
-# safe-space
+# Safe Space
 
-A project for the MU
+A project for the MU.
 
-## Installation
+## Installation and architecture
 
 Clone this repo, navigate into the directory and run `npm i`,
 
 In order to run the app, you'll need to have the Netlify CLI installed. You can do this globally on your machine by running `npm i -g netlify-cli`.
 
 We then run `netlify dev` to start both the React server (on port 3000), the Functions server (on a random port), and the combined result on port 8888.
+
+We are using the [Airtable.js](https://github.com/Airtable/airtable.js) npm package within Netlify Functions (i.e. AWS Lambdas) to conduct CRUD operations on our Airtable base without revealing any secrets.
+
+[This article](https://medium.com/swlh/up-and-running-with-netlify-airtable-and-react-428959473cf0) explains set up, while [this is a useful resource](https://flaviocopes.com/airtable/) for understanding how to interact with the base using this package.

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "airtable": "^0.8.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",
@@ -37,6 +38,6 @@
     "eslint-plugin-react": "^7.18.3"
   },
   "engines": {
-    "node": ">=12.x"
+    "node": ">=12"
   }
 }

src/components/App/App.js

@@ -1,24 +1,35 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import logo from '../../logo.svg';
 import './App.css';
 
+import getQuestions from '../../utils/getQuestions';
+
 function App() {
+  const [questions, setQuestions] = useState(null);
+
+  useEffect(() => {
+    getQuestions.then(records => {
+      setQuestions(records);
+    });
+  }, []);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+    <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>
         <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+          className='App-link'
+          href='https://reactjs.org'
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Learn React
         </a>
       </header>
+      {questions ? <h2>We have questions!</h2> : null}
     </div>
   );
 }

src/index.js

@@ -1,6 +1,6 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./components/App/App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/App/App';
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById('root'));

src/utils/getQuestions.js

@@ -0,0 +1,7 @@
+const getQuestions = async () => {
+  await (
+    await fetch('./netlify/functions/get-questions/get-questions.js')
+  ).json();
+};
+
+export default getQuestions;