Last active
April 6, 2021 01:26
-
-
Save lucasdu4rte/437bcf0140e68618d120f27e08740a69 to your computer and use it in GitHub Desktop.
MirageJS simulate pagination
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createServer, Model, Response } from "miragejs"; | |
| export function paginator(items, currentPage, perPageItems) { | |
| const page = currentPage || 1 | |
| const perPage = perPageItems || 10 | |
| const offset = (page - 1) * perPage | |
| const totalPages = Math.ceil(items.length / perPage) | |
| const paginatedItems = items.slice(offset, page * perPage) | |
| return { | |
| Data: paginatedItems, | |
| CurrentPage: page, | |
| PageSize: perPage, | |
| TotalCount: items.length, | |
| TotalPages: totalPages, | |
| HasNext: totalPages > page ? page + 1 : null, | |
| HasPrevious: page >= 1, | |
| } | |
| } | |
| export function makeServer({ environment = "test" } = {}) { | |
| const server = createServer({ | |
| environment, | |
| models: { | |
| reviewers: Model, | |
| }, | |
| seeds(serverInstance) { | |
| serverInstance.db.loadData({ | |
| reviewers: [ | |
| { | |
| id: 1, | |
| name: "Joanne D Richardson", | |
| total: 1, | |
| }, | |
| { | |
| id: 2, | |
| name: "Nicholas Anderson Nix", | |
| total: 50, | |
| }, | |
| { | |
| id: 3, | |
| name: "Isaac Newton de Sessé", | |
| total: 100, | |
| }, | |
| { | |
| id: 4, | |
| name: "Joanne D Richardson", | |
| total: 1, | |
| }, | |
| { | |
| id: 5, | |
| name: "Nicholas Anderson Nix", | |
| total: 50, | |
| }, | |
| { | |
| id: 6, | |
| name: "Isaac Newton de Sessé", | |
| total: 100, | |
| }, | |
| { | |
| id: 7, | |
| name: "Joanne D Richardson", | |
| total: 1, | |
| }, | |
| { | |
| id: 8, | |
| name: "Nicholas Anderson Nix", | |
| total: 50, | |
| }, | |
| { | |
| id: 9, | |
| name: "Isaac Newton de Sessé", | |
| total: 100, | |
| }, | |
| { | |
| id: 10, | |
| name: "Joanne D Richardson", | |
| total: 1, | |
| }, | |
| { | |
| id: 11, | |
| name: "Nicholas Anderson Nix", | |
| total: 50, | |
| }, | |
| { | |
| id: 12, | |
| name: "Isaac Newton de Sessé", | |
| total: 100, | |
| }, | |
| ], | |
| }); | |
| }, | |
| routes() { | |
| this.namespace = "/api"; | |
| this.logging = true; | |
| this.passthrough("https://move-tcc-api-hma.azurewebsites.net/api/**"); | |
| this.get("/reviewers", () => { | |
| return this.schema.all("reviewers"); | |
| }); | |
| this.get("/reviewers-paginated", (schema, request) => { | |
| const qp = request.queryParams; | |
| const currentPage = parseInt(qp.PageNumber, 10) | |
| const perPageItems = parseInt(qp.PageSize, 10) | |
| const filtered = schema.all('reviewers') | |
| const parsedFiltered = filtered.models | |
| .map((filt) => filt.attrs) | |
| .filter((reviewer) => | |
| qp.name | |
| ? reviewer.name | |
| .toLowerCase() | |
| .includes(qp.name?.toLowerCase()) | |
| : true, | |
| ) | |
| const { | |
| Data, | |
| CurrentPage, | |
| PageSize, | |
| TotalCount, | |
| TotalPages, | |
| HasNext, | |
| HasPrevious, | |
| } = paginator(parsedFiltered, currentPage, perPageItems) | |
| const headers = { | |
| 'x-pagination': JSON.stringify({ | |
| CurrentPage, | |
| PageSize, | |
| TotalCount, | |
| TotalPages, | |
| HasNext, | |
| HasPrevious, | |
| }), | |
| } | |
| return new Response(200, headers, Data); | |
| }); | |
| }, | |
| }); | |
| return server; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment