From e1430e6179cf23e36f37e98ef71fb39dcff16394 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Sun, 22 Mar 2020 02:26:59 +0000
Subject: [PATCH] Add artist music filter

---
 src/showplanner/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index a54941d..69a08bd 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -241,13 +241,15 @@ function Column({ id, data }: { id: number; data: PlanItem[] }) {
 
 function CentralMusicLibrary() {
   const [track, setTrack] = useState("");
+  const [artist, setArtist] = useState("");
   const debouncedTrack = useDebounce(track, 1000);
+  const debouncedArtist = useDebounce(artist, 1000);
   const [items, setItems] = useState<Track[]>([]);
   useEffect(() => {
-    if (debouncedTrack === "") {
+    if (debouncedTrack === "" && debouncedArtist === "") {
       return;
     }
-    searchForTracks("", track).then(tracks => {
+    searchForTracks(artist, track).then(tracks => {
       tracks.forEach(track => {
         const id = itemId(track);
         if (!(id in CML_CACHE)) {
@@ -256,7 +258,7 @@ function CentralMusicLibrary() {
       });
       setItems(tracks);
     });
-  }, [debouncedTrack]);
+  }, [debouncedTrack, debouncedArtist]);
   return (
     <>
       <input
@@ -265,6 +267,12 @@ function CentralMusicLibrary() {
         value={track}
         onChange={e => setTrack(e.target.value)}
       />
+      <input
+        type="text"
+        placeholder="Filter by artist..."
+        value={artist}
+        onChange={e => setArtist(e.target.value)}
+      />
       <Droppable droppableId="$CML">
         {(provided, snapshot) => (
           <div ref={provided.innerRef} {...provided.droppableProps}>