Typescript refactor.

src/app/(main)/websites/WebsitesBrowse.tsx

@@ -17,7 +17,7 @@ export function WebsitesBrowse() {
 
   return (
     <>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+      <Tabs selectedKey={tab} onSelect={(tab: any) => setTab(tab)} style={{ marginBottom: 30 }}>
         <Item key={TABS.myWebsites}>{formatMessage(labels.myWebsites)}</Item>
         <Item key={TABS.teamWebsites}>{formatMessage(labels.teamWebsites)}</Item>
       </Tabs>

src/app/(main)/websites/[id]/WebsiteChart.tsx

@@ -3,7 +3,7 @@ import PageviewsChart from 'components/metrics/PageviewsChart';
 import { useApi, useDateRange, useTimezone, useNavigation } from 'components/hooks';
 import { getDateArray } from 'lib/date';
 
-export function WebsiteChart({ websiteId }) {
+export function WebsiteChart({ websiteId }: { websiteId: string }) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, modified } = dateRange;
   const [timezone] = useTimezone();
@@ -45,7 +45,7 @@ export function WebsiteChart({ websiteId }) {
     return { pageviews: [], sessions: [] };
   }, [data, startDate, endDate, unit]);
 
-  return <PageviewsChart websiteId={websiteId} data={chartData} unit={unit} loading={isLoading} />;
+  return <PageviewsChart data={chartData} unit={unit} isLoading={isLoading} />;
 }
 
 export default WebsiteChart;

src/app/(main)/websites/[id]/WebsiteChartList.tsx

@@ -8,7 +8,15 @@ import WebsiteHeader from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { useMessages, useLocale } from 'components/hooks';
 
-export default function WebsiteChartList({ websites, showCharts, limit }) {
+export default function WebsiteChartList({
+  websites,
+  showCharts,
+  limit,
+}: {
+  websites: any[];
+  showCharts?: boolean;
+  limit?: number;
+}) {
   const { formatMessage, labels } = useMessages();
   const { websiteOrder } = useDashboard();
   const { dir } = useLocale();

src/app/(main)/websites/[id]/WebsiteDetails.tsx

@@ -11,7 +11,7 @@ import WebsiteHeader from './WebsiteHeader';
 import WebsiteMetricsBar from './WebsiteMetricsBar';
 import WebsiteTableView from './WebsiteTableView';
 
-export default function WebsiteDetails({ websiteId }) {
+export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   const { data: website, isLoading, error } = useWebsite(websiteId);
   const pathname = usePathname();
   const showLinks = !pathname.includes('/share/');
@@ -27,10 +27,7 @@ export default function WebsiteDetails({ websiteId }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <FilterTags
-        websiteId={websiteId}
-        params={{ url, referrer, os, browser, device, country, region, city, title }}
-      />
+      <FilterTags params={{ url, referrer, os, browser, device, country, region, city, title }} />
       <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

src/app/(main)/websites/[id]/WebsiteFilterButton.tsx

@@ -3,7 +3,13 @@ import PopupForm from 'app/(main)/reports/[id]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
 import { useMessages, useNavigation } from 'components/hooks';
 
-export function WebsiteFilterButton({ websiteId, className }) {
+export function WebsiteFilterButton({
+  websiteId,
+  className,
+}: {
+  websiteId: string;
+  className?: string;
+}) {
   const { formatMessage, labels } = useMessages();
   const { makeUrl, router } = useNavigation();
 
@@ -31,9 +37,9 @@ export function WebsiteFilterButton({ websiteId, className }) {
         <Text>{formatMessage(labels.filter)}</Text>
       </Button>
       <Popup position="bottom" alignment="start">
-        {close => {
+        {(close: () => void) => {
           return (
-            <PopupForm onClose={close}>
+            <PopupForm>
               <FilterSelectForm
                 websiteId={websiteId}
                 items={fieldOptions}

src/app/(main)/websites/[id]/WebsiteHeader.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Text, Button, Icon } from 'react-basics';
 import Link from 'next/link';
@@ -9,7 +10,15 @@ import Icons from 'components/icons';
 import { useMessages, useWebsite } from 'components/hooks';
 import styles from './WebsiteHeader.module.css';
 
-export function WebsiteHeader({ websiteId, showLinks = true, children }) {
+export function WebsiteHeader({
+  websiteId,
+  showLinks = true,
+  children,
+}: {
+  websiteId: string;
+  showLinks?: boolean;
+  children?: ReactNode;
+}) {
   const { formatMessage, labels } = useMessages();
   const pathname = usePathname();
   const { data: website } = useWebsite(websiteId);

src/app/(main)/websites/[id]/WebsiteMenuView.tsx

@@ -33,7 +33,13 @@ const views = {
   query: QueryParametersTable,
 };
 
-export default function WebsiteMenuView({ websiteId, websiteDomain }) {
+export default function WebsiteMenuView({
+  websiteId,
+  websiteDomain,
+}: {
+  websiteId: string;
+  websiteDomain?: string;
+}) {
   const { formatMessage, labels } = useMessages();
   const {
     router,

src/app/(main)/websites/[id]/WebsiteMetricsBar.tsx

@@ -7,7 +7,15 @@ import { formatShortTime } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
 import styles from './WebsiteMetricsBar.module.css';
 
-export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
+export function WebsiteMetricsBar({
+  websiteId,
+  showFilter = true,
+  sticky,
+}: {
+  websiteId: string;
+  showFilter?: boolean;
+  sticky?: boolean;
+}) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
@@ -96,7 +104,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
                       -1 || 0
                   : 0
               }
-              format={n => `${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
+              format={n => `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
             />
           </>
         )}

src/app/(main)/websites/[id]/WebsiteTableView.tsx

@@ -10,7 +10,7 @@ import CountriesTable from 'components/metrics/CountriesTable';
 import EventsTable from 'components/metrics/EventsTable';
 import EventsChart from 'components/metrics/EventsChart';
 
-export default function WebsiteTableView({ websiteId }) {
+export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
   const [countryData, setCountryData] = useState();
   const tableProps = {
     websiteId,

src/app/(main)/websites/[id]/event-data/EventDataMetricsBar.tsx

@@ -5,7 +5,7 @@ import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricsBar from 'components/metrics/MetricsBar';
 import styles from './EventDataMetricsBar.module.css';
 
-export function EventDataMetricsBar({ websiteId }) {
+export function EventDataMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);

src/app/(main)/websites/[id]/event-data/EventDataValueTable.tsx

@@ -6,7 +6,7 @@ import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
 import { DATA_TYPES } from 'lib/constants';
 
-export function EventDataValueTable({ data = [], event }) {
+export function EventDataValueTable({ data = [], event }: { data: any[]; event: string }) {
   const { formatMessage, labels } = useMessages();
   const { makeUrl } = useNavigation();