From ce3e4693995a0a781a00313186980d02db0e5fe6 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Thu, 1 Sep 2022 23:16:29 -0500
Subject: [PATCH] Getting pagination on the screen, buttons do nothing.

---
 src/lib/components/pagination/index.svelte | 37 +++++++++++++++++++---
 src/lib/stores/boredState.ts               |  1 +
 src/lib/types.ts                           |  2 +-
 src/routes/+page.svelte                    |  2 +-
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte
index 36a42e9..97616b6 100644
--- a/src/lib/components/pagination/index.svelte
+++ b/src/lib/components/pagination/index.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
   import { boredState } from '$root/lib/stores/boredState';
 
-  const totalCount = $boredState.search.totalCount || 1; // TODO: Check default value
+  const totalCount = $boredState.search.totalCount; // TODO: Check default value
+  console.log('totalCount', totalCount);
   $: pageSize = $boredState.search.pageSize;
+  console.log('pageSize', pageSize);
   $: currentPage = $boredState.search.currentPage;
+  console.log('currentPage', currentPage);
   $: skip = $boredState.search.skip;
+  console.log('skip', skip);
 
   const totalPages: number = Math.ceil(totalCount / pageSize);
+  console.log('totalPages', totalPages);
   const prevPage: number = currentPage - 1;
   const nextPage: number = currentPage + 1;
   const hasNextPage: boolean = nextPage <= totalPages;
@@ -15,17 +20,41 @@
     totalCount - currentPage * pageSize >= 0 ? totalCount - currentPage * pageSize : 0;
 
   const pageArray = Array.from({ length: 10 }, (_, i) => i + 1);
-  console.log('pageArray', pageArray);
+  // console.log('pageArray', pageArray);
 </script>
 
 <div class="container">
+  <button type="button" class="btn" disabled={!hasPrevPage}>Prev</button>
   {#each pageArray as page}
-    <p>{page}</p>
+    <button
+      type="button"
+      class="btn"
+      aria-current={page === currentPage}
+      class:current={page === currentPage}>{page}</button
+    >
   {/each}
+  <button type="button" class="btn" disabled={!hasNextPage}>Next</button>
 </div>
 
 <style lang="scss">
   .container {
-    display: grid;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin: 3rem 0;
+  }
+
+  button {
+    /* min-width: 50px; */
+    &[aria-current],
+    &.current {
+      color: black; // TODO: Fix these colors
+      background: white;
+    }
+    &[disabled] {
+      pointer-events: none;
+      color: var(--lightGrey);
+      text-decoration: line-through;
+    }
   }
 </style>
diff --git a/src/lib/stores/boredState.ts b/src/lib/stores/boredState.ts
index 927aca3..1052131 100644
--- a/src/lib/stores/boredState.ts
+++ b/src/lib/stores/boredState.ts
@@ -11,6 +11,7 @@ const state = () => {
   }
   const initial: BoredStore = {
     loading: false, dialog: initialDialog, search: {
+      totalCount: 1,
       pageSize: 25,
       skip: 0,
       currentPage: 1
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 51d2dac..690db17 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -7,7 +7,7 @@ export type Dialog = {
 }
 
 export type Search = {
-  totalCount?: number;
+  totalCount: number;
   pageSize: number;
   skip: number;
   currentPage: number;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 14367d1..c60749a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -71,7 +71,7 @@
         <Game on:removeGameEvent={handleRemoveGame} {game} />
       {/each}
     </div>
-    <!-- <Pagination /> -->
+    <Pagination />
   </div>
 {/if}