refactor: Move InfiniteScrolling to composable

resources/js/Components/Edit/EditSlipModal.vue

@@ -29,6 +29,7 @@ const updateSlip = () => {
     )
 }
 
+
 const closeModal = () => {
   // form.reset()
   emit('close')

resources/js/Components/Slip/ShowSlipModal.vue

@@ -1,7 +1,6 @@
 <script setup>
 import Hls from 'hls.js'
 import plyr from 'plyr'
-import useCanvas from '@/Composables/useCanvas.js'
 import 'plyr/dist/plyr.css'
 import {isRef, onMounted, ref} from 'vue'
 
@@ -12,7 +11,6 @@ const props = defineProps({
 const video = ref(null)
 const src = ref(props.slip.mediable.path)
 
-
 const defaultOptions = {
   autoplay: true,
   //TODO: Remove before release

resources/js/Composables/useInfiniteScrolling.js

@@ -1,7 +1,10 @@
 import axios from 'axios'
-import {onMounted} from 'vue'
+import {onMounted, onUnmounted, ref} from 'vue'
 
-const useInfiniteScrolling = () => {
+
+const isFetching = ref(false)
+const loadMoreIntersect = ref(null)
+export const useInfiniteScrolling = (slips) => {
   const fetchSlips = async () => {
     const next_url = slips.value.next_page_url
 
@@ -16,18 +19,21 @@ const useInfiniteScrolling = () => {
         isFetching.value = false
       })
   }
-  onMounted(() => {
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          fetchSlips()
-        }
-      })
-    }, {
-      rootMargin: '-100px 0px 0px 0px',
+
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        fetchSlips()
+      }
     })
-    observer.observe(loadMoreIntersect.value)
+  }, {
+    rootMargin: '-100px 0px 0px 0px',
   })
+  onMounted(() => observer.observe(loadMoreIntersect.value))
+
+  onUnmounted(() => observer.disconnect())
+
+  return {loadMoreIntersect, isFetching}
 }
 
-export default useInfiniteScrolling
+

resources/js/Layouts/MainLayout.vue

@@ -3,7 +3,6 @@ import {ref} from 'vue'
 import NavItem from '@/Components/Reusable/NavItem.vue'
 import ApplicationLogo from '@/Components/Reusable/ApplicationLogo.vue'
 import UploadModal from '@/Components/Upload/UploadModal.vue'
-import SettingsModal from '@/Components/Settings/SettingsModal.vue'
 import {Vue3Snackbar} from 'vue3-snackbar'
 
 let showUploadModal = ref(false)
@@ -38,7 +37,7 @@ let showSettingsModal = ref(false)
   </div>
   <UploadModal v-if="showUploadModal" @close="showUploadModal = false" />
   <transition name="modal">
-    <SettingsModal v-if="showSettingsModal" @close="showSettingsModal = false" />
+    <SettingsMosdal v-if="showSettingsModal" @close="showSettingsModal = false" />
   </transition>
   <vue3-snackbar top right />
 </template>

resources/js/Pages/Dashboard.vue

@@ -1,18 +1,15 @@
 <script setup>
-import axios from 'axios'
-import {Head, router, usePage} from '@inertiajs/vue3'
+import {Head, usePage} from '@inertiajs/vue3'
 import MainLayout from '@/Layouts/MainLayout.vue'
 import VideoCard from '@/Components/Dashboard/VideoCard.vue'
-import {computed, onMounted, ref} from 'vue'
+import {computed, ref} from 'vue'
 import useSlipSockets from '@/Composables/useSlipSockets.js'
 import {useSnackbar} from 'vue3-snackbar'
-import useInfiniteScrolling from '@/Composables/useInfiniteScrolling.js'
-
-let slip = ref({})
-
-const snackbar = useSnackbar()
+import {useInfiniteScrolling} from '@/Composables/useInfiniteScrolling.js'
 
+const slips = ref(computed(() => usePage().props.slips))
 
+// TODO: Refactor
 function test(v){
   const existingIndex = slips.value.data.findIndex(slip => slip.id === v.id)
 
@@ -25,23 +22,9 @@ function test(v){
   }
 }
 
+const { loadMoreIntersect, isFetching } = useInfiniteScrolling(slips)
 
-
-const openModal = () => {
-  showEditSlip.value = !showEditSlip.value
-}
-
-const handleEditSlip = (updatedSlip) => {
-  slip.value = updatedSlip
-}
-
-const slips = ref(computed(() => usePage().props.slips))
-
-const isFetching = ref(false)
-const loadMoreIntersect = ref(null)
-
-useInfiniteScrolling()
-
+const snackbar = useSnackbar()
 useSlipSockets(snackbar)
 </script>
 
@@ -53,6 +36,7 @@ useSlipSockets(snackbar)
         <VideoCard v-for="slip in slips.data" :key="slip.token" :slip="slip" />
       </div>
     </div>
+
     <span ref="loadMoreIntersect" />
     <div class="flex items-center justify-center p-8">
       <div v-if="isFetching">