Skip to content

Commit

Permalink
Prettier run everything
Browse files Browse the repository at this point in the history
  • Loading branch information
@alanchangxyz
alanchangxyz committed Jan 26, 2024
1 parent 437e85e commit d034546
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 95 deletions.
122 changes: 67 additions & 55 deletions apps/site/src/app/admin/participants/components/ParticipantsFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,32 @@ import { Dispatch, SetStateAction } from "react";

import FormField from "@cloudscape-design/components/form-field";
import { IconProps } from "@cloudscape-design/components/icon";
import Multiselect, { MultiselectProps } from "@cloudscape-design/components/multiselect";
import Multiselect, {
MultiselectProps,
} from "@cloudscape-design/components/multiselect";
import SpaceBetween from "@cloudscape-design/components/space-between";
import TextFilter, {
TextFilterProps
TextFilterProps,
} from "@cloudscape-design/components/text-filter";

import type { Options } from "./ParticipantsTable";
import { Decision, PostAcceptedStatus, ReviewStatus, Status } from "@/lib/admin/useApplicant";
import {
Decision,
PostAcceptedStatus,
ReviewStatus,
Status,
} from "@/lib/admin/useApplicant";
import { StatusLabels } from "../../applicants/components/ApplicantStatus";

interface ParticipantsFiltersProps {
filteredItemsCount: number | undefined;
filterProps: TextFilterProps;
roles: Options;
selectedRoles: Options;
setSelectedRoles: Dispatch<SetStateAction<Options>>;
statuses: Options;
selectedStatuses: Options;
setSelectedStatuses: Dispatch<SetStateAction<Options>>;
filteredItemsCount: number | undefined;
filterProps: TextFilterProps;
roles: Options;
selectedRoles: Options;
setSelectedRoles: Dispatch<SetStateAction<Options>>;
statuses: Options;
selectedStatuses: Options;
setSelectedStatuses: Dispatch<SetStateAction<Options>>;
}

const StatusIcons: Record<Status, IconProps.Name> = {
Expand All @@ -43,50 +50,55 @@ const statusOption = (status: MultiselectProps.Option) => ({
});

function ParticipantsFilters({
filteredItemsCount,
filterProps,
roles,
selectedRoles,
setSelectedRoles,
statuses,
selectedStatuses,
setSelectedStatuses
filteredItemsCount,
filterProps,
roles,
selectedRoles,
setSelectedRoles,
statuses,
selectedStatuses,
setSelectedStatuses,
}: ParticipantsFiltersProps) {
return (
<SpaceBetween size="l" direction="horizontal">
<div style={{ marginTop: "24px" }}>
<TextFilter
{...filterProps}
countText={filteredItemsCount === 1 ? '1 participant' : `${filteredItemsCount} participants`}
filteringAriaLabel="Filter participants"
filteringPlaceholder="Search participants"
/>
</div>
<FormField label="Role">
<Multiselect
data-testid="role-filter"
placeholder="Filter by role"
options={roles}
selectedAriaLabel="Selected"
selectedOptions={selectedRoles}
onChange={(event) => setSelectedRoles(event.detail.selectedOptions)}
expandToViewport={true}
/>
</FormField>
<FormField label="Status">
<Multiselect
data-testid="status-filter"
placeholder="Filter by status"
options={statuses.map(statusOption)}
selectedAriaLabel="Selected"
selectedOptions={selectedStatuses}
onChange={(event) => setSelectedStatuses(event.detail.selectedOptions)}
expandToViewport={true}
/>
</FormField>
</SpaceBetween>

)
return (
<SpaceBetween size="l" direction="horizontal">
<div style={{ marginTop: "24px" }}>
<TextFilter
{...filterProps}
countText={
filteredItemsCount === 1
? "1 participant"
: `${filteredItemsCount} participants`
}
filteringAriaLabel="Filter participants"
filteringPlaceholder="Search participants"
/>
</div>
<FormField label="Role">
<Multiselect
data-testid="role-filter"
placeholder="Filter by role"
options={roles}
selectedAriaLabel="Selected"
selectedOptions={selectedRoles}
onChange={(event) => setSelectedRoles(event.detail.selectedOptions)}
expandToViewport={true}
/>
</FormField>
<FormField label="Status">
<Multiselect
data-testid="status-filter"
placeholder="Filter by status"
options={statuses.map(statusOption)}
selectedAriaLabel="Selected"
selectedOptions={selectedStatuses}
onChange={(event) =>
setSelectedStatuses(event.detail.selectedOptions)
}
expandToViewport={true}
/>
</FormField>
</SpaceBetween>
);
}

export default ParticipantsFilters;
export default ParticipantsFilters;
90 changes: 50 additions & 40 deletions apps/site/src/app/admin/participants/components/ParticipantsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,10 @@ function ParticipantsTable({
const [filterRole, setFilterRole] = useState<Options>([]);
const [filterStatus, setFilterStatus] = useState<Options>([]);
const matchesRole = (p: Participant) =>
filterRole.length === 0 || filterRole.map(r => r.value).includes(p.role);
const matchesStatus = (p: Participant) =>
filterStatus.length === 0 || filterStatus.map(s => s.value).includes(p.status);
filterRole.length === 0 || filterRole.map((r) => r.value).includes(p.role);
const matchesStatus = (p: Participant) =>
filterStatus.length === 0 ||
filterStatus.map((s) => s.value).includes(p.status);

const {
items,
Expand All @@ -101,45 +102,50 @@ function ParticipantsTable({
collectionProps,
filterProps,
paginationProps,
} = useCollection(
participants,
{
filtering: {
empty: <EmptyState title="No participants" />,
noMatch: (
<EmptyState
title="No matches"
action={<Button onClick={() => actions.setFiltering('')}>Clear filter</Button>}
/>
),
filteringFunction: (item, filteringText) => {
if (!matchesRole(item)) { return false; }
if (!matchesStatus(item)) { return false; }
const filteringTextLC = filteringText.toLowerCase();
} = useCollection(participants, {
filtering: {
empty: <EmptyState title="No participants" />,
noMatch: (
<EmptyState
title="No matches"
action={
<Button onClick={() => actions.setFiltering("")}>
Clear filter
</Button>
}
/>
),
filteringFunction: (item, filteringText) => {
if (!matchesRole(item)) {
return false;
}
if (!matchesStatus(item)) {
return false;
}
const filteringTextLC = filteringText.toLowerCase();

return (
SEARCHABLE_COLUMNS.map((key) => item[key]).some(
(value) =>
typeof value === "string" &&
value.toLowerCase().includes(filteringTextLC),
) ||
`${item.first_name} ${item.last_name}`
.toLowerCase()
.includes(filteringTextLC)
);
},
return (
SEARCHABLE_COLUMNS.map((key) => item[key]).some(
(value) =>
typeof value === "string" &&
value.toLowerCase().includes(filteringTextLC),
) ||
`${item.first_name} ${item.last_name}`
.toLowerCase()
.includes(filteringTextLC)
);
},
pagination: { pageSize: preferences.pageSize },
sorting: {},
selection: {},
}
);
const allRoles = new Set(participants.map(p => p.role));
const roleOptions = Array.from(allRoles).map(r => ({ value: r, label: r }));
const allStatuses = new Set(participants.map(p => p.status));
const statusOptions = Array.from(allStatuses).map(s => ({
},
pagination: { pageSize: preferences.pageSize },
sorting: {},
selection: {},
});
const allRoles = new Set(participants.map((p) => p.role));
const roleOptions = Array.from(allRoles).map((r) => ({ value: r, label: r }));
const allStatuses = new Set(participants.map((p) => p.status));
const statusOptions = Array.from(allStatuses).map((s) => ({
value: s,
label: s
label: s,
}));

const ActionCell = useCallback(
Expand Down Expand Up @@ -286,7 +292,11 @@ function ParticipantsTable({
confirmLabel="Confirm"
title="Preferences"
preferences={preferences}
onConfirm={({ detail }) => setPreferences(detail as { pageSize: number, visibleContent: Array<string> })}
onConfirm={({ detail }) =>
setPreferences(
detail as { pageSize: number; visibleContent: Array<string> },
)
}
/>
}
/>
Expand Down

0 comments on commit d034546

Please sign in to comment.