Skip to content

Commit 38ab2c1

Browse files
thornbillthornbill
authored
Merge pull request #6231 from gnattu/fix-parental-tags
2 parents 669ac28 + e17d50f commit 38ab2c1

File tree

4 files changed

+75
-93
lines changed

4 files changed

+75
-93
lines changed

‎src/apps/dashboard/routes/users/parentalcontrol.tsx

+37-78
Original file line numberDiff line numberDiff line change
@@ -146,48 +146,6 @@ const UserParentalControl = () => {
146146
blockUnratedItems.dispatchEvent(new CustomEvent('create'));
147147
}, []);
148148

149-
const loadAllowedTags = useCallback((tags: string[]) => {
150-
const page = element.current;
151-
152-
if (!page) {
153-
console.error('[userparentalcontrol] Unexpected null page reference');
154-
return;
155-
}
156-
157-
setAllowedTags(tags);
158-
159-
const allowedTagsElem = page.querySelector('.allowedTags') as HTMLDivElement;
160-
161-
for (const btnDeleteTag of allowedTagsElem.querySelectorAll('.btnDeleteTag')) {
162-
btnDeleteTag.addEventListener('click', function () {
163-
const tag = btnDeleteTag.getAttribute('data-tag');
164-
const newTags = tags.filter(t => t !== tag);
165-
loadAllowedTags(newTags);
166-
});
167-
}
168-
}, []);
169-
170-
const loadBlockedTags = useCallback((tags: string[]) => {
171-
const page = element.current;
172-
173-
if (!page) {
174-
console.error('[userparentalcontrol] Unexpected null page reference');
175-
return;
176-
}
177-
178-
setBlockedTags(tags);
179-
180-
const blockedTagsElem = page.querySelector('.blockedTags') as HTMLDivElement;
181-
182-
for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) {
183-
btnDeleteTag.addEventListener('click', function () {
184-
const tag = btnDeleteTag.getAttribute('data-tag');
185-
const newTags = tags.filter(t => t !== tag);
186-
loadBlockedTags(newTags);
187-
});
188-
}
189-
}, []);
190-
191149
const loadUser = useCallback((user: UserDto, allParentalRatings: ParentalRating[]) => {
192150
const page = element.current;
193151

@@ -200,8 +158,8 @@ const UserParentalControl = () => {
200158
void libraryMenu.then(menu => menu.setTitle(user.Name));
201159
loadUnratedItems(user);
202160

203-
loadAllowedTags(user.Policy?.AllowedTags || []);
204-
loadBlockedTags(user.Policy?.BlockedTags || []);
161+
setAllowedTags(user.Policy?.AllowedTags || []);
162+
setBlockedTags(user.Policy?.BlockedTags || []);
205163
populateRatings(allParentalRatings);
206164

207165
let ratingValue = '';
@@ -222,7 +180,7 @@ const UserParentalControl = () => {
222180
}
223181
setAccessSchedules(user.Policy?.AccessSchedules || []);
224182
loading.hide();
225-
}, [loadAllowedTags, loadBlockedTags, loadUnratedItems, populateRatings]);
183+
}, [libraryMenu, setAllowedTags, setBlockedTags, loadUnratedItems, populateRatings]);
226184

227185
const loadData = useCallback(() => {
228186
if (!userId) {
@@ -296,7 +254,7 @@ const UserParentalControl = () => {
296254

297255
if (tags.indexOf(value) == -1) {
298256
tags.push(value);
299-
loadAllowedTags(tags);
257+
setAllowedTags(tags);
300258
}
301259
}).catch(() => {
302260
// prompt closed
@@ -317,7 +275,7 @@ const UserParentalControl = () => {
317275

318276
if (tags.indexOf(value) == -1) {
319277
tags.push(value);
320-
loadBlockedTags(tags);
278+
setBlockedTags(tags);
321279
}
322280
}).catch(() => {
323281
// prompt closed
@@ -348,45 +306,28 @@ const UserParentalControl = () => {
348306
return false;
349307
};
350308

351-
(page.querySelector('#btnAddSchedule') as HTMLButtonElement).addEventListener('click', function () {
309+
// The following is still hacky and should migrate to pure react implementation for callbacks in the future
310+
const accessSchedulesPopupCallback = function () {
352311
showSchedulePopup({
353312
Id: 0,
354313
UserId: '',
355314
DayOfWeek: DynamicDayOfWeek.Sunday,
356315
StartHour: 0,
357316
EndHour: 0
358317
}, -1);
359-
});
360-
361-
(page.querySelector('#btnAddAllowedTag') as HTMLButtonElement).addEventListener('click', function () {
362-
showAllowedTagPopup();
363-
});
364-
365-
(page.querySelector('#btnAddBlockedTag') as HTMLButtonElement).addEventListener('click', function () {
366-
showBlockedTagPopup();
367-
});
368-
318+
};
319+
(page.querySelector('#btnAddSchedule') as HTMLButtonElement).addEventListener('click', accessSchedulesPopupCallback);
320+
(page.querySelector('#btnAddAllowedTag') as HTMLButtonElement).addEventListener('click', showAllowedTagPopup);
321+
(page.querySelector('#btnAddBlockedTag') as HTMLButtonElement).addEventListener('click', showBlockedTagPopup);
369322
(page.querySelector('.userParentalControlForm') as HTMLFormElement).addEventListener('submit', onSubmit);
370-
}, [loadAllowedTags, loadBlockedTags, loadData, userId]);
371-
372-
useEffect(() => {
373-
const page = element.current;
374323

375-
if (!page) {
376-
console.error('[userparentalcontrol] Unexpected null page reference');
377-
return;
378-
}
379-
380-
const accessScheduleList = page.querySelector('.accessScheduleList') as HTMLDivElement;
381-
382-
for (const btnDelete of accessScheduleList.querySelectorAll('.btnDelete')) {
383-
btnDelete.addEventListener('click', function () {
384-
const index = parseInt(btnDelete.getAttribute('data-index') ?? '0', 10);
385-
const newindex = accessSchedules.filter((_e, i) => i != index);
386-
setAccessSchedules(newindex);
387-
});
388-
}
389-
}, [accessSchedules]);
324+
return () => {
325+
(page.querySelector('#btnAddSchedule') as HTMLButtonElement).removeEventListener('click', accessSchedulesPopupCallback);
326+
(page.querySelector('#btnAddAllowedTag') as HTMLButtonElement).removeEventListener('click', showAllowedTagPopup);
327+
(page.querySelector('#btnAddBlockedTag') as HTMLButtonElement).removeEventListener('click', showBlockedTagPopup);
328+
(page.querySelector('.userParentalControlForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
329+
};
330+
}, [setAllowedTags, setBlockedTags, loadData, userId]);
390331

391332
const optionMaxParentalRating = () => {
392333
let content = '';
@@ -397,6 +338,21 @@ const UserParentalControl = () => {
397338
return content;
398339
};
399340

341+
const removeAllowedTagsCallback = useCallback((tag: string) => {
342+
const newTags = allowedTags.filter(t => t !== tag);
343+
setAllowedTags(newTags);
344+
}, [allowedTags, setAllowedTags]);
345+
346+
const removeBlockedTagsTagsCallback = useCallback((tag: string) => {
347+
const newTags = blockedTags.filter(t => t !== tag);
348+
setBlockedTags(newTags);
349+
}, [blockedTags, setBlockedTags]);
350+
351+
const removeScheduleCallback = useCallback((index: number) => {
352+
const newSchedules = accessSchedules.filter((_e, i) => i != index);
353+
setAccessSchedules(newSchedules);
354+
}, [accessSchedules, setAccessSchedules]);
355+
400356
return (
401357
<Page
402358
id='userParentalControlPage'
@@ -461,6 +417,7 @@ const UserParentalControl = () => {
461417
key={tag}
462418
tag={tag}
463419
tagType='allowedTag'
420+
removeTagCallback={removeAllowedTagsCallback}
464421
/>;
465422
})}
466423
</div>
@@ -485,6 +442,7 @@ const UserParentalControl = () => {
485442
key={tag}
486443
tag={tag}
487444
tagType='blockedTag'
445+
removeTagCallback={removeBlockedTagsTagsCallback}
488446
/>;
489447
})}
490448
</div>
@@ -503,11 +461,12 @@ const UserParentalControl = () => {
503461
<div className='accessScheduleList paperList'>
504462
{accessSchedules.map((accessSchedule, index) => {
505463
return <AccessScheduleList
506-
key={accessSchedule.Id}
464+
key={`${accessSchedule.DayOfWeek}${accessSchedule.StartHour}${accessSchedule.EndHour}`}
507465
index={index}
508466
DayOfWeek={accessSchedule.DayOfWeek}
509467
StartHour={accessSchedule.StartHour}
510468
EndHour={accessSchedule.EndHour}
469+
removeScheduleCallback={removeScheduleCallback}
511470
/>;
512471
})}
513472
</div>

‎src/components/dashboard/users/AccessScheduleList.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FunctionComponent } from 'react';
1+
import React, { FunctionComponent, useCallback } from 'react';
22
import datetime from '../../../scripts/datetime';
33
import globalize from '../../../lib/globalize';
44
import IconButtonElement from '../../../elements/IconButtonElement';
@@ -8,6 +8,7 @@ type AccessScheduleListProps = {
88
DayOfWeek?: string;
99
StartHour?: number ;
1010
EndHour?: number;
11+
removeScheduleCallback?: (index: number) => void;
1112
};
1213

1314
function getDisplayTime(hours = 0) {
@@ -21,7 +22,10 @@ function getDisplayTime(hours = 0) {
2122
return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
2223
}
2324

24-
const AccessScheduleList: FunctionComponent<AccessScheduleListProps> = ({ index, DayOfWeek, StartHour, EndHour }: AccessScheduleListProps) => {
25+
const AccessScheduleList: FunctionComponent<AccessScheduleListProps> = ({ index, DayOfWeek, StartHour, EndHour, removeScheduleCallback }: AccessScheduleListProps) => {
26+
const onClick = useCallback(() => {
27+
index !== undefined && removeScheduleCallback !== undefined && removeScheduleCallback(index);
28+
}, [index, removeScheduleCallback]);
2529
return (
2630
<div
2731
className='liSchedule listItem'
@@ -43,6 +47,7 @@ const AccessScheduleList: FunctionComponent<AccessScheduleListProps> = ({ index,
4347
title='Delete'
4448
icon='delete'
4549
dataIndex={index}
50+
onClick={onClick}
4651
/>
4752
</div>
4853
);

‎src/components/dashboard/users/TagList.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import React, { FunctionComponent } from 'react';
1+
import React, { FunctionComponent, useCallback } from 'react';
22
import IconButtonElement from '../../../elements/IconButtonElement';
33

44
type IProps = {
55
tag?: string,
66
tagType?: string;
7+
removeTagCallback?: (tag: string) => void;
78
};
89

9-
const TagList: FunctionComponent<IProps> = ({ tag, tagType }: IProps) => {
10+
const TagList: FunctionComponent<IProps> = ({ tag, tagType, removeTagCallback }: IProps) => {
11+
const onClick = useCallback(() => {
12+
tag !== undefined && removeTagCallback !== undefined && removeTagCallback(tag);
13+
}, [tag, removeTagCallback]);
1014
return (
1115
<div className='paperList'>
1216
<div className='listItem'>
@@ -21,6 +25,7 @@ const TagList: FunctionComponent<IProps> = ({ tag, tagType }: IProps) => {
2125
title='Delete'
2226
icon='delete'
2327
dataTag={tag}
28+
onClick={onClick}
2429
/>
2530
</div>
2631
</div>

‎src/elements/IconButtonElement.tsx

+24-11
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type IProps = {
1111
dataIndex?: string | number;
1212
dataTag?: string | number;
1313
dataProfileid?: string | number;
14+
onClick?: () => void;
1415
};
1516

1617
const createIconButtonElement = ({ is, id, className, title, icon, dataIndex, dataTag, dataProfileid }: IProps) => ({
@@ -28,19 +29,31 @@ const createIconButtonElement = ({ is, id, className, title, icon, dataIndex, da
2829
</button>`
2930
});
3031

31-
const IconButtonElement: FunctionComponent<IProps> = ({ is, id, className, title, icon, dataIndex, dataTag, dataProfileid }: IProps) => {
32+
const IconButtonElement: FunctionComponent<IProps> = ({ is, id, className, title, icon, dataIndex, dataTag, dataProfileid, onClick }: IProps) => {
33+
const button = createIconButtonElement({
34+
is: is,
35+
id: id ? `id="${id}"` : '',
36+
className: className,
37+
title: title ? `title="${globalize.translate(title)}"` : '',
38+
icon: icon,
39+
dataIndex: (dataIndex || dataIndex === 0) ? `data-index="${dataIndex}"` : '',
40+
dataTag: dataTag ? `data-tag="${dataTag}"` : '',
41+
dataProfileid: dataProfileid ? `data-profileid="${dataProfileid}"` : ''
42+
});
43+
44+
if (onClick !== undefined) {
45+
return (
46+
<button
47+
style={{ all: 'unset' }}
48+
dangerouslySetInnerHTML={button}
49+
onClick={onClick}
50+
/>
51+
);
52+
}
53+
3254
return (
3355
<div
34-
dangerouslySetInnerHTML={createIconButtonElement({
35-
is: is,
36-
id: id ? `id="${id}"` : '',
37-
className: className,
38-
title: title ? `title="${globalize.translate(title)}"` : '',
39-
icon: icon,
40-
dataIndex: (dataIndex || dataIndex === 0) ? `data-index="${dataIndex}"` : '',
41-
dataTag: dataTag ? `data-tag="${dataTag}"` : '',
42-
dataProfileid: dataProfileid ? `data-profileid="${dataProfileid}"` : ''
43-
})}
56+
dangerouslySetInnerHTML={button}
4457
/>
4558
);
4659
};

0 commit comments

Comments
 (0)