creates scaffolding for post request #6

components/form.tsx

@@ -8,7 +8,6 @@ import React, {
 import SubmitButton from '../elements/submitButton';
 import TextInput from '../elements/textInput';
 import styles from './form.module.css';
-import { postTestimonial } from '../services/airTableService';
 import testimonial from '../interfaces/testimonial';
 
 const Form: FC = (): ReactElement => {
@@ -33,8 +32,25 @@ const Form: FC = (): ReactElement => {
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
-    await postTestimonial(testimonial);
+
+    const res = await fetch(`/api/airTableService`, {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', 
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json, text/plain, */*',
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+      body: JSON.stringify(testimonial) // body data type must match "Content-Type" header
+    })
+
+    const data = await res.json();
+    console.log("RETURNED JSON FROM SERVICE: ", data)
     setTestimonial(emptyForm);
+    // await postTestimonial(testimonial);
   };
 
   return (

pages/api/airTableService.ts

@@ -0,0 +1,81 @@
+import Airtable from 'airtable';
+import testimonial from '../../interfaces/testimonial';
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+
+  if ( req.method === "POST" ) {
+
+    console.log("RECEIVED REQUEST")
+    console.log("REQUEST OBJECT: ", req.body)
+    const testimonial: testimonial = req.body;
+
+    const baseKey: string = process.env.AIRTABLE_API_BASE || '';
+    const apiKey: string = process.env.AIRTABLE_API_KEY || '';
+    console.log('baseKey: ', baseKey);
+    console.log('apiKey: ', apiKey); 
+
+    const base = new Airtable({apiKey: apiKey}).base(baseKey);
+
+    return new Promise((resolve, reject) => {
+      base('Testimonies').create([
+        {
+          "fields": {
+            // "Submitted On": Date.now(),
+            "Message": testimonial.testimony,
+            "School": testimonial.location
+          }
+        },
+      ], function(err, records) {
+        if (err) {
+          console.error(err);
+          return reject(err);
+        }
+        records?.forEach(function (record) {
+          console.log(record.getId());
+          resolve(res.status(200).json(record.getId()))
+        });
+      });
+    });
+
+  } else {
+    res.status(405).end() //Method Not Allowed
+  }
+}
+
+
+
+// const postTestimonial = function (testimonial: testimonial): Promise<any>  {
+//   console.log("postTestimonial triggered with: ", testimonial);
+
+//   const baseKey: string = process.env.AIRTABLE_API_BASE || '';
+//   const apiKey: string = process.env.AIRTABLE_API_KEY || '';
+
+//   console.log('baseKey: ', baseKey);
+//   console.log('apiKey: ', apiKey); 
+
+//   const base = new Airtable({apiKey: apiKey}).base(baseKey);
+
+//   return new Promise((resolve, reject) => {
+//     base('Testimonies').create([
+//       {
+//         "fields": {
+//           // "Submitted On": Date.now(),
+//           "Message": testimonial.testimony,
+//           "School": testimonial.location
+//         }
+//       },
+//     ], function(err, records) {
+//       if (err) {
+//         console.error(err);
+//         return reject(err);
+//       }
+//       records?.forEach(function (record) {
+//         console.log(record.getId());
+//         resolve(record.getId())
+//       });
+//     });
+//   });
+// };
+
+// export { postTestimonial };