From b6bb849e2cfad081c757ab7892fe02adc1d6b463 Mon Sep 17 00:00:00 2001
From: Julian Lobbes <julian.lobbes@protonmail.com>
Date: Mon, 22 May 2023 03:12:10 +0200
Subject: [PATCH] feat(frontend): user list pagination

---
 frontend/src/app.css                   |   5 +
 frontend/src/routes/users/+page.svelte | 308 +++++++++++++------------
 2 files changed, 167 insertions(+), 146 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index a20b537..9f1f5dd 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -51,6 +51,11 @@
   button:focus {
     @apply ring-1 ring-neutral-400 ring-offset-1;
   }
+  button:disabled {
+    @apply opacity-25;
+    @apply bg-neutral-100;
+    @apply border-2 border-neutral-200;
+  }
 
   table {
     @apply border-collapse;
diff --git a/frontend/src/routes/users/+page.svelte b/frontend/src/routes/users/+page.svelte
index a2c72ca..6f7cba4 100644
--- a/frontend/src/routes/users/+page.svelte
+++ b/frontend/src/routes/users/+page.svelte
@@ -1,11 +1,7 @@
 <script lang='ts'>
   import { onMount } from 'svelte';
 
-  const errorMessages : String[] = [];
-  let error = false;
-  let loading = true;
-
-  type User = {
+  type Item = {
     id: number;
     email: string;
     first_name: string;
@@ -13,166 +9,186 @@
     created: Date;
     updated: Date;
   }
-  let currentItems: User[] = [];
-  let totalItemCount = 0;
-  let limit = 10;
-  let currentPage = 1;
-  let skip = 0;
-  $: totalPageCount = Math.ceil(totalItemCount / limit);
+  const _tableColumnCount = 6;
 
-  async function getUsersCount() {
-    const response = await fetch(`/api/users/total/`);
-    const responseJson = await response.json();
+  let currentState: 'finished' | 'loading' | 'error';
+  let errorMessages: string[] = [];
 
-    if (response.ok) {
-      if (responseJson) {
-        if (responseJson.hasOwnProperty('total')) {
-          if (typeof responseJson.total === 'number') {
-            return responseJson.total;
-          }
-        }
-      }
-      error = true;
-    } else {
-      // Try to parse the error messages
-      if (responseJson) {
-        if (responseJson.hasOwnProperty('detail')) {
-          if (Array.isArray(responseJson.detail)) {
-            for (let errorObj of responseJson.detail) {
-              if (errorObj.hasOwnProperty('msg')) {
-                if (typeof errorObj.msg === 'string') {
-                  errorMessages.push(errorObj.msg);
-                }
-              }
-            }
-          }
-        }
-      }
-      if (errorMessages.length === 0) errorMessages.push("Error during API call.")
-      error = true;
-    }
+  let currentItems: Item[] = [];
+  let totalItemCount: number | null;
+
+  const itemsPerPageOptions = [10, 25, 50, 100];
+  let currentItemsPerPage: number;
+
+  let currentPage: number;
+  let lastPage: number;
+  $: if (totalItemCount) {
+    lastPage = Math.ceil(totalItemCount / currentItemsPerPage) - 1;
+  } else {
+    lastPage = 0;
   }
 
-  async function getUsers(skip=0, limit=100) {
-    loading = true;
+  $: currentItemsOffset = currentPage * currentItemsPerPage;
 
-    totalItemCount = await getUsersCount();
-    if (error) return;
+  $: gotoPrevPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
+  async function handleGotoPrevPage() {
+    if (gotoPrevPageDisabled) return;
 
-    const response = await fetch(`/api/users/?skip=${skip}&limit=${limit}`);
-    const responseJson = await response.json();
-
-    if (response.ok) {
-      currentItems = responseJson;
-      loading = false;
-      return responseJson;
-    } else {
-      // Try to parse the error messages
-      if (responseJson) {
-        if (responseJson.hasOwnProperty('detail')) {
-          if (Array.isArray(responseJson.detail)) {
-            for (let errorObj of responseJson.detail) {
-              if (errorObj.hasOwnProperty('msg')) {
-                if (typeof errorObj.msg === 'string') {
-                  errorMessages.push(errorObj.msg);
-                }
-              }
-            }
-          }
-        }
-      }
-      loading = false;
-      error = true;
-    }
-  }
-
-  function handlePrevClick() {
     currentPage -= 1;
-    skip -= limit;
-    getUsers(skip, limit);
+    await updateTable();
   }
 
-  function handleNextClick() {
+  $: gotoNextPageDisabled = currentState !== 'finished' || currentPage === lastPage || lastPage === 0;
+  async function handleGotoNextPage() {
+    if (gotoNextPageDisabled) return;
+
     currentPage += 1;
-    skip += limit;
-    getUsers(skip, limit);
+    await updateTable();
   }
 
-  function handleFirstClick() {
-    currentPage = 1;
-    skip = 0;
-    getUsers(skip, limit);
+  $: gotoFirstPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
+  async function handleGotoFirstPage() {
+    if (gotoFirstPageDisabled) return;
+
+    currentPage = 0;
+    await updateTable();
   }
 
-  function handleLastClick() {
-    currentPage = totalPageCount;
-    skip = limit * (totalPageCount - 1);
-    getUsers(skip, limit);
+  $: gotoLastPageDisabled = currentState !== 'finished' || currentPage === lastPage || lastPage === 0;
+  async function handleGotoLastPage() {
+    if (gotoLastPageDisabled) return;
+
+    currentPage = lastPage;
+    await updateTable();
+  }
+
+  interface ApiError {
+    // FIXME error message parsing doesn't work right now
+    detail: { msg: string; loc?: string[]; type?: string }[]
+  }
+
+  async function getTotalItemCount(): Promise<number> {
+    interface ApiResponse {
+      total: number
+    }
+
+    const response = await fetch(`/api/users/total/`);
+    const json = await response.json();
+
+    if (!response.ok) {
+      // Capture error messages from response body
+      const apiError = json as ApiError;
+      for (let detail of apiError.detail) {
+        errorMessages.push(detail.msg);
+      }
+      throw new Error(`API request failed with status ${response.status}: ${response.statusText}`);
+    }
+
+    const apiResponse = json as ApiResponse;
+    return apiResponse.total;
+  }
+
+  async function getItems(offset: number = currentItemsOffset, count: number = currentItemsPerPage): Promise<Item[]> {
+    const urlParameters = new URLSearchParams({
+      skip: `${offset}`,
+      limit: `${count}`,
+    });
+
+    const response = await fetch(`/api/users/?${urlParameters}`);
+    const json = await response.json();
+
+    if (!response.ok) {
+      // Capture error messages from response body
+      const apiError = json as ApiError;
+      for (let detail of apiError.detail) {
+        errorMessages.push(detail.msg);
+      }
+      throw new Error(`API request failed with status ${response.status}: ${response.statusText}`);
+    }
+
+    const apiResponse = json as Item[];
+    return apiResponse;
+  }
+
+  async function updateTable() {
+    try {
+      currentState = 'loading';
+      totalItemCount = await getTotalItemCount();
+      currentItems = await getItems();
+      currentState = 'finished';
+    } catch (error) {
+      console.log(error);
+      currentState = 'error';
+    }
   }
 
   onMount(async () => {
-    getUsers(skip, limit);
+    // Initialize vars
+    currentItems = [];
+    totalItemCount = null;
+    currentItemsPerPage  = itemsPerPageOptions[0];
+    currentPage = 0;
+    currentState = 'finished';
+
+    await updateTable();
   });
 </script>
 
-<div class="flex flex-col items-center">
-  <h1 class="text-center">Users</h1>
-  {#if loading}
-    <div class="min-h-screen flex flex-col items-center justify-center">
-      <p>Loading...</p>
-    </div>
-  {:else if error}
-    {#if errorMessages.length}
-      {#each errorMessages as errorMessage}
-        <p style="color: red">{errorMessage}</p>
+<table>
+  <caption>List of users</caption>
+  <thead>
+    <tr>
+      <th>ID</th>
+      <th>Email</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Created</th>
+      <th>Updated</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#if currentState === 'finished'}
+      {#each currentItems as user}
+        <tr>
+          <td>{user.id}</td>
+          <td>{user.email}</td>
+          <td>{user.first_name}</td>
+          <td>{user.last_name}</td>
+          <td>{new Date(user.created).toLocaleDateString()}</td>
+          <td>{new Date(user.updated).toLocaleDateString()}</td>
+        </tr>
       {/each}
-    {:else}
-      <p style="color: red">An unknown error occurred.</p>
+    {:else if currentState === 'loading'}
+      <tr>
+        <td colspan={_tableColumnCount}>Loading...</td>
+      </tr>
+    {:else if currentState === 'error'}
+      <tr>
+        {#each errorMessages as message}
+          <td colspan={_tableColumnCount} class="text-red-500">{message}</td>
+        {/each}
+      </tr>
     {/if}
-  {:else}
-    <div>
-      <table>
-        <caption>List of users</caption>
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Email</th>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Created</th>
-            <th>Updated</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each currentItems as user}
-            <tr>
-              <td>{user.id}</td>
-              <td>{user.email}</td>
-              <td>{user.first_name}</td>
-              <td>{user.last_name}</td>
-              <td>{new Date(user.created).toLocaleDateString()}</td>
-              <td>{new Date(user.updated).toLocaleDateString()}</td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-    <div class="flex items-center">
-      <select bind:value={limit} on:change={getUsers(skip, limit)}>
-        <option value="10">
-          10
-        </option>
-        <option value="25">
-          25
-        </option>
-        <option value="50">
-          50
-        </option>
-      </select>
-      <button on:click={handleFirstClick} disabled={currentPage === 1} class="disabled:opacity-10">first</button>
-      <button on:click={handlePrevClick} disabled={currentPage === 1} class="disabled:opacity-10">prev</button>
-      <button on:click={handleNextClick} disabled={currentPage === totalPageCount} class="disabled:opacity-10">next</button>
-      <button on:click={handleLastClick} disabled={currentPage === totalPageCount} class="disabled:opacity-10">last</button>
-    </div>
-  {/if}
-</div>
+  </tbody>
+</table>
+<button on:click={handleGotoFirstPage} disabled={gotoFirstPageDisabled}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+    <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" />
+  </svg>
+</button>
+<button on:click={handleGotoPrevPage} disabled={gotoPrevPageDisabled}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+    <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
+  </svg>
+</button>
+<button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+  </svg>
+</button>
+<button on:click={handleGotoLastPage} disabled={gotoLastPageDisabled}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+    <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+    <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+  </svg>
+</button>