diff --git a/components/bin/rsvp-form.js b/components/bin/rsvp-form.js new file mode 100644 index 00000000..a18e3efc --- /dev/null +++ b/components/bin/rsvp-form.js @@ -0,0 +1,63 @@ +import { Checkbox, Input, Label, Text } from 'theme-ui' +import useForm from '../../lib/use-form' +import Submit from '../submit' +import { Slide } from 'react-reveal' + +export default function RsvpForm() { + const { status, formProps, useField } = useForm( + '/api/bin/rsvp', + null, + { + clearOnSubmit: 60000, + method: 'POST', + initData: {} + } + ) + + return ( + <> +
+ + + + {(useField('stickers', 'checkbox').checked) && ( + + + + + )} + + + + ) +} \ No newline at end of file diff --git a/pages/api/bin/rsvp.js b/pages/api/bin/rsvp.js new file mode 100644 index 00000000..8f120e9e --- /dev/null +++ b/pages/api/bin/rsvp.js @@ -0,0 +1,30 @@ +// https://airtable.com/appKjALSnOoA0EmPk/tblYYhxN9TaPPMMRV/viwJFvTlmRNHj0Toh?blocks=hide +import AirtablePlus from 'airtable-plus' + +const rsvpsTable = new AirtablePlus({ + apiKey: process.env.AIRTABLE_API_KEY, + baseID: 'appKjALSnOoA0EmPk', + tableName: 'RSVPs' +}) + +export default async function handler(req, res) { + if (req.method === 'POST') { + const { email, high_schooler, stickers, address_line_1, address_zip } = req.body + + const fields = { + Email: email, + 'High Schooler': '' + high_schooler, + Stickers: '' + stickers, + 'Address (line 1)': address_line_1, + 'Address (zip code)': address_zip + } + + await rsvpsTable.create(fields) + + res.status(200).json({ success: true }) + } else if (req.method == 'GET') { + const result = await rsvpsTable.read({ field: 'Status' }) + + res.status(200).json(result.length) + } +} \ No newline at end of file diff --git a/pages/bin.js b/pages/bin.js new file mode 100644 index 00000000..fd2b926b --- /dev/null +++ b/pages/bin.js @@ -0,0 +1,146 @@ +import { Box, Container, Text, Heading, Card, Flex, Image, Link } from "theme-ui"; +import Head from 'next/head' +import Meta from '@hackclub/meta' +import Nav from '../components/nav' +import { useEffect, useState } from "react"; +import Footer from "../components/footer"; +import { keyframes } from "@emotion/react"; +import RsvpForm from "../components/bin/rsvp-form"; + +const RsvpCount = () => { + const [rsvpCount, setRsvpCount] = useState(0) + useEffect(async () => { + // const url = 'https://api2.hackclub.com/v0.1/The Bin/rsvp' <- switch to this once we have api2 back up and running + const url = '/api/bin/rsvp' + const results = await fetch(url).then(r => r.json()) + setRsvpCount(results) + }, []) + + return ( + {100 - rsvpCount} RSVPs until the start of... + ) +} + +const wobble = keyframes({ + from: { transform: 'rotate(15deg)' }, + to: { transform: 'rotate(20deg)' } +}) + +export default function Bin() { + return ( + <> + +