feat(*): Add pagination

pages/repo/_id.vue

@@ -35,16 +35,18 @@
         <header :class="styles.header">
           <div :class="styles.texts">
             <the-text :class="styles.title" tag="h1">
-              {{ repository.data.name }}
+              <a
+                :class="styles.link"
+                :href="repository.data.url"
+                target="_blank"
+              >
+                {{ repository.data.name }}
+              </a>
             </the-text>
 
             <div :class="styles.stats">
               <repo-stats :class="styles.statsList" v-bind="repository.data" />
             </div>
-
-            <the-text :class="styles.description" tag="p">
-              {{ repository.data.description }}
-            </the-text>
           </div>
 
           <repo-lang
@@ -53,6 +55,10 @@
             size="30"
           />
         </header>
+
+        <the-text :class="styles.description" tag="p">
+          {{ repository.data.description }}
+        </the-text>
       </div>
 
       <div :class="styles.issuesBlock">
@@ -116,7 +122,7 @@
             </ul>
 
             <pagination
-              :pagination="pagination"
+              v-bind="pagination"
               :wrapper-class="styles.pagination"
               :on-click="getRepoIssues"
             />
@@ -143,16 +149,17 @@
 <script>
 import styles from './repo.css?module';
 import TheText from '@/src/components/TheText/TheText';
-import Pagination from '@/src/components/Pagination/Pagination';
+import Pagination, {
+  PAGINATION_DEFAULT_STATE,
+} from '@/src/components/Pagination/Pagination';
 import RepoStats from '@/src/components/RepoStats/RepoStats';
 import IconIssue from '@/src/components/Icons/IconIssue';
 import Skeleton from '@/src/components/Skeleton/Skeleton';
 import RepoLang from '@/src/components/RepoLang/RepoLang';
 import getRepoProgrammingLanguage from '@/src/lib/getRepoProgrammingLanguage';
+import { DAY } from '@/src/constants';
 import { DATA_STATUS, DEFAULT_DATA_OBJECT } from '@/src/interfaces/Data';
 
-const DAY = 24 * 3600 * 1000;
-
 export default {
   components: {
     TheText,
@@ -167,12 +174,9 @@ export default {
       DATA_STATUS,
       repository: { ...DEFAULT_DATA_OBJECT },
       issues: { ...DEFAULT_DATA_OBJECT },
-      pagination: {
-        previous: null,
-        next: null,
-      },
-      repoID: this.$route.params.id,
       issuesSkeletons: 10,
+      pagination: { ...PAGINATION_DEFAULT_STATE },
+      repoID: this.$route.params.id,
     };
   },
   computed: {
@@ -207,8 +211,7 @@ export default {
           this.repository.data = repo;
           this.repository.loadingStatus = DATA_STATUS.LOADED;
         })
-        .catch((err) => {
-          this.repository.errorText = err.message;
+        .catch(() => {
           this.repository.loadingStatus = DATA_STATUS.FAILED;
         });
     },
@@ -218,21 +221,22 @@ export default {
     getRepoIssues(url) {
       this.issues.loadingStatus = DATA_STATUS.LOADING;
 
+      this.pagination.current = url;
+
       this.$api
         .getRepositoryIssues(this.repoID, url)
-        .then(({ results, next, previous }) => {
-          if (results.length) {
-            this.issues.data = results;
-            this.issues.loadingStatus = DATA_STATUS.LOADED;
-          } else {
+        .then(({ results, count }) => {
+          if (!results.length) {
             this.issues.loadingStatus = DATA_STATUS.IDLE;
           }
 
-          this.pagination.next = next;
-          this.pagination.previous = previous;
+          this.issues.data = results;
+          this.issues.loadingStatus = DATA_STATUS.LOADED;
+
+          this.pagination.total = count;
+          this.pagination.perPage = 10;
         })
-        .catch((err) => {
-          this.issues.errorText = err.message;
+        .catch(() => {
           this.issues.loadingStatus = DATA_STATUS.FAILED;
         });
     },

pages/repo/repo.css

@@ -13,6 +13,15 @@
 
 .title {
   text-transform: capitalize;
+
+  & a {
+    transition: color var(--primary-transition-time);
+
+    &:hover,
+    &:focus {
+      color: #8a4dee;
+    }
+  }
 }
 
 .issuesTitle span {
@@ -22,7 +31,7 @@
 }
 
 .description {
-  margin-top: 8px;
+  margin-top: 24px;
 }
 
 .header {

pages/repos/my_repos/index.css

@@ -42,8 +42,6 @@
 }
 
 .pagination {
-  display: flex;
-  justify-content: space-around;
   margin-top: 56px;
 }
 

pages/repos/my_repos/index.vue

@@ -18,7 +18,7 @@
       />
 
       <pagination
-        :pagination="pagination"
+        v-bind="pagination"
         :wrapper-class="styles.pagination"
         :buttons-class="styles.paginationControl"
         :on-click="getRepos"
@@ -32,7 +32,9 @@ import styles from './index.css?module';
 import TheText from '@/src/components/TheText/TheText';
 import BlockWrapper from '@/src/components/BlockWrapper/BlockWrapper';
 import UserRepos from '@/src/components/UserRepos/UserRepos';
-import Pagination from '@/src/components/Pagination/Pagination';
+import Pagination, {
+  PAGINATION_DEFAULT_STATE,
+} from '@/src/components/Pagination/Pagination';
 import { DATA_STATUS, DEFAULT_DATA_OBJECT } from '@/src/interfaces/Data';
 
 export default {
@@ -45,12 +47,8 @@ export default {
   data() {
     return {
       DATA_STATUS,
-      repos: DEFAULT_DATA_OBJECT,
-      repoErr: null,
-      pagination: {
-        previous: null,
-        next: null,
-      },
+      repos: { ...DEFAULT_DATA_OBJECT },
+      pagination: { ...PAGINATION_DEFAULT_STATE },
     };
   },
   computed: {
@@ -59,7 +57,7 @@ export default {
     },
   },
   created() {
-    this.getRepos();
+    this.getRepos(this.$route.query?.page);
   },
   methods: {
     changeRepoStatus(id, nextStatus) {
@@ -76,15 +74,17 @@ export default {
       return status === 'added' ? this.removeRepository : this.addRepository;
     },
 
-    getRepos(url) {
+    getRepos(pageNumber) {
       const { repos, $api } = this;
 
       repos.loadingStatus = DATA_STATUS.LOADING;
 
+      if (pageNumber) this.pagination.current = Number(pageNumber);
+
       $api
-        .getUserRepositories(url)
+        .getUserRepositories(pageNumber)
         .then((response) => {
-          const { results, next, previous } = response;
+          const { results, count } = response;
 
           if (!results.length) {
             repos.loadingStatus = DATA_STATUS.IDLE;
@@ -94,8 +94,8 @@ export default {
           repos.data = results.sort((a) => (a.status === 'added' ? -1 : 1));
           repos.loadingStatus = DATA_STATUS.LOADED;
 
-          this.pagination.next = next;
-          this.pagination.previous = previous;
+          this.pagination.total = count;
+          this.pagination.perPage = 10;
         })
         .catch((err) => {
           repos.loadingStatus = DATA_STATUS.FAILED;

plugins/api/reposAPI.ts

@@ -27,7 +27,7 @@ interface Store {
 }
 
 export interface RepositoriesAPIMethods {
-  getUserRepositories(url: string): Promise<UserRepositories>;
+  getUserRepositories(pageNumber?: number): Promise<UserRepositories>;
   addUserRepository(id: string): Promise<void>;
   removeUserRepository(id: string): Promise<void>;
   getRepositories(filtersState?: Filters): Promise<Repositories>;
@@ -54,8 +54,12 @@ export const repositoriesAPICreator = (
   } = config;
 
   return {
-    getUserRepositories(url = userURL.repositories) {
-      return $get<UserRepositoriesData>(url, {
+    getUserRepositories(pageNumber?: number) {
+      let url = userURL.repositories;
+
+      if (pageNumber) url += `?page=${pageNumber}`;
+
+      return $get<UserRepositoriesData>(url.toString(), {
         headers: { Authorization: `JWT ${store.state.auth}` },
       }).then((data) => ({
         ...data,

src/blocks/AppHeader/AppHeader.vue

@@ -46,14 +46,14 @@
 
         <ul v-else :class="styles.headerNavList">
           <li :class="styles.headerNavItem">
-            <a :class="styles.headerNavLink" href="#">
-              <img
-                :class="styles.avatar"
-                :src="user.avatar"
-                :alt="user.username"
-              />
+            <img
+              :class="styles.avatar"
+              :src="user.avatar"
+              :alt="user.username"
+            />
+            <span>
               {{ user.username }}
-            </a>
+            </span>
           </li>
           <li :class="styles.headerNavItem">
             <n-link

src/components/Icons/AddIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg-icon :size="size" view-box="0 0 427 427">
+    <path
+      d="M405.332 192H234.668V21.332C234.668 9.559 225.109 0 213.332 0 201.559 0 192 9.559 192 21.332V192H21.332C9.559 192 0 201.559 0 213.332c0 11.777 9.559 21.336 21.332 21.336H192v170.664c0 11.777 9.559 21.336 21.332 21.336 11.777 0 21.336-9.559 21.336-21.336V234.668h170.664c11.777 0 21.336-9.559 21.336-21.336 0-11.773-9.559-21.332-21.336-21.332zm0 0"
+    />
+  </svg-icon>
+</template>
+
+<script>
+import SvgIcon from '~/src/components/Icons/SvgIcon.vue';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  props: {
+    size: {
+      default: 16,
+      type: [Number, String],
+      required: false,
+    },
+  },
+};
+</script>

src/components/Icons/DeleteIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg-icon :size="size" view-box="0 0 512 512">
+    <path
+      d="M424 64h-88V48c0-26.467-21.533-48-48-48h-64c-26.467 0-48 21.533-48 48v16H88c-22.056 0-40 17.944-40 40v56c0 8.836 7.164 16 16 16h8.744l13.823 290.283C87.788 491.919 108.848 512 134.512 512h242.976c25.665 0 46.725-20.081 47.945-45.717L439.256 176H448c8.836 0 16-7.164 16-16v-56c0-22.056-17.944-40-40-40zM208 48c0-8.822 7.178-16 16-16h64c8.822 0 16 7.178 16 16v16h-96zM80 104c0-4.411 3.589-8 8-8h336c4.411 0 8 3.589 8 8v40H80zm313.469 360.761A15.98 15.98 0 01377.488 480H134.512a15.98 15.98 0 01-15.981-15.239L104.78 176h302.44z"
+    /><path
+      d="M256 448c8.836 0 16-7.164 16-16V224c0-8.836-7.164-16-16-16s-16 7.164-16 16v208c0 8.836 7.163 16 16 16zM336 448c8.836 0 16-7.164 16-16V224c0-8.836-7.164-16-16-16s-16 7.164-16 16v208c0 8.836 7.163 16 16 16zM176 448c8.836 0 16-7.164 16-16V224c0-8.836-7.164-16-16-16s-16 7.164-16 16v208c0 8.836 7.163 16 16 16z"
+    />
+  </svg-icon>
+</template>
+
+<script>
+import SvgIcon from '~/src/components/Icons/SvgIcon.vue';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  props: {
+    size: {
+      default: 16,
+      type: [Number, String],
+      required: false,
+    },
+  },
+};
+</script>

src/components/Icons/SuccessIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg :width="size" :height="size" fill="none" viewBox="0 0 16 16">
+  <svg :width="iconSize" :height="iconSize" fill="none" viewBox="0 0 16 16">
     <circle cx="8" cy="8" r="8" fill="#53B124" />
     <path
       d="M6.82174 10.694L4.4646 8.33687L5.13793 7.66354L6.87793 9.40163L6.82174 9.34687L10.8622 5.3064L11.5356 5.97973L7.4951 10.0207L6.82222 10.6935L6.82174 10.694Z"
@@ -17,5 +17,10 @@ export default {
       required: false,
     },
   },
+  computed: {
+    iconSize() {
+      return this.$props.size + 'px';
+    },
+  },
 };
 </script>

src/components/Icons/SvgIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg :width="iconSize" :height="iconSize" :viewBox="viewBox" :fill="color">
+    <slot />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: [Number, String],
+      default: 16,
+      required: false,
+    },
+    viewBox: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    color: {
+      type: String,
+      default: 'currentColor',
+      required: false,
+    },
+  },
+  computed: {
+    iconSize() {
+      return this.$props.size + 'px';
+    },
+  },
+};
+</script>