Refactored to use app folder.

src/components/common/DataTable.tsx

@@ -1,17 +1,36 @@
+import { ReactNode, Dispatch, SetStateAction } from 'react';
+import classNames from 'classnames';
 import { Banner, Loading, SearchField } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
 import styles from './DataTable.module.css';
-import classNames from 'classnames';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
-export const DataTableStyles = styles;
+export interface DataTableProps {
+  result: {
+    page: number;
+    pageSize: number;
+    count: number;
+    data: any[];
+  };
+  params: {
+    query: string;
+    page: number;
+  };
+  setParams: Dispatch<SetStateAction<{ query: string; page: number }>>;
+  isLoading: boolean;
+  error: unknown;
+  searchDelay?: number;
+  showSearch?: boolean;
+  showPaging?: boolean;
+  children: ReactNode | ((data: any) => ReactNode);
+}
 
 export function DataTable({
-  data = {},
-  params = {},
+  result,
+  params,
   setParams,
   isLoading,
   error,
@@ -19,11 +38,11 @@ export function DataTable({
   showSearch = true,
   showPaging = true,
   children,
-}) {
+}: DataTableProps) {
   const { formatMessage, labels, messages } = useMessages();
-  const { pageSize, count } = data;
-  const { query, page } = params;
-  const hasData = Boolean(!isLoading && data?.data?.length);
+  const { pageSize, count } = result || {};
+  const { query, page } = params || {};
+  const hasData = Boolean(!isLoading && result?.data?.length);
   const noResults = Boolean(!isLoading && query && !hasData);
 
   const handleSearch = query => {
@@ -53,7 +72,7 @@ export function DataTable({
       <div
         className={classNames(styles.body, { [styles.status]: isLoading || noResults || !hasData })}
       >
-        {hasData && typeof children === 'function' ? children(data) : children}
+        {hasData ? (typeof children === 'function' ? children(result) : children) : null}
         {isLoading && <Loading icon="dots" />}
         {!isLoading && !hasData && !query && (
           <Empty message={formatMessage(messages.noDataAvailable)} />

src/components/common/Empty.tsx

@@ -2,7 +2,12 @@ import classNames from 'classnames';
 import styles from './Empty.module.css';
 import useMessages from 'components/hooks/useMessages';
 
-export function Empty({ message, className }) {
+export interface EmptyProps {
+  message?: string;
+  className?: string;
+}
+
+export function Empty({ message, className }: EmptyProps) {
   const { formatMessage, messages } = useMessages();
 
   return (

src/components/common/MobileMenu.js

@@ -1,11 +1,11 @@
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
 export function MobileMenu({ items = [], onClose }) {
-  const { pathname } = useRouter();
+  const pathname = usePathname();
 
   const Items = ({ items, className }) => (
     <div className={classNames(styles.items, className)}>

src/components/common/UpdateNotice.js

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button, Row, Column } from 'react-basics';
@@ -6,12 +7,12 @@ 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 &&

src/components/common/WorldMap.js

@@ -1,5 +1,4 @@
 import { useState, useMemo } from 'react';
-import { useRouter } from 'next/router';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
@@ -14,7 +13,6 @@ import { percentFilter } from 'lib/filters';
 import styles from './WorldMap.module.css';
 
 export function WorldMap({ data, className }) {
-  const { basePath } = useRouter();
   const [tooltip, setTooltipPopup] = useState();
   const { theme, colors } = useTheme();
   const { locale } = useLocale();
@@ -54,7 +52,7 @@ export function WorldMap({ data, className }) {
     >
       <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
-          <Geographies geography={`${basePath}${MAP_FILE}`}>
+          <Geographies geography={`${process.env.basePath}${MAP_FILE}`}>
             {({ geographies }) => {
               return geographies.map(geo => {
                 const code = ISO_COUNTRIES[geo.id];