fix: react documentation commands can not be in sentence (#355)

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) {

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);
+  });
+});

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})`;