From 86fb09d233ac958fc97c2343635adad913724d9f Mon Sep 17 00:00:00 2001
From: Kristers <kristersdugels@gmail.com>
Date: Sun, 10 Mar 2024 15:27:25 +0200
Subject: [PATCH] fix: react documentation commands can not be in sentence

---
 src/features/commands.ts       |  4 ++--
 src/helpers/react-docs.test.ts | 19 +++++++++++++++++++
 src/helpers/react-docs.ts      |  7 +++++++
 3 files changed, 28 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 526fa252..a4e52771 100644
--- a/src/features/commands.ts
+++ b/src/features/commands.ts
@@ -5,6 +5,7 @@ import cooldown from "./cooldown";
 import { ChannelHandlers } from "../types";
 import { isStaff } from "../helpers/discord";
 import {
+  extractSearchKey,
   getReactDocsContent,
   getReactDocsSearchKey,
 } from "../helpers/react-docs";
@@ -424,8 +425,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..31205d09
--- /dev/null
+++ b/src/helpers/react-docs.test.ts
@@ -0,0 +1,19 @@
+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 41e382f8..2da804b9 100644
--- a/src/helpers/react-docs.ts
+++ b/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})`;