+ {hasData ? (typeof children === 'function' ? children(result) : children) : null}
+ {isLoading && }
+ {!isLoading && !hasData && !query && }
+ {noResults && }
+
+ {allowPaging && hasData && (
+
diff --git a/src/components/common/Pager.js b/src/components/common/Pager.js
index 7a5e7ed5ff..a21d35d98f 100644
--- a/src/components/common/Pager.js
+++ b/src/components/common/Pager.js
@@ -1,14 +1,15 @@
-import styles from './Pager.module.css';
-import { Button, Flexbox, Icon, Icons } from 'react-basics';
+import classNames from 'classnames';
+import { Button, Icon, Icons } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
+import styles from './Pager.module.css';
-export function Pager({ page, pageSize, count, onPageChange }) {
+export function Pager({ page, pageSize, count, onPageChange, className }) {
const { formatMessage, labels } = useMessages();
- const maxPage = Math.ceil(count / pageSize);
+ const maxPage = pageSize && count ? Math.ceil(count / pageSize) : 0;
const lastPage = page === maxPage;
const firstPage = page === 1;
- if (count === 0) {
+ if (count === 0 || !maxPage) {
return null;
}
@@ -24,21 +25,25 @@ export function Pager({ page, pageSize, count, onPageChange }) {
}
return (
-
-
-
- {formatMessage(labels.pageOf, { current: page, total: maxPage })}
-
-
-
+
+
{formatMessage(labels.numberOfRecords, { x: count })}
+
+
+
+ {formatMessage(labels.pageOf, { current: page, total: maxPage })}
+
+
+
+
+
);
}
diff --git a/src/components/common/Pager.module.css b/src/components/common/Pager.module.css
index 99eb70ce0a..880c1b401d 100644
--- a/src/components/common/Pager.module.css
+++ b/src/components/common/Pager.module.css
@@ -1,7 +1,32 @@
-.container {
- margin-top: 20px;
+.pager {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ align-items: center;
+}
+
+.nav {
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.text {
+ font-size: var(--font-size-md);
margin: 0 16px;
+ justify-content: center;
+}
+
+.count {
+ color: var(--base600);
+ font-weight: 700;
+}
+
+@media only screen and (max-width: 992px) {
+ .pager {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .nav {
+ justify-content: end;
+ }
}
diff --git a/src/components/common/SettingsTable.js b/src/components/common/SettingsTable.js
deleted file mode 100644
index 701dbe13b6..0000000000
--- a/src/components/common/SettingsTable.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import Empty from 'components/common/Empty';
-import useMessages from 'components/hooks/useMessages';
-import { useState } from 'react';
-import {
- SearchField,
- Table,
- TableBody,
- TableCell,
- TableColumn,
- TableHeader,
- TableRow,
-} from 'react-basics';
-import styles from './SettingsTable.module.css';
-import Pager from 'components/common/Pager';
-
-export function SettingsTable({
- columns = [],
- data,
- children,
- cellRender,
- showSearch,
- showPaging,
- onFilterChange,
- onPageChange,
- onPageSizeChange,
- filterValue,
-}) {
- const { formatMessage, labels, messages } = useMessages();
- const [filter, setFilter] = useState(filterValue);
- const { data: value, page, count, pageSize } = data;
-
- const handleFilterChange = value => {
- setFilter(value);
- onFilterChange(value);
- };
-
- return (
- <>
- {showSearch && (value.length > 0 || filterValue) && (
-
- )}
- {value.length === 0 && filterValue && (
-
- )}
- {value.length > 0 && (
-
-
- {(column, index) => {
- return (
-
- {column.label}
-
- );
- }}
-
-
- {(row, keys, rowIndex) => {
- row.action = children(row, keys, rowIndex);
-
- return (
-
- {(data, key, colIndex) => {
- return (
-
-
- {cellRender ? cellRender(row, data, key, colIndex) : data[key]}
-
- );
- }}
-
- );
- }}
-
- {showPaging && (
-
- )}
-
- )}
-
- );
-}
-
-export default SettingsTable;
diff --git a/src/components/common/SettingsTable.module.css b/src/components/common/SettingsTable.module.css
deleted file mode 100644
index fd6cddfad4..0000000000
--- a/src/components/common/SettingsTable.module.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.cell {
- align-items: center;
-}
-
-.row .cell:last-child {
- gap: 10px;
- justify-content: flex-end;
-}
-
-.label {
- display: none;
- font-weight: 700;
-}
-
-@media screen and (max-width: 992px) {
- .header .cell {
- display: none;
- }
-
- .label {
- display: block;
- min-width: 100px;
- }
-
- .row .cell {
- padding-left: 0;
- flex-basis: 100%;
- }
-}
-
-@media screen and (max-width: 1200px) {
- .row {
- flex-wrap: wrap;
- }
-
- .header .cell:last-child {
- display: none;
- }
-
- .row .cell:last-child {
- padding-left: 0;
- flex-basis: 100%;
- }
-}
diff --git a/src/components/common/UpdateNotice.js b/src/components/common/UpdateNotice.js
index 23907948cf..509df95ce9 100644
--- a/src/components/common/UpdateNotice.js
+++ b/src/components/common/UpdateNotice.js
@@ -1,17 +1,18 @@
+'use client';
import { useEffect, useCallback, useState } from 'react';
import { createPortal } from 'react-dom';
-import { Button, Row, Column } from 'react-basics';
+import { Button } from 'react-basics';
import { setItem } from 'next-basics';
import useStore, { checkVersion } from 'store/version';
import { REPO_URL, VERSION_CHECK } from 'lib/constants';
import styles from './UpdateNotice.module.css';
import useMessages from 'components/hooks/useMessages';
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
export function UpdateNotice({ user, config }) {
const { formatMessage, labels, messages } = useMessages();
const { latest, checked, hasUpdate, releaseUrl } = useStore();
- const { pathname } = useRouter();
+ const pathname = usePathname();
const [dismissed, setDismissed] = useState(checked);
const allowUpdate =
user?.isAdmin &&
@@ -46,17 +47,17 @@ export function UpdateNotice({ user, config }) {
}
return createPortal(
-
-
+
+
{formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
-
-
+
+
-
- ,
+
+
{title &&
{title}
}
diff --git a/src/components/layout/ReportsLayout.js b/src/components/layout/ReportsLayout.js
deleted file mode 100644
index 374da26352..0000000000
--- a/src/components/layout/ReportsLayout.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Column, Row } from 'react-basics';
-import styles from './ReportsLayout.module.css';
-
-export function ReportsLayout({ children, filter, header }) {
- return (
- <>
-
{header}
-
- {filter && (
-
- Filters
- {filter}
-
- )}
-
- {children}
-
-
-
- );
-}
-
-export default ReportsLayout;
diff --git a/src/components/layout/ReportsLayout.module.css b/src/components/layout/ReportsLayout.module.css
deleted file mode 100644
index 6922665fa2..0000000000
--- a/src/components/layout/ReportsLayout.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.filter {
- margin-top: 30px;
- min-width: 200px;
- max-width: 100vw;
- padding: 10px;
- background: var(--base50);
- border-radius: 5px;
- border: 1px solid var(--border-color);
-}
-
-.filter h2 {
- padding-bottom: 20px;
-}
-
-.content {
- min-height: 50vh;
-}
-
-@media only screen and (max-width: 768px) {
- .menu {
- display: none;
- }
-}
diff --git a/src/components/layout/SettingsLayout.module.css b/src/components/layout/SettingsLayout.module.css
deleted file mode 100644
index 08ff02aa65..0000000000
--- a/src/components/layout/SettingsLayout.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.menu {
- display: flex;
- flex-direction: column;
- padding-top: 40px;
- padding-right: 20px;
-}
-
-.content {
- min-height: 50vh;
-}
-
-@media only screen and (max-width: 768px) {
- .menu {
- display: none;
- }
-
- .content {
- margin-top: 20px;
- }
-}
diff --git a/src/components/layout/ShareLayout.js b/src/components/layout/ShareLayout.js
deleted file mode 100644
index c634e1b6d5..0000000000
--- a/src/components/layout/ShareLayout.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Container } from 'react-basics';
-import Header from './Header';
-import Footer from './Footer';
-
-export function ShareLayout({ children }) {
- return (
-
-
- {children}
-
-
- );
-}
-
-export default ShareLayout;
diff --git a/src/components/layout/SideNav.js b/src/components/layout/SideNav.js
index ccb6f360cd..c93881e475 100644
--- a/src/components/layout/SideNav.js
+++ b/src/components/layout/SideNav.js
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import { Menu, Item } from 'react-basics';
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
import Link from 'next/link';
import styles from './SideNav.module.css';
@@ -9,15 +9,21 @@ export function SideNav({
items,
shallow = true,
scroll = false,
+ className,
onSelect = () => {},
}) {
- const { asPath } = useRouter();
+ const pathname = usePathname();
return (
-