Filter out invalid RSVPs

components/winter/landing.js

@@ -9,6 +9,35 @@ import Rsvp from './rsvp'
 import ScrollHint from '../scroll-hint'
 import useSWR from 'swr'
 import fetcher from '../../lib/fetcher'
+import { keyframes } from '@emotion/react'
+
+const flashing = keyframes({
+  from: { opacity: 0 },
+  '50%': { opacity: 1 },
+  to: { opacity: 0 }
+})
+
+function Dot() {
+  return (
+    <Text
+      sx={{
+        bg: 'green',
+        color: 'white',
+        borderRadius: 'circle',
+        display: 'inline-block',
+        lineHeight: 0,
+        width: '.4em',
+        height: '.4em',
+        marginRight: '.4em',
+        marginBottom: '.12em',
+        animationName: `${flashing}`,
+        animationDuration: '3s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite'
+      }}
+    />
+  )
+}
 
 export default function Landing({ rsvpCount }) {
   // useEffect(() => {
@@ -84,7 +113,8 @@ export default function Landing({ rsvpCount }) {
                   // fontSize: ['18px', '20px', '24px']
                 }}
               >
-                <Text sx={{background: 'white', color: 'blue', px: 2, py: 1, borderRadius: 'default'}}>{rsvpCount}</Text> more RSVPs till the start of a hacker's
+                <Dot />
+                {rsvpCount} more RSVPs till the start of a hacker's
               </Heading>
             </Fade>
             <Fade left cascade>

pages/winter.js

@@ -34,6 +34,10 @@ export function Winter() {
     fetcher,
     { refreshInterval: 1000 }
   )
+
+  const rsvpCount = rsvps
+    ? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
+    : 100 // arbitrary fallback number
   return (
     <>
       <Box as="main" sx={{ bg: 'blue' }}>
@@ -46,7 +50,8 @@ export function Winter() {
         <Nav light />
         <Snowfall />
         <ForceTheme theme="light" />
-        <Landing rsvpCount={500 - rsvps?.length} />
+        {/* filter out rsvps that are "invalid" */}
+        <Landing rsvpCount={500 - rsvpCount} />
         <Breakdown />
         <Projects />
         <InfoGrid />