diff --git a/components/common/OverflowText.js b/components/common/OverflowText.js deleted file mode 100644 index aaeb9c46..00000000 --- a/components/common/OverflowText.js +++ /dev/null @@ -1,60 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; -import ReactTooltip from 'react-tooltip'; - -import styles from './OverflowText.module.css'; - -const OverflowText = ({ children, tooltipId }) => { - const measureEl = useRef(); - const [isOverflown, setIsOverflown] = useState(false); - - const measure = useCallback( - el => { - if (!el) return; - setIsOverflown(el.scrollWidth > el.clientWidth); - }, - [setIsOverflown], - ); - - // Do one measure on mount - useEffect(() => { - measure(measureEl.current); - }, [measure]); - - // Set up resize listener for subsequent measures - useEffect(() => { - if (!measureEl.current) return; - - // Destructure ref in case it changes out from under us - const el = measureEl.current; - - if ('ResizeObserver' in global) { - // Ideally, we have access to ResizeObservers - const observer = new ResizeObserver(() => { - measure(el); - }); - observer.observe(el); - return () => observer.unobserve(el); - } else { - // Otherwise, fall back to measuring on window resizes - const handler = () => measure(el); - - window.addEventListener('resize', handler, { passive: true }); - return () => window.removeEventListener('resize', handler, { passive: true }); - } - }); - - return ( - - {children} - {isOverflown && {children}} - - ); -}; - -export default OverflowText; diff --git a/components/common/OverflowText.module.css b/components/common/OverflowText.module.css deleted file mode 100644 index c2066631..00000000 --- a/components/common/OverflowText.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.root { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} diff --git a/components/input/WebsiteSelect.js b/components/input/WebsiteSelect.js index 82f516e8..2a1a4e17 100644 --- a/components/input/WebsiteSelect.js +++ b/components/input/WebsiteSelect.js @@ -22,7 +22,7 @@ export default function WebsiteSelect({ websiteId, onSelect }) { placeholder={formatMessage(labels.selectWebsite)} style={{ width: 200 }} > - {item => {item.name}} + {({ id, name }) => {name}} ); } diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index 8f102c08..d1817c8b 100644 --- a/components/metrics/WebsiteHeader.js +++ b/components/metrics/WebsiteHeader.js @@ -1,6 +1,5 @@ -import { Row, Column } from 'react-basics'; +import { Row, Column, Text } from 'react-basics'; import Favicon from 'components/common/Favicon'; -import OverflowText from 'components/common/OverflowText'; import ActiveUsers from './ActiveUsers'; import styles from './WebsiteHeader.module.css'; @@ -9,7 +8,7 @@ export default function WebsiteHeader({ websiteId, title, domain, children }) { - {title} + {title} diff --git a/components/pages/realtime/RealtimeDashboard.js b/components/pages/realtime/RealtimeDashboard.js index 9ac6a863..9e6c2d1b 100644 --- a/components/pages/realtime/RealtimeDashboard.js +++ b/components/pages/realtime/RealtimeDashboard.js @@ -32,11 +32,12 @@ export default function RealtimeDashboard({ websiteId }) { const router = useRouter(); const [currentData, setCurrentData] = useState(); const { get, useQuery } = useApi(); + const { data: website } = useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`)); const { data, isLoading, error } = useQuery( ['realtime', websiteId], () => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }), { - enabled: !!websiteId, + enabled: !!(websiteId && website), refetchInterval: REALTIME_INTERVAL, cache: false, }, @@ -111,10 +112,10 @@ export default function RealtimeDashboard({ websiteId }) { - + - + diff --git a/components/pages/realtime/RealtimeHome.js b/components/pages/realtime/RealtimeHome.js index f54ed4de..67b34ee9 100644 --- a/components/pages/realtime/RealtimeHome.js +++ b/components/pages/realtime/RealtimeHome.js @@ -17,10 +17,10 @@ export default function RealtimeHome() { if (data?.length) { router.push(`realtime/${data[0].id}`); } - }, [data]); + }, [data, router]); return ( - + 0} error={error}> {data?.length === 0 && } diff --git a/pages/settings/teams/[...id].js b/pages/settings/teams/[id]/index.js similarity index 100% rename from pages/settings/teams/[...id].js rename to pages/settings/teams/[id]/index.js diff --git a/pages/settings/users/[...id].js b/pages/settings/users/[id]/index.js similarity index 100% rename from pages/settings/users/[...id].js rename to pages/settings/users/[id]/index.js