Pagination

https://freecode.academy/tasks/cklwrrk1rcyod0730i86xec4z

server/nexus/generated/nexus.ts

@@ -567,6 +567,7 @@ export interface NexusGenFieldTypes {
     resources: NexusGenRootTypes['ResourceUnion'][] // [ResourceUnion!]!
     user: NexusGenRootTypes['User'] | null // User
     users: NexusGenRootTypes['User'][] // [User!]!
+    usersCount: number // Int!
   }
   Resource: {
     // field return type
@@ -667,6 +668,7 @@ export interface NexusGenFieldTypeNames {
     resources: 'ResourceUnion'
     user: 'User'
     users: 'User'
+    usersCount: 'Int'
   }
   Resource: {
     // field return type name
@@ -746,6 +748,10 @@ export interface NexusGenArgTypes {
       take?: number | null // Int
       where?: NexusGenInputs['bani684_usersWhereInput'] | null // bani684_usersWhereInput
     }
+    usersCount: {
+      // args
+      where?: NexusGenInputs['bani684_usersWhereInput'] | null // bani684_usersWhereInput
+    }
   }
 }
 

server/nexus/generated/schema.graphql

@@ -216,6 +216,11 @@ type Query {
     take: Int
     where: bani684_usersWhereInput
   ): [User!]!
+
+  """
+  Количество пользователей
+  """
+  usersCount(where: bani684_usersWhereInput): Int!
 }
 
 type Resource {

server/nexus/types/Query/definitions/User.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import { Prisma } from '@prisma/client'
-import { ObjectDefinitionBlock } from 'nexus/dist/core'
+import { arg, ObjectDefinitionBlock } from 'nexus/dist/core'
 
 const select = {
   id: true,
@@ -20,6 +20,20 @@ export default (t: ObjectDefinitionBlock<'Query'>) => {
   //   },
   // })
 
+  t.nonNull.int('usersCount', {
+    description: 'Количество пользователей',
+    args: {
+      where: arg({
+        type: 'bani684_usersWhereInput',
+      }),
+    },
+    resolve(_, args, ctx) {
+      return ctx.prisma.bani684_users.count(
+        args as Pick<Prisma.bani684_usersCountArgs, 'where'>
+      )
+    },
+  })
+
   t.crud.bani684Users({
     type: 'User',
     alias: 'user',

src/components/ui/Pagination/index.tsx

@@ -0,0 +1,118 @@
+import React, { memo, useCallback } from 'react'
+
+import Link from 'next/link'
+
+import URI from 'urijs'
+import { PaginationProps } from './interfaces'
+import { useRouter } from 'next/router'
+import { PaginationStyled } from './styles'
+export * from './interfaces'
+
+const Pagination: React.FC<PaginationProps> = ({
+  page,
+  limit,
+  total,
+  ...other
+}) => {
+  const router = useRouter()
+
+  const getNewLocation = useCallback(
+    (page: number) => {
+      const asPath = router.asPath
+
+      const uri = new URI(asPath)
+
+      const query = uri.query(true)
+
+      Object.assign(query, {
+        page: page > 1 ? page : undefined,
+      })
+
+      uri.query(query)
+
+      return uri.resource()
+    },
+    [router.asPath]
+  )
+
+  if (!page || !limit || !total) {
+    return null
+  }
+
+  const pages = Math.ceil(total / limit)
+
+  if (pages < 2) {
+    return null
+  }
+
+  const rows = []
+
+  if (page > 1) {
+    const href = getNewLocation(page - 1)
+
+    rows.push(
+      <li key="page-1-0" className={'control'}>
+        <Link href={href}>
+          <a className={'link'}>«</a>
+        </Link>
+      </li>
+    )
+  }
+
+  let lstr = false
+  let rstr = false
+  for (let i = 1; i <= pages; i++) {
+    if (
+      (page > 2 && i < page - 1 && i > 1) ||
+      (pages - page > 3 && i > page + 1 && i < pages - 1)
+    ) {
+      if (!lstr && i > 1 && i < page) {
+        rows.push(
+          <li key={i} className={'control'}>
+            <span>...</span>
+          </li>
+        )
+        lstr = true
+      }
+      if (!rstr && i > page && i < pages) {
+        rows.push(
+          <li key={i} className={'control'}>
+            <span>...</span>
+          </li>
+        )
+        rstr = true
+      }
+    } else {
+      const href = getNewLocation(i)
+
+      rows.push(
+        <li key={i} className={'control'}>
+          <Link href={href}>
+            <a className={['link', i === page ? 'active' : null].join(' ')}>
+              {i}
+            </a>
+          </Link>
+        </li>
+      )
+    }
+  }
+  if (page < pages) {
+    const href = getNewLocation(page + 1)
+
+    rows.push(
+      <li key={'page-' + pages + '-0'} className={'control'}>
+        <Link href={href}>
+          <a className={'link'}>»</a>
+        </Link>
+      </li>
+    )
+  }
+
+  return (
+    <PaginationStyled {...other}>
+      <ul className={'row'}>{rows}</ul>
+    </PaginationStyled>
+  )
+}
+
+export default memo(Pagination)

src/components/ui/Pagination/interfaces.ts

@@ -0,0 +1,7 @@
+export type PaginationProps = {
+  page: number
+
+  limit: number
+
+  total: number
+}

src/components/ui/Pagination/styles.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+export const PaginationStyled = styled.nav`
+  display: flex;
+
+  .row {
+    margin: 20px auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    list-style: none;
+    padding: 0;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+  }
+
+  .control {
+    border-right: 1px solid #ddd;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    > * {
+      display: block;
+      padding: 8px 12px;
+      /* border: 1px solid #ddd; */
+      /* margin-left: 3px;
+      margin-right: 3px; */
+      text-decoration: none;
+    }
+  }
+
+  a {
+    &.active {
+      background: #ddd;
+    }
+
+    &:hover {
+      background: #dfdfdf;
+    }
+  }
+`

src/gql/users.graphql

@@ -7,6 +7,7 @@ query users(
   users(where: $where, orderBy: $orderBy, skip: $skip, take: $take) {
     ...user_
   }
+  usersCount(where: $where)
 }
 
 query user($where: bani684_usersWhereUniqueInput!) {

src/modules/gql/generated/helpers/apollo-helpers.ts

@@ -47,13 +47,14 @@ export type GalleryImageFieldPolicy = {
 	image?: FieldPolicy<any> | FieldReadFunction<any>,
 	title?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type QueryKeySpecifier = ('cities' | 'companies' | 'resources' | 'user' | 'users' | QueryKeySpecifier)[];
+export type QueryKeySpecifier = ('cities' | 'companies' | 'resources' | 'user' | 'users' | 'usersCount' | QueryKeySpecifier)[];
 export type QueryFieldPolicy = {
 	cities?: FieldPolicy<any> | FieldReadFunction<any>,
 	companies?: FieldPolicy<any> | FieldReadFunction<any>,
 	resources?: FieldPolicy<any> | FieldReadFunction<any>,
 	user?: FieldPolicy<any> | FieldReadFunction<any>,
-	users?: FieldPolicy<any> | FieldReadFunction<any>
+	users?: FieldPolicy<any> | FieldReadFunction<any>,
+	usersCount?: FieldPolicy<any> | FieldReadFunction<any>
 };
 export type ResourceKeySpecifier = ('TemplateVarValues' | 'alias' | 'content' | 'createdby' | 'createdon' | 'description' | 'id' | 'longtitle' | 'pagetitle' | 'published' | 'searchable' | 'template' | 'uri' | ResourceKeySpecifier)[];
 export type ResourceFieldPolicy = {

src/modules/gql/generated/schema.json

@@ -1960,6 +1960,35 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "usersCount",
+            "description": "Количество пользователей",
+            "args": [
+              {
+                "name": "where",
+                "description": null,
+                "type": {
+                  "kind": "INPUT_OBJECT",
+                  "name": "bani684_usersWhereInput",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Int",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

src/modules/gql/generated/types.ts

@@ -181,6 +181,8 @@ export interface Query {
   resources: Array<ResourceUnion>;
   user?: Maybe<User>;
   users: Array<User>;
+  /** Количество пользователей */
+  usersCount: Scalars['Int'];
 }
 
 
@@ -223,6 +225,11 @@ export type QueryUsersArgs = {
   where?: Maybe<Bani684UsersWhereInput>;
 };
 
+
+export type QueryUsersCountArgs = {
+  where?: Maybe<Bani684UsersWhereInput>;
+};
+
 export interface Resource {
   __typename?: 'Resource';
   TemplateVarValues?: Maybe<Array<Bani684SiteTmplvarContentvalues>>;

src/modules/gql/generated/users.ts

@@ -20,7 +20,7 @@ export type UsersQueryVariables = Types.Exact<{
 }>;
 
 
-export type UsersQuery = { __typename?: 'Query', users: Array<(
+export type UsersQuery = { __typename?: 'Query', usersCount: number, users: Array<(
     { __typename?: 'User' }
     & UserFragment
   )> };
@@ -31,6 +31,7 @@ export const UsersDocument = gql`
   users(where: $where, orderBy: $orderBy, skip: $skip, take: $take) {
     ...user_
   }
+  usersCount(where: $where)
 }
     ${UserFragmentDoc}`;
 

src/pages/Users/View/index.tsx

@@ -4,10 +4,15 @@ import {
   GridTableItemStyled,
   GridTableStyled,
 } from 'src/components/ui/GridTable/styles'
+import Pagination from 'src/components/ui/Pagination'
 import { UsersPageViewProps } from './interfaces'
 import UsersPageViewUser from './User'
 
-const UsersPageView: React.FC<UsersPageViewProps> = ({ users, ...other }) => {
+const UsersPageView: React.FC<UsersPageViewProps> = ({
+  users,
+  pagination,
+  ...other
+}) => {
   return useMemo(() => {
     return (
       <>
@@ -30,9 +35,11 @@ const UsersPageView: React.FC<UsersPageViewProps> = ({ users, ...other }) => {
             return <UsersPageViewUser key={n.id} user={n} />
           })}
         </GridTableStyled>
+
+        <Pagination {...pagination} />
       </>
     )
-  }, [other, users])
+  }, [other, pagination, users])
 }
 
 export default UsersPageView

src/pages/Users/View/interfaces.ts

@@ -1,7 +1,10 @@
+import { PaginationProps } from 'src/components/ui/Pagination'
 import { UsersPageViewUserProps } from './User/interfaces'
 
-export interface UsersPageViewProps {
+export type UsersPageViewProps = {
   // data: UsersConnectionQuery | null | undefined
 
   users: UsersPageViewUserProps['user'][]
+
+  pagination: PaginationProps
 }