Search images by tags

src/routes/Tag.svelte

 <script>
+    import ImageList from "@/lib/ImageList.svelte";
     import { fetchAPI } from "@/static/js/helper";
     import { paths } from "@/static/js/paths";
     import { user } from "@/stores";
@@ -14,6 +15,8 @@
     let tag = "";
     let tagType = tagTypes[0];
     $: validTag = checkTag(tag);
+    let searchTags = "";
+    let searchedSnowflakes = [];
 
     function putTag() {
         const options = {
@@ -47,9 +50,18 @@
         const regex = /^[a-z0-9()_-]*$/g;
         return !tag.match(regex) || tag.length > 128;
     }
+    async function searchImagesByTags() {
+        searchedSnowflakes =
+            (await fetchAPI(paths.SearchField(parseSearchTags(searchTags)))) ||
+            [];
+    }
+    function parseSearchTags(searchTags) {
+        return searchTags.split(" ").join("!");
+    }
 </script>
 
-<div class="space-x-4 m-2">
+<section class="m-2 space-y-4">
+    <div class="space-x-4">
         <input type="text" placeholder="Tag name" bind:value={tag} />
         <select bind:value={tagType}>
             <option disabled>Tag type</option>
@@ -57,10 +69,24 @@
                 <option value={type}>{type}</option>
             {/each}
         </select>
-    <button on:click={addTag} disabled={validTag} class="disabled:opacity-50"
-        >Add</button
+        <button
+            on:click={addTag}
+            disabled={validTag}
+            class="disabled:opacity-50">Add</button
         >
-</div>
         {#if validTag}
             <div>No space or capital letter in tag name allowed.</div>
         {/if}
+    </div>
+
+    <div class="space-x-4">
+        <input type="text" placeholder="Search tag" bind:value={searchTags} />
+        <button
+            disabled={searchTags === ""}
+            class="disabled:opacity-50"
+            on:click={searchImagesByTags}>Search</button
+        >
+        <div>Delimit tags by space to search multiple</div>
+    </div>
+</section>
+<ImageList snowflakes={searchedSnowflakes} />