From 0524b8340cf0bf0c68907b0465fd4879e39c76aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristers=20Du=C4=A3els?=
 <45801982+kristersd@users.noreply.github.com>
Date: Sun, 10 Mar 2024 20:36:11 +0200
Subject: [PATCH] fix: react documentation commands can not be in sentence
 (#355)

---
 src/features/commands.ts       |  4 ++--
 src/helpers/react-docs.test.ts | 22 ++++++++++++++++++++++
 src/helpers/react-docs.ts      |  7 +++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/helpers/react-docs.test.ts

diff --git a/src/features/commands.ts b/src/features/commands.ts
index 6e6a9ade..e9c3766d 100644
--- a/src/features/commands.ts
+++ b/src/features/commands.ts
@@ -11,6 +11,7 @@ import cooldown from "./cooldown";
 import { ChannelHandlers } from "../types";
 import { isStaff } from "../helpers/discord";
 import {
+  extractSearchKey,
   getReactDocsContent,
   getReactDocsSearchKey,
 } from "../helpers/react-docs";
@@ -430,8 +431,7 @@ Here's an article explaining the difference between the two: https://goshakkk.na
     help: "Allows you to search the React docs, usage: !docs useState",
     category: "Web",
     handleMessage: async (msg) => {
-      const [, search] = msg.content.split(" ");
-
+      const search = extractSearchKey(msg.content);
       const searchKey = getReactDocsSearchKey(search);
 
       if (!searchKey) {
diff --git a/src/helpers/react-docs.test.ts b/src/helpers/react-docs.test.ts
new file mode 100644
index 00000000..b147665f
--- /dev/null
+++ b/src/helpers/react-docs.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, test } from "vitest";
+import { extractSearchKey, getReactDocsSearchKey } from "./react-docs";
+
+describe("React documentation command", () => {
+  test.each([
+    ["Hello world, please look into !docs useState Hello", "react/useState"],
+    ["!docs react/useState", "react/useState"],
+    ["Foo !docs react/useState bar", "react/useState"],
+    ["!react-docs react/useState", "react/useState"],
+    ["Foo bar, !react-docs , useState", undefined],
+    [
+      "Hello world, check react dom docs, !docs createPortal hello",
+      "react-dom/createPortal",
+    ],
+    ["!docs react-dom/createPortal", "react-dom/createPortal"],
+  ])(`should match the command in the message`, (message, expected) => {
+    const search = extractSearchKey(message);
+    const searchKey = getReactDocsSearchKey(search);
+
+    expect(searchKey).toBe(expected);
+  });
+});
diff --git a/src/helpers/react-docs.ts b/src/helpers/react-docs.ts
index a48b437a..062b97ab 100644
--- a/src/helpers/react-docs.ts
+++ b/src/helpers/react-docs.ts
@@ -4,6 +4,8 @@ import { gitHubReadToken } from "./env";
 const LOOKUP_REGEX = /<Intro>\s*(.*?)\s*<\/Intro>/gs;
 const LINK_REGEX = /\[([^\]]+)\]\((?!https?:\/\/)([^)]+)\)/g;
 
+const EXTRACT_SEARCH_KEY_REGEX = /(?<=!(docs|react-docs)\s)[^\s]+/;
+
 const BASE_URL =
   "https://api.github.com/repos/reactjs/react.dev/contents/src/content/reference/";
 
@@ -45,6 +47,11 @@ export const getReactDocsSearchKey = (search: string) => {
   });
 };
 
+export const extractSearchKey = (search: string) => {
+  const matches = search.match(EXTRACT_SEARCH_KEY_REGEX);
+  return matches ? matches[0] : "";
+};
+
 const processReactDocumentation = (content: string) => {
   const patchedContentLinks = content.replace(LINK_REGEX, (_, text, link) => {
     return `[${text}](https://react.dev${link})`;