From a177a3749b75d2f30c6bb6327f5f470dcf51317f Mon Sep 17 00:00:00 2001
From: Ishaan Shah <ishaan.n.shah@gmail.com>
Date: Sun, 12 Apr 2020 19:28:58 +0530
Subject: [PATCH 1/4] Fix ESLint errors

---
 .../webserver/static/js/src/FollowUsers.tsx   | 149 +++++++++---------
 .../webserver/static/js/src/RecentListens.tsx |  12 +-
 .../webserver/static/js/src/types.d.ts        |  11 +-
 3 files changed, 83 insertions(+), 89 deletions(-)

diff --git a/listenbrainz/webserver/static/js/src/FollowUsers.tsx b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
index 389fb9f6b9..6091937923 100644
--- a/listenbrainz/webserver/static/js/src/FollowUsers.tsx
+++ b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
@@ -1,7 +1,3 @@
-/* eslint-disable */
-// TODO: Make the code ESLint compliant
-// TODO: Port to typescript
-
 import {
   faPlusCircle,
   faSave,
@@ -11,37 +7,40 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import * as React from "react";
 import { isNil as _isNil } from "lodash";
 import { getArtistLink, getPlayButton, getTrackLink } from "./utils";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type FollowUsersProps = {
-  followList?: Array<string>,
-  saveUrl?: string,
-  listId: number,
-  listName: string,
+  followList?: Array<string>;
+  saveUrl?: string;
+  listId?: number;
+  listName?: string;
   onUserListChange: (users: Array<string>) => void;
-  creator: ListenBrainzUser,
+  creator: ListenBrainzUser;
   newAlert: (
     alertType: AlertType,
     title: string,
     message?: string | JSX.Element
-  ) => void,
-  playingNow: FollowUsersPlayingNow,
-  playListen: (listen: Listen) => void,
-}
+  ) => void;
+  playingNow: FollowUsersPlayingNow;
+  playListen: (listen: Listen) => void;
+};
 
 type FollowUsersState = {
-  users: Array<string>,
-  saveUrl: string,
-  listId: number | null,
-  listName: string,
-}
+  users: Array<string>;
+  saveUrl: string;
+  listId: number | undefined;
+  listName: string | undefined;
+};
 
-export default class FollowUsers extends React.Component<FollowUsersProps, FollowUsersState> {
-  private textInput =  React.createRef<HTMLInputElement>();
-  private nameInput =  React.createRef<HTMLInputElement>();
+export default class FollowUsers extends React.Component<
+  FollowUsersProps,
+  FollowUsersState
+> {
+  private textInput = React.createRef<HTMLInputElement>();
+  private nameInput = React.createRef<HTMLInputElement>();
   constructor(props: FollowUsersProps) {
     super(props);
     this.state = {
@@ -59,10 +58,10 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
     if (!this.textInput) return;
     if (!this.textInput.current) return;
     const currentValue: string = this.textInput.current.value;
-    const {users} = this.state;
+    const { users } = this.state;
     if (
-      (currentValue === "" ||
-      users.find((user: string) => user === currentValue))
+      currentValue === "" ||
+      users.find((user: string) => user === currentValue)
     ) {
       return;
     }
@@ -74,12 +73,11 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
         if (this.textInput && this.textInput.current) {
           this.textInput.current.value = "";
         }
-        const {onUserListChange} = this.props;
-        const {users} = this.state;
+        const { onUserListChange } = this.props;
         onUserListChange(users);
       }
     );
-  }
+  };
 
   removeUserFromList = (index: number): void => {
     this.setState(
@@ -88,30 +86,32 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
         return { users: prevState.users };
       },
       () => {
-        const {onUserListChange} = this.props;
-        const {users} = this.state;
+        const { onUserListChange } = this.props;
+        const { users } = this.state;
         onUserListChange(users);
       }
     );
-  }
+  };
 
   saveFollowList = (): void => {
     if (!this.nameInput) return;
     if (!this.nameInput.current) return;
 
-    const { listName , users, listId, saveUrl } = this.state;
-    const {creator, newAlert} = this.props;
+    const { listName, users, listId, saveUrl } = this.state;
+    const { creator, newAlert } = this.props;
 
     let finalListName = listName;
-    if (!_isNil(this.nameInput.current.value) && this.nameInput.current.value.length) {
+    if (
+      !_isNil(this.nameInput.current.value) &&
+      this.nameInput.current.value.length
+    ) {
       finalListName = this.nameInput.current.value;
     }
 
-
     fetch(saveUrl, {
       method: "POST",
       body: JSON.stringify({
-        users: users,
+        users,
         name: finalListName,
         id: listId,
       }),
@@ -125,35 +125,38 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
         return response.json();
       })
       .then((data) => {
-        console.debug(data);
-        this.setState(
-            { listId: data.list_id }
-        );
+        this.setState({ listId: data.list_id });
       })
       .catch((error) => {
-        console.error(error);
         newAlert("danger", "Could not save list", error.message);
       });
-  }
+  };
 
   newFollowList = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.preventDefault();
-    this.setState(
-      {
-        users: [],
-        listId: null,
-        listName: "",
-      }
-    );
+    this.setState({
+      users: [],
+      listId: undefined,
+      listName: "",
+    });
     if (this.nameInput && this.nameInput.current) {
       this.nameInput.current.value = "";
     }
-  }
+  };
 
-  addFollowerOnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    event.preventDefault()
+  addFollowerOnClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.preventDefault();
     this.addUserToList();
-  }
+  };
+
+  saveListOnClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    this.saveFollowList();
+  };
 
   addFollowerOnEnter(event: React.KeyboardEvent<HTMLInputElement>) {
     event.preventDefault();
@@ -162,11 +165,6 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
     }
   }
 
-  saveListOnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    event.preventDefault();
-    this.saveFollowList()
-  }
-
   saveListOnEnter(event: React.KeyboardEvent<HTMLInputElement>) {
     event.preventDefault();
     if (event.key === "Enter") {
@@ -175,10 +173,13 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
   }
 
   render() {
+    const { listName, users } = this.state;
+    const { playingNow, playListen } = this.props;
     const noTopBottomPadding = {
       paddingTop: 0,
       paddingBottom: 0,
     };
+
     return (
       <div className="panel panel-primary">
         <div className="panel-heading">
@@ -225,7 +226,7 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
                 <input
                   type="text"
                   className="form-control"
-                  defaultValue={this.state.listName}
+                  defaultValue={listName}
                   placeholder="New list name"
                   ref={this.nameInput}
                   onKeyPress={this.saveListOnEnter}
@@ -255,41 +256,37 @@ export default class FollowUsers extends React.Component<FollowUsersProps, Follo
               <tr>
                 <th>User</th>
                 <th>Listening now</th>
-                <th style={{width: "50px"}} />
-                <th style={{width: "65px"}} />
+                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                <th style={{ width: "50px" }} />
+                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                <th style={{ width: "65px" }} />
               </tr>
             </thead>
             <tbody>
-              {this.state.users.map((user, index) => {
+              {users.map((user, index) => {
                 return (
                   <tr
                     key={user}
-                    className={this.props.playingNow[user] && "playing_now"}
-                    onDoubleClick={this.props.playListen.bind(
-                      this,
-                      this.props.playingNow[user]
-                    )}
+                    className={playingNow[user] && "playing_now"}
+                    onDoubleClick={playListen.bind(this, playingNow[user])}
                   >
                     <td>{user}</td>
                     <td>
-                      {this.props.playingNow[user] && (
+                      {playingNow[user] && (
                         <>
-                          {getTrackLink(this.props.playingNow[user])}
+                          {getTrackLink(playingNow[user])}
                           <span className="small">
                             {" "}
-                            — {getArtistLink(this.props.playingNow[user])}
+                            — {getArtistLink(playingNow[user])}
                           </span>
                         </>
                       )}
                     </td>
                     <td className="playButton">
-                      {this.props.playingNow[user] &&
+                      {playingNow[user] &&
                         getPlayButton(
-                          this.props.playingNow[user],
-                          this.props.playListen.bind(
-                            this,
-                            this.props.playingNow[user]
-                          )
+                          playingNow[user],
+                          playListen.bind(this, playingNow[user])
                         )}
                     </td>
                     <td style={noTopBottomPadding}>
diff --git a/listenbrainz/webserver/static/js/src/RecentListens.tsx b/listenbrainz/webserver/static/js/src/RecentListens.tsx
index 75bac1ed8a..05c46bd367 100644
--- a/listenbrainz/webserver/static/js/src/RecentListens.tsx
+++ b/listenbrainz/webserver/static/js/src/RecentListens.tsx
@@ -10,8 +10,7 @@ import * as ReactDOM from "react-dom";
 import * as _ from "lodash";
 import * as io from "socket.io-client";
 import SpotifyPlayer from "./SpotifyPlayer";
-// @ts-ignore
-import { FollowUsers } from "./follow-users";
+import FollowUsers from "./FollowUsers";
 import APIService from "./APIService";
 import {
   getArtistLink,
@@ -37,7 +36,7 @@ export interface RecentListensProps {
   profileUrl?: string;
   saveUrl?: string;
   spotify: SpotifyUser;
-  user: User;
+  user: ListenBrainzUser;
   webSocketsServerUrl: string;
 }
 
@@ -392,7 +391,7 @@ class RecentListens extends React.Component<
                         <th>User</th>
                       )}
                       {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-                      <th />
+                      <th style={{ width: "50px" }} />
                     </tr>
                   </thead>
                   <tbody>
@@ -406,11 +405,10 @@ class RecentListens extends React.Component<
                         }
                         return 0;
                       })
-                      .map((listen, index) => {
+                      .map((listen) => {
                         return (
                           <tr
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={index}
+                            key={listen}
                             onDoubleClick={this.playListen.bind(this, listen)}
                             className={`listen ${
                               this.isCurrentListen(listen) ? "info" : ""
diff --git a/listenbrainz/webserver/static/js/src/types.d.ts b/listenbrainz/webserver/static/js/src/types.d.ts
index ab9a79bc14..dad7e37a81 100644
--- a/listenbrainz/webserver/static/js/src/types.d.ts
+++ b/listenbrainz/webserver/static/js/src/types.d.ts
@@ -4,7 +4,11 @@ declare module "time-ago";
 
 // TODO: make this type specific
 declare type Listen = any;
-declare type ListenBrainzUser = any;
+declare type ListenBrainzUser = {
+  id?: string;
+  name: string;
+  auth_token?: string;
+};
 
 declare type ListenType = "single" | "playingNow" | "import";
 
@@ -41,11 +45,6 @@ declare type Alert = {
 };
 
 declare type FollowUsersPlayingNow = any;
-declare type User = {
-  id?: string;
-  name: string;
-  auth_token?: string;
-};
 
 declare type LastFmScrobblePage = {
   recenttracks: {

From 9df617f2a3d76ca65929c277d4cd6aec903323da Mon Sep 17 00:00:00 2001
From: Ishaan Shah <ishaan.n.shah@gmail.com>
Date: Sun, 12 Apr 2020 20:39:25 +0530
Subject: [PATCH 2/4] Fix types

---
 listenbrainz/webserver/static/js/src/FollowUsers.tsx   |  4 ++--
 listenbrainz/webserver/static/js/src/RecentListens.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/listenbrainz/webserver/static/js/src/FollowUsers.tsx b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
index 6091937923..61e5aab5e5 100644
--- a/listenbrainz/webserver/static/js/src/FollowUsers.tsx
+++ b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
@@ -17,10 +17,10 @@ type FollowUsersProps = {
   saveUrl?: string;
   listId?: number;
   listName?: string;
-  onUserListChange: (users: Array<string>) => void;
+  onUserListChange: (users: Array<string>, dontSendUpdate?: boolean) => void;
   creator: ListenBrainzUser;
   newAlert: (
-    alertType: AlertType,
+    type: AlertType,
     title: string,
     message?: string | JSX.Element
   ) => void;
diff --git a/listenbrainz/webserver/static/js/src/RecentListens.tsx b/listenbrainz/webserver/static/js/src/RecentListens.tsx
index 05c46bd367..be0f9a6012 100644
--- a/listenbrainz/webserver/static/js/src/RecentListens.tsx
+++ b/listenbrainz/webserver/static/js/src/RecentListens.tsx
@@ -23,7 +23,7 @@ export interface RecentListensProps {
   apiUrl: string;
   artistCount?: number | null | undefined;
   followList?: string[];
-  followListId?: string;
+  followListId?: number;
   followListName?: string;
   haveListenCount?: boolean;
   latestListenTs?: number;
@@ -46,7 +46,7 @@ export interface RecentListensState {
   currentListen: Listen;
   direction: SpotifyPlayDirection;
   followList: Array<string>;
-  listId: string;
+  listId?: number;
   listName: string;
   listens: Array<Listen>;
   mode: "listens" | "follow" | "recent";
@@ -76,7 +76,7 @@ class RecentListens extends React.Component<
       playingNowByUser: {},
       saveUrl: props.saveUrl || "",
       listName: props.followListName || "",
-      listId: props.followListId || "",
+      listId: props.followListId || undefined,
       direction: "down",
     };
 
@@ -121,7 +121,7 @@ class RecentListens extends React.Component<
 
   handleFollowUserListChange = (
     userList: string[],
-    dontSendUpdate: boolean
+    dontSendUpdate?: boolean
   ): void => {
     const { mode } = this.state;
     const { user } = this.props;
@@ -249,7 +249,7 @@ class RecentListens extends React.Component<
   newAlert = (
     type: AlertType,
     title: string,
-    message: string | JSX.Element
+    message?: string | JSX.Element
   ): void => {
     const newAlert = {
       id: new Date().getTime(),

From 5cdb98e14c3cad8692c1dd503ba39a7c28435e24 Mon Sep 17 00:00:00 2001
From: Ishaan Shah <ishaan.n.shah@gmail.com>
Date: Sun, 12 Apr 2020 20:57:52 +0530
Subject: [PATCH 3/4] Fix input problem

---
 listenbrainz/webserver/static/js/src/FollowUsers.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/listenbrainz/webserver/static/js/src/FollowUsers.tsx b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
index 61e5aab5e5..774154e3f3 100644
--- a/listenbrainz/webserver/static/js/src/FollowUsers.tsx
+++ b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
@@ -39,8 +39,8 @@ export default class FollowUsers extends React.Component<
   FollowUsersProps,
   FollowUsersState
 > {
-  private textInput = React.createRef<HTMLInputElement>();
-  private nameInput = React.createRef<HTMLInputElement>();
+  textInput = React.createRef<HTMLInputElement>();
+  nameInput = React.createRef<HTMLInputElement>();
   constructor(props: FollowUsersProps) {
     super(props);
     this.state = {
@@ -159,14 +159,12 @@ export default class FollowUsers extends React.Component<
   };
 
   addFollowerOnEnter(event: React.KeyboardEvent<HTMLInputElement>) {
-    event.preventDefault();
     if (event.key === "Enter") {
       this.addUserToList();
     }
   }
 
   saveListOnEnter(event: React.KeyboardEvent<HTMLInputElement>) {
-    event.preventDefault();
     if (event.key === "Enter") {
       this.saveFollowList();
     }

From e81c42b0576173f0fa1ddb7538a434be600b44db Mon Sep 17 00:00:00 2001
From: Ishaan Shah <ishaan.n.shah@gmail.com>
Date: Sun, 12 Apr 2020 21:30:50 +0530
Subject: [PATCH 4/4] Fix "Save List"

---
 listenbrainz/webserver/static/js/src/FollowUsers.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/listenbrainz/webserver/static/js/src/FollowUsers.tsx b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
index 774154e3f3..6ebcf07dd8 100644
--- a/listenbrainz/webserver/static/js/src/FollowUsers.tsx
+++ b/listenbrainz/webserver/static/js/src/FollowUsers.tsx
@@ -107,13 +107,12 @@ export default class FollowUsers extends React.Component<
     ) {
       finalListName = this.nameInput.current.value;
     }
-
     fetch(saveUrl, {
       method: "POST",
       body: JSON.stringify({
         users,
         name: finalListName,
-        id: listId,
+        id: listId === undefined ? listId : null,
       }),
       headers: { Authorization: `Token ${creator.auth_token}` },
     })
@@ -121,7 +120,7 @@ export default class FollowUsers extends React.Component<
         if (!response.ok) {
           throw Error(response.statusText);
         }
-        newAlert("success", "Successfully saved list");
+        newAlert("success", "Successfully saved list", "Success");
         return response.json();
       })
       .then((data) => {