Merge pull request #6 from LukaBRa/task-8

Implemented router and pagination

.github/workflows/ci.yaml

@@ -0,0 +1,25 @@
+name: test-on-push
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: npm install
+      run: |
+        npm install --force
+    - name: npm run build
+      run: |
+        npm run build
+    - name: npm run test:unit
+      run: | 
+        npm run test:unit

package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "axios": "^1.6.7",
     "pinia": "^2.1.7",
-    "vue": "^3.3.11"
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.9",

src/App.vue

@@ -1,29 +1,10 @@
 <script setup lang="ts">
-import HomePage from "./views/HomePage.vue";
-import MoviePage from "./views/MoviePage.vue";
-import { ref, computed } from "vue";
-
-const movieIdSelected = ref(-1);
-
-const selectMovie = (id:number) => {
-    movieIdSelected.value = id;
-} 
-
-const showMoviePage = computed(() => {
-    return movieIdSelected.value > -1;
-})
-
-const closeMoviePage = () => {
-    movieIdSelected.value = -1;
-}
 
 </script>
 
 <template>
 
-    <HomePage v-if="!showMoviePage" @selectMovie="selectMovie"/>
-
-    <MoviePage v-else="showMoviePage" :movieId="movieIdSelected" @closeMoviePage="closeMoviePage"/>
+    <router-view></router-view>
 
 </template>
 

src/assets/main.css

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 
+html {
+    scroll-behavior: smooth;
+}
+
 * {
     box-sizing: border-box;
     margin: 0;

src/components/ActionBar.vue

@@ -4,13 +4,16 @@ import { ref } from "vue";
 import type { Ref } from "vue";
 import useMoviesStore from "@/store/moviesStore";
 import useFilterButtonsStore from "@/store/filterButtonsStore";
+import { useRouter } from "vue-router";
 
 const inputSearchText: Ref<string> = ref("");
 const movieStore = useMoviesStore();
 const filterStore = useFilterButtonsStore();
+const router = useRouter();
 
 const handleSearch = () => {
     movieStore.searchMovies(inputSearchText.value, filterStore.selectedSearchFilter);
+    router.push("/?page=1");
 }
 
 </script>

src/components/MovieCard.vue

@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { formatGenres } from "@/utils/formatGenres";
+import { useRouter } from "vue-router";
 
 const props = defineProps(["movie"]);
+const router = useRouter();
 
 const releaseDate = computed(() => {
     return new Date(props.movie.releaseDate).getFullYear();
 })
 
+const selectMovie = (id: number) => {
+    router.push("/movie/" + id);
+}
 
 </script>
 
 <template>
 
     <div class="movie-card">
 
-        <img id="card-image" data-cy="card-img" @click="$emit('selectMovie', movie.id)" v-lazyload="movie.posterurl" :alt="movie.title">
+        <img id="card-image" data-cy="card-img" @click="selectMovie(movie.id)" v-lazyload="movie.posterurl" :alt="movie.title">
 
         <div class="movie-info">
 

src/components/MovieList.vue

@@ -1,20 +1,37 @@
 <script setup lang="ts">
 import MovieCard from './MovieCard.vue';
+import Pagination from './Pagination.vue';
 import useMoviesStore from '@/store/moviesStore';
 import useFilterButtonsStore from '@/store/filterButtonsStore';
-import { watch } from "vue";
+import { watch, ref, onMounted } from "vue";
+import { useRoute } from 'vue-router';
 
 const moviesStore = useMoviesStore();
 const filterStore = useFilterButtonsStore();
-const emit = defineEmits(['selectMovie']);
+const displayMovies = ref();
+const route = useRoute();
+
+const populateDisplayMovies = () => {
+    const pageNumber:number = parseInt(route.query.page as string) || 1;
+    displayMovies.value = moviesStore.movies.slice((pageNumber - 1) * 20, ((pageNumber - 1) * 20) + 20);
+}
+
+onMounted(() => {
+    populateDisplayMovies();
+}),
 
 watch(() => filterStore.selectedSortFilter, (newSortFilter, oldSortFilter) => {
     moviesStore.sortMovies(newSortFilter);
+    populateDisplayMovies();
 })
 
-const selectMovie = (id: number) => {
-    emit('selectMovie', id);
-}
+watch(() => route.query.page, (newSortFilter, oldSortFilter) => {
+    populateDisplayMovies();
+})
+
+watch(() => moviesStore.movies, (newSortFilter, oldSortFilter) => {
+    populateDisplayMovies();
+})
 
 </script>
 
@@ -24,11 +41,13 @@ const selectMovie = (id: number) => {
 
     <div class="container">
         <div id="movies" v-if="moviesStore.moviesCount > 0" class="movie-list">
-            <MovieCard data-cy="movie-card" v-for="movie in moviesStore.movies" :key="movie.id" :movie="movie" @selectMovie="selectMovie"/>
+            <MovieCard data-cy="movie-card" v-for="movie in displayMovies" :key="movie.id" :movie="movie" />
         </div>
         <h1 id="no-movies" v-else>No films found</h1>
     </div>
 
+    <Pagination />
+
     </section>
 
 </template>

src/components/PageNumber.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useRouter, useRoute, type LocationQueryValue } from 'vue-router';
+import { computed } from 'vue';
+
+const router = useRouter();
+const route = useRoute();
+const props = defineProps<{
+    pageNumber: {
+        n: number
+    }
+}>();
+
+const togglePage = (page: number) => {
+    if(route && route.name == "homepage"){
+        router.push(`/?page=${page}`);
+    }
+    if(route && route.name == "moviepage"){
+        router.push({ path: route.fullPath, query: { page } });
+    }
+}
+
+const activePage = computed(() => {
+    if(route && !route.query.page && props.pageNumber.n == 1){
+        return true
+    }
+    return parseInt(route && route.query.page as string) == props.pageNumber.n;
+});
+
+</script>
+
+<template>
+
+    <button id="page-number-button" @click="togglePage(pageNumber.n)" :class="{ active: activePage }">{{ pageNumber.n }}</button>
+
+</template>
+
+<style scoped>
+
+button {
+    font-size: 1.1rem;
+    padding: 5px 10px;
+    background: transparent;
+    color: #FFFFFF;
+    border: none;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+button.active {
+    background-color: #F65261;
+}
+
+</style>

src/components/Pagination.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import PageNumber from './PageNumber.vue';
+import useMoviesStore from '@/store/moviesStore';
+import { computed } from 'vue';
+
+const moviesStore = useMoviesStore();
+
+const pagesNumber = computed(() => {
+    return Math.ceil(moviesStore.moviesCount / 20);
+});
+
+</script>
+
+<template>
+
+    <div class="pagination">
+        <PageNumber v-for="n in pagesNumber" :pageNumber={n} />
+    </div>
+
+</template>
+
+<style scoped>
+.pagination {
+    margin-top: 30px;
+    margin-inline: auto;
+    width: max-content;
+}
+
+</style>

src/components/tests/unit/ActionBar.spec.js

@@ -5,6 +5,25 @@ import { createPinia, defineStore, setActivePinia } from "pinia";
 import { createTestingPinia } from "@pinia/testing";
 import useMoviesStore from "@/store/moviesStore";
 import useFilterButtonsStore from "@/store/filterButtonsStore";
+import { useRoute, useRouter } from "vue-router";
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+  useRouter: vi.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = vi.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
 
 const wrapper = mount(ActionBar, {
     global: {
@@ -13,7 +32,8 @@ const wrapper = mount(ActionBar, {
                 stubActions: false,
                 createSpy: vi.fn,
             })
-        ]
+        ],
+        stubs: ["router-link", "router-view"]
     }
 });