stylez

client/src/routes/search.tsx

@@ -4,21 +4,39 @@ import axios from 'axios';
 
 function result(r) {
     return (
-        <div>{r.title}</div>
+        <article key={r.id}>
+            <button> + </button>
+            <div>
+                <h3>{r.title}</h3>
+                <h5 class='alt-text' >{r.year}</h5>
+                <h5 class='alt-text'>{r.country}</h5>
+                <h5 class='alt-text'>{r.format.join(' ')}</h5>
+            </div>
+            <img src={r.thumb} />
+        </article>
     );
 }
 
 const User = () => {
-    const [artist, setArtist] = useState('')
-    const [title, setTitle] = useState('');
+    const [artist, setArtist] = useState('nine inch nails')
+    const [title, setTitle] = useState('the fragile');
     const [results, setResults] = useState([]);
+    const [noResults, setNoResults] = useState(false);
 
     async function fetchResults() {
         const { data } = await axios.post(`http://localhost:41337/want/search`, {
             artist,
             title,
         });
+
         console.log(data);
+
+        if (data.length === 0) {
+            setResults([]);
+            return setNoResults(true);
+        }
+
+        setNoResults(false);
         setResults(data);
     }
 
@@ -27,17 +45,28 @@ const User = () => {
         fetchResults();
     }
 
+    const topEl = results.length
+        ? <button onClick={() => window.scrollTo(0, 0)}> top </button>
+        : null;
+
+    const noResultsEl = noResults
+        ? <article>No Results</article>
+        : null;
+
     return (
-        <div class={'home'}>
-            <form action="" method="get" class="form-example">
-                <label for="artist">Artist: </label>
-                <input type="text" name="artist" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
-                <label for="title">Title: </label>
-                <input type="text" name="title" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
+        <div class='search'>
+            <form action="" method="get">
+                <label for="artist">Artist</label>
+                <input type="text" name="artist" placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
+                <label for="title">Title</label>
+                <input type="text" name="title" placeholder="Subzero" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
                 <input type="submit" value="Search" onClick={handleSubmit} />
             </form>
+            <div></div>
             <div>
+                {noResultsEl}
                 {results.map(result)}
+                {topEl}
             </div>
         </div>
     );