Fix implicit any TypeScript error

src/components/dashboard/users/AccessScheduleList.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import datetime from '../../../scripts/datetime';
 import globalize from '../../../scripts/globalize';
 
-const createButtonElement = ({index}) => ({
+const createButtonElement = (index: number) => ({
     __html: `<button
         type='button'
         is='paper-icon-button-light'
@@ -21,7 +21,7 @@ type IProps = {
     EndHour?: number;
 }
 
-function getDisplayTime(hours) {
+function getDisplayTime(hours = 0) {
     let minutes = 0;
     const pct = hours % 1;
 
@@ -49,9 +49,7 @@ const AccessScheduleList: FunctionComponent<IProps> = ({index, DayOfWeek, StartH
                 </div>
             </div>
             <div
-                dangerouslySetInnerHTML={createButtonElement({
+                dangerouslySetInnerHTML={createButtonElement(index)}
-                    index: index
-                })}
             />
         </div>
     );

src/components/dashboard/users/BlockedTagList.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 
-const createButtonElement = ({tag}) => ({
+const createButtonElement = (tag?: string) => ({
     __html: `<button
         type='button'
         is='paper-icon-button-light'
@@ -25,9 +25,7 @@ const BlockedTagList: FunctionComponent<IProps> = ({tag}: IProps) => {
                     </h3>
                 </div>
                 <div
-                    dangerouslySetInnerHTML={createButtonElement({
+                    dangerouslySetInnerHTML={createButtonElement(tag)}
-                        tag: tag
-                    })}
                 />
             </div>
 

src/components/dashboard/users/ButtonElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createButtonElement = ({ type, className, title }) => ({
+const createButtonElement = ({ type, className, title }: { type?: string, className?: string, title?: string }) => ({
     __html: `<button
         is="emby-button"
         type="${type}"

src/components/dashboard/users/CheckBoxElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createCheckBoxElement = ({ labelClassName, type, className, title }) => ({
+const createCheckBoxElement = ({ labelClassName, type, className, title }: { labelClassName?: string, type?: string, className?: string, title?: string }) => ({
     __html: `<label class="${labelClassName}">
         <input
             is="emby-checkbox"

src/components/dashboard/users/CheckBoxListItem.tsx

@@ -9,7 +9,7 @@ type IProps = {
     checkedAttribute?: string;
 }
 
-const createCheckBoxElement = ({className, Name, dataAttributes, AppName, checkedAttribute}) => ({
+const createCheckBoxElement = ({className, Name, dataAttributes, AppName, checkedAttribute}: {className?: string, Name?: string, dataAttributes?: string, AppName?: string, checkedAttribute?: string}) => ({
     __html: `<label>
         <input
             type="checkbox"

src/components/dashboard/users/InputElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createInputElement = ({ type, id, label, options }) => ({
+const createInputElement = ({ type, id, label, options }: { type?: string, id?: string, label?: string, options?: string }) => ({
     __html: `<input
         is="emby-input"
         type="${type}"

src/components/dashboard/users/LinkEditUserPreferences.tsx

@@ -6,7 +6,7 @@ type IProps = {
     className?: string;
 }
 
-const createLinkElement = ({ className, title }) => ({
+const createLinkElement = ({ className, title }: IProps) => ({
     __html: `<a
         is="emby-linkbutton"
         class="${className}"

src/components/dashboard/users/SectionTabs.tsx

@@ -5,7 +5,7 @@ type IProps = {
     activeTab: string;
 }
 
-const createLinkElement = ({ activeTab }) => ({
+const createLinkElement = (activeTab: string) => ({
     __html: `<a href="#"
         is="emby-linkbutton"
         data-role="button"
@@ -42,9 +42,7 @@ const SectionTabs: FunctionComponent<IProps> = ({activeTab}: IProps) => {
             data-role='controlgroup'
             data-type='horizontal'
             className='localnav'
-            dangerouslySetInnerHTML={createLinkElement({
+            dangerouslySetInnerHTML={createLinkElement(activeTab)}
-                activeTab: activeTab
-            })}
         />
     );
 };

src/components/dashboard/users/SectionTitleButtonElement.tsx

@@ -7,7 +7,7 @@ type IProps = {
     icon: string,
 }
 
-const createButtonElement = ({ className, title, icon }) => ({
+const createButtonElement = ({ className, title, icon }: { className?: string, title: string, icon: string }) => ({
     __html: `<button
         is="emby-button"
         type="button"

src/components/dashboard/users/SectionTitleLinkElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createLinkElement = ({ className, title, href }) => ({
+const createLinkElement = ({ className, title, href }: { className?: string, title?: string, href?: string }) => ({
     __html: `<a
         is="emby-linkbutton"
         rel="noopener noreferrer"

src/components/dashboard/users/SelectElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createSelectElement = ({ className, label, option }) => ({
+const createSelectElement = ({ className, label, option }: { className?: string, label: string, option: string[] }) => ({
     __html: `<select
         class="${className}"
         is="emby-select"

src/components/dashboard/users/SelectMaxParentalRating.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createSelectElement = ({ className, label, option }) => ({
+const createSelectElement = ({ className, label, option }: { className?: string, label: string, option: string }) => ({
     __html: `<select
         class="${className}"
         is="emby-select"

src/components/dashboard/users/SelectSyncPlayAccessElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createSelectElement = ({ className, id, label }) => ({
+const createSelectElement = ({ className, id, label }: { className?: string, id?: string, label: string }) => ({
     __html: `<select
         class="${className}"
         is="emby-select"

src/components/dashboard/users/UserCardBox.tsx

@@ -1,10 +1,11 @@
+import { UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent } from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import { localeWithSuffix } from '../../../scripts/dfnshelper';
 import globalize from '../../../scripts/globalize';
 import cardBuilder from '../../cardbuilder/cardBuilder';
 
-const createLinkElement = ({ user, renderImgUrl }) => ({
+const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl: string }) => ({
     __html: `<a
         is="emby-linkbutton"
         class="cardContent"
@@ -28,7 +29,7 @@ type IProps = {
     user?: Record<string, any>;
 }
 
-const getLastSeenText = (lastActivityDate) => {
+const getLastSeenText = (lastActivityDate?: string) => {
     if (lastActivityDate) {
         return globalize.translate('LastSeen', formatDistanceToNow(Date.parse(lastActivityDate), localeWithSuffix));
     }

src/components/pages/NewUserPage.tsx

@@ -114,7 +114,7 @@ const NewUserPage: FunctionComponent = () => {
             });
         };
 
-        const onSubmit = (e) => {
+        const onSubmit = (e: Event) => {
             loading.show();
             saveUser();
             e.preventDefault();

src/components/pages/UserEditPage.tsx

@@ -1,3 +1,4 @@
+import { UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 import Dashboard from '../../scripts/clientUtils';
 import globalize from '../../scripts/globalize';
@@ -32,7 +33,7 @@ const UserEditPage: FunctionComponent = () => {
 
     const element = useRef(null);
 
-    const triggerChange = (select) => {
+    const triggerChange = (select: HTMLInputElement) => {
         const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
@@ -163,7 +164,15 @@ const UserEditPage: FunctionComponent = () => {
             toast(globalize.translate('SettingsSaved'));
         }
 
-        const saveUser = (user) => {
+        const saveUser = (user: UserDto) => {
+            if (!user.Id) {
+                throw new Error('Unexpected null user.Id');
+            }
+
+            if (!user.Policy) {
+                throw new Error('Unexpected null user.Policy');
+            }
+
             user.Name = element?.current?.querySelector('#txtUserName').value;
             user.Policy.IsAdministrator = element?.current?.querySelector('.chkIsAdmin').checked;
             user.Policy.IsHidden = element?.current?.querySelector('.chkIsHidden').checked;
@@ -200,7 +209,7 @@ const UserEditPage: FunctionComponent = () => {
             });
         };
 
-        const onSubmit = (e) => {
+        const onSubmit = (e: Event) => {
             loading.show();
             getUser().then(function (result) {
                 saveUser(result);

src/components/pages/UserLibraryAccessPage.tsx

@@ -1,3 +1,4 @@
+import { UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 
 import loading from '../loading/loading';
@@ -26,7 +27,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
 
     const element = useRef(null);
 
-    const triggerChange = (select) => {
+    const triggerChange = (select: HTMLInputElement) => {
         const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
@@ -131,7 +132,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     useEffect(() => {
         loadData();
 
-        const onSubmit = (e) => {
+        const onSubmit = (e: Event) => {
             loading.show();
             const userId = appRouter.param('userId');
             window.ApiClient.getUser(userId).then(function (result) {
@@ -142,7 +143,15 @@ const UserLibraryAccessPage: FunctionComponent = () => {
             return false;
         };
 
-        const saveUser = (user) => {
+        const saveUser = (user: UserDto) => {
+            if (!user.Id) {
+                throw new Error('Unexpected null user.Id');
+            }
+
+            if (!user.Policy) {
+                throw new Error('Unexpected null user.Policy');
+            }
+
             user.Policy.EnableAllFolders = element?.current?.querySelector('.chkEnableAllFolders').checked;
             user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (c) {
                 return c.checked;

src/components/pages/UserParentalControl.tsx

@@ -1,3 +1,4 @@
+import { AccessSchedule, UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 import globalize from '../../scripts/globalize';
 import LibraryMenu from '../../scripts/libraryMenu';
@@ -108,7 +109,7 @@ const UserParentalControl: FunctionComponent = () => {
         for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) {
             btnDeleteTag.addEventListener('click', function () {
                 const tag = btnDeleteTag.getAttribute('data-tag');
-                const newTags = tags.filter(function (t) {
+                const newTags = tags.filter(function (t: string) {
                     return t != tag;
                 });
                 loadBlockedTags(newTags);
@@ -125,7 +126,7 @@ const UserParentalControl: FunctionComponent = () => {
             btnDelete.addEventListener('click', function () {
                 const index = parseInt(btnDelete.getAttribute('data-index'));
                 schedules.splice(index, 1);
-                const newindex = schedules.filter(function (i) {
+                const newindex = schedules.filter(function (i: number) {
                     return i != index;
                 });
                 renderAccessSchedule(newindex);
@@ -181,7 +182,15 @@ const UserParentalControl: FunctionComponent = () => {
             toast(globalize.translate('SettingsSaved'));
         };
 
-        const saveUser = (user) => {
+        const saveUser = (user: UserDto) => {
+            if (!user.Id) {
+                throw new Error('Unexpected null user.Id');
+            }
+
+            if (!user.Policy) {
+                throw new Error('Unexpected null user.Policy');
+            }
+
             user.Policy.MaxParentalRating = element?.current?.querySelector('.selectMaxParentalRating').value || null;
             user.Policy.BlockUnratedItems = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkUnratedItem'), function (i) {
                 return i.checked;
@@ -195,7 +204,7 @@ const UserParentalControl: FunctionComponent = () => {
             });
         };
 
-        const showSchedulePopup = (schedule, index) => {
+        const showSchedulePopup = (schedule: AccessSchedule, index: number) => {
             schedule = schedule || {};
             import('../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
                 accessschedule.show({
@@ -244,7 +253,7 @@ const UserParentalControl: FunctionComponent = () => {
             });
         };
 
-        const onSubmit = (e) => {
+        const onSubmit = (e: Event) => {
             loading.show();
             const userId = appRouter.param('userId');
             window.ApiClient.getUser(userId).then(function (result) {

src/components/pages/UserProfilesPage.tsx

@@ -36,7 +36,7 @@ const UserProfilesPage: FunctionComponent = () => {
     useEffect(() => {
         loadData();
 
-        const showUserMenu = (elem) => {
+        const showUserMenu = (elem: HTMLElement) => {
             const card = dom.parentWithClass(elem, 'card');
             const userId = card.getAttribute('data-userid');
 
@@ -67,7 +67,7 @@ const UserProfilesPage: FunctionComponent = () => {
                 actionsheet.show({
                     items: menuItems,
                     positionTo: card,
-                    callback: function (id) {
+                    callback: function (id: string) {
                         switch (id) {
                             case 'open':
                                 Dashboard.navigate('useredit.html?userId=' + userId);
@@ -89,7 +89,7 @@ const UserProfilesPage: FunctionComponent = () => {
             });
         };
 
-        const deleteUser = (id) => {
+        const deleteUser = (id: string) => {
             const msg = globalize.translate('DeleteUserConfirmation');
 
             confirm({

src/components/search/LiveTVSearchResults.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { ApiClient } from 'jellyfin-apiclient';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import globalize from '../../scripts/globalize';
@@ -53,7 +54,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
         });
 
         // FIXME: This query does not support Live TV filters
-        const fetchItems = (apiClient, params = {}) => apiClient?.getItems(
+        const fetchItems = (apiClient: ApiClient, params = {}) => apiClient?.getItems(
             apiClient?.getCurrentUserId(),
             {
                 ...getDefaultParameters(),

src/components/search/SearchFields.tsx

@@ -53,8 +53,8 @@ const SearchFields: FunctionComponent<SearchFieldsProps> = ({ onSearch = () => {
         };
     }, [debouncedOnSearch]);
 
-    const onAlphaPicked = e => {
+    const onAlphaPicked = (e: Event) => {
-        const value = e.detail.value;
+        const value = (e as CustomEvent).detail.value;
         const searchInput = getSearchInput();
 
         if (value === 'backspace') {

src/components/search/SearchResults.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { ApiClient } from 'jellyfin-apiclient';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import globalize from '../../scripts/globalize';
@@ -48,7 +49,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
             IncludeArtists: false
         });
 
-        const fetchArtists = (apiClient, params = {}) => apiClient?.getArtists(
+        const fetchArtists = (apiClient: ApiClient, params = {}) => apiClient?.getArtists(
             apiClient?.getCurrentUserId(),
             {
                 ...getDefaultParameters(),
@@ -57,7 +58,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
             }
         );
 
-        const fetchItems = (apiClient, params = {}) => apiClient?.getItems(
+        const fetchItems = (apiClient: ApiClient, params = {}) => apiClient?.getItems(
             apiClient?.getCurrentUserId(),
             {
                 ...getDefaultParameters(),
@@ -66,7 +67,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
             }
         );
 
-        const fetchPeople = (apiClient, params = {}) => apiClient?.getPeople(
+        const fetchPeople = (apiClient: ApiClient, params = {}) => apiClient?.getPeople(
             apiClient?.getCurrentUserId(),
             {
                 ...getDefaultParameters(),

src/components/search/SearchSuggestions.tsx

@@ -9,7 +9,7 @@ import '../../elements/emby-button/emby-button';
 // There seems to be some compatibility issues here between
 // React and our legacy web components, so we need to inject
 // them as an html string for now =/
-const createSuggestionLink = ({name, href}) => ({
+const createSuggestionLink = ({ name, href }: { name: string, href: string }) => ({
     __html: `<a
     is='emby-linkbutton'
     class='button-link'
@@ -57,7 +57,7 @@ const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ serverId
                     <div
                         key={`suggestion-${item.Id}`}
                         dangerouslySetInnerHTML={createSuggestionLink({
-                            name: item.Name,
+                            name: item.Name || '',
                             href: appRouter.getRouteUrl(item)
                         })}
                     />