From f35a9f0950f540f1edfabd3c261e05813d7ca425 Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Thu, 17 Aug 2023 12:39:58 -0700
Subject: [PATCH] Add page of intl.

---
 components/common/Pager.js | 8 ++++++--
 lib/constants.ts           | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/common/Pager.js b/components/common/Pager.js
index 584e0669..4a00590d 100644
--- a/components/common/Pager.js
+++ b/components/common/Pager.js
@@ -1,7 +1,9 @@
 import styles from './Pager.module.css';
 import { Button, Flexbox, Icon, Icons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
 
-export function Pager({ page, pageSize, count, onPageChange, onPageSizeChange }) {
+export function Pager({ page, pageSize, count, onPageChange }) {
+  const { formatMessage, labels } = useMessages();
   const maxPage = Math.ceil(count / pageSize);
   const lastPage = page === maxPage;
   const firstPage = page === 1;
@@ -24,7 +26,9 @@ export function Pager({ page, pageSize, count, onPageChange, onPageSizeChange })
           <Icons.ChevronDown />
         </Icon>
       </Button>
-      <Flexbox alignItems="center" className={styles.text}>{`Page ${page} of ${maxPage}`}</Flexbox>
+      <Flexbox alignItems="center" className={styles.text}>
+        {formatMessage(labels.pageOf, { x: page, y: maxPage })}
+      </Flexbox>
       <Button onClick={() => handlePageChange(1)} disabled={lastPage}>
         <Icon size="lg" className={styles.icon} rotate={270}>
           <Icons.ChevronDown />
diff --git a/lib/constants.ts b/lib/constants.ts
index 6eb4c4e4..888c1484 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -213,8 +213,11 @@ export const EVENT_COLORS = [
 
 export const DOMAIN_REGEX =
   /^(localhost(:[1-9]\d{0,4})?|((?=[a-z0-9-]{1,63}\.)(xn--)?[a-z0-9-]+(-[a-z0-9-]+)*\.)+(xn--)?[a-z0-9-]{2,63})$/;
-
 export const SHARE_ID_REGEX = /^[a-zA-Z0-9]{16}$/;
+export const UUID_REGEX =
+  /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+export const HOSTNAME_REGEX =
+  /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/;
 
 export const DESKTOP_SCREEN_WIDTH = 1920;
 export const LAPTOP_SCREEN_WIDTH = 1024;