wip history

Author: supalarry

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

@@ -1,18 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <section class="mb-4 sm:mb-16 lg:mb-32">
-    <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">
-        {{recommendations.length}}</h1>
-      <DropdownDisplayChoiceHistory
-        v-on:save-single-choice="saveSingleChoice"
-        class="inline-block ml-4"
-        v-bind:name="'history'"
-        v-bind:starting-option="'People I viewed'"
-        v-bind:options="['People I viewed', 'People I liked', 'Who viewed me', 'Who liked me', 'Whom I blocked']"></DropdownDisplayChoiceHistory>
-    </div>
-    <div class="flex w-full items-stretch sm:items-center justify-center md:justify-start mb-12 relative">
+    <div v-if="recommendations.length && ready" class="flex w-full items-stretch sm:items-center justify-center md:justify-start mb-12 relative">
       <Sort
         v-bind:position="'left'"
         v-bind:startingOption="'Closest'"
@@ -42,7 +31,7 @@
         v-bind:name="'interests'"
         v-on:save-filter-multiple="saveFilterMultiple"></MultipleFiltersDropdown>
     </div>
-    <div v-if="ready" ref="recommendationCards" class="grid grid-cols-1 md:grid-cols-2 gap-2">
+    <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>
@@ -56,7 +45,6 @@ import Sort from '@/components/shared/Sort.vue';
 import FilterSliderDropdown from '@/components/shared/FilterSliderDropdown.vue';
 import RecommendationCard from '@/components/app/recommendations/RecommendationCard.vue';
 import MultipleFiltersDropdown from '@/components/shared/MultipleFiltersDropdown.vue';
-import DropdownDisplayChoiceHistory from '@/components/shared/DropdownDisplayChoiceHistory.vue';
 
 export default {
   props: ['title', 'recommendationsReceived', 'recommendationsAnalysis', 'ready'],
@@ -65,7 +53,6 @@ export default {
     RecommendationCard,
     FilterSliderDropdown,
     MultipleFiltersDropdown,
-    DropdownDisplayChoiceHistory,
   },
   data: () => ({
     recommendations: [],
@@ -177,6 +164,16 @@ export default {
         this.$emit('update-history', value);
       }
     },
+    setupRecommendations() {
+      this.recommendations = this.filterOutBlockedUsers(this.recommendationsReceived);
+      this.recommendationsBackup = this.recommendations;
+      this.filters.age.min = this.recommendationsAnalysis.age.min;
+      this.filters.age.max = this.recommendationsAnalysis.age.max;
+      this.filters.distance.min = this.recommendationsAnalysis.distance.min;
+      this.filters.distance.max = this.recommendationsAnalysis.distance.max;
+      this.filters.popularity.min = this.recommendationsAnalysis.popularity.min;
+      this.filters.popularity.max = this.recommendationsAnalysis.popularity.max;
+    },
   },
   watch: {
     sorting: {
@@ -192,17 +189,15 @@ export default {
         this.recommendations = base;
       },
       deep: true,
-    }
+    },
+    recommendations: {
+      handler() {
+        this.setupRecommendations();
+      },
+    },
   },
   beforeMount() {
-    this.recommendations = this.filterOutBlockedUsers(this.recommendationsReceived);
-    this.recommendationsBackup = this.recommendations;
-    this.filters.age.min = this.recommendationsAnalysis.age.min;
-    this.filters.age.max = this.recommendationsAnalysis.age.max;
-    this.filters.distance.min = this.recommendationsAnalysis.distance.min;
-    this.filters.distance.max = this.recommendationsAnalysis.distance.max;
-    this.filters.popularity.min = this.recommendationsAnalysis.popularity.min;
-    this.filters.popularity.max = this.recommendationsAnalysis.popularity.max;
-  }
+    this.setupRecommendations();
+  },
 };
 </script>

frontend/src/components/shared/DropdownDisplayChoiceHistory.vue

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

frontend/src/main.js

@@ -1,8 +1,5 @@
 import Vue from 'vue';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';
-import * as Sentry from '@sentry/browser';
-import { Vue as VueIntegration } from '@sentry/integrations';
-import { Integrations } from '@sentry/tracing';
 import http from './plugins/http';
 import errorMessenger from './plugins/errorMessenger';
 import App from './App.vue';
@@ -11,18 +8,6 @@ import store from './store';
 import validPassword from './validators/validPassword';
 import './assets/css/tailwind.css';
 
-Sentry.init({
-  dsn: 'https://fc31e918801742e2b1e691067496e257@o450203.ingest.sentry.io/5434440',
-  integrations: [
-    new VueIntegration({
-      Vue,
-      tracing: true,
-    }),
-    new Integrations.BrowserTracing(),
-  ],
-  tracesSampleRate: 1,
-});
-
 Vue.component('ValidationProvider', ValidationProvider);
 Vue.component('ValidationObserver', ValidationObserver);
 extend('validPassword', validPassword);

frontend/src/views/app/History.vue

@@ -3,10 +3,20 @@
   <div class="mx-4 sm:mx-16 lg:mx-32">
     <NavBar v-bind:currentRoute="'History'"></NavBar>
     <section class="mx-auto">
+      <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">
+          {{recommendations.length}}</h1>
+        <DropdownDisplayChoiceHistory
+          v-on:save-single-choice="updateHistory"
+          class="inline-block ml-4"
+          v-bind:name="'history'"
+          v-bind:starting-option="'People I viewed'"
+          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="recommendationsAnalysisDone"
-        v-on:update-history="updateHistory"
+        v-bind:ready="recommendations.length"
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></HistoryRecommendations>
@@ -19,13 +29,15 @@
 
 import NavBar from '@/components/shared/NavBar.vue';
 import HistoryRecommendations from '@/components/app/recommendations/HistoryRecommendations.vue';
+import DropdownDisplayChoiceHistory from '@/components/shared/DropdownDisplayChoiceHistory.vue';
 
 export default {
   name: 'History',
   props: ['recommendationsFromSettingUp'],
   components: {
     NavBar,
     HistoryRecommendations,
+    DropdownDisplayChoiceHistory,
   },
   data: () => ({
     recommendations: [],
@@ -48,9 +60,23 @@ export default {
     firstTimeAnalysisDone: false,
   }),
   methods: {
-    async fetchUsers() {
-      const recommendationsRequest = await this.$http.get('/recommendations');
-      this.recommendations = recommendationsRequest.data.recommendations;
+    async fetchUsers(request) {
+      if (request === 'People I viewed') {
+        const recommendationsRequest = await this.$http.get('/history/viewed');
+        this.recommendations = recommendationsRequest.data.viewed;
+      } else if (request === 'People I liked') {
+        const recommendationsRequest = await this.$http.get('/history/liked');
+        this.recommendations = recommendationsRequest.data.liked;
+      } else if (request === 'Who viewed me') {
+        const recommendationsRequest = await this.$http.get('/history/viewed/me');
+        this.recommendations = recommendationsRequest.data.viewed_me;
+      } else if (request === 'Who liked me') {
+        const recommendationsRequest = await this.$http.get('/history/liked/me');
+        this.recommendations = recommendationsRequest.data.liked_me;
+      } else if (request === 'Whom I blocked') {
+        const recommendationsRequest = await this.$http.get('/history/blocked');
+        this.recommendations = recommendationsRequest.data.bloked;
+      }
       this.recommendations.sort((a, b) => a.distance - b.distance);
       for (let i = 0; i < this.recommendations.length; i += 1) {
         this.recommendations[i].distance = Math.floor(this.recommendations[i].distance);
@@ -100,29 +126,18 @@ export default {
     },
     updateHistory(...args) {
       const [request] = args;
-      if (request === 'People I view') {
-        console.log(1);
-      } else if (request === 'People I like') {
-        console.log(2);
-      } else if (request === 'Who views me') {
-        console.log(3);
-      } else if (request === 'Who likes me') {
-        console.log(4);
-      } else if (request === 'Whom I block') {
-        console.log(5);
-      }
       this.browseAgain();
-      this.fetchUsers();
+      this.fetchUsers(request);
     },
   },
   async created() {
-    await this.fetchUsers();
+    await this.fetchUsers('People I viewed');
   },
   deactivated() {
     if (!this.$route.path.startsWith('/users')) {
       this.firstTimeAnalysisDone = false;
       this.browseAgain();
-      this.fetchUsers();
+      this.fetchUsers('People I viewed');
       this.$el.scrollTop = 0;
     }
   },