Radio app fixes

2 files changed, 44 insertions, 22 deletions

diff --git a/apps/Radio/components/List.js b/apps/Radio/components/List.js
index 73e1523..6f24df6 100644
--- a/apps/Radio/components/List.js
+++ b/apps/Radio/components/List.js
@@ -2,6 +2,7 @@ import { open } from 'helpers/windowActions'
 import appList from 'configs/appList'
 import useApps from 'hooks/useApps'
 import fetchJson from 'helpers/fetchJson'
+import { Splash } from 'components'
 import styles from '../styles/Radio.module.scss'
 
 const play = async (title, station, apps, setApps, enqueue) => {
@@ -23,23 +24,28 @@ const List = ({ results, enqueue }) => {
   return (
     <div className={styles.list}>
       <div>
-        {results && results.length === 0 && <div>No results</div>}
-        {results && results.length > 0 && (
-          results.map(({ title, url, logo, genres, locations }) => (
-            <div key={url} onClick={() => play(title, url, apps, setApps, enqueue)}>
-              <img width={75} height={75} src={logo} loading="lazy" alt="title" />
-              <div>
-                <span>{ title }</span>
-                <div>
-                  <span>{locations.join(', ')}</span>
-                  <div>
-                    {genres.map(g => <span>{g}</span>)}
+        {results === 'loading'
+          ? <Splash />
+          : <>
+              {results && results.length === 0 && <div>{t('radio_no_result')}</div>}
+              {results && results.length > 0 && (
+                results.map(({ title, url, logo, genres, locations }) => (
+                  <div key={url} onClick={() => play(title, url, apps, setApps, enqueue)}>
+                    <img width={75} height={75} src={logo} loading="lazy" alt="title" />
+                    <div>
+                      <span>{ title }</span>
+                      <div>
+                        <span>{locations.join(', ')}</span>
+                        <div>
+                          {genres.map(g => <span>{g}</span>)}
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            </div>
-          ))
-        )}
+                ))
+              )}
+          </>
+        }
       </div>
     </div>
   )
diff --git a/apps/Radio/components/Search.js b/apps/Radio/components/Search.js
index 363a37c..2bb3371 100644
--- a/apps/Radio/components/Search.js
+++ b/apps/Radio/components/Search.js
@@ -1,8 +1,10 @@
 import { useState } from 'react'
-import styles from '../styles/Radio.module.scss'
+import useSettings from 'hooks/useSettings'
 import fetchJson from 'helpers/fetchJson'
+import styles from '../styles/Radio.module.scss'
 
 const searchQuery = async (query, setResults) => {
+  setResults('loading')
   const results = await fetchJson('/api/radio/stations', {
     method: 'POST',
     body: JSON.stringify({ query })
@@ -14,17 +16,31 @@ const searchQuery = async (query, setResults) => {
 const Search = ({ setResults }) => {
   const [query, setQuery] = useState('')
   const changeQuery = e => setQuery(e.target.value)
+  const { t } = useSettings()
+
+  const onSubmit = e => {
+    e.preventDefault()
+    searchQuery(query, setResults)
+  }
 
   return (
-    <div className={styles.search}>
-      <input type="text" onChange={changeQuery} value={query} />
+    <form
+      className={styles.search}
+      onSubmit={onSubmit}
+    >
+      <input
+        type="text"
+        onChange={changeQuery}
+        placeholder={t('radio_search_placeholder')}
+        value={query}
+      />
       <span
         className="window__button"
-        onClick={() => searchQuery(query, setResults)}
+        onClick={onSubmit}
       >
-        Search
+        {t('radio_search')}
       </span>
-    </div>
+    </form>
   )
 }