Improve Slack #counttoamillion badge (#61)

* Add #counttoamillion card (#58)

* added #counttoamillion card

* made #counttoamillion card horizontal in mobile

* Add revalidation

* Fix indentation of #counttoamillion card

* Import #counttoamillion data rather than using API

* Tweak counttoamillion.js, doesn't serve data now

Co-authored-by: Abby W <abigail9664@gmail.com>

* Improve Slack #counttoamillion badge

Co-authored-by: Avi <32148378+abby9664@users.noreply.github.com>
Co-authored-by: Abby W <abigail9664@gmail.com>

.gitignore

@@ -5,3 +5,4 @@ node_modules
 .DS_Store
 public/sitemap.xml
 .vercel
+.vscode

pages/api/channels/count-to-a-million.js

@@ -1,10 +1,17 @@
-export default async (req, res) => {
-  // fetches the latest message in #counttoamillion and returns the current count
+const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
-  const history = await fetch(`https://slack.com/api/conversations.history?token=${process.env.SCRAPPY_TOKEN}&channel=CDJMS683D&limit=1&inclusive=true`)
+// fetches the latest message in #counttoamillion and returns the current count
+export const getCount = async (req, res) => {
+  const history = await fetch(
+    `https://slack.com/api/conversations.history?token=${process.env.SLACK_LEGACY_TOKEN}&channel=CDJMS683D&limit=1&inclusive=true`
+  )
     .then(r => r.json())
-    .catch(err => res.status(400).send(`Error: ${err}`))
-  const latestCount = history.messages[0].text.split(' ')[0].replace(/[^0-9]/g, '')
-
-  res.status(200).send(latestCount)
+    .catch(err => console.err(`Error: ${err}`))
+  const str = history.messages?.[0].text.split(' ')?.[0].replace(/[^0-9]/g, '')
+  if (!str) return 'error'
+  return withCommas(Number(str))
 }
+
+const getCountEndpoint = (req, res) => getCount().then(v => res.send(v))
+
+export default getCountEndpoint

pages/slack.js

@@ -1,9 +1,10 @@
 import {
+  Badge,
   Box,
   Card,
   Container,
-  Grid,
   Heading,
+  Grid,
   Image,
   Link,
   Text
@@ -20,13 +21,19 @@ import Footer from '../components/footer'
 import SlideUp from '../components/slide-up'
 import Header from '../components/slack/header'
 import SlackEvents from '../components/slack/slack-events'
+import { getCount } from '../pages/api/channels/count-to-a-million'
 
 const zoomSlide = keyframes({
   from: { backgroundPosition: '-32px bottom' },
   to: { backgroundPosition: '32px bottom' }
 })
 
-export default () => (
+export async function getStaticProps() {
+  const millionCount = (await getCount()) || null
+  return { props: { millionCount }, revalidate: 1 }
+}
+
+const SlackPage = ({ millionCount }) => (
   <>
     <Meta
       as={Head}
@@ -150,7 +157,7 @@ export default () => (
             as="a"
             variant="interactive"
             sx={{
-              gridColumn: ['span 2', 'span 6'],
+              gridColumn: ['span 2', 'span 5'],
               bg: 'blue',
               backgroundImage: t => t.util.gx('cyan', 'blue')
             }}
@@ -167,7 +174,7 @@ export default () => (
           href="https://scrapbook.hackclub.com/"
           variant="interactive"
           sx={{
-            gridColumn: ['span 2', 'span 6'],
+            gridColumn: ['span 2', 'span 5'],
             bg: 'dark',
             backgroundImage: t => t.util.gx('yellow', 'orange')
           }}
@@ -178,6 +185,28 @@ export default () => (
           </Heading>
           <Text as="p">A daily diary of project updates</Text>
         </Card>
+        <Card
+          bg="red"
+          as="a"
+          sx={{
+            gridColumn: ['span 2 !important', 'span 2 !important'],
+            gridRow: ['span 1 !important', 'span 3 !important'],
+            writingMode: ['lr-tb', 'tb-rl']
+          }}
+        >
+          <Heading as="h3">#counttoamillion</Heading>
+          <Text as="p" sx={{ display: 'flex', alignItems: 'baseline' }}>
+            We’re at{' '}
+            <Badge
+              variant="outline"
+              as="span"
+              sx={{ ml: [2, 0], mt: [0, 2], px: [2, 0], py: [0, 2] }}
+            >
+              {millionCount}
+            </Badge>
+            !
+          </Text>
+        </Card>
         <Card bg="cyan">
           <h3>#lounge</h3>
         </Card>
@@ -201,16 +230,6 @@ export default () => (
         >
           <h3>#code</h3>
         </Card>
-        <Card
-          bg="red"
-          sx={{
-            gridColumn: ['span 1 !important', 'span 2 !important'],
-            gridRow: 'span 2 !important',
-            writingMode: 'tb-rl'
-          }}
-        >
-          <h3>#confessions</h3>
-        </Card>
         <Card
           bg="yellow"
           sx={{
@@ -376,3 +395,5 @@ export default () => (
     <Footer />
   </>
 )
+
+export default SlackPage