From 417a9ddc9963382611dc3217eec218ade7f83362 Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Thu, 3 Mar 2022 03:37:56 +0300 Subject: [PATCH] update TypeScript --- .../dashboard/users/UserPasswordForm.tsx | 137 +++++++++++------- src/components/pages/UserImagePage.tsx | 78 ++++++---- src/components/pages/UserPasswordPage.tsx | 16 +- 3 files changed, 147 insertions(+), 84 deletions(-) diff --git a/src/components/dashboard/users/UserPasswordForm.tsx b/src/components/dashboard/users/UserPasswordForm.tsx index 4ccfd28ce0..2ccaa17d75 100644 --- a/src/components/dashboard/users/UserPasswordForm.tsx +++ b/src/components/dashboard/users/UserPasswordForm.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useRef } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; import Dashboard from '../../../scripts/clientUtils'; import globalize from '../../../scripts/globalize'; import LibraryMenu from '../../../scripts/libraryMenu'; @@ -10,76 +10,103 @@ import CheckBoxElement from './CheckBoxElement'; import InputElement from './InputElement'; type IProps = { - userId?: string; + userId: string; } const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { - const element = useRef(null); + const element = useRef(null); + + const loadUser = useCallback(() => { + const page = element.current; + + if (!page) { + console.error('Unexpected null reference'); + return; + } + + window.ApiClient.getUser(userId).then(function (user) { + Dashboard.getCurrentUser().then(function (loggedInUser: { Policy: { IsAdministrator: boolean; }; }) { + if (!user.Id) { + throw new Error('Unexpected null user.Id'); + } + + if (!user.Policy) { + throw new Error('Unexpected null user.Policy'); + } + + if (!user.Id) { + throw new Error('Unexpected null user.Id'); + } + + if (!user.Configuration) { + throw new Error('Unexpected null user.Configuration'); + } - const loadUser = (Id) => { - window.ApiClient.getUser(Id).then(function (user) { - Dashboard.getCurrentUser().then(function (loggedInUser) { LibraryMenu.setTitle(user.Name); - let showPasswordSection = true; + const showPasswordSection = true; let showLocalAccessSection = false; - if (user.ConnectLinkType == 'Guest') { - element.current?.querySelector('.localAccessSection').classList.add('hide'); - showPasswordSection = false; - } else if (user.HasConfiguredPassword) { - element.current?.querySelector('.btnResetPassword').classList.remove('hide'); - element.current?.querySelector('#fldCurrentPassword').classList.remove('hide'); + if (user.HasConfiguredPassword) { + (page.querySelector('.btnResetPassword') as HTMLDivElement).classList.remove('hide'); + (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide'); showLocalAccessSection = true; } else { - element.current?.querySelector('.btnResetPassword').classList.add('hide'); - element.current?.querySelector('#fldCurrentPassword').classList.add('hide'); + (page.querySelector('.btnResetPassword') as HTMLDivElement).classList.add('hide'); + (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide'); } if (showPasswordSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { - element.current?.querySelector('.passwordSection').classList.remove('hide'); + (page.querySelector('.passwordSection') as HTMLDivElement).classList.remove('hide'); } else { - element.current?.querySelector('.passwordSection').classList.add('hide'); + (page.querySelector('.passwordSection') as HTMLDivElement).classList.add('hide'); } if (showLocalAccessSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { - element.current?.querySelector('.localAccessSection').classList.remove('hide'); + (page.querySelector('.localAccessSection') as HTMLDivElement).classList.remove('hide'); } else { - element.current?.querySelector('.localAccessSection').classList.add('hide'); + (page.querySelector('.localAccessSection') as HTMLDivElement).classList.add('hide'); } - const txtEasyPassword = element.current?.querySelector('#txtEasyPassword'); + const txtEasyPassword = page.querySelector('#txtEasyPassword') as HTMLInputElement; txtEasyPassword.value = ''; if (user.HasConfiguredEasyPassword) { txtEasyPassword.placeholder = '******'; - element.current?.querySelector('.btnResetEasyPassword').classList.remove('hide'); + (page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.remove('hide'); } else { txtEasyPassword.removeAttribute('placeholder'); txtEasyPassword.placeholder = ''; - element.current?.querySelector('.btnResetEasyPassword').classList.add('hide'); + (page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.add('hide'); } - element.current.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword; + const chkEnableLocalEasyPassword = page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement; + + chkEnableLocalEasyPassword.checked = user.Configuration.EnableLocalPassword || false; import('../../autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(element.current); + autoFocuser.autoFocus(page); }); }); }); - element.current.querySelector('#txtCurrentPassword').value = ''; - element.current.querySelector('#txtNewPassword').value = ''; - element.current.querySelector('#txtNewPasswordConfirm').value = ''; - }; + (page.querySelector('#txtCurrentPassword') as HTMLInputElement).value = ''; + (page.querySelector('#txtNewPassword') as HTMLInputElement).value = ''; + (page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value = ''; + }, [userId]); useEffect(() => { - loadUser(userId); + const page = element.current; - const onSubmit = (e) => { - const form = element.current; + if (!page) { + console.error('Unexpected null reference'); + return; + } - if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) { + loadUser(); + + const onSubmit = (e: Event) => { + if ((page.querySelector('#txtNewPassword') as HTMLInputElement).value != (page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value) { toast(globalize.translate('PasswordMatchError')); } else { loading.show(); @@ -91,10 +118,10 @@ const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { }; const savePassword = () => { - let currentPassword = element.current?.querySelector('#txtCurrentPassword').value; - const newPassword = element.current?.querySelector('#txtNewPassword').value; + let currentPassword = (page.querySelector('#txtCurrentPassword') as HTMLInputElement).value; + const newPassword = (page.querySelector('#txtNewPassword') as HTMLInputElement).value; - if (element.current?.querySelector('#fldCurrentPassword').classList.contains('hide')) { + if ((page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.contains('hide')) { // Firefox does not respect autocomplete=off, so clear it if the field is supposed to be hidden (and blank) // This should only happen when user.HasConfiguredPassword is false, but this information is not passed on currentPassword = ''; @@ -104,7 +131,7 @@ const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { loading.hide(); toast(globalize.translate('PasswordSaved')); - loadUser(userId); + loadUser(); }, function () { loading.hide(); Dashboard.alert({ @@ -114,7 +141,7 @@ const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { }); }; - const onLocalAccessSubmit = (e) => { + const onLocalAccessSubmit = (e: Event) => { loading.show(); saveEasyPassword(); e.preventDefault(); @@ -122,25 +149,33 @@ const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { }; const saveEasyPassword = () => { - const easyPassword = element.current?.querySelector('#txtEasyPassword').value; + const easyPassword = (page.querySelector('#txtEasyPassword') as HTMLInputElement).value; if (easyPassword) { window.ApiClient.updateEasyPassword(userId, easyPassword).then(function () { - onEasyPasswordSaved(userId); + onEasyPasswordSaved(); }); } else { - onEasyPasswordSaved(userId); + onEasyPasswordSaved(); } }; - const onEasyPasswordSaved = (Id) => { - window.ApiClient.getUser(Id).then(function (user) { - user.Configuration.EnableLocalPassword = element.current?.querySelector('.chkEnableLocalEasyPassword').checked; + const onEasyPasswordSaved = () => { + window.ApiClient.getUser(userId).then(function (user) { + if (!user.Configuration) { + throw new Error('Unexpected null user.Configuration'); + } + + if (!user.Id) { + throw new Error('Unexpected null user.Id'); + } + + user.Configuration.EnableLocalPassword = (page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement).checked; window.ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () { loading.hide(); toast(globalize.translate('SettingsSaved')); - loadUser(userId); + loadUser(); }); }); }; @@ -156,7 +191,7 @@ const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { message: globalize.translate('PinCodeResetComplete'), title: globalize.translate('HeaderPinCodeReset') }); - loadUser(userId); + loadUser(); }); }); }; @@ -171,17 +206,17 @@ const UserPasswordForm: FunctionComponent = ({userId}: IProps) => { message: globalize.translate('PasswordResetComplete'), title: globalize.translate('ResetPassword') }); - loadUser(userId); + loadUser(); }); }); }; - element?.current?.querySelector('.updatePasswordForm').addEventListener('submit', onSubmit); - element?.current?.querySelector('.localAccessForm').addEventListener('submit', onLocalAccessSubmit); + (page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit); + (page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit); - element?.current?.querySelector('.btnResetEasyPassword').addEventListener('click', resetEasyPassword); - element?.current?.querySelector('.btnResetPassword').addEventListener('click', resetPassword); - }, [userId]); + (page.querySelector('.btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword); + (page.querySelector('.btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword); + }, [loadUser, userId]); return (
diff --git a/src/components/pages/UserImagePage.tsx b/src/components/pages/UserImagePage.tsx index 51c00ed00d..702bb36855 100644 --- a/src/components/pages/UserImagePage.tsx +++ b/src/components/pages/UserImagePage.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState, useRef } from 'react'; +import React, { FunctionComponent, useEffect, useState, useRef, useCallback } from 'react'; import Dashboard from '../../scripts/clientUtils'; import globalize from '../../scripts/globalize'; @@ -11,17 +11,32 @@ import loading from '../loading/loading'; import toast from '../toast/toast'; type IProps = { - userId?: string; + userId: string; } const UserImagePage: FunctionComponent = ({userId}: IProps) => { const [ userName, setUserName ] = useState(''); - const element = useRef(null); + const element = useRef(null); + + const reloadUser = useCallback(() => { + const page = element.current; + + if (!page) { + console.error('Unexpected null reference'); + return; + } - const reloadUser = (Id) => { loading.show(); - window.ApiClient.getUser(Id).then(function (user) { + window.ApiClient.getUser(userId).then(function (user) { + if (!user.Name) { + throw new Error('Unexpected null user.Name'); + } + + if (!user.Id) { + throw new Error('Unexpected null user.Id'); + } + setUserName(user.Name); LibraryMenu.setTitle(user.Name); @@ -32,27 +47,37 @@ const UserImagePage: FunctionComponent = ({userId}: IProps) => { type: 'Primary' }); } - - const userImage = element.current?.querySelector('#image'); + const userImage = (page.querySelector('#image') as HTMLDivElement); userImage.style.backgroundImage = 'url(' + imageUrl + ')'; - Dashboard.getCurrentUser().then(function (loggedInUser) { + Dashboard.getCurrentUser().then(function (loggedInUser: { Policy: { IsAdministrator: boolean; }; }) { + if (!user.Policy) { + throw new Error('Unexpected null user.Policy'); + } + if (user.PrimaryImageTag) { - element.current?.querySelector('.btnAddImage').classList.add('hide'); - element.current?.querySelector('.btnDeleteImage').classList.remove('hide'); + (page.querySelector('.btnAddImage') as HTMLButtonElement).classList.add('hide'); + (page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.remove('hide'); } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { - element.current?.querySelector('.btnDeleteImage').classList.add('hide'); - element.current?.querySelector('.btnAddImage').classList.remove('hide'); + (page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.add('hide'); + (page.querySelector('.btnAddImage') as HTMLButtonElement).classList.remove('hide'); } }); loading.hide(); }); - }; + }, [userId]); useEffect(() => { - reloadUser(userId); + const page = element.current; - const onFileReaderError = (evt) => { + if (!page) { + console.error('Unexpected null reference'); + return; + } + + reloadUser(); + + const onFileReaderError = (evt: any) => { loading.hide(); switch (evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: @@ -72,9 +97,10 @@ const UserImagePage: FunctionComponent = ({userId}: IProps) => { toast(globalize.translate('FileReadCancelled')); }; - const setFiles = (evt) => { - const userImage = element?.current?.querySelector('#image'); - const file = evt.target.files[0]; + const setFiles = (evt: Event) => { + const userImage = (page.querySelector('#image') as HTMLDivElement); + const target = evt.target as HTMLInputElement; + const file = (target.files as FileList)[0]; if (!file || !file.type.match('image.*')) { return false; @@ -87,34 +113,34 @@ const UserImagePage: FunctionComponent = ({userId}: IProps) => { userImage.style.backgroundImage = 'url(' + reader.result + ')'; window.ApiClient.uploadUserImage(userId, 'Primary', file).then(function () { loading.hide(); - reloadUser(userId); + reloadUser(); }); }; reader.readAsDataURL(file); }; - element?.current?.querySelector('.btnDeleteImage').addEventListener('click', function () { + (page.querySelector('.btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () { confirm( globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage') ).then(function () { loading.show(); - window.ApiClient.deleteUserImage(userId, 'primary').then(function () { + window.ApiClient.deleteUserImage(userId, 'Primary').then(function () { loading.hide(); - reloadUser(userId); + reloadUser(); }); }); }); - element?.current?.querySelector('.btnAddImage').addEventListener('click', function () { - element?.current?.querySelector('#uploadImage').click(); + (page.querySelector('.btnAddImage') as HTMLButtonElement).addEventListener('click', function () { + (page.querySelector('#uploadImage') as HTMLInputElement).click(); }); - element?.current?.querySelector('#uploadImage').addEventListener('change', function (evt) { + (page.querySelector('#uploadImage') as HTMLInputElement).addEventListener('change', function (evt: Event) { setFiles(evt); }); - }, [userId]); + }, [reloadUser, userId]); return (
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx index 68b1108b7c..a32498af16 100644 --- a/src/components/pages/UserPasswordPage.tsx +++ b/src/components/pages/UserPasswordPage.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useState } from 'react'; import { appRouter } from '../appRouter'; import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; import SectionTabs from '../dashboard/users/SectionTabs'; @@ -8,15 +8,17 @@ const UserPasswordPage: FunctionComponent = () => { const userId = appRouter.param('userId'); const [ userName, setUserName ] = useState(''); - const loadUser = (Id) => { - window.ApiClient.getUser(Id).then(function (user) { + const loadUser = useCallback(() => { + window.ApiClient.getUser(userId).then(function (user) { + if (!user.Name) { + throw new Error('Unexpected null user.Name'); + } setUserName(user.Name); }); - }; - - useEffect(() => { - loadUser(userId); }, [userId]); + useEffect(() => { + loadUser(); + }, [loadUser]); return (