feat: loading skeleton

Author: Throyer

web/src/components/pagination/index.tsx

@@ -0,0 +1,100 @@
+import { Button } from "@chakra-ui/button";
+import { ButtonGroup, Select, Stack } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+export interface PaginationProps {
+  page?: number;
+  size?: number;
+  totalPages?: number;
+  totalElements?: number;
+  sizes?: number[];
+  onChange?: (page: number, size: number) => void;
+}
+
+export const Pagination = ({
+  onChange,
+  page = 1,
+  size = 10,
+  totalPages = 1,
+  totalElements = 0,
+  sizes = [10, 20, 25, 50]
+}: PaginationProps) => {
+  const intervalNumbers = (x: number, y: number): number[] => {
+    let result = [];
+    let i = x + 1;
+    while (i < y) {
+      result.push(i);
+      i++;
+    }
+    return result;
+  };
+
+  const interval = (numbers: number[]): ReactNode => {
+    const validNumbers = numbers.filter(item => item > -1 && item < totalPages);
+    const buttons = validNumbers.map(intervalNumber => (
+      <Button
+        key={intervalNumber}
+        onClick={() => handleChange(intervalNumber, size)}
+        variant={page === intervalNumber ? 'solid' : 'outline'}
+        disabled={intervalNumber === page}>
+        {intervalNumber + 1}
+      </Button>
+    ));
+    return buttons;
+  }
+
+  const handleChange = (page: number, size: number) => {
+    onChange && onChange(page, size);
+  }
+
+  return (
+    <Stack direction="row" spacing="5">
+      <ButtonGroup size='sm' isAttached variant="outline">
+        <Button
+          onClick={() => handleChange(0, size)}
+          key="Primeira"
+          disabled={page === 0}>
+          Primeira
+        </Button>
+
+        {page > 0 && (
+          <Button
+            onClick={() => handleChange(page - 1, size)}
+            key="Anterior"
+            disabled={page === 0}>
+            Anterior
+          </Button>
+        )}
+
+        {interval(intervalNumbers(page - 3, page + 3))}
+
+        {page + 1 < totalPages && (
+          <Button
+            onClick={() => handleChange(page + 1, size)}
+            key="Proxima"
+            disabled={page === totalPages}>
+            Proxima
+          </Button>
+        )}
+
+        <Button
+          onClick={() => handleChange(totalPages - 1, size)}
+          key="Ultima"
+          disabled={page + 1 === totalPages}>
+          Ultima
+        </Button>
+      </ButtonGroup>
+
+      <Select
+        onChange={({ target: { value } }) => handleChange(0, Number(value))}
+        borderRadius="5"
+        w="52"
+        size="sm"
+        placeholder='Itens por pagina'>
+        {sizes.map(option => (
+          <option key={option} value={option}>{option}</option>
+        ))}
+      </Select>
+    </Stack>
+  )
+}

web/src/components/table/index.tsx

@@ -1,24 +1,30 @@
 import { ReactNode } from "react";
 
 import { Table as ChakraUiTable, TableContainer, Tbody, Td, Th, Thead, Tr, TableHeadProps, TableColumnHeaderProps } from "@chakra-ui/table";
+import { Box, Skeleton } from "@chakra-ui/react";
+import { Random } from "../../utils/random";
 
 export interface Column<T> {
   title?: string;
+  disableSkeleton?: boolean;
   options?: TableColumnHeaderProps
   property?: keyof T;
   defaultValue?: string;
   render?: (row: T) => ReactNode;
 }
 
 export interface Options<T> {
+  loading?: boolean;
+  variant?: 'simple' | 'striped' | 'unstyled';
+  size?: 'sm' | 'md' | 'lg';
   content: T[];
   columns: Column<T>[];
 }
 
-export function Table<T>({ content, columns }: Options<T>) {
+export function Table<T>({ loading, content, columns, size, variant }: Options<T>) {
   return (
     <TableContainer>
-      <ChakraUiTable>
+      <ChakraUiTable minHeight="520px" size={size} variant={variant}>
         <Thead>
           <Tr>
             {columns.map(({ title: name, property, options }, index) => (
@@ -29,27 +35,52 @@ export function Table<T>({ content, columns }: Options<T>) {
           </Tr>
         </Thead>
         <Tbody>
+          {content && content.length === 0 && (
+            Array(10)
+              .fill(0)
+              .map((_, rowIndex) => (
+                <Tr key={rowIndex}>
+                  {columns.map((_, columnIndex) => (
+                    <Td key={columnIndex}>
+                      <Box py="2">
+                        <Skeleton height="12px" borderRadius="3" width={`${Random.between(25, 100)}%`} />
+                      </Box>
+                    </Td>
+                  ))}
+                </Tr>
+              ))
+          )}
           {content.map((row, index) => (
             <Tr key={index}>
               {columns.map(
-                ({ render, property, defaultValue }, prop) => {
+                ({ render, property, defaultValue, disableSkeleton }, tdIndex) => {
+                  if (loading && !disableSkeleton) {
+                    return (
+                      <Td key={tdIndex}>
+                        <Box py="2.5">
+                          <Skeleton height="13px" borderRadius="3" width={`${Random.between(25, 100)}%`} />
+                        </Box>
+                      </Td>
+                    )
+                  }
+
                   if (property) {
                     const types = ["number", "boolean", "string"];
                     const value = row[property];
 
                     if (value && types.includes(typeof value)) {
-                      return <Td key={prop}>{`${value}`}</Td>;
+                      return <Td key={tdIndex}>{`${value}`}</Td>;
                     }
                   }
 
                   if (render) {
                     const element = render(row);
                     if (element) {
-                      return <Td key={prop}>{element}</Td>;
+                      return <Td key={tdIndex}>{element}</Td>;
                     }
                   }
 
-                  return <Td key={prop}>{defaultValue ?? ""}</Td>;
+                  return <Td key={tdIndex}>{defaultValue ?? ""}</Td>;
                 }
               )}
             </Tr>

web/src/pages/users/index.tsx

@@ -2,10 +2,11 @@ import { Button } from "@chakra-ui/button";
 import { useDisclosure } from "@chakra-ui/hooks";
 import { Box, Heading, HStack } from "@chakra-ui/layout";
 import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from "@chakra-ui/modal";
-import { Badge, ButtonGroup, Center, Stack } from "@chakra-ui/react";
+import { Badge, Center, Stack } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { BsFillPenFill, BsTrash2 } from 'react-icons/bs';
 import { Template } from "../../components/page";
+import { Pagination, PaginationProps } from "../../components/pagination";
 import { Table } from "../../components/table";
 import { User } from "../../services/models/user";
 import { UsersApi } from "../../services/users";
@@ -14,19 +15,30 @@ export const Users = () => {
 
   const { isOpen, onOpen, onClose } = useDisclosure()
 
+  const [{ page, size, totalPages }, setPagination] = useState<PaginationProps>({
+    page: 0,
+    size: 10,
+    totalPages: 0
+  });
+
   const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
 
-  const getUsers = async () => {
+  const fetchUsers = async (page?: number, size?: number) => {
+    setLoading(true);
     try {
-      const { data: page } = await UsersApi.findAll();
-      setUsers(page.content);
+      const { data: { content, ...pagination } } = await UsersApi.findAll(page, size);
+      setUsers(content);
+      setPagination(pagination);
     } catch (error) {
       console.error('error on find all users');
+    } finally {
+      setLoading(false);
     }
   }
 
   useEffect(() => {
-    getUsers();
+    fetchUsers();
   }, [])
 
   return (
@@ -42,6 +54,8 @@ export const Users = () => {
       </Box>
       <Box>
         <Table
+          loading={loading}
+          size="sm"
           content={users}
           columns={[
             {
@@ -56,7 +70,7 @@ export const Users = () => {
               title: 'Roles',
               render: ({ roles }) => (
                 <Stack direction='row'>
-                  {roles.map(role => <Badge>{role}</Badge>)}
+                  {roles.map(role => <Badge key={role}>{role}</Badge>)}
                 </Stack>
               )
             },
@@ -71,14 +85,17 @@ export const Users = () => {
               options: {
                 w: '28'
               },
+              disableSkeleton: true,
               render: () => (
                 <HStack>
                   <Button
+                    disabled={loading}
                     size="sm"
                     variant="outline">
                     <BsFillPenFill />
                   </Button>
                   <Button
+                    disabled={loading}
                     size="sm"
                     variant="outline"
                     onClick={onOpen}>
@@ -89,36 +106,13 @@ export const Users = () => {
             }
           ]}
         />
-        <Center mt="12">
-          <ButtonGroup size='md' isAttached variant="outline">
-            <Button disabled>
-              Primeira
-            </Button>
-            <Button>
-              Anterior
-            </Button>
-            <Button>
-              1
-            </Button>
-            <Button>
-              2
-            </Button>
-            <Button variant="solid">
-              3
-            </Button>
-            <Button>
-              4
-            </Button>
-            <Button>
-              5
-            </Button>
-            <Button>
-              Proxima
-            </Button>
-            <Button>
-              Ultima
-            </Button>
-          </ButtonGroup>
+        <Center my="12">
+          <Pagination
+            page={page}
+            size={size}
+            totalPages={totalPages}
+            onChange={(page, size) => fetchUsers(page, size)}
+          />
         </Center>
       </Box>
 

web/src/services/users/index.ts

@@ -5,8 +5,19 @@ import { User } from "../models/user";
 
 const RESOURCE_URL = 'users'
 
-export const findAll = () => {
-  return api.get<Page<User>>(RESOURCE_URL);
+export const findAll = (page?: number, size?: number) => {
+
+  const params = new URLSearchParams();
+
+  if (page !== undefined) {
+    params.append("page", page.toString());
+  }
+  
+  if (size !== undefined) {
+    params.append("size", size.toString());
+  }
+
+  return api.get<Page<User>>(RESOURCE_URL, { params });
 }
 
 export const UsersApi = {

web/src/utils/random.ts

@@ -0,0 +1,9 @@
+export class Random {
+  public static element<T>(array: T[]): T {
+    return array[Math.floor(Math.random() * array.length)];
+  }
+
+  public static between(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+}