Fix client-side warnings.

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import AppBar, { ActiveTab as AppBarActiveTab } from './components/AppBar';
 import { Query, isQuery, QueryKeys, QueryOrdering, OrderKey, TypesIncluded, isTypesIncluded, isQueryOrdering } from './types/Query';
@@ -6,8 +6,6 @@ import QueryBrowseWindow from './components/QueryBrowseWindow';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import * as serverApi from './api';
-
 import {
   BrowserRouter as Router,
   Switch,
@@ -18,7 +16,6 @@ import {
 } from "react-router-dom";
 
 const JSURL = require('jsurl');
-const _ = require('lodash');
 
 function fixQuery(q: any): Query {
   if (!isQuery(q)) {
@@ -61,9 +58,6 @@ function AppBody() {
   const itemOrder: QueryOrdering | undefined = JSURL.tryParse(queryParams.get('order'), undefined);
   const itemTypes: TypesIncluded | undefined = JSURL.tryParse(queryParams.get('types'), undefined);
 
-  const offset: number | undefined = queryParams.get('offset') ? parseInt(queryParams.get('offset') || '0') : undefined;
-  const limit: number | undefined = queryParams.get('limit') ? parseInt(queryParams.get('limit') || '0') : undefined;
-
   const pushQuery = (
     q: Query,
     o: QueryOrdering,
@@ -82,11 +76,11 @@ function AppBody() {
     const fq = fixQuery(itemQuery);
     const fo = fixOrder(itemOrder);
     const ft = fixTypes(itemTypes);
-    if (fq != itemQuery || fo != itemOrder || ft != itemTypes) {
+    if (fq !== itemQuery || fo !== itemOrder || ft !== itemTypes) {
       pushQuery(fq, fo, ft);
       return;
     }
-  }, [location]);
+  });
 
   const onAppBarTabChange = (value: AppBarActiveTab) => {
     switch (value) {

client/src/api.ts

@@ -121,7 +121,7 @@ export function checkQueryElem(elem: any): boolean {
     }
     return (elem.childrenOperator && elem.children) ||
         (elem.prop && elem.propOperand && elem.propOperator) ||
-        Object.keys(elem).length == 0;
+        Object.keys(elem).length === 0;
 }
 export function checkQueryRequest(req: any): boolean {
     return 'query' in req

client/src/components/BrowseWindow.tsx

@@ -23,29 +23,29 @@ function toDisplayItem(item: Item): DisplayItem | undefined {
     if (serverApi.isSongDetails(item)) {
         return {
             title: item.title,
-            artistNames: item.artists && item.artists.map((artist: serverApi.ArtistDetails) => {
+            artistNames: (item.artists && item.artists.map((artist: serverApi.ArtistDetails) => {
                 return artist.name;
-            }) || ['Unknown'],
-            tagNames: item.tags && item.tags.map((tag: serverApi.TagDetails) => {
+            })) || ['Unknown'],
+            tagNames: (item.tags && item.tags.map((tag: serverApi.TagDetails) => {
                 return tag.name;
-            }) || [],
-            storeLinks: item.storeLinks && item.storeLinks.map((url: String) => {
+            })) || [],
+            storeLinks: (item.storeLinks && item.storeLinks.map((url: String) => {
                 return {
                     icon: getStoreIcon(url),
                     url: url
                 }
-            }) || [],
+            })) || [],
         }
     } else if (serverApi.isArtistDetails(item)) {
         return {
             name: item.name ? item.name : "Unknown",
             tagNames: [], // TODO
-            storeLinks: item.storeLinks && item.storeLinks.map((url: String) => {
+            storeLinks: (item.storeLinks && item.storeLinks.map((url: String) => {
                 return {
                     icon: getStoreIcon(url),
                     url: url
                 }
-            }) || [],
+            })) || [],
         };
 
     }

client/src/components/DraggableItemListItem.tsx

@@ -4,7 +4,7 @@ import { useDrag } from 'react-dnd';
 import { dragTypes } from '../types/DragTypes';
 
 export default function DraggableItemListItem(props: any) {
-    const [{ isDragging: boolean }, drag] = useDrag({
+    const [ /*{ isDragging: boolean }*/ , drag] = useDrag({
         item: { type: dragTypes.ListItem },
         collect: (monitor: any) => ({
             isDragging: !!monitor.isDragging(),

client/src/components/FilterControl.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
 import {
     TextField,
@@ -170,11 +170,6 @@ export function FilterControlLeaf(props: IProps) {
 }
 
 export function FilterControlNode(props: IProps) {
-    const selectTypeOptions: string[] = ['And', 'Or'];
-    const selectTypeOption: string = (props.query && isAndQuery(props.query) && 'And') ||
-        (props.query && isOrQuery(props.query) && 'Or') ||
-        "Unknown";
-
     return <>
         {props.query && isAndQuery(props.query) && <AndNodeControl {...props} />}
         {props.query && isOrQuery(props.query) && <OrNodeControl {...props} />}

client/src/components/ItemListLoadedArtistItem.tsx

@@ -24,7 +24,7 @@ export default function ItemListLoadedArtistItem(props: IProps) {
                 return <Chip label={tag}/>
             })}
             {props.item.storeLinks.map((link: any) => {
-                return <a href={link.url} target="_blank">
+                return <a href={link.url} target="_blank" rel="noopener noreferrer">
                     <ListItemIcon>
                         {link.icon}
                     </ListItemIcon>

client/src/components/ItemListLoadedSongItem.tsx

@@ -30,7 +30,7 @@ export default function ItemListLoadedSongItem(props: IProps) {
                 return <Chip label={tag}/>
             })}
             {props.item.storeLinks.map((link: any) => {
-                return <a href={link.url} target="_blank">
+                return <a href={link.url} target="_blank" rel="noopener noreferrer">
                     <ListItemIcon>
                         {link.icon}
                     </ListItemIcon>

client/src/components/QueryBrowseWindow.tsx

@@ -72,7 +72,7 @@ function OrderingWidget(props: OrderingWidgetProps) {
     const onAscendingChange = (e: any) => {
         props.onChange({
             [QueryKeys.OrderBy]: props.ordering[QueryKeys.OrderBy],
-            [QueryKeys.Ascending]: (e.target.value == 'asc'),
+            [QueryKeys.Ascending]: (e.target.value === 'asc'),
         });
     }
 
@@ -166,7 +166,7 @@ export default function QueryBrowseWindow(props: IProps) {
                 'songs' in json && match && setSongs(json.songs);
                 'artists' in json && match && setArtists(json.artists);
             });
-    }, [props.query]);
+    });
 
     return <>
         <FormControl component='fieldset'>

client/src/types/Query.tsx

@@ -1,5 +1,4 @@
-import { QueryElemProperty, QueryFilterOp, QueryElemOp, Ordering, OrderByType } from '../api';
-import { ServerStreamResponseOptions } from 'http2';
+import { QueryElemProperty, QueryFilterOp, QueryElemOp } from '../api';
 
 export enum QueryKeys {
     TitleLike = 'tl',