Minimal features

components/event.js

@@ -2,6 +2,7 @@ import { Box, Text, Flex, Avatar, Heading } from 'theme-ui'
 import tt from 'tinytime'
 import Link from 'next/link'
 import Sparkles from './sparkles'
+import { XCircle, Users } from 'react-feather'
 
 const past = dt => new Date(dt) < new Date()
 const now = (start, end) =>
@@ -22,29 +23,66 @@ const tagStyle = {
   mt: 1
 }
 
-const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal, tags }) => (
+const cancelledStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '4px',
+  fontSize: 0,
+  fontWeight: 'bold',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05rem',
+  bg: 'red',
+  color: 'white',
+  px: 2,
+  py: '2px',
+  borderRadius: 'default',
+  mr: 1,
+  mt: 1
+}
+
+const Event = ({
+  id,
+  slug,
+  title,
+  desc,
+  leader,
+  avatar,
+  cancelled,
+  interestCount,
+  start,
+  end,
+  cal,
+  tags
+}) => (
   <Link href={`/${slug}`} passHref legacyBehavior>
     <Box
       as="a"
       sx={{
-        display: 'block',
+        display: 'flex',
+        flexDirection: 'column',
         position: 'relative',
         textDecoration: 'none',
         bg: 'elevated',
         color: 'text',
-        p: [3, 3]
+        p: [3, 3],
+        opacity: cancelled ? 0.75 : 1,
+        transition: 'opacity 0.2s ease',
+        height: '100%'
       }}
     >
       <Box
         sx={{
-          bg: past(end) ? 'sunken' : 'primary',
+          bg: cancelled ? 'muted' : past(end) ? 'sunken' : 'primary',
           color: past(end) ? 'text' : 'white',
           lineHeight: ['subheading', 'body'],
           m: -3,
           py: 2,
           px: 3,
           mb: 3,
-          strong: { display: ['block', 'inline'] }
+          strong: {
+            display: ['block', 'inline'],
+            textDecoration: cancelled ? 'line-through' : 'none'
+          }
         }}
       >
         <Text>
@@ -56,6 +94,15 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal, tags })
       <Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
         {title}
       </Heading>
+      {cancelled && (
+        <Box>
+          <Text as="span" sx={cancelledStyle}>
+            {' '}
+            <XCircle size={14} />
+            Cancelled
+          </Text>
+        </Box>
+      )}
       {tags?.length > 0 && (
         <Box sx={{ mb: 1 }}>
           {tags.map(tag => (
@@ -65,6 +112,7 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal, tags })
           ))}
         </Box>
       )}
+      <Box sx={{ flex: '1 1 auto' }} />
       <Flex
         sx={{
           alignItems: 'center',
@@ -81,8 +129,28 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal, tags })
           />
         )}
         <Text as="span">{leader}</Text>
+        {interestCount > 0 && (
+          <Text
+            as="span"
+            sx={{
+              ml: 'auto',
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '4px',
+              fontSize: 0,
+              fontWeight: 'bold',
+              bg: 'sunken',
+              color: 'muted',
+              px: 2,
+              py: '2px',
+              borderRadius: 'default'
+            }}
+          >
+            <Users size={14} /> {interestCount}
+          </Text>
+        )}
       </Flex>
-      {now(start, end) && (
+      {now(start, end) && !cancelled && (
         <Sparkles
           aria-hidden
           style={{

components/nav.js

@@ -1,16 +1,26 @@
-import { ArrowLeft, Moon, GitHub } from 'react-feather'
-import { Box, Container, IconButton, Image, Link as A, Avatar, Flex } from 'theme-ui'
+import { ArrowLeft, Moon, Sun, GitHub } from 'react-feather'
+import {
+  Box,
+  Container,
+  IconButton,
+  Image,
+  Link as A,
+  Avatar,
+  Flex
+} from 'theme-ui'
 import { useColorMode } from 'theme-ui'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 const NavButton = ({ sx, ...props }) => (
   <IconButton
     {...props}
     sx={{
       color: 'primary',
       borderRadius: 'circle',
+      cursor: 'pointer',
+      m: 2,
       transition: 'box-shadow .125s ease-in-out',
       ':hover,:focus': {
         boxShadow: '0 0 0 2px',
@@ -51,27 +61,39 @@ const Flag = () => (
 
 const ColorSwitcher = props => {
   const [mode, setMode] = useColorMode()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
   return (
     <NavButton
       {...props}
       onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
       title="Reverse color scheme"
+      sx={{
+        ...props.sx,
+        transition: 'transform 0.3s ease,box-shadow .125s ease-in-out'
+      }}
     >
-      <Moon size={24} />
+      {mounted &&
+        (mode === 'dark' ? (
+          <Sun size={24} style={{ transition: 'transform 0.3s ease' }} />
+        ) : (
+          <Moon size={24} style={{ transition: 'transform 0.3s ease' }} />
+        ))}
     </NavButton>
   )
 }
 
 export default () => {
   const [mode] = useColorMode()
   const router = useRouter()
-
   const [session, setSession] = useState(null)
   useEffect(() => {
     fetch('/api/auth/me/')
-    .then(r => r.json())
-    .then(data => setSession(data))
-    .catch(() => setSession({ slackId: null }))
+      .then(r => r.json())
+      .then(data => setSession(data))
+      .catch(() => setSession({ slackId: null }))
   }, [])
 
   const home = router.pathname === '/'
@@ -107,7 +129,7 @@ export default () => {
         </NavButton>
         <ColorSwitcher />
         {session?.slackId ? (
-          <Flex sx={{alignItems: 'center', gap: 2, ml: 2}}>
+          <Flex sx={{ alignItems: 'center', gap: 2, ml: 2 }}>
             <NavButton
               as="a"
               href="/api/auth/logout/"
@@ -119,18 +141,18 @@ export default () => {
               src={`https://cachet.dunkirk.sh/users/${session.slackId}/r`}
               alt="Your Slack Avatar"
               size={28}
-              sx={{hieght:28, width:28, borderRadius:'circle'}}
+              sx={{ height: 28, width: 28, borderRadius: 'circle' }}
             />
           </Flex>
-        ): session != null ? (
+        ) : session != null ? (
           <NavButton
             as="a"
             href={`/api/auth/login/?returnTo=${encodeURIComponent(router.asPath)}`}
-            sx={{ml:2,fontSize:1,width:'auto',px:2}}
+            sx={{ ml: 2, fontSize: 1, width: 'auto', px: 2 }}
           >
             Log in
           </NavButton>
-        ): null}
+        ) : null}
       </Container>
     </Box>
   )

lib/data.js

@@ -86,6 +86,10 @@ export const getEvents = async (page = 1) => {
         avatar: e['Avatar'],
         approved: e['Approved'] || false,
         tags: e['Tags'] || [],
+        cancelled: e['Cancelled'] || false,
+        rawCancellation: e['RawCancellation'] || null,
+        interestCount:
+          typeof e['InterestCount'] === 'number' ? e['InterestCount'] : 0,
         interestCount: e['InterestCount'] || 0,
         leaderSlackId: e['LeaderSlackID'],
         rsvpFormUrl: e['RSVPFormURL'] || null