Add a refresh button to the library and clear the state on server change

Signed-off-by: Axel Boberg <[email protected]>
svt · Jan 11, 2024 · 49d4f45 · 49d4f45
1 parent e6a32a4
commit 49d4f45
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git 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
@@ -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%;
-}
+}
diff --git 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