plane/web/components/project/member-select.tsx
rahulramesha c16a5b9b71
[WEB-626] chore: fix sentry issues and refactor issue actions logic for issue layouts (#3650)
* restructure the logic to avoid throwing error if any dat is not found

* updated files for previous commit

* fix build errors

* remove throwing error if userId is undefined

* optionally chain display_name property to fix sentry issues

* add ooptional check

* change issue action logic to increase code maintainability and make sure to send only the updated date while updating the issue

* fix issue updation bugs

* fix module issues build error

* fix runtime errors
2024-03-06 20:47:38 +05:30

87 lines
2.5 KiB
TypeScript

import React from "react";
import { observer } from "mobx-react-lite";
import { Ban } from "lucide-react";
// hooks
import { Avatar, CustomSearchSelect } from "@plane/ui";
import { useMember } from "hooks/store";
// ui
type Props = {
value: any;
onChange: (val: string) => void;
isDisabled?: boolean;
};
export const MemberSelect: React.FC<Props> = observer((props) => {
const { value, onChange, isDisabled = false } = props;
// store hooks
const {
project: { projectMemberIds, getProjectMemberDetails },
} = useMember();
const options = projectMemberIds
?.map((userId) => {
const memberDetails = getProjectMemberDetails(userId);
if (!memberDetails?.member) return;
return {
value: `${memberDetails?.member.id}`,
query: `${memberDetails?.member.display_name}`,
content: (
<div className="flex items-center gap-2">
<Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
{memberDetails?.member.display_name}
</div>
),
};
})
.filter((option) => !!option) as
| {
value: string;
query: string;
content: React.JSX.Element;
}[]
| undefined;
const selectedOption = getProjectMemberDetails(value);
return (
<CustomSearchSelect
value={value}
label={
<div className="flex items-center gap-2">
{selectedOption && <Avatar name={selectedOption.member?.display_name} src={selectedOption.member?.avatar} />}
{selectedOption ? (
selectedOption.member?.display_name
) : (
<div className="flex items-center gap-2">
<Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
<span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
</div>
)}
</div>
}
buttonClassName="!px-3 !py-2"
options={
options &&
options && [
...options,
{
value: "none",
query: "none",
content: (
<div className="flex items-center gap-2">
<Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
<span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
</div>
),
},
]
}
maxHeight="md"
onChange={onChange}
disabled={isDisabled}
/>
);
});