Add message when you reach the bottom of the infinite scroll

src/views/CategoryView.vue

@@ -13,10 +13,12 @@ export default {
   async setup() {
     const data = ref<CategoryData>()
     const status = ref<'ok' | 'error'>()
+    const endOfScroll = ref<Boolean>() // Display message when user reaches bottom of page
 
     return {
       data,
-      status
+      status,
+      endOfScroll
     }
   },
   async mounted() {
@@ -38,11 +40,13 @@ export default {
       const bottomOfWindow =
         document.documentElement.scrollTop + window.innerHeight ===
         document.documentElement.offsetHeight
-      const streams = this.data!.streams
+
+      if (!this.data) return
+      const streams = this.data.streams
 
       if (bottomOfWindow && streams) {
         // get cursor of the last stream rendered
-        const cursor = streams[streams.length - 1].cursor
+        const cursor = streams[streams.length - 1]?.cursor ?? null
         if (!cursor) return
 
         // get rest of streams from api
@@ -52,14 +56,13 @@ export default {
           throw err
         })
 
-        const lastStreamCursor = this.data!.streams[this.data!.streams.length - 1].cursor
-        const newLastStreamCursor = resData.streams[resData.streams.length - 1].cursor
+        const lastStreamCursor = this.data.streams[this.data.streams.length - 1]?.cursor ?? null
+        const newLastStreamCursor = resData.streams[resData.streams.length - 1]?.cursor ?? null
         if (lastStreamCursor === newLastStreamCursor) {
-          // Add "no more streams!" screen later
-          console.log('no more streams!')
+          this.endOfScroll = true;
         } else {
           for (const stream of resData.streams) {
-            this.data!.streams.push(stream)
+            this.data.streams.push(stream)
           }
         }
       }
@@ -145,6 +148,9 @@ export default {
         >
           <StreamPreviewVue :stream="stream"></StreamPreviewVue>
         </li>
+        <div v-if="endOfScroll" class="bg-overlay0 rounded-md w-full text-center mt-5 p-2">
+          <span class="text-white text-lg"> {{ $t('main.endOfScroll') }}</span>
+        </div>
       </ul>
     </div>
   </div>