infinite scroll browse, search, history

Author: supalarry

frontend/src/components/app/recommendations/HistoryRecommendations.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <section class="mb-4 sm:mb-16 lg:mb-32">
+  <section class="sm:mb-16 lg:mb-32">
     <div v-if="recommendationsBackup.length" v-bind:class="{
       'flex': true,
       'w-full': true,
@@ -48,6 +48,8 @@
     <div v-if="recommendations.length" ref="recommendationCards" class="grid grid-cols-1 md:grid-cols-2 gap-2">
       <RecommendationCard
         v-for="(recommendation, index) in recommendations" :key="index"
+        v-bind:index="index"
+        v-bind:showCount="showCount"
         v-bind:recommendation="recommendation"></RecommendationCard>
     </div>
     <div class="text-center md:text-left px-4 md:px-0" v-if="!recommendations.length">
@@ -65,7 +67,7 @@ import RecommendationCard from '@/components/app/recommendations/RecommendationC
 import MultipleFiltersDropdown from '@/components/shared/MultipleFiltersDropdown.vue';
 
 export default {
-  props: ['title', 'recommendationsReceived', 'recommendationsAnalysis'],
+  props: ['title', 'recommendationsReceived', 'recommendationsAnalysis', 'showCount'],
   components: {
     Sort,
     RecommendationCard,
@@ -110,10 +112,12 @@ export default {
       const [name, min, max] = range;
       this.filters[name].min = min;
       this.filters[name].max = max;
+      this.$emit('reset-show-count');
     },
     saveFilterMultiple(...multiple) {
       const [name, filters] = multiple;
       this.filters[name] = filters;
+      this.$emit('reset-show-count');
     },
     sort(recommendations, by) {
       if (by === 'Closest') {

frontend/src/components/app/recommendations/RecommendationCard.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div
+      v-if="index < showCount"
       v-on:click="viewUser(recommendation.id)"
       class="flex flex-col justify-end shadow-inner recommendation-card rounded-md cursor-pointer"
        v-bind:style="{
@@ -33,7 +34,7 @@ import imageWoman from '../../../assets/recommendations/avatars/woman1.png';
 import imageOther from '../../../assets/recommendations/avatars/other.png';
 
 export default {
-  props: ['recommendation'],
+  props: ['recommendation', 'index', 'showCount'],
   methods: {
     async viewUser(id) {
       await this.$router.push(`/users/${id}`);

frontend/src/components/app/recommendations/Recommendations.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <section class="mb-4 sm:mb-16 lg:mb-32">
+  <section class="sm:mb-16 lg:mb-32">
     <h1
       class="text-5xl my-4 text-center md:text-left leading-none onboarding-sub-container-content-heading">
       {{recommendations.length}} {{title}}</h1>
@@ -42,6 +42,8 @@
     <div ref="recommendationCards" class="grid grid-cols-1 md:grid-cols-2 gap-2">
     <RecommendationCard
       v-for="(recommendation, index) in recommendations" :key="index"
+      v-bind:index="index"
+      v-bind:showCount="showCount"
       v-bind:recommendation="recommendation"></RecommendationCard>
     </div>
   </section>
@@ -55,7 +57,7 @@ import RecommendationCard from '@/components/app/recommendations/RecommendationC
 import MultipleFiltersDropdown from '@/components/shared/MultipleFiltersDropdown.vue';
 
 export default {
-  props: ['title', 'recommendationsReceived', 'recommendationsAnalysis'],
+  props: ['title', 'recommendationsReceived', 'recommendationsAnalysis', 'showCount'],
   components: {
     Sort,
     RecommendationCard,
@@ -100,10 +102,12 @@ export default {
       const [name, min, max] = range;
       this.filters[name].min = min;
       this.filters[name].max = max;
+      this.$emit('reset-show-count');
     },
     saveFilterMultiple(...multiple) {
       const [name, filters] = multiple;
       this.filters[name] = filters;
+      this.$emit('reset-show-count');
     },
     sort(recommendations, by) {
       if (by === 'Closest') {

frontend/src/views/app/Browse.vue

@@ -7,9 +7,12 @@
       </div>
       <Recommendations
         v-if="recommendationsAnalysisDone"
+        v-bind:showCount="showCount"
+        v-on:reset-show-count="resetShowCount()"
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></Recommendations>
+      <div id="invisibleFooter" class="h-4 w-full bg-white"></div>
     </section>
   </div>
 </template>
@@ -43,6 +46,7 @@ export default {
       interests: [],
     },
     recommendationsAnalysisDone: false,
+    showCount: 10,
   }),
   methods: {
     async fetchUsers() {
@@ -97,11 +101,29 @@ export default {
       this.recommendationsAnalysis.popularity.max = null;
       this.recommendationsAnalysis.interests = [];
       this.recommendationsAnalysisDone = false;
+      this.showCount = 10;
+    },
+    handleIntersect(entries) {
+      if (entries[0].isIntersecting) {
+        this.showCount += 10;
+      }
+    },
+    resetShowCount() {
+      this.showCount = 10;
     },
   },
   async created() {
     await this.fetchUsers();
   },
+  mounted() {
+    const options = {
+      root: null,
+      rootMargins: '0px',
+      threshold: 0.5,
+    };
+    const observer = new IntersectionObserver(this.handleIntersect, options);
+    observer.observe(document.querySelector('#invisibleFooter'));
+  },
   deactivated() {
     if (!this.$route.path.startsWith('/users')) {
       this.browseAgain();

frontend/src/views/app/History.vue

@@ -18,10 +18,13 @@
       </div>
       <HistoryRecommendations
         v-if="recommendationsAnalysisDone"
+        v-bind:showCount="showCount"
+        v-on:reset-show-count="resetShowCount()"
         v-on:filtered-count="filteredCountSave"
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></HistoryRecommendations>
+      <div id="invisibleFooterHistory" class="h-4 w-full bg-white"></div>
     </section>
   </div>
 </template>
@@ -61,6 +64,7 @@ export default {
     filteredCount: null,
     historyFetched: false,
     visitUser: false,
+    showCount: 10,
   }),
   methods: {
     async fetchUsers(request) {
@@ -129,6 +133,7 @@ export default {
       this.recommendationsAnalysisDone = false;
       this.historyFetched = false;
       this.visitUser = false;
+      this.showCount = 10;
     },
     async updateHistory(...args) {
       const [key, value] = args;
@@ -142,6 +147,23 @@ export default {
       const [count] = args;
       this.filteredCount = count;
     },
+    handleIntersect(entries) {
+      if (entries[0].isIntersecting) {
+        this.showCount += 10;
+      }
+    },
+    resetShowCount() {
+      this.showCount = 10;
+    },
+  },
+  mounted() {
+    const options = {
+      root: null,
+      rootMargins: '0px',
+      threshold: 0.5,
+    };
+    const observer = new IntersectionObserver(this.handleIntersect, options);
+    observer.observe(document.querySelector('#invisibleFooterHistory'));
   },
   async beforeRouteEnter(to, from, next) {
     next(async (vm) => {

frontend/src/views/app/Search.vue

@@ -9,10 +9,13 @@
         <h1 class="noSelect capitalize">←</h1>
       </div>
       <Recommendations
+        v-bind:showCount="showCount"
+        v-on:reset-show-count="resetShowCount()"
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="filters"></Recommendations>
     </section>
+    <div id="invisibleFooterSearch" class="h-4 w-full bg-white"></div>
     <section v-on:click="setError(null)"
              v-if="!recommendationsAnalysisDone && sliderValuesFetched"
              class="flex flex-col my-8 md:my-12">
@@ -110,6 +113,7 @@ export default {
     recommendationsAnalysisDone: false,
     error: null,
     submitted: false,
+    showCount: 10,
   }),
   methods: {
     saveFilter(...range) {
@@ -195,16 +199,32 @@ export default {
       this.filters.distance.max = null;
       this.filters.interests = [];
       this.recommendationsAnalysisDone = false;
+      this.showCount = 10;
     },
     setError(message) {
       this.error = message;
     },
     scrollToTop() {
       window.scrollTo(0, 0);
     },
+    handleIntersect(entries) {
+      if (entries[0].isIntersecting && this.recommendationsAnalysisDone) {
+        this.showCount += 10;
+      }
+    },
+    resetShowCount() {
+      this.showCount = 10;
+    },
   },
   async mounted() {
     await this.fetchUsersOverfiew();
+    const options = {
+      root: null,
+      rootMargins: '0px',
+      threshold: 0.5,
+    };
+    const observer = new IntersectionObserver(this.handleIntersect, options);
+    observer.observe(document.querySelector('#invisibleFooterSearch'));
   },
   deactivated() {
     if (!this.$route.path.startsWith('/users')) {