Skip to content

Commit

Permalink
chore: filter member option sorting improvement (#4285)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anmolsinghbhatia
anmolsinghbhatia committed Apr 26, 2024
1 parent 88165a8 commit 80461e6
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 20 deletions.
13 changes: 8 additions & 5 deletions web/components/modules/dropdowns/filters/lead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -22,19 +22,22 @@ export const FilterLead: React.FC<Props> = 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;
Expand Down Expand Up @@ -65,7 +68,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name}
title={currentUser?.id === member.id ? "You" : member?.display_name}
/>
);
})}
Expand Down
10 changes: 6 additions & 4 deletions web/components/modules/dropdowns/filters/members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -22,16 +22,18 @@ export const FilterMembers: React.FC<Props> = 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
Expand Down Expand Up @@ -66,7 +68,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name}
title={currentUser?.id === member.id ? "You" : member?.display_name}
/>
);
})}
Expand Down
9 changes: 6 additions & 3 deletions web/components/pages/list/filters/created-by.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -22,6 +22,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks
const { getUserDetails } = useMember();
const { currentUser } = useUser();

const appliedFiltersCount = appliedFilters?.length ?? 0;

Expand All @@ -32,9 +33,11 @@ export const FilterCreatedBy: React.FC<Props> = 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;
Expand Down Expand Up @@ -65,7 +68,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name}
title={currentUser?.id === member.id ? "You" : member?.display_name}
/>
);
})}
Expand Down
10 changes: 6 additions & 4 deletions web/components/project/dropdowns/filters/lead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -22,16 +22,18 @@ export const FilterLead: React.FC<Props> = 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
Expand Down Expand Up @@ -66,7 +68,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name}
title={currentUser?.id === member.id ? "You" : member?.display_name}
/>
);
})}
Expand Down
10 changes: 6 additions & 4 deletions web/components/project/dropdowns/filters/members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -22,16 +22,18 @@ export const FilterMembers: React.FC<Props> = 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
Expand Down Expand Up @@ -66,7 +68,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name}
title={currentUser?.id === member.id ? "You" : member?.display_name}
/>
);
})}
Expand Down

0 comments on commit 80461e6

Please sign in to comment.