decoupled dropdown component from recommendaitons component

Author: supalarry

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

@@ -1,40 +1,54 @@
 <template>
   <!-- eslint-disable max-len -->
   <section class="mb-4 sm:mb-16 lg:mb-32">
-    <div v-if="recommendations.length && ready" class="flex w-full items-stretch sm:items-center justify-center md:justify-start mb-12 relative">
+    <div v-if="recommendations.length"
+         v-bind:class="{
+      'flex': true,
+      'w-full': true,
+      'items-stretch': true,
+      'sm:items-center': true,
+      'justify-center': true,
+      'md:justify-start': true,
+      'mb-12': recommendations.length > 1,
+      'relative': true}">
       <Sort
+        v-if="recommendations.length > 1"
         v-bind:position="'left'"
         v-bind:startingOption="'Closest'"
         v-bind:options="['Closest', 'Furthest', 'Youngest',
         'Oldest', 'Most popular', 'Least popular', 'Most common interests', 'Least common interests']"
         v-on:save-sort="saveSort"></Sort>
       <FilterSliderDropdown
+        v-if="recommendationsAnalysis.age.min !== recommendationsAnalysis.age.max"
         v-bind:min="recommendationsAnalysis.age.min"
         v-bind:max="recommendationsAnalysis.age.max"
         v-bind:name="'age'"
         v-on:save-filter="saveFilter"></FilterSliderDropdown>
       <FilterSliderDropdown
+        v-if="recommendationsAnalysis.distance.min !== recommendationsAnalysis.distance.max"
         v-bind:min="recommendationsAnalysis.distance.min"
         v-bind:max="recommendationsAnalysis.distance.max"
         v-bind:unit="'km'"
         v-bind:name="'distance'"
         v-on:save-filter="saveFilter"></FilterSliderDropdown>
       <FilterSliderDropdown
+        v-if="recommendationsAnalysis.popularity.min !== recommendationsAnalysis.popularity.max"
         v-bind:min="recommendationsAnalysis.popularity.min"
         v-bind:max="recommendationsAnalysis.popularity.max"
         v-bind:unit="'pts'"
         v-bind:name="'popularity'"
         v-on:save-filter="saveFilter"></FilterSliderDropdown>
       <MultipleFiltersDropdown
+        v-if="recommendations.length > 1"
         v-bind:position="'right'"
         v-bind:options="recommendationsAnalysis.interests"
         v-bind:name="'interests'"
         v-on:save-filter-multiple="saveFilterMultiple"></MultipleFiltersDropdown>
     </div>
-    <div v-if="recommendations.length && ready" ref="recommendationCards" class="grid grid-cols-1 md:grid-cols-2 gap-2">
-    <RecommendationCard
-      v-for="(recommendation, index) in recommendations" :key="index"
-      v-bind:recommendation="recommendation"></RecommendationCard>
+    <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:recommendation="recommendation"></RecommendationCard>
     </div>
   </section>
 </template>

frontend/src/components/shared/DropdownDisplayChoiceHistory.vue

@@ -25,7 +25,6 @@ export default {
     select(option) {
       this.close();
       this.currentOption = option;
-      console.log(option);
       this.$emit('save-single-choice', this.name, option);
     },
     toggle() {

frontend/src/views/app/History.vue

@@ -15,8 +15,7 @@
           v-bind:options="['People I viewed', 'People I liked', 'Who viewed me', 'Who liked me', 'Whom I blocked']"></DropdownDisplayChoiceHistory>
       </div>
       <HistoryRecommendations
-        v-if="firstTimeAnalysisDone"
-        v-bind:ready="recommendations.length"
+        v-if="recommendationsAnalysisDone"
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></HistoryRecommendations>
@@ -57,7 +56,6 @@ export default {
       interests: [],
     },
     recommendationsAnalysisDone: false,
-    firstTimeAnalysisDone: false,
   }),
   methods: {
     async fetchUsers(request) {
@@ -111,7 +109,6 @@ export default {
         }
       }
       this.recommendationsAnalysisDone = true;
-      this.firstTimeAnalysisDone = true;
     },
     browseAgain() {
       this.recommendations = [];
@@ -125,17 +122,18 @@ export default {
       this.recommendationsAnalysisDone = false;
     },
     updateHistory(...args) {
-      const [request] = args;
-      this.browseAgain();
-      this.fetchUsers(request);
+      const [key, value] = args;
+      if (key === 'history') {
+        this.browseAgain();
+        this.fetchUsers(value);
+      }
     },
   },
   async created() {
     await this.fetchUsers('People I viewed');
   },
   deactivated() {
     if (!this.$route.path.startsWith('/users')) {
-      this.firstTimeAnalysisDone = false;
       this.browseAgain();
       this.fetchUsers('People I viewed');
       this.$el.scrollTop = 0;