Removed A LOT of the functionality in MoviesList and replaced it with the ResultsList component. Now loading of search results, lists (either directly by query or link) and users requests from profile are all separated out to their own page component; Search.vue, ListPage.vue and Profile.vue respectivly. With the change Home has been completly redone to use this new funcionality
This commit is contained in:
@@ -2,27 +2,84 @@
|
||||
<section>
|
||||
<LandingBanner />
|
||||
|
||||
<movies-list v-for="item in homepageLists" :propList="item" :shortList="true"></movies-list>
|
||||
<div v-for="list in lists">
|
||||
<list-header :title="list.title" :link="'/list/' + list.route" />
|
||||
|
||||
<results-list :results="list.data" :shortList="true" />
|
||||
<loader v-if="!list.data.length" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from '../storage.js'
|
||||
import LandingBanner from '@/components/LandingBanner.vue'
|
||||
import MoviesList from './MoviesList.vue'
|
||||
import ListHeader from '@/components/ListHeader.vue'
|
||||
import ResultsList from '@/components/ResultsList.vue'
|
||||
import Loader from '@/components/ui/Loader.vue'
|
||||
|
||||
import { getTmdbMovieListByName, getRequests } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: { LandingBanner, MoviesList },
|
||||
components: { LandingBanner, ResultsList, ListHeader, Loader },
|
||||
data(){
|
||||
return {
|
||||
homepageLists: storage.homepageLists,
|
||||
imageFile: 'dist/pulp-fiction.jpg'
|
||||
imageFile: 'dist/pulp-fiction.jpg',
|
||||
requests: [],
|
||||
nowplaying: [],
|
||||
upcoming: [],
|
||||
popular: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lists() {
|
||||
return [
|
||||
{
|
||||
title: 'Requests',
|
||||
route: 'request',
|
||||
data: this.requests
|
||||
},
|
||||
{
|
||||
title: 'Now playing',
|
||||
route: 'now_playing',
|
||||
data: this.nowplaying
|
||||
},
|
||||
{
|
||||
title: 'Upcoming',
|
||||
route: 'upcoming',
|
||||
data: this.upcoming
|
||||
},
|
||||
{
|
||||
title: 'Popular',
|
||||
route: 'popular',
|
||||
data: this.popular
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchRequests() {
|
||||
getRequests()
|
||||
.then(results => this.requests = results.results)
|
||||
},
|
||||
fetchNowPlaying() {
|
||||
getTmdbMovieListByName('now_playing')
|
||||
.then(results => this.nowplaying = results.results)
|
||||
},
|
||||
fetchUpcoming() {
|
||||
getTmdbMovieListByName('upcoming')
|
||||
.then(results => this.upcoming = results.results)
|
||||
},
|
||||
fetchPopular() {
|
||||
getTmdbMovieListByName('popular')
|
||||
.then(results => this.popular = results.results)
|
||||
}
|
||||
},
|
||||
created(){
|
||||
document.title = 'TMDb';
|
||||
storage.backTitle = document.title;
|
||||
this.fetchRequests()
|
||||
this.fetchNowPlaying()
|
||||
this.fetchUpcoming()
|
||||
this.fetchPopular()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user