React: remove usages of deprecated methods

seiri-client-internals/package.json

@@ -16,8 +16,8 @@
     "react-debounce-input": "^3.2.3",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
+    "react-markdown": "^5.0.3",
     "react-redux": "^7.2.2",
-    "react-remarkable": "^1.1.3",
     "react-virtualized": "^9.22.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

seiri-client-internals/src/BangHelper.tsx

@@ -1,10 +1,11 @@
 // @ts-ignore
-import * as Markdown from "react-remarkable";
+import Markdown from "react-markdown";
 import './BangHelper.css';
 
-const helper = ({hidden}: {hidden: boolean}) => (
+const helper = ({ hidden }: { hidden: boolean }) => (
   <div className={hidden ? "bang-help hidden" : "bang-help"}>
-    <Markdown>{`
+    <div>
+      <Markdown>{`
 # *seiri* Bang Reference
 Bangs can be used to query your library in more specific ways. Bangs start with an exclamation mark, and
 take a parameter enclosed in curly braces, for example
@@ -82,7 +83,8 @@ For example, **!!{!t{Hotel California} & !ar{The Eagles}} | !!{!t{Hey Jude} & !a
 tracks with the title "Hotel California" and the artist "The Eagles", or tracks with the title "Hey Jude" and 
 the artist "The Beatles".
     `}
-    </Markdown>
+      </Markdown>
+    </div>
   </div>
 );
 

seiri-client-internals/src/TrackTable.tsx

@@ -46,6 +46,8 @@ interface TrackTableState {
   selected: boolean[] | undefined;
   cursor: number | undefined;
   pivot: number | undefined;
+  prevTrackLength?: number,
+  prevQuery?: string,
 }
 
 const TOTAL_WIDTH = 3000;
@@ -81,7 +83,7 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
       },
       sortBy,
       sortDirection,
-      sortedList: this.sortList({ list: this.props.tracks, sortBy, sortDirection }),
+      sortedList: TrackTable.sortList({ list: this.props.tracks, sortBy, sortDirection }),
       selected: [],
       cursor: undefined,
       pivot: undefined,
@@ -104,7 +106,7 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
           // everything between the cursor and the pivot is selected.
           let newSelectionKeys = [];
           const selected = [];
-          const lastSelected = this.state.pivot ?? 0;
+          const lastSelected = this.state.pivot ?? newSelected;
 
           if (newSelected > lastSelected) {
             newSelectionKeys = range(lastSelected, newSelected + 1);
@@ -115,32 +117,32 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
           for (const key of newSelectionKeys) {
             selected[key] = true;
           }
-
-          this.setState({ selected, cursor: newSelected });
+          
+          this.setState(this.asSelected(selected, newSelected, this.state.pivot ?? newSelected));
           return;
         } else if (event.ctrlKey) {
           this.setState({ cursor: newSelected });
           this.tableRef?.current?.scrollToPosition(newSelected);
         } else {
           const clearState = [];
           clearState[newSelected] = true;
-          this.setState({ selected: clearState, cursor: newSelected, pivot: newSelected });
+          this.setState(this.asSelected(clearState, newSelected, newSelected));
           this.tableRef?.current?.scrollToPosition(newSelected);
         }
       }
 
     });
     Mousetrap.bindGlobal(['command+r', 'ctrl+r'], () => {
       const tracksToRefresh = this.state.sortedList.filter(
-        (track, index) => this.state.selected?.[index] === true
+        (_track, index) => this.state.selected?.[index] === true
       ).map(track => track.filePath);
 
       window.seiri.refreshTracks(tracksToRefresh)
       // tslint:disable-next-line:no-console
-      console.log("REFRESHED!");
+      // console.log("REFRESHED!");
       // tslint:disable-next-line:no-console
-      console.log(tracksToRefresh);
-      this.setState({ selected: [], cursor: undefined, pivot: undefined });
+      // console.log(tracksToRefresh);
+      this.setState(this.asSelected([], undefined, undefined));
       this.props.dispatch?.(updateTracksTick.action({}));
       return false;
     });
@@ -155,21 +157,29 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
     this.hasCoverArtCellRenderer = this.hasCoverArtCellRenderer.bind(this);
   }
 
-  componentWillUpdate(nextProps: TrackTableProps, nextState: TrackTableState) {
-    this.props.dispatch?.(updateSelectedCount({ count: nextState.selected?.filter(s => s).length ?? 0 }));
+  asSelected(selected: boolean[], cursor: number | undefined, pivot: number | undefined) 
+  {
+    this.props.dispatch?.(updateSelectedCount({ count: selected.filter(s => s).length ?? 0 }));
+    return { selected, cursor, pivot }
   }
 
-  componentWillReceiveProps(newProps: TrackTableProps) {
-    const { sortBy, sortDirection } = this.state;
-    if (newProps.query !== this.props.query || newProps.tracks.length !== this.props.tracks.length) {
-      this.setState({
-        sortedList: this.sortList({ list: newProps.tracks, sortBy, sortDirection }),
+  static getDerivedStateFromProps(newProps: TrackTableProps, prevState: TrackTableState) 
+  {
+    const { sortBy, sortDirection, prevQuery, prevTrackLength } = prevState;
+
+    // Need this so setting selected stuff actually works
+    if (newProps.query !== prevQuery || newProps.tracks.length !== prevTrackLength) {
+      newProps.dispatch?.(updateSelectedCount({ count: 0 }))
+      return { 
+        sortedList: TrackTable.sortList({ list: newProps.tracks, sortBy, sortDirection }),
         selected: [],
-        cursor: undefined,
+        cursor: undefined, 
         pivot: undefined,
-      });
+        prevQuery: newProps.query,
+        prevTrackLength: newProps.tracks.length
+      }
     } else {
-      this.setState({ sortedList: this.sortList({ list: newProps.tracks, sortBy, sortDirection }) });
+      return { sortedList: TrackTable.sortList({ list: newProps.tracks, sortBy, sortDirection }) }
     }
   }
 
@@ -209,17 +219,15 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
     sortBy: string;
     sortDirection: SortDirectionType;
   }) {
-    const sortedList = this.sortList({ list: this.props.tracks, sortBy, sortDirection });
+    const sortedList = TrackTable.sortList({ list: this.props.tracks, sortBy, sortDirection });
 
     this.setState({ 
       sortBy, sortDirection, sortedList,
-      selected: [],
-      cursor: undefined,
-      pivot: undefined
+      ...this.asSelected([], undefined, undefined)
     });
   }
 
-  sortList({
+  static sortList({
     list,
     sortBy,
     sortDirection
@@ -236,7 +244,7 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
   }
 
   headerResizeHandler(dataKey: string, event: MouseEvent, { deltaX }: DraggableData) {
-    
+
     this.resizeRow({
       dataKey,
       deltaX
@@ -362,13 +370,12 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
 
   // tslint:disable:no-shadowed-variable
   handleClick(event: RowMouseEventHandlerParams) {
-    // tslint:disable-next-line:no-console
     const mouseEvent = event.event;
     if (this.state.pivot === undefined) {
       const newSelection = !!!this.state.selected?.[event.index];
       const clearState = [];
       clearState[event.index] = newSelection;
-      this.setState({ selected: clearState, cursor: event.index, pivot: event.index });
+      this.setState(this.asSelected(clearState, event.index, event.index));
       return;
     }
     if (mouseEvent.shiftKey) {
@@ -384,21 +391,22 @@ class TrackTable extends React.Component<TrackTableProps, TrackTableState> {
       for (const key of newSelectionKeys) {
         selected[key] = true;
       }
-      this.setState({ selected, cursor: event.index, pivot: event.index });
+      this.setState(this.asSelected(selected, event.index, this.state.pivot));
       return;
     }
     if (mouseEvent.ctrlKey) {
       const selected = this.state.selected;
       if (selected) {
         selected[event.index] = !!!this.state.selected?.[event.index];
+        this.setState(this.asSelected(selected, event.index, event.index));
       }
-      this.setState({ selected, cursor: event.index, pivot: event.index });
       return;
     }
-    const newSelection = !!!this.state.selected?.[event.index];
+
+    const newSelection = this.state.pivot !== event.index;
     const clearState = [];
     clearState[event.index] = newSelection;
-    this.setState({ selected: clearState, cursor: event.index, pivot: event.index });
+    this.setState(this.asSelected(clearState, event.index, newSelection ? event.index : undefined));
     return;
   }
 

seiri-client-internals/src/View.css

@@ -51,6 +51,7 @@
 .hidden {
     visibility: hidden;
 }
+
 .btn-quit:focus {
     outline: none;
 }

seiri-client-internals/src/View.tsx

@@ -43,29 +43,24 @@ class View extends React.Component<ViewProps, ViewState> {
       showBangs: false,
     }
     window.addEventListener("keydown", event => {
+      event.key
       if (!(event.ctrlKey || event.altKey || event.key === "ArrowUp" || event.key === "ArrowDown")) {
         this.queryInput?.focus();
-        return false;
-      } else {
-        return true;
       }
     });
   }
 
-  componentWillReceiveProps(newProps: ViewProps) {
+  static getDerivedStateFromProps(newProps: ViewProps) {
     if (newProps.query === "??bangs") {
-      // tslint:disable-next-line:no-console
-      console.log("bang query detcted.");
-      this.setState({ showBangs: true })
-
+      return { showBangs: true }
     } else {
-      this.setState({ showBangs: false })
+      return { showBangs: false }
     }
   }
 
   render() {
     return (
-      <div className={this.props.tracks.length === 0 ? "container no-overflow" : "container"}>
+      <div className="container no-overflow">
 
         <div className="main-bar">
         <button className="btn-quit" onClick={() => this.hide()}>

seiri-client-internals/src/actions.ts

@@ -48,9 +48,6 @@ export const updateTracksTick = createAsync<{}, {}>("UPDATE_TRACKS_TICK", (query
     const state = getState();
     try {
         const tracks = window.seiri.queryTracks(state.query)
-        console.log(tracks)
-         // tslint:disable-next-line:no-console
-        console.log("tick!")
         dispatch(updateTracks(tracks))
     } catch (err) {
         // tslint:disable-next-line:no-console