Added teams pages. Refactored hooks.

src/components/hooks/index.js

@@ -1,5 +1,14 @@
-export * from './useApi';
-export * from './useConfig';
+export * from './queries/useApi';
+export * from './queries/useConfig';
+export * from './queries/useFilterQuery';
+export * from './queries/useLogin';
+export * from './queries/useReport';
+export * from './queries/useReports';
+export * from './queries/useShareToken';
+export * from './queries/useTeam';
+export * from './queries/useTeamWebsites';
+export * from './queries/useUser';
+export * from './queries/useWebsite';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
@@ -11,12 +20,6 @@ export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
 export * from './useNavigation';
-export * from './useReport';
-export * from './useReports';
-export * from './useLogin';
-export * from './useShareToken';
 export * from './useSticky';
 export * from './useTheme';
 export * from './useTimezone';
-export * from './useUser';
-export * from './useWebsite';

src/components/hooks/queries/useApi.ts

@@ -4,7 +4,7 @@ import { getClientAuthToken } from 'lib/client';
 import { SHARE_TOKEN_HEADER } from 'lib/constants';
 import useStore from 'store/app';
 
-const selector = state => state.shareToken;
+const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
 export function useApi() {
   const shareToken = useStore(selector);

src/components/hooks/queries/useConfig.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import useStore, { setConfig } from 'store/app';
-import useApi from 'components/hooks/useApi';
+import { useApi } from './useApi';
 
 let loading = false;
 

src/components/hooks/queries/useFilterQuery.ts

@@ -1,6 +1,6 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState, Dispatch, SetStateAction } from 'react';
-import { useApi } from 'components/hooks/useApi';
+import { useApi } from './useApi';
 import { FilterResult, SearchFilter } from 'lib/types';
 
 export interface FilterQueryResult<T> {

src/components/hooks/queries/useLogin.ts

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useUser from 'components/hooks/useUser';
+import useApi from './useApi';
+import useUser from './useUser';
 
 export function useLogin() {
   const { get, useQuery } = useApi();

src/components/hooks/queries/useReport.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
-import { useTimezone } from './useTimezone';
-import useApi from './useApi';
-import useMessages from './useMessages';
+import { useApi } from './useApi';
+import { useTimezone } from '../useTimezone';
+import { useMessages } from '../useMessages';
 
 export function useReport(reportId: string, defaultParameters: { [key: string]: any }) {
   const [report, setReport] = useState(null);

src/components/hooks/queries/useReports.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import useFilterQuery from './useFilterQuery';
 
 export function useReports(websiteId?: string) {
   const [modified, setModified] = useState(Date.now());

src/components/hooks/queries/useTeam.ts

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

src/components/hooks/queries/useTeamWebsites.ts

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

src/components/hooks/queries/useUser.ts

@@ -1,6 +1,6 @@
 import useStore, { setUser } from 'store/app';
 
-const selector = state => state.user;
+const selector = (state: { user: any }) => state.user;
 
 export function useUser() {
   const user = useStore(selector);

src/components/hooks/queries/useWebsites.ts

@@ -0,0 +1,20 @@
+import useApi from './useApi';
+import useFilterQuery from './useFilterQuery';
+import useCache from 'store/cache';
+
+export function useWebsites({ userId, teamId }: { userId?: string; teamId?: string }) {
+  const { get } = useApi();
+  const modified = useCache((state: any) => state?.websites);
+
+  return useFilterQuery({
+    queryKey: ['websites', { userId, teamId, modified }],
+    queryFn: (params: any) => {
+      return get(teamId ? `/teams/${teamId}/websites` : '/websites', {
+        ...params,
+      });
+    },
+    enabled: !!(userId || teamId),
+  });
+}
+
+export default useWebsites;

src/components/hooks/useCountryNames.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { httpGet } from 'next-basics';
-import enUS from 'public/intl/country/en-US.json';
+import enUS from '../../../public/intl/country/en-US.json';
 
 const countryNames = {
   'en-US': enUS,

src/components/hooks/useDateRange.ts

@@ -5,7 +5,7 @@ import websiteStore, { setWebsiteDateRange } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
 import { DateRange } from 'lib/types';
 import useLocale from './useLocale';
-import useApi from './useApi';
+import { useApi } from 'components/hooks';
 
 export function useDateRange(websiteId?: string) {
   const { get } = useApi();

src/components/hooks/useLanguageNames.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { httpGet } from 'next-basics';
-import enUS from 'public/intl/language/en-US.json';
+import enUS from '../../../public/intl/language/en-US.json';
 
 const languageNames = {
   'en-US': enUS,

src/components/hooks/useLocale.ts

@@ -3,8 +3,8 @@ import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
-import useForceUpdate from 'components/hooks/useForceUpdate';
-import enUS from 'public/intl/country/en-US.json';
+import { useForceUpdate } from 'components/hooks';
+import enUS from '../../../public/intl/country/en-US.json';
 
 const messages = {
   'en-US': enUS,

src/components/hooks/useTimezone.ts

@@ -7,7 +7,7 @@ export function useTimezone() {
   const [timezone, setTimezone] = useState(getItem(TIMEZONE_CONFIG) || getTimezone());
 
   const saveTimezone = useCallback(
-    value => {
+    (value: string) => {
       setItem(TIMEZONE_CONFIG, value);
       setTimezone(value);
     },