using airtable for index and gallery now

3 years ago · e6d9951188
parent e451cf8219
commit e6d9951188
4 changed files with 79 additions and 51 deletions
--- a/next.config.js
+++ b/next.config.js
@ -8,4 +8,7 @@ module.exports = {
      )
      return config
    },
+    env: {
+      AIRTABLE: "keygkEz5Bp89HsIJt",
+    },
 }
--- a/pages/gallery.js
+++ b/pages/gallery.js
@ -2,58 +2,64 @@ import Head from 'next/head'
 import styles from '../styles/Gallery.module.css'
 import Header from '../components/header';
 import Footer from '../components/footer';
-// import { google } from 'googleapis';
-// import fs from 'fs';
-// import readline from 'readline';

-export default function Gallery() {
-  return (
-    <div className="page">
-        <Head>
-            <title>Trick - Gallery</title>
-        </Head>
+export default function Gallery({ response }) {
+    let images = [];
+    for(const key in response) {
+        let item = response[key];
+        images.push(item['fields']);
+    }

-        <Header />
+    return (
+        <div className="page">
+            <Head>
+                <title>Trick - Gallery</title>
+            </Head>

-        <div className="container">
-            <article className="content">
+            <Header />

-                <section className="card">
-                    <h1 className="h-unset">Gallery</h1>
-                    <p>Coming Soon...</p>
-                </section>
+            <div className="container">
+                <article className="content">

-            </article>
-        </div>
-
-        <Footer /> 
-    </div>
-  )
-}
+                    <section className="card">
+                        <h1 className="h-unset">Gallery</h1>

-// export async function getServerSideProps() {
-//     const auth = new google.auth.GoogleAuth({ 
-//         keyFile: process.env.GOOGLE_APPLICATION_CREDENTIALS,
-//         scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly']
-//      });
+                        <div className={styles.gallery}>
+                            {images.map((image) => (
+                                <div>
+                                    <img src={image.link}></img>
+                                    <h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
+                                </div>
+                            ))}
+                        </div>

-//     const sheets = google.sheets({ version: 'v4', auth });
+                    </section>

-//     const { id } = 2;
+                </article>
+            </div>

-//     const range = `Gallery!A:${id}:B${id}`;
+            <Footer /> 
+        </div>
+    )
+}

-//     const response = sheets.spreadsheets.values.get({
-//         spreadsheetId: "13V7PXSJ6FSPZakBbYEpi1495T3nWxJ7Loi4EWwOZ7lE",
-//         range,
-//     });
+async function getGallery() {
+    const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
+        method: "GET",
+        headers: {
+            'Content-Type': 'application/json',
+            "Authorization": "Bearer " + process.env.AIRTABLE,
+        }
+    });

-//     const data = await response.json();
-    
+    const data = await req.json();
+    return data['records'];
+}

-//     return {
-//         props: {
-//             response: data
-//         }
-//     }
-// }
+export async function getServerSideProps() {
+    return {
+        props: {
+            response: await getGallery()
+        }
+    }
+}
--- a/pages/index.js
+++ b/pages/index.js
@ -59,6 +59,25 @@ export default function Index({ motto, twitch_online }) {
    )
 }

+async function getMottos() {
+    const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Mottos", {
+        method: "GET",
+        headers: {
+            'Content-Type': 'application/json',
+            "Authorization": "Bearer " + process.env.AIRTABLE,
+        }
+    });
+
+    const data = await req.json();
+
+    let mottoArray = [];
+    for(const key in data['records']) {
+        mottoArray.push(data['records'][key]['fields']['motto']);
+    }
+
+    return mottoArray;
+}
+
 async function getAccessToken() {
    const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
        method: "POST",
@ -89,13 +108,8 @@ async function getIsUserLive() {
    return false;
 }

-function RandomMotto() {
-    const Mottos = [
-        "Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
-        "Just have fun!",
-        "Live and let go",
-        "Keep calm and carry on"
-    ];
+async function RandomMotto() {
+    const Mottos = await getMottos();
    const randomNumber = Math.floor(Math.random() * Mottos.length);
    return Mottos[randomNumber];
 }
@ -103,7 +117,7 @@ function RandomMotto() {
 export async function getServerSideProps() {
    return {
        props: {
-            motto: RandomMotto(),
+            motto: await RandomMotto(),
            twitch_online: await getIsUserLive()
        }
    };
--- a/styles/Gallery.module.css
+++ b/styles/Gallery.module.css
@ -0,0 +1,5 @@
+.gallery {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-gap: 1em;
+}