Skip to content

Commit 6ea9907

Browse files
marcbonmarcbon
committed
fix(filters-drawer): fix check on fields available length
1 parent 40ae369 commit 6ea9907

File tree

8 files changed

+313
-290
lines changed

8 files changed

+313
-290
lines changed

‎src/pages/Bugs/Drawer/DeviceField.tsx‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -58,52 +58,54 @@ export const DeviceField = ({
5858
</Accordion.Label>
5959
</Accordion.Header>
6060
<Accordion.Panel>
61-
{available
62-
.slice(0, showMore ? undefined : maxItemsToShow)
63-
.map((device) => (
64-
<Field style={{ marginBottom: globalTheme.space.xs }}>
65-
<Checkbox
66-
value={device.device}
67-
name="filter-devices"
68-
checked={selected
69-
.map((i) => i.device)
70-
.includes(device.device)}
71-
onChange={() => {
72-
dispatch(
73-
updateFilters({
74-
filters: {
75-
devices: [
76-
...(selected
77-
.map((i) => i.device)
78-
.includes(device.device)
79-
? selected.filter(
80-
(i) => i.device !== device.device
81-
)
82-
: [
83-
...selected,
84-
{
85-
device: device.device,
86-
},
87-
]),
88-
],
89-
},
90-
})
91-
);
92-
}}
93-
>
94-
<Label
95-
isRegular
96-
style={{
97-
color: globalTheme.palette.grey[600],
98-
textTransform: 'capitalize',
99-
}}
100-
>
101-
{device.device}
102-
</Label>
103-
</Checkbox>
104-
</Field>
105-
))}
106-
{available.length > maxItemsToShow && (
61+
{available.length
62+
? available
63+
.slice(0, showMore ? undefined : maxItemsToShow)
64+
.map((device) => (
65+
<Field style={{ marginBottom: globalTheme.space.xs }}>
66+
<Checkbox
67+
value={device.device}
68+
name="filter-devices"
69+
checked={selected
70+
.map((i) => i.device)
71+
.includes(device.device)}
72+
onChange={() => {
73+
dispatch(
74+
updateFilters({
75+
filters: {
76+
devices: [
77+
...(selected
78+
.map((i) => i.device)
79+
.includes(device.device)
80+
? selected.filter(
81+
(i) => i.device !== device.device
82+
)
83+
: [
84+
...selected,
85+
{
86+
device: device.device,
87+
},
88+
]),
89+
],
90+
},
91+
})
92+
);
93+
}}
94+
>
95+
<Label
96+
isRegular
97+
style={{
98+
color: globalTheme.palette.grey[600],
99+
textTransform: 'capitalize',
100+
}}
101+
>
102+
{device.device}
103+
</Label>
104+
</Checkbox>
105+
</Field>
106+
))
107+
: null}
108+
{available.length > maxItemsToShow ? (
107109
<ShowMore
108110
onClick={() => {
109111
setShowMore(!showMore);
@@ -125,7 +127,7 @@ export const DeviceField = ({
125127
)
126128
)}
127129
</ShowMore>
128-
)}
130+
) : null}
129131
</Accordion.Panel>
130132
</Accordion.Section>
131133
</Accordion>

‎src/pages/Bugs/Drawer/OsField.tsx‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -58,45 +58,49 @@ export const OsField = ({
5858
</Accordion.Label>
5959
</Accordion.Header>
6060
<Accordion.Panel>
61-
{available
62-
.slice(0, showMore ? undefined : maxItemsToShow)
63-
.map((item) => (
64-
<Field style={{ marginBottom: globalTheme.space.xs }}>
65-
<Checkbox
66-
value={item.os}
67-
name="filter-os"
68-
checked={selected.map((i) => i.os).includes(item.os)}
69-
onChange={() => {
70-
dispatch(
71-
updateFilters({
72-
filters: {
73-
os: [
74-
...(selected.map((i) => i.os).includes(item.os)
75-
? selected.filter((i) => i.os !== item.os)
76-
: [
77-
...selected,
78-
{
79-
os: item.os,
80-
},
81-
]),
82-
],
83-
},
84-
})
85-
);
86-
}}
87-
>
88-
<Label
89-
isRegular
90-
style={{
91-
color: globalTheme.palette.grey[600],
92-
}}
93-
>
94-
{item.os}
95-
</Label>
96-
</Checkbox>
97-
</Field>
98-
))}
99-
{available.length > maxItemsToShow && (
61+
{available.length
62+
? available
63+
.slice(0, showMore ? undefined : maxItemsToShow)
64+
.map((item) => (
65+
<Field style={{ marginBottom: globalTheme.space.xs }}>
66+
<Checkbox
67+
value={item.os}
68+
name="filter-os"
69+
checked={selected.map((i) => i.os).includes(item.os)}
70+
onChange={() => {
71+
dispatch(
72+
updateFilters({
73+
filters: {
74+
os: [
75+
...(selected
76+
.map((i) => i.os)
77+
.includes(item.os)
78+
? selected.filter((i) => i.os !== item.os)
79+
: [
80+
...selected,
81+
{
82+
os: item.os,
83+
},
84+
]),
85+
],
86+
},
87+
})
88+
);
89+
}}
90+
>
91+
<Label
92+
isRegular
93+
style={{
94+
color: globalTheme.palette.grey[600],
95+
}}
96+
>
97+
{item.os}
98+
</Label>
99+
</Checkbox>
100+
</Field>
101+
))
102+
: null}
103+
{available.length > maxItemsToShow ? (
100104
<ShowMore
101105
onClick={() => {
102106
setShowMore(!showMore);
@@ -116,7 +120,7 @@ export const OsField = ({
116120
t('__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_LESS_LABEL')
117121
)}
118122
</ShowMore>
119-
)}
123+
) : null}
120124
</Accordion.Panel>
121125
</Accordion.Section>
122126
</Accordion>

‎src/pages/Bugs/Drawer/ReplicabilityField.tsx‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -60,47 +60,49 @@ export const ReplicabilityField = ({
6060
</Accordion.Label>
6161
</Accordion.Header>
6262
<Accordion.Panel>
63-
{available
64-
.slice(0, showMore ? undefined : maxItemsToShow)
65-
.map((replicability) => (
66-
<Field style={{ marginBottom: globalTheme.space.xs }}>
67-
<Checkbox
68-
value={replicability.id}
69-
name="filter-replicability"
70-
checked={selected
71-
.map((i) => i.id)
72-
.includes(replicability.id)}
73-
onChange={() => {
74-
dispatch(
75-
updateFilters({
76-
filters: {
77-
replicabilities: [
78-
...(selected
79-
.map((i) => i.id)
80-
.includes(replicability.id)
81-
? selected.filter(
82-
(i) => i.id !== replicability.id
83-
)
84-
: [...selected, replicability]),
85-
],
86-
},
87-
})
88-
);
89-
}}
90-
>
91-
<Label
92-
isRegular
93-
style={{
94-
color: globalTheme.palette.grey[600],
95-
textTransform: 'capitalize',
96-
}}
97-
>
98-
{replicability.name.toLowerCase()}
99-
</Label>
100-
</Checkbox>
101-
</Field>
102-
))}
103-
{available.length > maxItemsToShow && (
63+
{available.length
64+
? available
65+
.slice(0, showMore ? undefined : maxItemsToShow)
66+
.map((replicability) => (
67+
<Field style={{ marginBottom: globalTheme.space.xs }}>
68+
<Checkbox
69+
value={replicability.id}
70+
name="filter-replicability"
71+
checked={selected
72+
.map((i) => i.id)
73+
.includes(replicability.id)}
74+
onChange={() => {
75+
dispatch(
76+
updateFilters({
77+
filters: {
78+
replicabilities: [
79+
...(selected
80+
.map((i) => i.id)
81+
.includes(replicability.id)
82+
? selected.filter(
83+
(i) => i.id !== replicability.id
84+
)
85+
: [...selected, replicability]),
86+
],
87+
},
88+
})
89+
);
90+
}}
91+
>
92+
<Label
93+
isRegular
94+
style={{
95+
color: globalTheme.palette.grey[600],
96+
textTransform: 'capitalize',
97+
}}
98+
>
99+
{replicability.name.toLowerCase()}
100+
</Label>
101+
</Checkbox>
102+
</Field>
103+
))
104+
: null}
105+
{available.length > maxItemsToShow ? (
104106
<ShowMore
105107
onClick={() => {
106108
setShowMore(!showMore);
@@ -122,7 +124,7 @@ export const ReplicabilityField = ({
122124
)
123125
)}
124126
</ShowMore>
125-
)}
127+
) : null}
126128
</Accordion.Panel>
127129
</Accordion.Section>
128130
</Accordion>

0 commit comments

Comments
 (0)