booksearch more detail

src/assets/main.css

@@ -82,7 +82,7 @@ section h2 {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
-  max-height: 33vh;
+  max-height: 50vh;
   overflow-y: auto;
 }
 

src/components/BookSearch.vue

@@ -27,14 +27,21 @@ const getSearchResults = async () => {
 
 <template>
   <div>
-    <input type="text" v-model="currentSearch" />
+    <input
+      type="text"
+      v-model="currentSearch"
+      placeholder="Search for books"
+    />
     <button
       type="submit"
       :disabled="isLoading === true || error?.length > 0"
       @click="getSearchResults()"
     >
-      Search for books
+      Search for books 
     </button>
+    <small>
+      (default if no search is top 10 downloads)
+    </small>
     <p v-if="isLoading">
       <strong>Loading...</strong>
     </p>

src/components/SearchResult.vue

@@ -1,11 +1,32 @@
 <script setup lang="ts">
-import type { BookDetail } from '@/types';
+import getGutenbergText from '@/api/getGutenbergText'
+import splitStringToTokens from '@/scripts/splitStringToTokens'
+import { mainStore } from '@/stores/mainStore'
+import type { BookDetail } from '@/types'
+import { ref } from 'vue'
 
 const props = defineProps<{ value: BookDetail }>()
-const getBookText = (textUrl: string) => {
-    console.log('Getting text for book with url:', textUrl)
+const isLoading = ref(false)
+const error = ref('')
+const getBookText = async (textUrl: string) => {
+  isLoading.value = true
+  try {
+    const results = await getGutenbergText(textUrl)
+    if (results.length > 0) {
+      mainStore.setText(results)
+      mainStore.setWordsArray(splitStringToTokens(results))
+      error.value = ''
+    }
+  } catch (err) {
+    error.value = (err as Error)?.message ?? 'An unknown error occurred'
+  }
+  isLoading.value = false
+  setTimeout(() => {
+    error.value = ''
+  }, 3000)
 }
 </script>
+
 <template>
   <li class="book">
     <h3>
@@ -14,13 +35,18 @@ const getBookText = (textUrl: string) => {
     <p>
       <strong>Author(s):</strong>
       <span class="author" v-for="author in props.value.authors" :key="author.id">
-          {{ author.name }} [{{ author.birthYear }} - {{ author.deathYear }}]
-        </span>
+        {{ author.name }} [{{ author.birthYear }} - {{ author.deathYear }}]
+      </span>
     </p>
     <p>
       <strong> Bookshelves: </strong>
       {{ props.value.bookshelves.join(', ') }}
     </p>
-    <button @click="()=>getBookText(props.value.textUrl)">Set Text to Random Page</button>
+    <p><strong>Download count:</strong>
+    {{ props.value.downloadCount }} times
+    </p>
+    <button @click="() => getBookText(props.value.textUrl)">Set Text to Random Page</button>
+    <strong v-if="isLoading">Loading text...</strong>
+    <strong v-if="error">{{ error }}</strong>
   </li>
 </template>

src/components/SearchResults.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
 import { mainStore } from '@/stores/mainStore'
-import SearchResult from './SearchResult.vue';
+import SearchResult from './SearchResult.vue'
+import { ref } from 'vue'
+const hidden = ref(false)
 </script>
 
 <template>
-  <ul v-if="mainStore.searchResults.length > 0"  class="unstyled-list">
+  <div v-if="mainStore.searchResults.length > 0">
+    <label for="show-hide-results">Show/Hide Results</label>
+    <input
+      type="checkbox"
+      v-if="mainStore.searchResults.length > 0"
+      v-model="hidden"
+      id="show-hide-results"
+    />
+  </div>
+  <ul v-if="mainStore.searchResults.length > 0 && !hidden" class="unstyled-list">
     <SearchResult v-for="result in mainStore.searchResults" :key="result.id" :value="result">
       <strong>{{ result.title }}</strong> by {{ result.authors.join(', ') }}
     </SearchResult>