diff --git a/web/components/modules/dropdowns/filters/lead.tsx b/web/components/modules/dropdowns/filters/lead.tsx index b8dc8a9d468..9fa1ea5d5d1 100644 --- a/web/components/modules/dropdowns/filters/lead.tsx +++ b/web/components/modules/dropdowns/filters/lead.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; // hooks import { Avatar, Loader } from "@plane/ui"; import { FilterHeader, FilterOption } from "@/components/issues"; -import { useMember } from "@/hooks/store"; +import { useMember, useUser } from "@/hooks/store"; // components // ui @@ -22,19 +22,22 @@ export const FilterLead: React.FC = observer((props: Props) => { const [previewEnabled, setPreviewEnabled] = useState(true); // store hooks const { getUserDetails } = useMember(); + const { currentUser } = useUser(); const appliedFiltersCount = appliedFilters?.length ?? 0; const sortedOptions = useMemo(() => { - const filteredOptions = (memberIds || []).filter( - (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) + const filteredOptions = (memberIds || []).filter((memberId) => + getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) ); return sortBy(filteredOptions, [ (memberId) => !(appliedFilters ?? []).includes(memberId), + (memberId) => memberId !== currentUser?.id, (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), ]); - }, [appliedFilters, getUserDetails, memberIds, , searchQuery]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchQuery]); const handleViewToggle = () => { if (!sortedOptions) return; @@ -65,7 +68,7 @@ export const FilterLead: React.FC = observer((props: Props) => { isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} icon={} - title={member.display_name} + title={currentUser?.id === member.id ? "You" : member?.display_name} /> ); })} diff --git a/web/components/modules/dropdowns/filters/members.tsx b/web/components/modules/dropdowns/filters/members.tsx index 3db1f5d0464..1a23d0c3e7d 100644 --- a/web/components/modules/dropdowns/filters/members.tsx +++ b/web/components/modules/dropdowns/filters/members.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; // hooks import { Avatar, Loader } from "@plane/ui"; import { FilterHeader, FilterOption } from "@/components/issues"; -import { useMember } from "@/hooks/store"; +import { useMember, useUser } from "@/hooks/store"; // components // ui @@ -22,16 +22,18 @@ export const FilterMembers: React.FC = observer((props: Props) => { const [previewEnabled, setPreviewEnabled] = useState(true); // store hooks const { getUserDetails } = useMember(); + const { currentUser } = useUser(); const appliedFiltersCount = appliedFilters?.length ?? 0; const sortedOptions = useMemo(() => { - const filteredOptions = (memberIds || []).filter( - (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) + const filteredOptions = (memberIds || []).filter((memberId) => + getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) ); return sortBy(filteredOptions, [ (memberId) => !(appliedFilters ?? []).includes(memberId), + (memberId) => memberId !== currentUser?.id, (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), ]); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -66,7 +68,7 @@ export const FilterMembers: React.FC = observer((props: Props) => { isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} icon={} - title={member.display_name} + title={currentUser?.id === member.id ? "You" : member?.display_name} /> ); })} diff --git a/web/components/pages/list/filters/created-by.tsx b/web/components/pages/list/filters/created-by.tsx index bddacc5504a..a90d8bd1458 100644 --- a/web/components/pages/list/filters/created-by.tsx +++ b/web/components/pages/list/filters/created-by.tsx @@ -6,7 +6,7 @@ import { Avatar, Loader } from "@plane/ui"; // components import { FilterHeader, FilterOption } from "@/components/issues"; // hooks -import { useMember } from "@/hooks/store"; +import { useMember, useUser } from "@/hooks/store"; type Props = { appliedFilters: string[] | null; @@ -22,6 +22,7 @@ export const FilterCreatedBy: React.FC = observer((props: Props) => { const [previewEnabled, setPreviewEnabled] = useState(true); // store hooks const { getUserDetails } = useMember(); + const { currentUser } = useUser(); const appliedFiltersCount = appliedFilters?.length ?? 0; @@ -32,9 +33,11 @@ export const FilterCreatedBy: React.FC = observer((props: Props) => { return sortBy(filteredOptions, [ (memberId) => !(appliedFilters ?? []).includes(memberId), + (memberId) => memberId !== currentUser?.id, (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), ]); - }, [appliedFilters, getUserDetails, memberIds, searchQuery]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchQuery]); const handleViewToggle = () => { if (!sortedOptions) return; @@ -65,7 +68,7 @@ export const FilterCreatedBy: React.FC = observer((props: Props) => { isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} icon={} - title={member.display_name} + title={currentUser?.id === member.id ? "You" : member?.display_name} /> ); })} diff --git a/web/components/project/dropdowns/filters/lead.tsx b/web/components/project/dropdowns/filters/lead.tsx index 2bfea97dfe3..9fa1ea5d5d1 100644 --- a/web/components/project/dropdowns/filters/lead.tsx +++ b/web/components/project/dropdowns/filters/lead.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; // hooks import { Avatar, Loader } from "@plane/ui"; import { FilterHeader, FilterOption } from "@/components/issues"; -import { useMember } from "@/hooks/store"; +import { useMember, useUser } from "@/hooks/store"; // components // ui @@ -22,16 +22,18 @@ export const FilterLead: React.FC = observer((props: Props) => { const [previewEnabled, setPreviewEnabled] = useState(true); // store hooks const { getUserDetails } = useMember(); + const { currentUser } = useUser(); const appliedFiltersCount = appliedFilters?.length ?? 0; const sortedOptions = useMemo(() => { - const filteredOptions = (memberIds || []).filter( - (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) + const filteredOptions = (memberIds || []).filter((memberId) => + getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) ); return sortBy(filteredOptions, [ (memberId) => !(appliedFilters ?? []).includes(memberId), + (memberId) => memberId !== currentUser?.id, (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), ]); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -66,7 +68,7 @@ export const FilterLead: React.FC = observer((props: Props) => { isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} icon={} - title={member.display_name} + title={currentUser?.id === member.id ? "You" : member?.display_name} /> ); })} diff --git a/web/components/project/dropdowns/filters/members.tsx b/web/components/project/dropdowns/filters/members.tsx index 3db1f5d0464..1a23d0c3e7d 100644 --- a/web/components/project/dropdowns/filters/members.tsx +++ b/web/components/project/dropdowns/filters/members.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; // hooks import { Avatar, Loader } from "@plane/ui"; import { FilterHeader, FilterOption } from "@/components/issues"; -import { useMember } from "@/hooks/store"; +import { useMember, useUser } from "@/hooks/store"; // components // ui @@ -22,16 +22,18 @@ export const FilterMembers: React.FC = observer((props: Props) => { const [previewEnabled, setPreviewEnabled] = useState(true); // store hooks const { getUserDetails } = useMember(); + const { currentUser } = useUser(); const appliedFiltersCount = appliedFilters?.length ?? 0; const sortedOptions = useMemo(() => { - const filteredOptions = (memberIds || []).filter( - (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) + const filteredOptions = (memberIds || []).filter((memberId) => + getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) ); return sortBy(filteredOptions, [ (memberId) => !(appliedFilters ?? []).includes(memberId), + (memberId) => memberId !== currentUser?.id, (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), ]); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -66,7 +68,7 @@ export const FilterMembers: React.FC = observer((props: Props) => { isChecked={appliedFilters?.includes(member.id) ? true : false} onClick={() => handleUpdate(member.id)} icon={} - title={member.display_name} + title={currentUser?.id === member.id ? "You" : member?.display_name} /> ); })}