wip

Author: AJIXuMuK

src/controls/locationPicker/LocationPicker.tsx

@@ -13,13 +13,13 @@ import { isEqual } from '@microsoft/sp-lodash-subset';
 
 export class LocationPicker extends React.Component<ILocationPickerProps, ILocationPickerState> {
   private _token: string | string[] = null;
-  private focusRef: any = null;
+  private focusRef: any = null; // eslint-disable-line @typescript-eslint/no-implicit-any
   /**
   * Constructor method
   */
   constructor(props: ILocationPickerProps) {
     super(props);
-    this.getToken();
+    this.getToken().then(() => { /* no-op; */}).catch(() => { /* no-op; */});
     this.focusRef = React.createRef();
     if (props.defaultValue) {
       this.state = {
@@ -42,7 +42,7 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
 
   }
 
-  public UNSAFE_componentWillReceiveProps(nextProps: ILocationPickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ILocationPickerProps): void {
     if (!isEqual(nextProps.defaultValue, this.props.defaultValue)) {
       if (nextProps.defaultValue) {
         this.setState({ selectedItem: nextProps.defaultValue, currentMode: Mode.view });
@@ -64,7 +64,7 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
     );
   }
 
-  private onRenderOption = (item: ILocationBoxOption) => {
+  private onRenderOption = (item: ILocationBoxOption): JSX.Element => {
     const {
       text,
       locationItem
@@ -107,7 +107,7 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
           openOnKeyboardFocus={true}
           scrollSelectedToTop={true}
           isButtonAriaHidden={true}
-          onInput={(e) => this.getLocatios(e.target["value"])}
+          onInput={(e) => this.getLocatios(e.target["value"])} // eslint-disable-line dot-notation
           onChange={this.onChange}
           errorMessage={errorMessage}
         />;
@@ -212,30 +212,30 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
     return `${address.Street ? address.Street + ", " : ''}${address.City ? address.City + ", " : ""}${address.State ? address.State + ", " : ''}${address.CountryOrRegion || ""}`;
   }
 
-  private onIconButtonClick = () => {
+  private onIconButtonClick = (): void => {
     this.setState({ currentMode: Mode.empty, selectedItem: null });
     if (this.props.onChange) {
       this.props.onChange(null);
     }
   }
 
-  private onClick = () => {
+  private onClick = (): void => {
     this.setState({ currentMode: Mode.editView },
       () => {
         if (this.focusRef.current !== null)
           this.focusRef.current.focus();
       });
   }
 
-  private onBlur = (ev) => {
+  private onBlur = (ev): void => {
     try {
-      if (ev !== null && ev.relatedTarget["title"] !== "Location" && ev.relatedTarget["title"] !== "Clear") {
+      if (ev !== null && ev.relatedTarget["title"] !== "Location" && ev.relatedTarget["title"] !== "Clear") { // eslint-disable-line dot-notation
         this.setState({ currentMode: Mode.view });
       }
-    } catch { }
+    } catch { /* no-op; */ }
   }
 
-  private onChange = (ev, option: ILocationBoxOption) => {
+  private onChange = (ev, option: ILocationBoxOption): void => {
     this.setState({ selectedItem: option.locationItem, currentMode: Mode.editView },
       () => {
         if (this.focusRef.current !== null)
@@ -247,14 +247,14 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
     }
   }
 
-  private customRenderInitials(props) {
+  private customRenderInitials(props): JSX.Element {
     if (props.imageAlt === "Custom")
       return <FontIcon aria-label="Poi" iconName="Poi" style={{ fontSize: "14pt" }} />;
     else
       return <FontIcon aria-label="EMI" iconName="EMI" style={{ fontSize: "14pt" }} />;
   }
 
-  private async getToken() {
+  private async getToken(): Promise<void> {
     const requestHeaders: Headers = new Headers();
     requestHeaders.append("Content-type", "application/json");
     requestHeaders.append("Cache-Control", "no-cache");
@@ -263,14 +263,14 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
       headers: requestHeaders
     };
 
-    let response: SPHttpClientResponse = await this.props.context.spHttpClient.post(`${this.props.context.pageContext.web.absoluteUrl}/_api/SP.OAuth.Token/Acquire`, SPHttpClient.configurations.v1, spOpts);
-    let PrimaryQueryResult: any = await response.json();
+    const response: SPHttpClientResponse = await this.props.context.spHttpClient.post(`${this.props.context.pageContext.web.absoluteUrl}/_api/SP.OAuth.Token/Acquire`, SPHttpClient.configurations.v1, spOpts);
+    const PrimaryQueryResult: any = await response.json();
     this._token = PrimaryQueryResult.access_token;
   }
 
-  private async getLocatios(searchText) {
+  private async getLocatios(searchText): Promise<void> {
     try {
-      let optionsForCustomRender: ILocationBoxOption[] = [];
+      const optionsForCustomRender: ILocationBoxOption[] = [];
       const requestHeaders: Headers = new Headers();
       requestHeaders.append("Content-type", "application/json");
       requestHeaders.append("Cache-Control", "no-cache");
@@ -279,12 +279,12 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
         body: `{"QueryConstraint":{"Query":"${searchText}"},"LocationProvider":32,"BingMarket":"en-IN"}`,
         headers: requestHeaders
       };
-      let response1: HttpClientResponse = await this.props.context.httpClient.post("https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations", HttpClient.configurations.v1, spOpts);
-      let json = await response1.json();
+      const response1: HttpClientResponse = await this.props.context.httpClient.post("https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations", HttpClient.configurations.v1, spOpts);
+      const json = await response1.json();
 
 
       json.MeetingLocations.forEach((v, i) => {
-        let loc: ILocationPickerItem = v["MeetingLocation"];
+        const loc: ILocationPickerItem = v["MeetingLocation"];
         optionsForCustomRender.push({ text: v.MeetingLocation["DisplayName"], key: i, locationItem: loc });
       });
 

src/controls/map/IMap.ts

@@ -14,7 +14,7 @@ export interface ICoordinates {
   /**
    * Address of the location
    */
-  address?: any; // 20200614 - JJ - address
+  address?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export enum MapType {
@@ -38,5 +38,5 @@ export interface LocationInfo {
   type: string;
   importance: number;
   icon: string;
-  address?: any; // 20200614 - JJ - the address data from nominatim
+  address?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }

src/controls/map/Map.tsx

@@ -1,7 +1,9 @@
 import * as strings from 'ControlStrings';
 import * as React from 'react';
 import styles from './Maps.module.scss';
-import { IMapProps, ICoordinates, MapType, LocationInfo, IMapState } from '.';
+import { IMapProps } from './IMapProps';
+import { IMapState } from './IMapState';
+import { ICoordinates, MapType, LocationInfo } from './IMap';
 import { Label } from 'office-ui-fabric-react/lib/components/Label';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import { Icon } from "office-ui-fabric-react/lib/components/Icon";
@@ -33,15 +35,6 @@ export class Map extends React.Component<IMapProps, IMapState> {
     };
   }
 
-  /**
-   * componentWillMount lifecycle hook
-   */
-  // public componentWillMount(): void {
-  //   this.setState({
-  //     coordinates: this.props.coordinates
-  //   });
-  // }
-
   /**
    * componentWillUpdate lifecycle hook
    */
@@ -70,7 +63,7 @@ export class Map extends React.Component<IMapProps, IMapState> {
   private _getWidth(): string {
     let widthToReturn: string = this.props.width;
     if (widthToReturn) {
-      let lastChar: string = widthToReturn.substr(widthToReturn.length - 1);
+      const lastChar: string = widthToReturn.substr(widthToReturn.length - 1);
       if (lastChar !== '%') {
         widthToReturn = `${widthToReturn}%`;
       }
@@ -207,9 +200,9 @@ export class Map extends React.Component<IMapProps, IMapState> {
    */
   public render(): React.ReactElement<IMapProps> {
     const { mapSource } = this.props;
-    let width: string = this._getWidth();
-    let height: number = this._getHeight();
-    let mapUrl: string = ["BingDraggable", "BingStatic"].indexOf(mapSource) !== -1 ? this._getBingMapUrl(width, height) : this._getMapUrl(); //20200614 - JJ - rudimentary bing map support (draggable/static) with pushpin (static only)
+    const width: string = this._getWidth();
+    const height: number = this._getHeight();
+    const mapUrl: string = ["BingDraggable", "BingStatic"].indexOf(mapSource) !== -1 ? this._getBingMapUrl(width, height) : this._getMapUrl(); //20200614 - JJ - rudimentary bing map support (draggable/static) with pushpin (static only)
 
     return (
       <div id="mapsContainer" className={`${styles.mapContainer} ${this.props.mapsClassName ? this.props.mapsClassName : ''}`}>
@@ -243,8 +236,8 @@ export class Map extends React.Component<IMapProps, IMapState> {
           ) : (
               (mapUrl.length > 0 && !this.state.showmessageerror) ? (
                 <div id="mapsIframe">
-                  <iframe width={width} height={height} scrolling="no" src={mapUrl}></iframe>
-                  {mapSource === "BingStatic" && <Icon iconName="Location" style={{fontSize: "26px", position:"relative", top: (Math.floor(-height/2)), left: "50%", marginTop: "-14px"}} ></Icon>}{/* 20200614 - JJ - rudimentary bing map support (draggable/static) with pushpin (static only)*/}
+                  <iframe width={width} height={height} scrolling="no" src={mapUrl} />
+                  {mapSource === "BingStatic" && <Icon iconName="Location" style={{fontSize: "26px", position:"relative", top: (Math.floor(-height/2)), left: "50%", marginTop: "-14px"}} />}{/* 20200614 - JJ - rudimentary bing map support (draggable/static) with pushpin (static only)*/}
                 </div>
               ) : (
                   <p className={`ms-TextField-errorMessage ${styles.errorMessage} ${this.props.errorMessageClassName ? this.props.errorMessageClassName : ''}`}>

src/controls/modernAudio/ModernAudio.tsx

@@ -5,7 +5,7 @@ import { IModernAudioProps } from "./IModernAudioProps";
 import { IconButton } from "office-ui-fabric-react";
 import { ModernAudioLabelPosition } from './ModernAudioLabelPosition';
 
-export const ModernAudio: React.FC<IModernAudioProps> = (props: IModernAudioProps) => {
+export const ModernAudio: React.FC<IModernAudioProps> = (props: IModernAudioProps): JSX.Element => {
     const audioComp = React.useRef<HTMLAudioElement>(new Audio(props.audioUrl));
     const [muted, setMuted] = React.useState<boolean>(false);
     const [playing, setPlaying] = React.useState<boolean>(false);
@@ -16,13 +16,13 @@ export const ModernAudio: React.FC<IModernAudioProps> = (props: IModernAudioProp
 
     const playAudio = () => {
         setPlaying(true);
-        audioComp.current.play();
+        audioComp.current.play().then(() => { /* no-op */ }).catch(() => { /* no-op */ });
     };
-    const pauseAudio = () => {
+    const pauseAudio = (): void => {
         setPlaying(false);
         audioComp.current.pause();
     };
-    const incVolume = () => {
+    const incVolume = (): void => {
         if (audioComp.current.volume <= 0.9) {
             audioComp.current.volume += 0.1;
         }
@@ -34,30 +34,30 @@ export const ModernAudio: React.FC<IModernAudioProps> = (props: IModernAudioProp
             setMuted(false);
         }
     };
-    const decVolume = () => {
+    const decVolume = (): void => {
         audioComp.current.volume -= 0.1;
         if (audioComp.current.volume < 0.1) {
             audioComp.current.volume = 0;
             audioComp.current.muted = true;
             setMuted(true);
         }
     };
-    const muteAudio = () => {
+    const muteAudio = (): void => {
         audioComp.current.muted = !muted;
         setMuted(!muted);
     };
     return (
         <div className={styles.modernAudio}>
             {props.labelPosition === ModernAudioLabelPosition.TopLeft &&
-            props.label !== "" && 
+            props.label !== "" &&
             <div><label>{props.label}</label></div>}
-            {props.labelPosition === ModernAudioLabelPosition.TopCenter && 
+            {props.labelPosition === ModernAudioLabelPosition.TopCenter &&
             props.label !== "" &&
             <div style={{textAlign: "center"}}><label>{props.label}</label></div>}
             <div className={styles.audioPanel}>
-                {props.audioUrl !== "" && <audio ref={audioComp} src={props.audioUrl}></audio>}
+                {props.audioUrl !== "" && <audio ref={audioComp} src={props.audioUrl} />}
                 <IconButton iconProps={{ iconName: 'Play' }} className={styles.audioIcon} title={strings.ModernAudioPlay} disabled={playing} onClick={playAudio} />
-                <IconButton iconProps={{ iconName: 'Pause' }} className={styles.audioIcon} title={strings.ModernAudioPause} disabled={!playing} onClick={pauseAudio} />    
+                <IconButton iconProps={{ iconName: 'Pause' }} className={styles.audioIcon} title={strings.ModernAudioPause} disabled={!playing} onClick={pauseAudio} />
                 <IconButton iconProps={{ iconName: 'Volume2' }} className={styles.audioIcon} title={strings.ModernAudioIncVol} onClick={incVolume} />
                 <IconButton iconProps={{ iconName: 'Volume0' }} className={styles.audioIcon} title={strings.ModernAudioDecVol} disabled={muted} onClick={decVolume} />
                 <IconButton iconProps={{ iconName: 'VolumeDisabled' }} className={styles.audioIcon} title={strings.ModernAudioMute} disabled={muted} onClick={muteAudio} />

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -63,7 +63,7 @@ export interface IModernTaxonomyPickerProps {
   onRenderActionButton?: (termStoreInfo: ITermStoreInfo, termSetInfo: ITermSetInfo, termInfo?: ITermInfo) => JSX.Element;
 }
 
-export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
+export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps): JSX.Element {
   const taxonomyService = useMemo(()=>new SPTaxonomyService(props.context), [props.context]);
   const [panelIsOpen, setPanelIsOpen] = React.useState(false);
   const initialLoadComplete = React.useRef(false);
@@ -87,15 +87,24 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
           props.initialValues.map(term => { return { ...term, languageTag: languageTag, termStoreInfo: termStoreInfo } as ITermInfo; }) :
           []);
           initialLoadComplete.current = true;
+      })
+      .catch(() => {
+        // no-op;
       });
     taxonomyService.getTermSetInfo(Guid.parse(props.termSetId))
       .then((termSetInfo) => {
         setCurrentTermSetInfo(termSetInfo);
+      })
+      .catch(() => {
+        // no-op;
       });
     if (props.anchorTermId && props.anchorTermId !== Guid.empty.toString()) {
       taxonomyService.getTermById(Guid.parse(props.termSetId), props.anchorTermId ? Guid.parse(props.anchorTermId) : Guid.empty)
         .then((anchorTermInfo) => {
           setCurrentAnchorTermInfo(anchorTermInfo);
+        })
+        .catch(() => {
+          // no-op;
         });
     }
   }, [currentTermStoreInfo?.defaultLanguageTag, props.anchorTermId, props.context.pageContext, props.initialValues, props.termSetId, taxonomyService]);
@@ -212,7 +221,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
     if(props.isPathRendered) {
       let currentTermProps = itemProps.item;
       while(currentTermProps.parent !== undefined) {
-        let currentParentLabels = getLabelsForCurrentLanguage(currentTermProps.parent);
+        const currentParentLabels = getLabelsForCurrentLanguage(currentTermProps.parent);
         fullParentPrefixes.push(currentParentLabels[0].name);
         currentTermProps = currentTermProps.parent;
       }

src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.tsx

@@ -51,7 +51,7 @@ export function TaxonomyPanelContents(props: ITaxonomyPanelContentsProps): React
       onSelectionChanged: () => {
         props.setSelectedPanelOptions((prevOptions) => [...selection.getSelection()]);
         forceUpdate();
-      }, getKey: (term: any) => term.id
+      }, getKey: (term: any) => term.id // eslint-disable-line @typescript-eslint/no-explicit-any
     });
     s.setItems(terms);
     for (const selectedOption of props.selectedPanelOptions) {