Merge pull request #433 from Seluj78/432-hacky-lazy-load

Author: Seluj78

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

@@ -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

@@ -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/components/shared/ScrollUpButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="fixed bottom-0 w-full flex justify-center -ml-4 sm:-ml-16 lg:-ml-32">
+    <button v-if="showScroll"
+            class="z-10 text-2xl text-white-matcha font-bold mb-10 w-12 h-12 rounded-full bg-purple-matcha"
+            v-on:click="scrollUp()">
+      ↑</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    showScroll: false,
+  }),
+  methods: {
+    scrollUp() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
+    handleScroll() {
+      this.showScroll = window.scrollY > window.screen.height;
+    },
+  },
+  created() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+};
+</script>

frontend/src/views/app/Browse.vue

@@ -1,15 +1,19 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="mx-4 sm:mx-16 lg:mx-32">
-    <section class="mx-auto">
+    <section class="mx-auto relative">
       <div v-if="!recommendationsAnalysisDone" class="flex items-center justify-center mt-32">
         <img class="h-36" src="../../assets/loading.svg">
       </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 absolute bottom-0 w-full"></div>
+      <ScrollUpButton></ScrollUpButton>
     </section>
   </div>
 </template>
@@ -18,12 +22,14 @@
 /* eslint-disable max-len */
 
 import Recommendations from '@/components/app/recommendations/Recommendations.vue';
+import ScrollUpButton from '@/components/shared/ScrollUpButton.vue';
 
 export default {
   name: 'Browse',
   props: ['recommendationsFromSettingUp'],
   components: {
     Recommendations,
+    ScrollUpButton,
   },
   data: () => ({
     recommendations: [],
@@ -43,6 +49,7 @@ export default {
       interests: [],
     },
     recommendationsAnalysisDone: false,
+    showCount: 10,
   }),
   methods: {
     async fetchUsers() {
@@ -97,11 +104,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

@@ -4,7 +4,7 @@
     <div v-if="!historyFetched" class="mx-auto flex items-center justify-center mt-32">
       <img class="h-36" src="../../assets/loading.svg">
     </div>
-    <section v-bind:class="{'mx-auto': true, 'mt-4': true, 'invisible': !historyFetched}">
+    <section v-bind:class="{'mx-auto': true, 'mt-4': true, 'invisible': !historyFetched, 'relative': true,}">
       <div class="flex items-center justify-center md:justify-start w-full mb-4">
         <h1
           class="text-3xl sm:text-5xl my-4 inline-block text-center leading-none onboarding-sub-container-content-heading">
@@ -18,10 +18,14 @@
       </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 absolute bottom-0 w-full"></div>
+      <ScrollUpButton></ScrollUpButton>
     </section>
   </div>
 </template>
@@ -32,13 +36,15 @@
 
 import HistoryRecommendations from '@/components/app/recommendations/HistoryRecommendations.vue';
 import DropdownDisplayChoiceHistory from '@/components/shared/DropdownDisplayChoiceHistory.vue';
+import ScrollUpButton from '@/components/shared/ScrollUpButton.vue';
 
 export default {
   name: 'History',
   props: ['recommendationsFromSettingUp'],
   components: {
     HistoryRecommendations,
     DropdownDisplayChoiceHistory,
+    ScrollUpButton,
   },
   data: () => ({
     recommendations: [],
@@ -61,6 +67,7 @@ export default {
     filteredCount: null,
     historyFetched: false,
     visitUser: false,
+    showCount: 10,
   }),
   methods: {
     async fetchUsers(request) {
@@ -129,6 +136,7 @@ export default {
       this.recommendationsAnalysisDone = false;
       this.historyFetched = false;
       this.visitUser = false;
+      this.showCount = 10;
     },
     async updateHistory(...args) {
       const [key, value] = args;
@@ -142,6 +150,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

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="mx-4 sm:mx-16 lg:mx-32">
+  <div class="mx-4 sm:mx-16 lg:mx-32 relative">
     <div v-if="!recommendationsAnalysisDone && !sliderValuesFetched" class="mx-auto flex items-center justify-center mt-32">
       <img class="h-36" src="../../assets/loading.svg">
     </div>
@@ -9,10 +9,15 @@
         <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>
+      <ScrollUpButton></ScrollUpButton>
     </section>
+    <div id="invisibleFooterSearch"
+         v-bind:class="{'h-4': true, 'absolute': true, 'bottom-0': true, 'w-full': true, 'invisible': !recommendationsAnalysisDone}"></div>
     <section v-on:click="setError(null)"
              v-if="!recommendationsAnalysisDone && sliderValuesFetched"
              class="flex flex-col my-8 md:my-12">
@@ -71,13 +76,15 @@
 import FilterSlider from '@/components/shared/FilterSlider.vue';
 import MultipleFilters from '@/components/shared/MultipleFilters.vue';
 import Recommendations from '@/components/app/recommendations/Recommendations.vue';
+import ScrollUpButton from '@/components/shared/ScrollUpButton.vue';
 
 export default {
   name: 'Search',
   components: {
     MultipleFilters,
     FilterSlider,
     Recommendations,
+    ScrollUpButton,
   },
   data: () => ({
     recommendations: [],
@@ -110,6 +117,7 @@ export default {
     recommendationsAnalysisDone: false,
     error: null,
     submitted: false,
+    showCount: 10,
   }),
   methods: {
     saveFilter(...range) {
@@ -195,16 +203,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')) {