Refactored queries.

src/components/common/FilterLink.tsx

@@ -25,7 +25,7 @@ export function FilterLink({
   className,
 }: FilterLinkProps) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl, query } = useNavigation();
+  const { renderUrl, query } = useNavigation();
   const active = query[id] !== undefined;
   const selected = query[id] === value;
 
@@ -39,7 +39,7 @@ export function FilterLink({
       {children}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
-        <Link href={makeUrl({ [id]: value })} className={styles.label} replace>
+        <Link href={renderUrl({ [id]: value })} className={styles.label} replace>
           {safeDecodeURI(label || value)}
         </Link>
       )}

src/components/hooks/queries/useReports.ts

@@ -1,23 +1,23 @@
-import { useState } from 'react';
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
+import useCache from 'store/cache';
 
-export function useReports(websiteId?: string) {
-  const [modified, setModified] = useState(Date.now());
+export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
+  const modified = useCache((state: any) => state?.reports);
   const { get, del, useMutation } = useApi();
-  const { mutate } = useMutation({ mutationFn: (reportId: string) => del(`/reports/${reportId}`) });
   const queryResult = useFilterQuery({
     queryKey: ['reports', { websiteId, modified }],
     queryFn: (params: any) => {
-      return get(websiteId ? `/websites/${websiteId}/reports` : `/reports`, params);
+      const url = websiteId ? `/websites/${websiteId}/reports` : `/reports`;
+
+      return get(teamId ? `/teams/${teamId}${url}` : url, params);
     },
   });
+  const { mutate } = useMutation({ mutationFn: (reportId: string) => del(`/reports/${reportId}`) });
 
-  const deleteReport = (id: any) => {
-    mutate(id, {
-      onSuccess: () => {
-        setModified(Date.now());
-      },
+  const deleteReport = (reportId: any) => {
+    mutate(reportId, {
+      onSuccess: () => {},
     });
   };
 

src/components/hooks/queries/useTeamMembers.ts

@@ -0,0 +1,16 @@
+import useApi from './useApi';
+import useFilterQuery from './useFilterQuery';
+
+export function useTeamMembers(teamId: string) {
+  const { get } = useApi();
+
+  return useFilterQuery({
+    queryKey: ['teams:users', { teamId }],
+    queryFn: (params: any) => {
+      return get(`/teams/${teamId}/users`, params);
+    },
+    enabled: !!teamId,
+  });
+}
+
+export default useTeamMembers;

src/components/hooks/useLocale.ts

@@ -10,7 +10,7 @@ const messages = {
   'en-US': enUS,
 };
 
-const selector = state => state.locale;
+const selector = (state: { locale: any }) => state.locale;
 
 export function useLocale() {
   const locale = useStore(selector);
@@ -18,7 +18,7 @@ export function useLocale() {
   const dir = getTextDirection(locale);
   const dateLocale = getDateLocale(locale);
 
-  async function loadMessages(locale) {
+  async function loadMessages(locale: string) {
     const { ok, data } = await httpGet(`${process.env.basePath}/intl/messages/${locale}.json`);
 
     if (ok) {
@@ -26,7 +26,7 @@ export function useLocale() {
     }
   }
 
-  async function saveLocale(value) {
+  async function saveLocale(value: string) {
     if (!messages[value]) {
       await loadMessages(value);
     }

src/components/hooks/useNavigation.ts

@@ -6,11 +6,14 @@ export function useNavigation(): {
   pathname: string;
   query: { [key: string]: string };
   router: any;
-  makeUrl: (params: any, reset?: boolean) => string;
+  renderUrl: (params: any, reset?: boolean) => string;
+  renderTeamUrl: (url: string) => string;
+  teamId?: string;
 } {
   const router = useRouter();
   const pathname = usePathname();
   const params = useSearchParams();
+  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
 
   const query = useMemo(() => {
     const obj = {};
@@ -22,11 +25,15 @@ export function useNavigation(): {
     return obj;
   }, [params]);
 
-  function makeUrl(params: any, reset?: boolean) {
+  function renderUrl(params: any, reset?: boolean) {
     return reset ? pathname : buildUrl(pathname, { ...query, ...params });
   }
 
-  return { pathname, query, router, makeUrl };
+  function renderTeamUrl(url: string) {
+    return teamId ? `/teams/${teamId}${url}` : url;
+  }
+
+  return { pathname, query, router, renderUrl, renderTeamUrl, teamId };
 }
 
 export default useNavigation;

src/components/metrics/FilterTags.tsx

@@ -10,7 +10,7 @@ export function FilterTags({ params }) {
   const { formatValue } = useFormat();
   const {
     router,
-    makeUrl,
+    renderUrl,
     query: { view },
   } = useNavigation();
 
@@ -19,11 +19,11 @@ export function FilterTags({ params }) {
   }
 
   function handleCloseFilter(param?: string) {
-    router.push(makeUrl({ [param]: undefined }));
+    router.push(renderUrl({ [param]: undefined }));
   }
 
   function handleResetFilter() {
-    router.push(makeUrl({ view }, true));
+    router.push(renderUrl({ view }, true));
   }
 
   return (

src/components/metrics/MetricsTable.tsx

@@ -45,7 +45,7 @@ export function MetricsTable({
   const { formatValue } = useFormat();
   const [{ startDate, endDate, modified }] = useDateRange(websiteId);
   const {
-    makeUrl,
+    renderUrl,
     query: { url, referrer, title, os, browser, device, country, region, city },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
@@ -142,7 +142,7 @@ export function MetricsTable({
       {!data && isLoading && !isFetched && <Loading icon="dots" />}
       <div className={styles.footer}>
         {data && !error && limit && (
-          <LinkButton href={makeUrl({ view: type })} variant="quiet">
+          <LinkButton href={renderUrl({ view: type })} variant="quiet">
             <Text>{formatMessage(labels.more)}</Text>
             <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
               <Icons.ArrowRight />

src/components/metrics/PagesTable.tsx

@@ -12,13 +12,13 @@ export interface PagesTableProps extends MetricsTableProps {
 export function PagesTable({ allowFilter, domainName, ...props }: PagesTableProps) {
   const {
     router,
-    makeUrl,
+    renderUrl,
     query: { view = 'url' },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   const handleSelect = (key: any) => {
-    router.push(makeUrl({ view: key }), { scroll: true });
+    router.push(renderUrl({ view: key }), { scroll: true });
   };
 
   const buttons = [