site/components/index/cards/mailing-list.js

import Icon from "@hackclub/icons";
import { useEffect, useRef, useState } from "react";
import { Box, Button, Card, Flex, Grid, Input, Link, Text } from "theme-ui";
import BGImg from "../../background-image";
import background from "../../../public/home/footer.png";
import MailCard from "../../mail-card";
import { format } from "date-fns";

const markdownToHtml = require("@hackclub/markdown");

const Loading = () => (
  <Box
    sx={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      border: '2px solid #f3f3f3',
      borderTop: '2px solid #ec3750',
      borderRadius: '50%',
      width: '16px',
      height: '16px',
      animation: 'spin 2s linear infinite',
      mr: '5px',
      '@keyframes spin': {
        '0%': { transform: 'rotate(0deg)' },
        '100%': { transform: 'rotate(360deg)' },
      },
    }}
  ></Box>
)

const MailingList = () => {
  const [submitting, setSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [data, setData] = useState({ finalHtml: [], names: [] })
  const formRef = useRef(null)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setSubmitting(true)

    let res = await fetch('/api/mailing-list', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: e.target.name.value,
        email: e.target.email.value,
      }),
    })

    formRef.current.reset()

    if (res.ok) {
      setSubmitted(true)
    }
    setSubmitting(false)
  }

  // This lovely concoction of JavaScript basically fetches the last two newsletters from the GitHub repo,
  // converts them to HTML, gets rid of those HTML tags, the sets all of that as the state of the component.
  // Then, It makes a second fetch request to get the filename, so that can be used to determine the link.
  // After that, it removes the file extension, so we can use that as the date.
  // Finally, it sets the state of data to the final HTML and the names of the files, so we can map that later on!

  useEffect(() => {
    Promise.all([
      fetch('https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates')
        .then(response => response.json())
        .then(data => data.sort((a, b) => b.name.localeCompare(a.name))) // Makes sure we only get the latest two newsletters
        .then(data => data.slice(0, 2))
        .then(data => Promise.all(data.map(item => fetch(item.download_url)))) // Makes a separate fetch request for the content of each newsletter
        .then(responses => Promise.all(responses.map(response => response.text())))
        .then(markdown => Promise.all(markdown.map(markdown => markdownToHtml(markdown))))
        .then(html => html.map(html => html.replace(/<[^>]*>/g, "").replace(/The Hackening/g, ""))), // Chucks out all html tags + "The Hackening"
  
      fetch('https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates')
        .then(response => response.json())
        .then(data => data.sort((a, b) => b.name.localeCompare(a.name)))
        .then(data => data.map(item => item.name.split('.')[0])) // Grabs the name and gets rid of the file extension
    ])
    .then(([finalHtml, names]) => setData({ finalHtml, names }));
    }, []);

  return (
    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
      <Card
        sx={{
          maxWidth: '1050px',
          mx: 'auto',
          // mt: [3, 4],
          background: 'rgb(255,255,255, 0.45)',
          position: 'relative',
          zIndex: 2,
          backdropFilter: 'blur(8px)',
        }}
      >
        <Flex sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}>
          <Flex
            sx={{
              placeItems: 'center',
              justifyContent: 'center',
              alignItems: ['left', 'left', 'center'],
              flexDirection: 'column',
              gap: '10px',
              width: ['100%', '100%', '75%'],
            }}
          >
            <Box>
              <Text
                variant='title'
                sx={{
                  fontSize: [4, '36px', '42px', 6],
                  zIndex: 2,
                  textAlign: 'left',
                }}
              >
                Join the newsletter
              </Text>
              <Text
                sx={{
                  color: 'darkless',
                  mt: 2,
                  fontSize: 3,
                  textAlign: 'left',
                }}
                as='p'
              >
                We&apos;ll send you an email no more than once a month, when we work
                on something cool for you. Check out our{' '}
                <Link
                  href='https://workshops.hackclub.com/leader-newsletters/'
                  target='_blank'
                  rel='noopener norefferer'
                >
                  previous issues
                </Link>.
              </Text>
            </Box>
            <Grid
              as='form'
              ref={formRef}
              onSubmit={handleSubmit}
              gap={[2, 3]}
              sx={{
                textAlign: 'center',
                alignItems: 'end',
                input: { bg: 'sunken' },
                width: '100%',
              }}
            >
              <Box sx={{ width: '100%' }}>
                <Input
                  autofillBackgroundColor='highlight'
                  type='text'
                  name='name'
                  id='name'
                  placeholder='Your Name'
                  required
                  sx={{
                    width: '100%',
                    textAlign: 'center',
                    fontSize: 2,
                  }}
                />
              </Box>
              <div>
                <Input
                  autofillBackgroundColor='highlight'
                  type='email'
                  name='email'
                  id='email'
                  placeholder='Your Email'
                  required
                  sx={{
                    width: '100%',
                    textAlign: 'center',
                    fontSize: 2,
                  }}
                />
              </div>
              <Button type='submit' sx={{ mt: [2, 0], fontSize: 2 }}>
                {submitting ? (
                  <>
                    <Loading /> Subscribe
                  </>
                ) : submitted ? (
                  <>
                    <Icon glyph='send' /> You're on the list!
                  </>
                ) : (
                  'Subscribe'
                )}
              </Button>
            </Grid>
          </Flex>
          <Box
            sx={{
              display: 'grid',
              gridGap: 4,
              mt: [4, 0],
              width: '100%',
            }}
          >
            {data.finalHtml.map((html, index) => (
              <MailCard
                issue={index + 1}
                body={html}
                date={format(new Date(data.names[index].split('-').join(', ')), "MMMM d, yyyy")}
                link={data.names[index]}
                key={index}
              />
            )).reverse()}
          </Box>
        </Flex>
      </Card>
      <BGImg
        width={2544}
        height={2048}
        gradient='linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))'
        src={background}
        placeholder='blur'
        alt='Globe with hundreds of Hack Clubs'
      />
    </Box>
  )
}

export default MailingList