Fix match insensitive search

src/hooks/useMatchedMovies.ts

-import { computed, ref, Ref } from "@vue/runtime-dom";
+import { computed, ref, Ref, watch } from "@vue/runtime-dom";
 import { IMovie } from "../types";
 import _debounce from "lodash/debounce";
 
@@ -7,9 +7,9 @@ export default function useMatchedMovies(movies: Ref<IMovie[]>) {
   const limit = ref(50);
 
   const matchPredicate = ({ genre, title, year }: IMovie) =>
-    genre.indexOf(searchQuery.value) > -1 ||
-    title.indexOf(searchQuery.value) > -1 ||
-    year.indexOf(searchQuery.value) > -1;
+    genre.toLowerCase().indexOf(searchQuery.value) > -1 ||
+    title.toLowerCase().indexOf(searchQuery.value) > -1 ||
+    year.toLowerCase().indexOf(searchQuery.value) > -1;
 
   const loadMore = () => {
     limit.value += 50;

src/views/Movies.vue

@@ -8,7 +8,7 @@
     </div>
     <template v-else>
       <Table :data="filteredMovies" :adminFunc="addWish" :isWishlist="false" />
-      <Button class="mx-auto mb-8" @click="loadMore">Load more</Button>
+      <Button v-if="hasMore" class="mx-auto mb-8" @click="loadMore">Load more</Button>
     </template>
   </div>
 </template>
@@ -24,8 +24,10 @@ const { wishlistFilteredMovies } = useWishlistMovies(movies, wishlist, false);
 const {
   searchQuery,
   loadMore,
+  hasMore,
   moviesMatchingSearchQuery: filteredMovies,
 } = useMatchedMovies(wishlistFilteredMovies);
+
 </script>
 
 <style>