Yarn upgrade all the things

components/ChannelReferenceRenderer.tsx

@@ -1,17 +1,25 @@
-export const ChannelReferenceRenderer = (props: { value: string }) => {
+import React from "react";
+
+function renderStringWithChannelRefs(value: string) {
   return (
     <>
-      {props.value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str) => {
+      {value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str, i) => {
         const matches = str.match(/<#([A-Z0-9]+)\|([A-Za-z0-9]+)>/);
         if (matches) {
           return (
-            <a href={`https://app.slack.com/client/T03BQ3NU9/${matches[1]}`}>
+            <a href={`https://app.slack.com/client/T03BQ3NU9/${matches[1]}`} key={i}>
               #{matches[2]}
             </a>
           );
         }
-        return str;
+        return <React.Fragment key={i}>{str}</React.Fragment>;
       })}
     </>
   );
+}
+
+export const ChannelReferenceRenderer = ({ children }: React.PropsWithChildren<{}>) => {
+  // TODO: this should probably walk the tree
+  if (typeof children[0] === "string") return renderStringWithChannelRefs(children[0]);
+  return <>{children}</>;
 };

package.json

@@ -16,33 +16,34 @@
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
     "@zeit/next-stylus": "^1.0.1",
-    "axios": "^0.20.0",
+    "axios": "^0.25.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "font-awesome": "^4.7.0",
-    "less": "^3.10.3",
+    "javascript-time-ago": "^2.3.13",
-    "lodash": "^4.17.15",
+    "less": "^4.1.2",
-    "next": "^9.5.3",
+    "lodash": "^4.17.21",
-    "next-fonts": "^1.4.0",
+    "next": "^12.0.10",
+    "next-fonts": "^1.5.1",
     "parse-github-event": "^1.1.3",
-    "react": "^16.11.0",
+    "react": "^17.0.2",
-    "react-dom": "^16.11.0",
+    "react-dom": "^17.0.2",
-    "react-ga": "^3.1.2",
+    "react-ga": "^3.3.0",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^8.0.0",
-    "react-time-ago": "^6.0.1",
+    "react-time-ago": "^7.1.9",
-    "stylus": "^0.54.7",
+    "stylus": "^0.56.0",
     "twitter-text": "^3.0.0",
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@types/node": "14.11.2",
+    "@types/node": "17.0.17",
-    "@types/react": "16.9.49",
+    "@types/react": "17.0.39",
     "babel-eslint": "^10.0.3",
-    "eslint": "^7.9.0",
+    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^6.5.0",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react": "^7.28.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.5.1",
-    "typescript": "4.0.3"
+    "typescript": "4.5.5"
   },
   "prettier": {
     "trailingComma": "es5"

pages/index.tsx

@@ -140,9 +140,10 @@ const IndexContent = (props: IndexProps) => (
                         <span>
                           <ReactMarkdown
                             className="channel-topic"
-                            source={channel.topic}
+                            components={{ p: ChannelReferenceRenderer }}
-                            renderers={{ text: ChannelReferenceRenderer }}
+                          >
-                          />
+                            {channel.topic}
+                          </ReactMarkdown>
                         </span>
                       </td>
                     </tr>
@@ -152,7 +153,7 @@ const IndexContent = (props: IndexProps) => (
               <p>
                 <strong>Ja paljon muuta:</strong>{" "}
                 {props.channels.slice(10, 30).map((channel, i) => (
-                  <>
+                  <React.Fragment key={channel.id}>
                     <a
                       href={`https://app.slack.com/client/T03BQ3NU9/${channel.id}`}
                       target="_blank"
@@ -160,7 +161,7 @@ const IndexContent = (props: IndexProps) => (
                       #{channel.name}
                     </a>
                     {i !== 19 ? ", " : "..."}
-                  </>
+                  </React.Fragment>
                 ))}
               </p>
             </div>