Merge branch 'main' into issue-9115

EddieHubCommunity · Nov 19, 2023 · 2c46c45 · 2c46c45
2 parents 3adbfeb + 4c4547b
commit 2c46c45
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 88 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,45 +1,45 @@
-## [2.89.2](https://github.com/EddieHubCommunity/BioDrop/compare/v2.89.1...v2.89.2) (2023-11-18)
+## [2.89.4](https://github.com/EddieHubCommunity/BioDrop/compare/v2.89.3...v2.89.4) (2023-11-19)
 
 
 ### Bug Fixes
 
-* homepage video ([#9799](https://github.com/EddieHubCommunity/BioDrop/issues/9799)) ([c029503](https://github.com/EddieHubCommunity/BioDrop/commit/c02950376893a8c370be914fb40390b38634416f))
+* pricing premium text ([#9806](https://github.com/EddieHubCommunity/BioDrop/issues/9806)) ([bd90bc7](https://github.com/EddieHubCommunity/BioDrop/commit/bd90bc7e50e7795c2e7dfd3f3b06298b64f0aadb))
 
 
 
-## [2.89.1](https://github.com/EddieHubCommunity/BioDrop/compare/v2.89.0...v2.89.1) (2023-11-17)
+## [2.89.3](https://github.com/EddieHubCommunity/BioDrop/compare/v2.89.2...v2.89.3) (2023-11-19)
 
 
 ### Bug Fixes
 
-* docs nav refresh when using side nav [#9486](https://github.com/EddieHubCommunity/BioDrop/issues/9486) ([#9513](https://github.com/EddieHubCommunity/BioDrop/issues/9513)) ([81dde4e](https://github.com/EddieHubCommunity/BioDrop/commit/81dde4e27d4d5bbd06e07c5a69f35dc164f2c7be))
+* resolve mobile keyboard fluctuation during search ([#9248](https://github.com/EddieHubCommunity/BioDrop/issues/9248)) ([999602b](https://github.com/EddieHubCommunity/BioDrop/commit/999602bae3a2b267a68fd2d8e55282bbfe979501))
 
 
 
-# [2.89.0](https://github.com/EddieHubCommunity/BioDrop/compare/v2.88.0...v2.89.0) (2023-11-17)
+## [2.89.2](https://github.com/EddieHubCommunity/BioDrop/compare/v2.89.1...v2.89.2) (2023-11-18)
 
 
-### Features
+### Bug Fixes
 
-* account nav button use profile picture ([#9703](https://github.com/EddieHubCommunity/BioDrop/issues/9703)) ([2d15ac3](https://github.com/EddieHubCommunity/BioDrop/commit/2d15ac38b42660e4a28e5421592b2b6f290f4058))
+* homepage video ([#9799](https://github.com/EddieHubCommunity/BioDrop/issues/9799)) ([c029503](https://github.com/EddieHubCommunity/BioDrop/commit/c02950376893a8c370be914fb40390b38634416f))
 
 
 
-# [2.88.0](https://github.com/EddieHubCommunity/BioDrop/compare/v2.87.5...v2.88.0) (2023-11-17)
+## [2.89.1](https://github.com/EddieHubCommunity/BioDrop/compare/v2.89.0...v2.89.1) (2023-11-17)
 
 
-### Features
+### Bug Fixes
 
-* issue bug template steps to reproduce ([#9789](https://github.com/EddieHubCommunity/BioDrop/issues/9789)) ([5ac57ba](https://github.com/EddieHubCommunity/BioDrop/commit/5ac57bad5a685a5e688d972c95caa8c9e1a173dd))
+* docs nav refresh when using side nav [#9486](https://github.com/EddieHubCommunity/BioDrop/issues/9486) ([#9513](https://github.com/EddieHubCommunity/BioDrop/issues/9513)) ([81dde4e](https://github.com/EddieHubCommunity/BioDrop/commit/81dde4e27d4d5bbd06e07c5a69f35dc164f2c7be))
 
 
 
-## [2.87.5](https://github.com/EddieHubCommunity/BioDrop/compare/v2.87.4...v2.87.5) (2023-11-17)
+# [2.89.0](https://github.com/EddieHubCommunity/BioDrop/compare/v2.88.0...v2.89.0) (2023-11-17)
 
 
-### Bug Fixes
+### Features
 
-* tags with enter [#9103](https://github.com/EddieHubCommunity/BioDrop/issues/9103)  ([#9508](https://github.com/EddieHubCommunity/BioDrop/issues/9508)) ([978bc1a](https://github.com/EddieHubCommunity/BioDrop/commit/978bc1a29ad46862066141971615f246d59b06a1)), closes [#9459](https://github.com/EddieHubCommunity/BioDrop/issues/9459) [#9459](https://github.com/EddieHubCommunity/BioDrop/issues/9459)
+* account nav button use profile picture ([#9703](https://github.com/EddieHubCommunity/BioDrop/issues/9703)) ([2d15ac3](https://github.com/EddieHubCommunity/BioDrop/commit/2d15ac38b42660e4a28e5421592b2b6f290f4058))
 
 
 
diff --git a/config/app.json b/config/app.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.89.2",
+  "version": "2.89.4",
   "alerts": [],
   "layouts": [
     "classic",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "biodrop",
-  "version": "2.89.2",
+  "version": "2.89.4",
   "private": false,
   "homepage": "https://biodrop.io",
   "engines": {

diff --git a/pages/pricing.js b/pages/pricing.js
@@ -84,7 +84,7 @@ export default function Premium({ user }) {
             return "Upgrade";
           }
           if (!user.isLoggedIn) {
-            return "Sign up";
+            return "Join Premium plan";
           }
         },
         action: () => {

diff --git a/pages/search.js b/pages/search.js
@@ -16,6 +16,7 @@ import {
   searchTagNameInInput,
 } from "@services/utils/search/tags";
 import { PROJECT_NAME } from "@constants/index";
+import Button from "@components/Button";
 
 async function fetchUsersByKeyword(keyword) {
   const res = await fetch(
@@ -72,16 +73,16 @@ export default function Search({
   data: { tags, recentlyUpdatedUsers, filteredUsers },
   BASE_URL,
 }) {
-  const router = useRouter();
-  const { username, keyword, userSearchParam } = router.query;
+  const { replace, query, pathname } = useRouter();
+  const { username, keyword, userSearchParam } = query;
   const [notFound, setNotFound] = useState();
-  const [users, setUsers] = useState(keyword ? filteredUsers : recentlyUpdatedUsers);
-  const [inputValue, setInputValue] = useState(
-    username || keyword || userSearchParam || "",
+  const [users, setUsers] = useState(
+    keyword ? filteredUsers : recentlyUpdatedUsers,
   );
   const [currentPage, setCurrentPage] = useState(1);
 
   const searchInputRef = useRef(null);
+  const searchTerm = username || keyword || userSearchParam;
 
   useEffect(() => {
     if (username) {
@@ -95,29 +96,31 @@ export default function Search({
   }, []);
 
   useEffect(() => {
-    if (!inputValue) {
-      //Setting the users as null when the input field is empty
-      setUsers(recentlyUpdatedUsers);
-      //Removing the not found field when the input field is empty
-      setNotFound();
-      router.replace(
+    const onKeyDownHandler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDownHandler);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDownHandler);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!searchTerm) {
+      replace(
         {
-          pathname: "/search",
+          pathname,
         },
         undefined,
         { shallow: true },
       );
       return;
     }
 
-    // checks if there is no keyword between 2 commas and removes the second comma and also checks if the input starts with comma and removes it.
-    setInputValue(inputValue.replace(/,(\s*),/g, ",").replace(/^,/, ""));
-
-    // If the inputValue has not changed and is the same as the keyword passed from the server
-    if (keyword && inputValue === keyword) {
-      return;
-    }
-
     async function fetchUsers(value) {
       try {
         const res = await fetch(
@@ -139,55 +142,65 @@ export default function Search({
       }
     }
 
-    const timer = setTimeout(() => {
-      router.replace(
-        {
-          pathname: "/search",
-          query: { userSearchParam: inputValue },
-        },
-        undefined,
-        { shallow: true },
-      );
-      fetchUsers(inputValue);
-    }, 500);
-
-    return () => clearTimeout(timer);
-  }, [inputValue]);
+    if (searchTerm) {
+      fetchUsers(searchTerm);
+    }
+  }, [searchTerm]);
 
-  useEffect(() => {
-    const onKeyDownHandler = (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
-        e.preventDefault();
-        searchInputRef.current?.focus();
-      }
-    };
-    document.addEventListener("keydown", onKeyDownHandler);
+  const handleSearchSubmit = async (e) => {
+    e.preventDefault();
 
-    return () => {
-      document.removeEventListener("keydown", onKeyDownHandler);
-    };
-  }, []);
+    const params = new URLSearchParams({ query: searchTerm });
 
-  const search = (keyword) => {
-    const cleanedInput = cleanSearchInput(inputValue);
+    function removeComma(value) {
+      return value.replace(/,(\s*),/g, ",").replace(/^,/, "");
+    }
+    const searchInputVal = removeComma(
+      cleanSearchInput(searchInputRef.current.value),
+    );
 
-    if (!cleanedInput.length) {
-      return setInputValue(keyword);
+    if (!searchInputVal) {
+      params.delete("query");
+    } else {
+      params.set("query", searchInputVal);
     }
 
-    const items = cleanedInput.split(", ");
+    replace(
+      {
+        pathname,
+        query: { userSearchParam: params.get("query") },
+      },
+      undefined,
+      { shallow: true },
+    );
+  };
 
-    if (cleanedInput.length) {
-      if (searchTagNameInInput(inputValue, keyword)) {
-        return setInputValue(
-          items.filter((item) => item.trim() !== keyword).join(", "),
-        );
-      }
+  const handleSearchTag = (tagName) => {
+    const params = new URLSearchParams({ query: searchTerm });
+    if (!userSearchParam) {
+      params.set("query", tagName);
+    }
 
-      return setInputValue([...items, keyword].join(", "));
+    if (userSearchParam) {
+      if (searchTagNameInInput(userSearchParam, tagName)) {
+        const terms = userSearchParam.split(",");
+        const filteredTerms = terms.filter((item) => item.trim() !== tagName);
+        params.set("query", filteredTerms);
+      } else {
+        params.append("query", tagName);
+      }
     }
 
-    setInputValue(keyword);
+    replace(
+      {
+        pathname,
+        query: {
+          userSearchParam: params.getAll("query").join(", "),
+        },
+      },
+      undefined,
+      { shallow: true },
+    );
   };
 
   const usersPerPage = 21;
@@ -218,8 +231,10 @@ export default function Search({
                   key={tag.name}
                   name={tag.name}
                   total={tag.total}
-                  selected={searchTagNameInInput(inputValue, tag.name)}
-                  onClick={() => search(tag.name)}
+                  selected={
+                    searchTerm && searchTagNameInInput(searchTerm, tag.name)
+                  }
+                  onClick={() => handleSearchTag(tag.name)}
                 />
               ))}
         </div>
@@ -230,16 +245,24 @@ export default function Search({
           className="w-full"
           badgeClassName={"translate-x-2/4 -translate-y-1/2"}
         >
-          <Input
-            ref={searchInputRef}
-            placeholder="Search user by name or tags; eg: open source, reactjs or places; eg: London, New York"
-            name="keyword"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-          />
+          <form onSubmit={handleSearchSubmit} className="w-full">
+            <Input
+              ref={searchInputRef}
+              placeholder="Search user by name or tags; eg: open source, reactjs or places; eg: London, New York"
+              name="keyword"
+              defaultValue={searchTerm}
+            />
+            <Button type="submit" className="mb-4">
+              Search
+            </Button>
+          </form>
         </Badge>
 
-       {!inputValue && <h2 className="mt-10 mb-4 text-2xl font-bold">Recently updated profiles</h2>}
+        {!searchTerm && (
+          <h2 className="mt-10 mb-4 text-2xl font-bold">
+            Recently updated profiles
+          </h2>
+        )}
 
         {notFound && <Alert type="error" message={notFound} />}
         <ul
@@ -249,14 +272,14 @@ export default function Search({
           {users.length < usersPerPage &&
             users.map((user) => (
               <li key={user.username}>
-                <UserHorizontal profile={user} input={inputValue} />
+                <UserHorizontal profile={user} input={searchTerm} />
               </li>
             ))}
 
           {users.length > usersPerPage &&
             visibleUsers.map((user) => (
               <li key={user.username}>
-                <UserHorizontal profile={user} input={inputValue} />
+                <UserHorizontal profile={user} input={searchTerm} />
               </li>
             ))}
         </ul>

diff --git a/tests/search.spec.js b/tests/search.spec.js
@@ -29,6 +29,7 @@ test("Search works correctly", async ({ page }) => {
   // 3. type in search and check that user with the name exist and check a name doesn't exist
   const input = page.locator("[name='keyword']");
   await input.type("_test-profile-user-1");
+  await page.locator("[type='submit']").click();
 
   await expect(page.locator("main li")).toHaveCount(1);
 });
@@ -40,6 +41,7 @@ test("Search page has random results when no search term used", async ({
 
   const input = page.locator("[name='keyword']");
   await input.fill("");
+  await page.locator("[type='submit']").click();
 
   await expect(page.locator("main li")).toHaveCount(defaultUsers);
 });
@@ -51,6 +53,7 @@ test("Search page shows random results after typing 1 characters", async ({
 
   const input = page.locator("[name='keyword']");
   await input.type("e");
+  await page.locator("[type='submit']").click();
 
   await expect(page.locator("main li")).toHaveCount(defaultUsers);
 });
@@ -62,6 +65,7 @@ test("Search page shows results after typing 3 characters", async ({
 
   const input = page.locator("[name='keyword']");
   await input.type("aka");
+  await page.locator("[type='submit']").click();
 
   await expect(page.locator("main li")).toContainText(["aka"]);
 });
@@ -73,6 +77,7 @@ test("Search term persistence after navigating back", async ({ page }) => {
   const searchTerm = "_test-profile-user-1";
   const searchName = "Test User Name 1";
   await input.fill(searchTerm);
+  await page.locator("[type='submit']").click();
 
   // 2. Navigate to profile
   await expect(page).toHaveURL(`/search?userSearchParam=${searchTerm}`);
@@ -107,6 +112,7 @@ test("find the profile after providing concise name", async ({ page }) => {
   // 3. find the input field and type the whole name
   const input = page.locator("[name='keyword']");
   await input.fill(searchTerm);
+  await page.locator("[type='submit']").click();
 
   // 4. select and click on the profile by matching name string
   const profileHeader = page.locator(`h2:has-text('${searchTerm}')`);