almost done

Author: SaraVieira

web/.env.production

@@ -1,2 +1 @@
-GATSBY_SANITY_PROJECT_ID="atggkqis"
-GATSBY_SANITY_DATASET="production"
+GATSBY_AIRTABLE_KEY=keyJugfwdJzOyL7Aa

web/gatsby-config.js

@@ -1,10 +1,8 @@
 // Load variables from `.env` as soon as possible
 require('dotenv').config({
-  path: `.env.${process.env.NODE_ENV || 'development'}`
+  path: `.env.production`
 })
 
-const isProd = process.env.NODE_ENV === 'production'
-
 module.exports = {
   plugins: [
     `gatsby-plugin-styled-components`,
@@ -22,6 +20,19 @@ module.exports = {
         }
       }
     },
+    {
+      resolve: `gatsby-source-airtable`,
+      options: {
+        apiKey: process.env.GATSBY_AIRTABLE_KEY,
+        tables: [
+          {
+            baseId: `appXX3u6yUPjqQFrE`,
+            tableName: `all`,
+            queryName: `attendees` // optional
+          }
+        ]
+      }
+    },
     'gatsby-transformer-javascript-frontmatter',
     {
       resolve: `gatsby-source-filesystem`,

web/package.json

@@ -23,11 +23,13 @@
   },
   "dependencies": {
     "@sanity/client": "0.141.5",
+    "airtable": "^0.7.1",
     "animate.css": "^3.7.2",
     "babel-plugin-styled-components": "1.10.6",
     "gatsby-image": "2.2.4",
     "gatsby-plugin-styled-components": "3.1.0",
     "gatsby-plugin-webfonts": "1.0.12",
+    "gatsby-source-airtable": "^2.0.8",
     "gatsby-source-filesystem": "^2.1.18",
     "gatsby-source-graphql": "2.1.0",
     "gatsby-transformer-javascript-frontmatter": "^2.1.5",

web/src/components/Attendees/index.js

@@ -3,14 +3,15 @@ import React from 'react'
 import { Attendees } from './elements'
 import shuffle from '../../helpers/shuffle'
 
-const dedupeAttendees = (attendeesArray) => {
-  const list = [];
+const dedupeAttendees = attendeesArray => {
+  const list = []
   const deduped = attendeesArray.reduce((acc, current) => {
-    const cleanGhLink = current.ghLink.startsWith('@') ? current.ghLink.slice(1) : current.ghLink
-
+    const cleanGhLink = current.data.ghLink.startsWith('@')
+      ? current.data.ghLink.slice(1)
+      : current.data.ghLink
 
     if (list.includes(cleanGhLink)) {
-      return acc;
+      return acc
     }
 
     list.push(cleanGhLink)
@@ -23,31 +24,23 @@ const dedupeAttendees = (attendeesArray) => {
 }
 
 export default ({ attendees }) => {
-
   const dedupedAttendees = dedupeAttendees(attendees)
 
   return (
     <Attendees>
-      {shuffle(dedupedAttendees).map(a => {
+      {shuffle(dedupedAttendees).map(({ data: a }) => {
         // Pretty ugly but this way we do not get duplicate https://github.com urls
 
         const cleanGhLink = a.ghLink.startsWith('@') ? a.ghLink.slice(1) : a.ghLink
 
-        const ghLink = `https://github.com/${cleanGhLink.trim().replace('https://github.com/', '')}`;
-        return (<li key={a.id}>
-          <a
-            href={ghLink}
-            target="_blank"
-            title={a.name}
-            rel="noopener noreferrer"
-          >
-            <img
-              src={`${ghLink}.png?size=50`}
-              alt={a.name}
-              width="50"
-            />
-          </a>
-        </li>);
+        const ghLink = `https://github.com/${cleanGhLink.trim().replace('https://github.com/', '')}`
+        return (
+          <li key={a.id}>
+            <a href={ghLink} target="_blank" title={a.name} rel="noopener noreferrer">
+              <img src={`${ghLink}.png?size=50`} alt={a.name} width="50" />
+            </a>
+          </li>
+        )
       })}
     </Attendees>
   )

web/src/components/Figure.js

@@ -1,13 +1,15 @@
 import React, { useState } from 'react'
 import format from 'date-fns/format'
+import Airtable from 'airtable'
 
 import Flag from '../icons/flag'
 import Calendar from '../icons/calendar'
 
 import { Info, Button, RsvpButton, Form, Blinker, Bouncer } from './elements'
-import client from '../../helpers/sanity'
 
-export default ({ site, dataset }) => {
+var base = new Airtable({ apiKey: process.env.GATSBY_AIRTABLE_KEY }).base('appXX3u6yUPjqQFrE')
+
+export default ({ site, city }) => {
   const [open, setOpen] = useState(false)
   const [name, setName] = useState('')
   const [gh, setGH] = useState('')
@@ -16,16 +18,19 @@ export default ({ site, dataset }) => {
   const createUser = () => {
     if (name && gh) {
       const doc = {
-        _type: 'attendee',
+        city: city,
         name: name,
         ghLink: gh
       }
 
-      client(dataset)
-        .create(doc)
-        .then(res => {
-          console.log(`Human was created, document ID is ${res._id}`)
-        })
+      base('all').create(doc, function(err, record) {
+        if (err) {
+          console.error(err)
+          return
+        }
+        console.log(`Human was created, document ID is ${record.getId()}`)
+        console.log(record.getId())
+      })
     }
   }
 

web/src/components/Info/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import Figure from '../Figure'
 import RainbowWithClicker from '../rainbow/RainbowWithClicker'
 
 import {

web/src/components/Speakers/index.js

@@ -4,19 +4,20 @@ import Layout from '../containers/layout'
 import Sponsors from '../components/Sponsors'
 import Info from '../components/Info'
 import Speakers from '../components/Speakers'
+import Attendees from '../components/Attendees'
 import Thanks from '../components/Thanks'
 import Panel from '../components/Panel'
 import Heading from '../components/Heading'
 
-const Main = ({ city }) => {
+const Main = ({ city, attendees }) => {
   const { site, organizers, mainOrganizer, thanks, speakers, sponsors, info } = city
 
   return (
     <Layout>
       <SEO title={site.title} description={site.description} />
       <main>
         <Heading sub="queerjs @">{info.city}</Heading>
-        <Info site={site} />
+        <Info site={site} city={info.link} />
         <Panel heading="What?">
           <p>
             This is a meetup where anyone is welcome to attend and support the speakers and the idea
@@ -35,9 +36,10 @@ const Main = ({ city }) => {
             <Speakers noSpeak cfp={site.cfp} speakers={speakers.filter(s => s.mc)} />
           </Panel>
         ) : null}
-        {/* <Panel heading={`Attendees (${attendees.length})`}>
+        {console.log(attendees)}
+        <Panel heading={`Attendees (${attendees.length})`}>
           <Attendees attendees={attendees} />
-        </Panel> */}
+        </Panel>
 
         <Panel heading="Sponsors">
           <Sponsors sponsors={sponsors} />

web/src/pages/_main.js

@@ -4,13 +4,25 @@ import Main from '../pages/_main'
 
 export default ({ data = {} }) => {
   const {
-    javascriptFrontmatter: { frontmatter }
+    javascriptFrontmatter: { frontmatter },
+    allAirtable: { edges }
   } = data
-  return <Main city={frontmatter} />
+  return <Main city={frontmatter} attendees={edges.map(edge => edge.node)} />
 }
 
 export const query = graphql`
   query($slug: String!) {
+    allAirtable(filter: { data: { city: { eq: $slug } } }) {
+      edges {
+        node {
+          data {
+            city
+            ghLink
+            name
+          }
+        }
+      }
+    }
     javascriptFrontmatter(frontmatter: { info: { link: { eq: $slug } } }) {
       frontmatter {
         info {