diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx b/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx index c1fb2e16..d8be1c09 100644 --- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx +++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx @@ -19,7 +19,14 @@ export const useDriveItem = (id: string) => { const item = useRecoilValue(DriveItemAtom(id)); const children = useRecoilValue(DriveItemChildrenAtom(id)); const [loading, setLoading] = useRecoilState(LoadingStateInitTrue('useDriveItem-' + id)); - const { refresh: refreshItem, create, update: _update, updateLevel: _updateLevel, remove: _remove, restore: _restore } = useDriveActions(); + const { + refresh: refreshItem, + create, + update: _update, + updateLevel: _updateLevel, + remove: _remove, + restore: _restore, + } = useDriveActions(); const { uploadVersion: _uploadVersion } = useDriveUpload(); const refresh = useCallback( @@ -55,8 +62,8 @@ export const useDriveItem = (id: string) => { }, [id, setLoading, refresh, item?.item?.parent_id]); const update = useCallback( - async (update: Partial) => { - setLoading(true); + async (update: Partial, skipLoading = false) => { + if (!skipLoading) setLoading(true); try { await _update(update, id, item?.item?.parent_id || ''); } catch (e) { @@ -93,8 +100,11 @@ export const useDriveItem = (id: string) => { [companyId, id, setLoading, refresh, item?.item?.parent_id], ); - const inTrash = id.includes('trash') || item?.path?.some(i => i?.parent_id?.includes('trash')) || item?.item?.is_in_trash; - const sharedWithMe = id =="shared_with_me"; + const inTrash = + id.includes('trash') || + item?.path?.some(i => i?.parent_id?.includes('trash')) || + item?.item?.is_in_trash; + const sharedWithMe = id == 'shared_with_me'; return { sharedWithMe, diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx index 071fdb5f..58fc3586 100644 --- a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx +++ b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx @@ -8,19 +8,19 @@ import { Input } from 'app/atoms/input/input-text'; import { useEffect, useRef, useState } from 'react'; import { AccessLevel } from './common'; import moment from 'moment'; -import 'moment/min/locales' +import 'moment/min/locales'; import Languages from 'features/global/services/languages-service'; - +import { debounce } from 'lodash'; export const PublicLinkManager = ({ id, disabled }: { id: string; disabled?: boolean }) => { const { item, loading, update } = useDriveItem(id); const publicLink = getPublicLink(item); - - return ( <> - {Languages.t('components.public-link-acess.public_link_acess')} + + {Languages.t('components.public-link-acess.public_link_acess')} +
@@ -75,7 +75,7 @@ export const PublicLinkManager = ({ id, disabled }: { id: string; disabled?: boo password: password || '', }, }, - }); + }, true); }} onChangeExpiration={(expiration: number) => { update({ @@ -109,10 +109,19 @@ const PublicLinkOptions = (props: { const handlePasswordBlur = () => { props.onChangePassword(password); }; - + + const debouncedOnChangePassword = debounce(passwordValue => { + props.onChangePassword(passwordValue); + }, 500); // 500ms delay useEffect(() => { - props.onChangePassword(usePassword ? password : ''); + // Ensure the effect runs only if usePassword or password changes + debouncedOnChangePassword(usePassword ? password : ''); + + // Cleanup function to cancel the debounced call if the component is unmounted or the dependencies change + return () => { + debouncedOnChangePassword.cancel(); + }; }, [usePassword, password]); useEffect(() => { @@ -126,7 +135,9 @@ const PublicLinkOptions = (props: { return ( <> - {Languages.t('components.public-link-security')} + + {Languages.t('components.public-link-security')} +
{ if (password) copyToClipboard(password); - ToasterService.success(Languages.t('components.public-link-security_password_copied')); + ToasterService.success( + Languages.t('components.public-link-security_password_copied'), + ); }} /> )}
- - - { @@ -166,7 +176,9 @@ const PublicLinkOptions = (props: { label={Languages.t('components.public-link-security_expired')} /> {useExpiration && (expiration || 0) < Date.now() && ( - ({Languages.t('components.public-link-security_expired')}) + + ({Languages.t('components.public-link-security_expired')}) + )} {useExpiration && (expiration || 0) > Date.now() && ( ({expirationDate(expiration)})