Skip to content

Commit 73de409

Browse files
setchysetchy
committed
feat: filter by handles
Signed-off-by: Adam Setch <[email protected]>
1 parent feda9be commit 73de409

File tree

1 file changed

+106
-101
lines changed

1 file changed

+106
-101
lines changed

‎src/renderer/routes/Filters.tsx‎

Lines changed: 106 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -130,114 +130,119 @@ export const FiltersRoute: FC = () => {
130130
</Header>
131131

132132
<Contents>
133-
<fieldset className="mb-3">
134-
<Title icon={FeedPersonIcon}>User Type</Title>
133+
<Stack direction="vertical" gap="condensed">
134+
<fieldset className="mb-3">
135+
<Title icon={FeedPersonIcon}>User Type</Title>
135136

136-
<Stack direction="vertical" gap="condensed">
137-
{Object.keys(FILTERS_USER_TYPES).map((userType: UserType) => {
138-
const userTypeDetails = getUserTypeDetails(userType);
139-
const userTypeTitle = userTypeDetails.title;
140-
const userTypeDescription = userTypeDetails.description;
141-
const isUserTypeChecked = isUserTypeFilterSet(settings, userType);
142-
const userTypeCount = getUserTypeFilterCount(
143-
notifications,
144-
userType,
145-
);
137+
<Stack direction="horizontal" gap="normal">
138+
{Object.keys(FILTERS_USER_TYPES).map((userType: UserType) => {
139+
const userTypeDetails = getUserTypeDetails(userType);
140+
const userTypeTitle = userTypeDetails.title;
141+
const userTypeDescription = userTypeDetails.description;
142+
const isUserTypeChecked = isUserTypeFilterSet(
143+
settings,
144+
userType,
145+
);
146+
const userTypeCount = getUserTypeFilterCount(
147+
notifications,
148+
userType,
149+
);
146150

147-
return (
148-
<Checkbox
149-
key={userType}
150-
name={userTypeTitle}
151-
label={userTypeTitle}
152-
checked={isUserTypeChecked}
153-
onChange={(evt) =>
154-
updateFilter(
155-
'filterUserTypes',
156-
userType,
157-
evt.target.checked,
158-
)
159-
}
160-
tooltip={<Text>{userTypeDescription}</Text>}
161-
counter={userTypeCount}
162-
/>
163-
);
164-
})}
165-
</Stack>
166-
</fieldset>
167-
168-
<fieldset className="mb-3">
169-
<Title icon={MentionIcon}>Handles</Title>
170-
<Stack direction="vertical" gap="condensed">
171-
<Stack
172-
direction="horizontal"
173-
gap="condensed"
174-
align="center"
175-
className="text-sm"
176-
>
177-
<Box className="font-medium text-gitify-font w-28">
178-
<Stack direction="horizontal" gap="condensed" align="center">
179-
<CheckCircleFillIcon className={IconColor.GREEN} />
180-
<Text>Include:</Text>
181-
</Stack>
182-
</Box>
183-
<TextInputWithTokens
184-
tokens={includeHandles}
185-
onTokenRemove={removeIncludeHandleToken}
186-
onKeyDown={includeHandlesKeyDown}
187-
size="small"
188-
block
189-
/>
151+
return (
152+
<Checkbox
153+
key={userType}
154+
name={userTypeTitle}
155+
label={userTypeTitle}
156+
checked={isUserTypeChecked}
157+
onChange={(evt) =>
158+
updateFilter(
159+
'filterUserTypes',
160+
userType,
161+
evt.target.checked,
162+
)
163+
}
164+
tooltip={<Text>{userTypeDescription}</Text>}
165+
counter={userTypeCount}
166+
/>
167+
);
168+
})}
190169
</Stack>
170+
</fieldset>
171+
172+
<fieldset className="mb-3">
173+
<Title icon={MentionIcon}>Handles</Title>
174+
<Stack direction="vertical" gap="condensed">
175+
<Stack
176+
direction="horizontal"
177+
gap="condensed"
178+
align="center"
179+
className="text-sm"
180+
>
181+
<Box className="font-medium text-gitify-font w-28">
182+
<Stack direction="horizontal" gap="condensed" align="center">
183+
<CheckCircleFillIcon className={IconColor.GREEN} />
184+
<Text>Include:</Text>
185+
</Stack>
186+
</Box>
187+
<TextInputWithTokens
188+
tokens={includeHandles}
189+
onTokenRemove={removeIncludeHandleToken}
190+
onKeyDown={includeHandlesKeyDown}
191+
size="small"
192+
block
193+
/>
194+
</Stack>
191195

192-
<Stack
193-
direction="horizontal"
194-
gap="condensed"
195-
align="center"
196-
className="text-sm"
197-
>
198-
<Box className="font-medium text-gitify-font w-28">
199-
<Stack direction="horizontal" gap="condensed" align="center">
200-
<NoEntryFillIcon className={IconColor.RED} />
201-
<Text>Exclude:</Text>
202-
</Stack>
203-
</Box>
204-
<TextInputWithTokens
205-
tokens={excludeHandles}
206-
onTokenRemove={removeExcludeHandleToken}
207-
onKeyDown={excludeHandlesKeyDown}
208-
size="small"
209-
block
210-
/>
196+
<Stack
197+
direction="horizontal"
198+
gap="condensed"
199+
align="center"
200+
className="text-sm"
201+
>
202+
<Box className="font-medium text-gitify-font w-28">
203+
<Stack direction="horizontal" gap="condensed" align="center">
204+
<NoEntryFillIcon className={IconColor.RED} />
205+
<Text>Exclude:</Text>
206+
</Stack>
207+
</Box>
208+
<TextInputWithTokens
209+
tokens={excludeHandles}
210+
onTokenRemove={removeExcludeHandleToken}
211+
onKeyDown={excludeHandlesKeyDown}
212+
size="small"
213+
block
214+
/>
215+
</Stack>
211216
</Stack>
212-
</Stack>
213-
</fieldset>
217+
</fieldset>
214218

215-
<fieldset className="mb-3">
216-
<Title icon={NoteIcon}>Reason</Title>
217-
<Stack direction="vertical" gap="condensed">
218-
{Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
219-
const reasonDetails = getReasonDetails(reason);
220-
const reasonTitle = reasonDetails.title;
221-
const reasonDescription = reasonDetails.description;
222-
const isReasonChecked = isReasonFilterSet(settings, reason);
223-
const reasonCount = getReasonFilterCount(notifications, reason);
219+
<fieldset className="mb-3">
220+
<Title icon={NoteIcon}>Reason</Title>
221+
<Stack direction="vertical" gap="condensed">
222+
{Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
223+
const reasonDetails = getReasonDetails(reason);
224+
const reasonTitle = reasonDetails.title;
225+
const reasonDescription = reasonDetails.description;
226+
const isReasonChecked = isReasonFilterSet(settings, reason);
227+
const reasonCount = getReasonFilterCount(notifications, reason);
224228

225-
return (
226-
<Checkbox
227-
key={reason}
228-
name={reasonTitle}
229-
label={reasonTitle}
230-
checked={isReasonChecked}
231-
onChange={(evt) =>
232-
updateFilter('filterReasons', reason, evt.target.checked)
233-
}
234-
tooltip={<Text>{reasonDescription}</Text>}
235-
counter={reasonCount}
236-
/>
237-
);
238-
})}
239-
</Stack>
240-
</fieldset>
229+
return (
230+
<Checkbox
231+
key={reason}
232+
name={reasonTitle}
233+
label={reasonTitle}
234+
checked={isReasonChecked}
235+
onChange={(evt) =>
236+
updateFilter('filterReasons', reason, evt.target.checked)
237+
}
238+
tooltip={<Text>{reasonDescription}</Text>}
239+
counter={reasonCount}
240+
/>
241+
);
242+
})}
243+
</Stack>
244+
</fieldset>
245+
</Stack>
241246
</Contents>
242247

243248
<Footer justify="end">

0 commit comments

Comments
 (0)