feat: group suggestions for users link

components/GroupLinkSearch.js

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Combobox } from "@headlessui/react";
+import Label from "./form/Label";
+
+function GroupLinkSearch({ selectedGroup, handleGroupSelection, groups }) {
+  const [query, setQuery] = useState("");
+
+  const handleGroupChange = (e) => {
+    setQuery(e.target.value);
+    const currentValue = e.target.value;
+    if (!groups.includes(currentValue)) {
+      handleGroupSelection(currentValue);
+    }
+  };
+
+  const filteredGroup =
+    query === ""
+      ? groups.slice(0, 5)
+      : groups
+          .filter((group) => {
+            return group.toLowerCase().includes(query.toLowerCase());
+          })
+          .slice(0, 5);
+
+  return (
+    <Combobox value={selectedGroup} onChange={handleGroupSelection}>
+      <Label htmlFor="search-groups">Group</Label>
+      <Combobox.Input
+        name="search-group"
+        onChange={handleGroupChange}
+        className={
+          "border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 block w-full dark:bg-primary-high hover:border-tertiary-medium focus:ring-0 focus:border-tertiary-medium focus:outline-0"
+        }
+      />
+      <Combobox.Options
+        className={
+          "border-2 rounded border-tertiary-medium dark:bg-primary-medium"
+        }
+      >
+        {filteredGroup.length > 0 &&
+          filteredGroup.map((group) => {
+            return (
+              <Combobox.Option
+                key={group}
+                value={group}
+                className={
+                  "px-3 py-2 flex items-center dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/40"
+                }
+              >
+                {group !== "" && <span>{group}</span>}
+              </Combobox.Option>
+            );
+          })}
+      </Combobox.Options>
+    </Combobox>
+  );
+}
+
+export default GroupLinkSearch;

pages/account/manage/link/[[...data]].js

@@ -9,7 +9,10 @@ import PageHead from "@components/PageHead";
 import Page from "@components/Page";
 import Button from "@components/Button";
 import Navigation from "@components/account/manage/Navigation";
-import { getLinkApi } from "pages/api/account/manage/link/[[...data]]";
+import {
+  getGroupLinkApi,
+  getLinkApi,
+} from "pages/api/account/manage/link/[[...data]]";
 import Input from "@components/form/Input";
 import UserLink from "@components/user/UserLink";
 import Toggle from "@components/form/Toggle";
@@ -21,6 +24,7 @@ import IconSearch from "@components/IconSearch";
 import Select from "@components/form/Select";
 import config from "@config/app.json";
 import { objectToLabelValueArray } from "@services/utils/objectToLabelValueArray";
+import GroupLinkSearch from "@components/GroupLinkSearch";
 
 const animations = config.animations;
 
@@ -30,6 +34,12 @@ export async function getServerSideProps(context) {
   const id = context.query.data ? context.query.data[0] : undefined;
 
   let link = {};
+  let groups = [];
+  try {
+    groups = await getGroupLinkApi(username);
+  } catch (e) {
+    logger.error(e, `Group ${id} failed for username: ${username}`);
+  }
   if (id) {
     try {
       link = await getLinkApi(username, id);
@@ -39,11 +49,11 @@ export async function getServerSideProps(context) {
   }
 
   return {
-    props: { username, link, BASE_URL: clientEnv.NEXT_PUBLIC_BASE_URL },
+    props: { username, link, BASE_URL: clientEnv.NEXT_PUBLIC_BASE_URL, groups },
   };
 }
 
-export default function ManageLink({ BASE_URL, username, link }) {
+export default function ManageLink({ BASE_URL, username, link, groups }) {
   const [open, setOpen] = useState(false);
   const [showNotification, setShowNotification] = useState({
     show: false,
@@ -170,13 +180,10 @@ export default function ManageLink({ BASE_URL, username, link }) {
 
                 <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-primary-low-medium/30 sm:pt-5">
                   <div className="mt-1 sm:col-span-2 sm:mt-0">
-                    <Input
-                      name="group"
-                      label="Group"
-                      onChange={(e) => setGroup(e.target.value)}
-                      value={group}
-                      minLength="2"
-                      maxLength="64"
+                    <GroupLinkSearch
+                      groups={groups}
+                      handleGroupSelection={setGroup}
+                      selectedGroup={group}
                     />
                     <p className="text-sm text-primary-low-medium">
                       You can{" "}

pages/api/account/manage/link/[[...data]].js

@@ -44,7 +44,6 @@ export default async function handler(req, res) {
 export async function getLinkApi(username, id) {
   await connectMongo();
   const log = logger.child({ username });
-
   let getLink = await Link.findOne({ username, _id: id });
 
   if (!getLink) {
@@ -55,6 +54,24 @@ export async function getLinkApi(username, id) {
   return JSON.parse(JSON.stringify(getLink));
 }
 
+export async function getGroupLinkApi(username) {
+  await connectMongo();
+  const log = logger.child({ username });
+  let getGroupLink = [];
+  getGroupLink = await Link.aggregate([
+    { $match: { username } },
+    { $group: { _id: null, groups: { $addToSet: "$group" } } },
+    { $project: { _id: 0, groups: 1 } },
+  ]).exec();
+  getGroupLink = getGroupLink[0].groups.filter((item) => item !== "");
+
+  if (!getGroupLink || getGroupLink.length === 0) {
+    log.info(`Group not found for username: ${username}`);
+    return { error: "Group not found." };
+  }
+  return getGroupLink;
+}
+
 export async function addLinkApi(context, username, data) {
   await connectMongo();
   const log = logger.child({ username });