more things

components/slack/slack-events.js

@@ -1,8 +1,8 @@
 import { sample, take } from 'lodash'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Slide } from 'react-reveal'
 import useWebSocket from 'react-use-websocket'
-import { Flex, Text } from 'theme-ui'
+import { Box, Flex, Text } from 'theme-ui'
+import { sql } from '@vercel/postgres'
 
 const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
@@ -35,6 +35,46 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
     STATIC_OPTIONS
   )
 
+  useEffect(() => {
+    try {
+      async function resolveEvent() {
+        if (
+            !lastJsonMessage ||
+            !lastJsonMessage.channel
+        ) {
+          return false
+        }
+
+        const { name } = await fetch(
+            `/api/channels/resolve/?id=${lastJsonMessage.channel}`
+        )
+            .then(r => r.json())
+            .catch(err => console.error(err))
+
+        if (whitelistedChannels.has(name)) {
+          setEvents(prev => [
+            {
+              type: lastJsonMessage.type,
+              channel: `#${name}`,
+              color: sample(colors)
+            },
+            ...prev
+          ])
+
+          await sql`
+          INSERT INTO channels (name)
+          VALUES (${name})
+          ON CONFLICT (name) DO NOTHING;
+        `;
+        }
+      }
+
+      resolveEvent()
+    } catch (err) {
+      true
+    }
+  }, [lastJsonMessage])
+
   useEffect(() => {
     try {
       async function resolveEvent() {
@@ -112,25 +152,24 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       aria-hidden="true"
       {...props}
     >
+      <Box sx={{ padding: 8 }}/>
       {take(events, 7).map(({ type, channel, color }) => (
-        <Slide top duration={99990000} key={type + channel + color}>
           <>
             {type === 'message' && (
               <Text sx={{ marginX: "5px" }}>
-                Message in <Channel channel={channel} color={color} />
+                <Channel channel={channel} color={color} />
               </Text>
             )}
           </>
-        </Slide>
       ))}
       <Text sx={{ marginX: "5px" }}>
-        <Channel channel="test!!" color="#FFFF00" />
+        <Channel channel="#lounge" color="red" />
       </Text>
       <Text sx={{ marginX: "5px" }}>
-        <Channel channel="test!!" color="#FFFF00" />
+        <Channel channel="#scrapbook" color="blue" />
       </Text>
       <Text sx={{ marginX: "5px" }}>
-        <Channel channel="test!!" color="#FFFF00" />
+        <Channel channel="#code" color="green" />
       </Text>
     </Flex>
   )

package.json

@@ -25,6 +25,7 @@
     "@octokit/auth-app": "^6.0.1",
     "@octokit/core": "^5.0.1",
     "@octokit/rest": "^20.0.2",
+    "@vercel/postgres": "^0.5.1",
     "add": "^2.0.6",
     "airtable-plus": "^1.0.4",
     "animated-value": "^0.2.4",

pages/slack.js

@@ -72,22 +72,13 @@ const SlackPage = () => {
               setColors(['green', '#51F5C5']);
             }
           }
-          /*opacity: 1,
-          y: 0,
-          duration: 1,
-          stagger: 0.2,
-          ease: "power2.out",
-          scrollTrigger: {
-            trigger: triggerRef.current,
-            start: "top 80%",
-          },*/
         }
     )
     return () => {
       projects.kill();
     }
   }, []);
-  
+
   return (
     <>
       <Meta