diff --git a/next.config.js b/next.config.js index d4c9b6d..a8c9321 100644 --- a/next.config.js +++ b/next.config.js @@ -8,4 +8,7 @@ module.exports = { ) return config }, + env: { + AIRTABLE: "keygkEz5Bp89HsIJt", + }, } \ No newline at end of file diff --git a/pages/gallery.js b/pages/gallery.js index 966f96a..abcaa05 100644 --- 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 ( -
- - Trick - Gallery - +export default function Gallery({ response }) { + let images = []; + for(const key in response) { + let item = response[key]; + images.push(item['fields']); + } -
+ return ( +
+ + Trick - Gallery + -
-
+
-
-

Gallery

-

Coming Soon...

-
+
+
-
-
- -
-
- ) -} +
+

Gallery

-// export async function getServerSideProps() { -// const auth = new google.auth.GoogleAuth({ -// keyFile: process.env.GOOGLE_APPLICATION_CREDENTIALS, -// scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'] -// }); +
+ {images.map((image) => ( +
+ +

{image.name}

+
+ ))} +
-// const sheets = google.sheets({ version: 'v4', auth }); +
-// const { id } = 2; + +
-// const range = `Gallery!A:${id}:B${id}`; +
+ ) +} -// 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 -// } -// } -// } \ No newline at end of file +export async function getServerSideProps() { + return { + props: { + response: await getGallery() + } + } +} \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index a4f8682..1d443a0 100644 --- 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() } }; diff --git a/styles/Gallery.module.css b/styles/Gallery.module.css index e69de29..1e369b5 100644 --- 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; +} \ No newline at end of file