mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

useCallback hook

Browse source
This commit is contained in:
grafixeyehero 2021-11-13 22:10:34 +03:00
parent a2e908a4de
commit a72fa2e999
1 changed files with 108 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/pages/UserLibraryAccessPage.tsx
View file

@ -1,4 +1,4 @@
import React, { FunctionComponent, useEffect, useState, useRef } from 'react'; import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
import loading from '../loading/loading'; import loading from '../loading/loading';
import libraryMenu from '../../scripts/libraryMenu'; import libraryMenu from '../../scripts/libraryMenu';
@ -27,35 +27,13 @@ const UserLibraryAccessPage: FunctionComponent = () => {
const element = useRef(null); const element = useRef(null);
useEffect(() => { const triggerChange = (select) => {
const loadData = () => { const evt = document.createEvent('HTMLEvents');
loading.show(); evt.initEvent('change', false, true);
const userId = appRouter.param('userId'); select.dispatchEvent(evt);
// eslint-disable-next-line compat/compat
const promise1 = userId ? window.ApiClient.getUser(userId) : Promise.resolve({ Configuration: {} });
const promise2 = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
IsHidden: false
}));
const promise3 = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
const promise4 = window.ApiClient.getJSON(window.ApiClient.getUrl('Devices'));
// eslint-disable-next-line compat/compat
Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
loadUser(responses[0], responses[1].Items, responses[2].Items, responses[3].Items);
});
}; };
loadData(); const loadMediaFolders = useCallback((user, mediaFolders) => {
const loadUser = (user, mediaFolders, channels, devices) => {
setUserName(user.Name);
libraryMenu.setTitle(user.Name);
loadChannels(user, channels);
loadMediaFolders(user, mediaFolders);
loadDevices(user, devices);
loading.hide();
};
const loadMediaFolders = (user, mediaFolders) => {
const itemsArr: ItemsArr[] = []; const itemsArr: ItemsArr[] = [];
for (const folder of mediaFolders) { for (const folder of mediaFolders) {
@ -74,9 +52,9 @@ const UserLibraryAccessPage: FunctionComponent = () => {
const chkEnableAllFolders = element.current.querySelector('.chkEnableAllFolders'); const chkEnableAllFolders = element.current.querySelector('.chkEnableAllFolders');
chkEnableAllFolders.checked = user.Policy.EnableAllFolders; chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
triggerChange(chkEnableAllFolders); triggerChange(chkEnableAllFolders);
}; }, []);
const loadChannels = (user, channels) => { const loadChannels = useCallback((user, channels) => {
const itemsArr: ItemsArr[] = []; const itemsArr: ItemsArr[] = [];
for (const folder of channels) { for (const folder of channels) {
@ -101,9 +79,9 @@ const UserLibraryAccessPage: FunctionComponent = () => {
const chkEnableAllChannels = element.current.querySelector('.chkEnableAllChannels'); const chkEnableAllChannels = element.current.querySelector('.chkEnableAllChannels');
chkEnableAllChannels.checked = user.Policy.EnableAllChannels; chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
triggerChange(chkEnableAllChannels); triggerChange(chkEnableAllChannels);
}; }, []);
const loadDevices = (user, devices) => { const loadDevices = useCallback((user, devices) => {
const itemsArr: ItemsArr[] = []; const itemsArr: ItemsArr[] = [];
for (const device of devices) { for (const device of devices) {
@ -129,13 +107,35 @@ const UserLibraryAccessPage: FunctionComponent = () => {
} else { } else {
element?.current?.querySelector('.deviceAccessContainer').classList.remove('hide'); element?.current?.querySelector('.deviceAccessContainer').classList.remove('hide');
} }
}; }, []);
const triggerChange = (select) => { const loadUser = useCallback((user, mediaFolders, channels, devices) => {
const evt = document.createEvent('HTMLEvents'); setUserName(user.Name);
evt.initEvent('change', false, true); libraryMenu.setTitle(user.Name);
select.dispatchEvent(evt); loadChannels(user, channels);
}; loadMediaFolders(user, mediaFolders);
loadDevices(user, devices);
loading.hide();
}, [loadChannels, loadDevices, loadMediaFolders]);
const loadData = useCallback(() => {
loading.show();
const userId = appRouter.param('userId');
// eslint-disable-next-line compat/compat
const promise1 = userId ? window.ApiClient.getUser(userId) : Promise.resolve({ Configuration: {} });
const promise2 = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
IsHidden: false
}));
const promise3 = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
const promise4 = window.ApiClient.getJSON(window.ApiClient.getUrl('Devices'));
// eslint-disable-next-line compat/compat
Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
loadUser(responses[0], responses[1].Items, responses[2].Items, responses[3].Items);
});
}, [loadUser]);
useEffect(() => {
loadData();
const onSubmit = (e) => { const onSubmit = (e) => {
loading.show(); loading.show();
@ -204,7 +204,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
}); });
element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit); element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit);
}, []); }, [loadData]);
return ( return (
<div ref={element}> <div ref={element}>