TS-ify use-load-more and use TS and defineComponent in layouts and pa…

…ges (#1473)

* TS-ify use-load-more and use TS and defineComponent in layouts and pages

* Apply suggestions from code review

src/composables/use-load-more.ts

@@ -0,0 +1,21 @@
+import { computed, ComputedRef } from '@nuxtjs/composition-api'
+
+import { useMediaStore } from '~/stores/media'
+
+/**
+ * Fetches media on 'Load More' button click.
+ */
+export const useLoadMore = (searchTerm: ComputedRef<string>) => {
+  const canLoadMore = computed(() => searchTerm.value.trim() !== '')
+
+  const onLoadMore = async () => {
+    const mediaStore = useMediaStore()
+    if (canLoadMore.value) {
+      await mediaStore.fetchMedia({
+        shouldPersistMedia: true,
+      })
+    }
+  }
+
+  return { canLoadMore, onLoadMore }
+}

src/composables/use-media-query.ts

@@ -68,6 +68,6 @@ export const isMinScreen = (breakpointName: Breakpoint, options?: Options) => {
 /**
  * Check if the user prefers reduced motion or not.
  */
-export function useReducedMotion(options: Options) {
+export function useReducedMotion(options?: Options) {
   return useMediaQuery('(prefers-reduced-motion: reduce)', options)
 }

src/layouts/error.vue

@@ -7,11 +7,10 @@ import { defineComponent } from '@nuxtjs/composition-api'
 
 import VFourOhFour from '~/components/VFourOhFour.vue'
 
-const Error = defineComponent({
+export default defineComponent({
   name: 'ErrorPage',
   components: { VFourOhFour },
   layout: 'blank',
   props: ['error'],
 })
-export default Error
 </script>

src/pages/about.vue

@@ -72,7 +72,7 @@
   </VContentPage>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api'
 
 import VLink from '~/components/VLink.vue'

src/pages/search/audio.vue

@@ -18,7 +18,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  toRef,
+  useMeta,
+} from '@nuxtjs/composition-api'
 
 import { useLoadMore } from '~/composables/use-load-more'
 import { isMinScreen } from '~/composables/use-media-query'
@@ -72,8 +77,8 @@ export default defineComponent({
         focusFilters.focusFilterSidebar(event, Focus.Last)
       }
     }
-
-    const { canLoadMore, onLoadMore } = useLoadMore(props)
+    const searchTermRef = toRef(props, 'searchTerm')
+    const { canLoadMore, onLoadMore } = useLoadMore(searchTermRef)
 
     return {
       results,

src/pages/search/image.vue

@@ -9,7 +9,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  toRef,
+  useMeta,
+} from '@nuxtjs/composition-api'
 
 import { propTypes } from '~/pages/search/search-page.types'
 import { useLoadMore } from '~/composables/use-load-more'
@@ -25,7 +30,9 @@ export default defineComponent({
     useMeta({ title: `${props.searchTerm} | Openverse` })
 
     const results = computed(() => props.resultItems.image)
-    const { canLoadMore, onLoadMore } = useLoadMore(props)
+
+    const searchTermRef = toRef(props, 'searchTerm')
+    const { canLoadMore, onLoadMore } = useLoadMore(searchTermRef)
 
     const focusFilters = useFocusFilters()
     const handleShiftTab = () => {

src/pages/search/index.vue

@@ -2,8 +2,8 @@
   <VAllResultsGrid :can-load-more="canLoadMore" @load-more="onLoadMore" />
 </template>
 
-<script>
-import { useMeta, defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, toRef, useMeta } from '@nuxtjs/composition-api'
 
 import { useLoadMore } from '~/composables/use-load-more'
 import { propTypes } from '~/pages/search/search-page.types'
@@ -17,7 +17,9 @@ export default defineComponent({
   setup(props) {
     useMeta({ title: `${props.searchTerm} | Openverse` })
 
-    const { canLoadMore, onLoadMore } = useLoadMore(props)
+    const searchTermRef = toRef(props, 'searchTerm')
+    const { canLoadMore, onLoadMore } = useLoadMore(searchTermRef)
+
     return { canLoadMore, onLoadMore }
   },
   head: {