From 49d4f45bddc13cb4a795a562e7bf6eb8eade9968 Mon Sep 17 00:00:00 2001
From: Axel Boberg <git@axelboberg.se>
Date: Thu, 11 Jan 2024 09:55:21 +0100
Subject: [PATCH] Add a refresh button to the library and clear the state on
 server change

Signed-off-by: Axel Boberg <git@axelboberg.se>
---
 plugins/caspar/app/components/LibraryHeader/index.jsx |  3 +++
 plugins/caspar/app/components/LibraryHeader/style.css | 10 +++++++++-
 plugins/caspar/app/views/Library.jsx                  |  5 +++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/plugins/caspar/app/components/LibraryHeader/index.jsx b/plugins/caspar/app/components/LibraryHeader/index.jsx
index f23fd80..b0c7e73 100644
--- a/plugins/caspar/app/components/LibraryHeader/index.jsx
+++ b/plugins/caspar/app/components/LibraryHeader/index.jsx
@@ -31,6 +31,9 @@ export const LibraryHeader = ({ onChange = () => {} }) => {
           onChange={e => handleFilterValue('query', e.target.value)}
         />
       </div>
+      <div className='LibraryHeader-refresh'>
+        <button className='Button Button--small' onClick={() => handleFilterValue('refresh', Math.floor(Math.random() * 100))}>Refresh</button>
+      </div>
     </header>
   )
 }
diff --git a/plugins/caspar/app/components/LibraryHeader/style.css b/plugins/caspar/app/components/LibraryHeader/style.css
index adf91b1..6ee2e8e 100644
--- a/plugins/caspar/app/components/LibraryHeader/style.css
+++ b/plugins/caspar/app/components/LibraryHeader/style.css
@@ -6,6 +6,10 @@
   width: 100%;
 }
 
+.LibraryHeader-refresh {
+  margin: 0 5px 5px;
+}
+
 @media screen and (min-width: 350px) {
   .LibraryHeader {
     display: flex;
@@ -15,6 +19,10 @@
   .LibraryHeader-serverSelector {
     width: 45%;
   }
+
+  .LibraryHeader-refresh {
+    margin: 0 5px 5px 0;
+  }
 }
 
 .LibraryHeader-search {
@@ -25,4 +33,4 @@
 
 .LibraryHeader-search input {
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/plugins/caspar/app/views/Library.jsx b/plugins/caspar/app/views/Library.jsx
index 4b36f1f..5f2ade9 100644
--- a/plugins/caspar/app/views/Library.jsx
+++ b/plugins/caspar/app/views/Library.jsx
@@ -34,8 +34,9 @@ export const Library = () => {
 
   React.useEffect(() => {
     async function exec () {
+      setItems([])
+
       if (!filter.serverId) {
-        setItems([])
         return
       }
 
@@ -53,7 +54,7 @@ export const Library = () => {
       setItems(filtered)
     }
     exec()
-  }, [filter?.serverId])
+  }, [filter?.serverId, filter?.refresh])
 
   /**
    * An array of all items that matches