Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

feat: group suggestions for users link #9878

Merged
59 changes: 59 additions & 0 deletions components/GroupLinkSearch.js
Original file line number Diff line number Diff line change
@@ -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;
27 changes: 17 additions & 10 deletions pages/account/manage/link/[[...data]].js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;

Expand All @@ -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);
Expand All @@ -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,
Expand Down Expand Up @@ -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{" "}
Expand Down
19 changes: 18 additions & 1 deletion pages/api/account/manage/link/[[...data]].js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 });
Expand Down