Skip to content

Commit 7dd537a

Browse files
supalarrysupalarry
committed
save scroll position in browse and search
1 parent c9c8812 commit 7dd537a

File tree

3 files changed

+85
-47
lines changed

3 files changed

+85
-47
lines changed

‎frontend/src/App.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div id="app" class="antialiased" v-bind:style="{background: getBackground}">
3-
<router-view/>
3+
<keep-alive include="Browse,Search">
4+
<router-view/>
5+
</keep-alive>
46
</div>
57
</template>
68

‎frontend/src/views/app/Browse.vue‎

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@
1414

1515
<script>
1616
/* eslint-disable max-len */
17+
1718
import NavBar from '@/components/shared/NavBar.vue';
1819
import Recommendations from '@/components/app/recommendations/Recommendations.vue';
1920
2021
export default {
22+
name: 'Browse',
2123
props: ['recommendationsFromSettingUp'],
2224
components: {
2325
NavBar,
@@ -42,47 +44,70 @@ export default {
4244
},
4345
recommendationsAnalysisDone: false,
4446
}),
45-
async created() {
46-
if (this.recommendationsFromSettingUp) {
47-
this.recommendations = this.recommendationsFromSettingUp;
48-
} else {
49-
const recommendationsRequest = await this.$http.get('/recommendations');
50-
this.recommendations = recommendationsRequest.data.recommendations;
51-
}
52-
this.recommendations.sort((a, b) => a.distance - b.distance);
53-
for (let i = 0; i < this.recommendations.length; i += 1) {
54-
this.recommendations[i].distance = Math.floor(this.recommendations[i].distance);
55-
if (this.recommendations[i].age < 18) {
56-
this.recommendations[i].age = 18;
57-
}
58-
if (this.recommendationsAnalysis.age.min === null || this.recommendations[i].age < this.recommendationsAnalysis.age.min) {
59-
this.recommendationsAnalysis.age.min = this.recommendations[i].age;
60-
}
61-
if (this.recommendationsAnalysis.age.max === null || this.recommendations[i].age > this.recommendationsAnalysis.age.max) {
62-
this.recommendationsAnalysis.age.max = this.recommendations[i].age;
63-
}
64-
if (this.recommendationsAnalysis.distance.min === null || this.recommendations[i].distance < this.recommendationsAnalysis.distance.min) {
65-
this.recommendationsAnalysis.distance.min = this.recommendations[i].distance;
47+
methods: {
48+
async fetchUsers() {
49+
if (this.recommendationsFromSettingUp) {
50+
this.recommendations = this.recommendationsFromSettingUp;
51+
} else {
52+
const recommendationsRequest = await this.$http.get('/recommendations');
53+
this.recommendations = recommendationsRequest.data.recommendations;
6654
}
67-
if (this.recommendationsAnalysis.distance.max === null || this.recommendations[i].distance > this.recommendationsAnalysis.distance.max) {
68-
this.recommendationsAnalysis.distance.max = this.recommendations[i].distance;
69-
}
70-
if (this.recommendationsAnalysis.popularity.min === null || this.recommendations[i].heat_score < this.recommendationsAnalysis.popularity.min) {
71-
this.recommendationsAnalysis.popularity.min = this.recommendations[i].heat_score;
72-
}
73-
if (this.recommendationsAnalysis.popularity.max === null || this.recommendations[i].heat_score > this.recommendationsAnalysis.popularity.max) {
74-
this.recommendationsAnalysis.popularity.max = this.recommendations[i].heat_score;
75-
}
76-
const interests = this.recommendations[i].tags;
77-
this.recommendations[i].interests = [];
78-
for (let j = 0; j < interests.length; j += 1) {
79-
this.recommendations[i].interests.push(interests[j].name);
80-
if (this.recommendationsAnalysis.interests.indexOf(interests[j].name) === -1) {
81-
this.recommendationsAnalysis.interests.push(interests[j].name);
55+
this.recommendations.sort((a, b) => a.distance - b.distance);
56+
for (let i = 0; i < this.recommendations.length; i += 1) {
57+
this.recommendations[i].distance = Math.floor(this.recommendations[i].distance);
58+
if (this.recommendations[i].age < 18) {
59+
this.recommendations[i].age = 18;
60+
}
61+
if (this.recommendationsAnalysis.age.min === null || this.recommendations[i].age < this.recommendationsAnalysis.age.min) {
62+
this.recommendationsAnalysis.age.min = this.recommendations[i].age;
63+
}
64+
if (this.recommendationsAnalysis.age.max === null || this.recommendations[i].age > this.recommendationsAnalysis.age.max) {
65+
this.recommendationsAnalysis.age.max = this.recommendations[i].age;
66+
}
67+
if (this.recommendationsAnalysis.distance.min === null || this.recommendations[i].distance < this.recommendationsAnalysis.distance.min) {
68+
this.recommendationsAnalysis.distance.min = this.recommendations[i].distance;
69+
}
70+
if (this.recommendationsAnalysis.distance.max === null || this.recommendations[i].distance > this.recommendationsAnalysis.distance.max) {
71+
this.recommendationsAnalysis.distance.max = this.recommendations[i].distance;
72+
}
73+
if (this.recommendationsAnalysis.popularity.min === null || this.recommendations[i].heat_score < this.recommendationsAnalysis.popularity.min) {
74+
this.recommendationsAnalysis.popularity.min = this.recommendations[i].heat_score;
75+
}
76+
if (this.recommendationsAnalysis.popularity.max === null || this.recommendations[i].heat_score > this.recommendationsAnalysis.popularity.max) {
77+
this.recommendationsAnalysis.popularity.max = this.recommendations[i].heat_score;
78+
}
79+
const interests = this.recommendations[i].tags;
80+
this.recommendations[i].interests = [];
81+
for (let j = 0; j < interests.length; j += 1) {
82+
this.recommendations[i].interests.push(interests[j].name);
83+
if (this.recommendationsAnalysis.interests.indexOf(interests[j].name) === -1) {
84+
this.recommendationsAnalysis.interests.push(interests[j].name);
85+
}
8286
}
8387
}
88+
this.recommendationsAnalysisDone = true;
89+
},
90+
browseAgain() {
91+
this.recommendations = [];
92+
this.recommendationsAnalysis.age.min = null;
93+
this.recommendationsAnalysis.age.max = null;
94+
this.recommendationsAnalysis.distance.min = null;
95+
this.recommendationsAnalysis.distance.max = null;
96+
this.recommendationsAnalysis.popularity.min = null;
97+
this.recommendationsAnalysis.popularity.max = null;
98+
this.recommendationsAnalysis.interests = [];
99+
this.recommendationsAnalysisDone = false;
100+
},
101+
},
102+
async created() {
103+
await this.fetchUsers();
104+
},
105+
deactivated() {
106+
if (!this.$route.path.startsWith('/users')) {
107+
this.browseAgain();
108+
this.fetchUsers();
109+
this.$el.scrollTop = 0;
84110
}
85-
this.recommendationsAnalysisDone = true;
86111
},
87112
};
88113

‎frontend/src/views/app/Search.vue‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ import MultipleFilters from '@/components/shared/MultipleFilters.vue';
6969
import Recommendations from '@/components/app/recommendations/Recommendations.vue';
7070
7171
export default {
72+
name: 'Search',
7273
components: {
7374
MultipleFilters,
7475
NavBar,
@@ -120,6 +121,18 @@ export default {
120121
const [name, filters] = multiple;
121122
this.filters[name] = filters;
122123
},
124+
async fetchUsersOverfiew() {
125+
const sliderRangesRequest = await this.$http.get('/search/values');
126+
const values = sliderRangesRequest.data.search_minmax;
127+
this.sliders.age.min = values.min_age;
128+
if (this.sliders.age.min < 18) {
129+
this.sliders.age.min = 18;
130+
}
131+
this.sliders.age.max = values.max_age;
132+
this.sliders.popularity.min = values.min_score;
133+
this.sliders.popularity.max = values.max_score;
134+
this.sliderValuesFetched = true;
135+
},
123136
async search() {
124137
const searchRequest = await this.$http.post('/search', {
125138
min_age: this.filters.age.min,
@@ -179,16 +192,14 @@ export default {
179192
},
180193
},
181194
async mounted() {
182-
const sliderRangesRequest = await this.$http.get('/search/values');
183-
const values = sliderRangesRequest.data.search_minmax;
184-
this.sliders.age.min = values.min_age;
185-
if (this.sliders.age.min < 18) {
186-
this.sliders.age.min = 18;
195+
await this.fetchUsersOverfiew();
196+
},
197+
deactivated() {
198+
if (!this.$route.path.startsWith('/users')) {
199+
this.searchAgain();
200+
this.fetchUsersOverfiew();
201+
this.$el.scrollTop = 0;
187202
}
188-
this.sliders.age.max = values.max_age;
189-
this.sliders.popularity.min = values.min_score;
190-
this.sliders.popularity.max = values.max_score;
191-
this.sliderValuesFetched = true;
192203
},
193204
};
194205

0 commit comments

Comments
 (0)