fix: react documentation commands can not be in sentence

src/features/commands.ts

@@ -1,10 +1,17 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import fetch from "node-fetch";
-import { APIEmbed, ChannelType, EmbedType, Message, TextChannel } from "discord.js";
+import {
+  APIEmbed,
+  ChannelType,
+  EmbedType,
+  Message,
+  TextChannel,
+} from "discord.js";
 import cooldown from "./cooldown";
 import { ChannelHandlers } from "../types";
 import { isStaff } from "../helpers/discord";
 import {
+  extractSearchKey,
   getReactDocsContent,
   getReactDocsSearchKey,
 } from "../helpers/react-docs";
@@ -424,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) {
@@ -1172,18 +1178,18 @@ const commands: ChannelHandlers = {
 
 const generateReactDocsErrorEmbeds = (search: string): APIEmbed[] => {
   return [
-      {
-        type: EmbedType.Rich,
-        description: `Could not find anything on React documentation for **'${search}'**`,
-        color: EMBED_COLOR,
-        author: {
-          name: "React documentation",
-          icon_url:
-            "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png",
-          url: "https://react.dev/",
-        },
+    {
+      type: EmbedType.Rich,
+      description: `Could not find anything on React documentation for **'${search}'**`,
+      color: EMBED_COLOR,
+      author: {
+        name: "React documentation",
+        icon_url:
+          "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png",
+        url: "https://react.dev/",
       },
-    ];
+    },
+  ];
 };
 
 export default commands;

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