Teams context settings.

src/components/hooks/index.ts

@@ -25,5 +25,6 @@ export * from './useLocale';
 export * from './useMessages';
 export * from './useNavigation';
 export * from './useSticky';
+export * from './useTeamContext';
 export * from './useTheme';
 export * from './useTimezone';

src/components/hooks/queries/useLogin.ts

@@ -1,9 +1,13 @@
 import useStore, { setUser } from 'store/app';
 import useApi from './useApi';
+import { UseQueryResult } from '@tanstack/react-query';
 
 const selector = (state: { user: any }) => state.user;
 
-export function useLogin() {
+export function useLogin(): {
+  user: any;
+  setUser: (data: any) => void;
+} & UseQueryResult {
   const { get, useQuery } = useApi();
   const user = useStore(selector);
 
@@ -19,7 +23,7 @@ export function useLogin() {
     enabled: !user,
   });
 
-  return { user, ...query };
+  return { user, setUser, ...query };
 }
 
 export default useLogin;

src/components/hooks/queries/useWebsites.ts

@@ -2,14 +2,18 @@ import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 import useCache from 'store/cache';
 
-export function useWebsites({ userId, teamId }: { userId?: string; teamId?: string }) {
+export function useWebsites(
+  { userId, teamId }: { userId?: string; teamId?: string },
+  params?: { [key: string]: string | number },
+) {
   const { get } = useApi();
   const modified = useCache((state: any) => state?.websites);
 
   return useFilterQuery({
-    queryKey: ['websites', { userId, teamId, modified }],
-    queryFn: (params: any) => {
+    queryKey: ['websites', { userId, teamId, modified, ...params }],
+    queryFn: (data: any) => {
       return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId}/websites`, {
+        ...data,
         ...params,
       });
     },

src/components/hooks/useNavigation.ts

@@ -7,13 +7,10 @@ export function useNavigation(): {
   query: { [key: string]: string };
   router: any;
   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 = {};
@@ -29,11 +26,7 @@ export function useNavigation(): {
     return reset ? pathname : buildUrl(pathname, { ...query, ...params });
   }
 
-  function renderTeamUrl(url: string) {
-    return teamId ? `/teams/${teamId}${url}` : url;
-  }
-
-  return { pathname, query, router, renderUrl, renderTeamUrl, teamId };
+  return { pathname, query, router, renderUrl };
 }
 
 export default useNavigation;

src/components/hooks/useTeamContext.ts

@@ -0,0 +1,17 @@
+import { usePathname } from 'next/navigation';
+
+export function useTeamContext(): {
+  teamId?: string;
+  renderTeamUrl: (url: string) => string;
+} {
+  const pathname = usePathname();
+  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
+
+  function renderTeamUrl(url: string) {
+    return teamId ? `/teams/${teamId}${url}` : url;
+  }
+
+  return { teamId, renderTeamUrl };
+}
+
+export default useTeamContext;

src/components/input/TeamsButton.module.css

@@ -1,3 +1,7 @@
+.button {
+  font-weight: 700;
+}
+
 .menu {
   background: var(--base50);
 }

src/components/input/TeamsButton.tsx

@@ -1,9 +1,9 @@
 import { Key } from 'react';
 import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
+import classNames from 'classnames';
 import Icons from 'components/icons';
 import { useLogin, useMessages, useNavigation } from 'components/hooks';
 import styles from './TeamsButton.module.css';
-import classNames from 'classnames';
 
 export function TeamsButton({ teamId }: { teamId: string }) {
   const { user } = useLogin();

src/components/input/WebsiteSelect.tsx

@@ -1,30 +1,27 @@
 import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import styles from './WebsiteSelect.module.css';
+import { useWebsite, useWebsites, useMessages } from 'components/hooks';
 import Empty from 'components/common/Empty';
+import styles from './WebsiteSelect.module.css';
 
 export function WebsiteSelect({
   websiteId,
+  teamId,
+  userId,
   onSelect,
 }: {
   websiteId?: string;
+  teamId?: string;
+  userId?: string;
   onSelect?: (key: any) => void;
 }) {
+  const { formatMessage, labels, messages } = useMessages();
   const [query, setQuery] = useState('');
   const [selectedId, setSelectedId] = useState<Key>(websiteId);
-  const { formatMessage, labels, messages } = useMessages();
-  const { get, useQuery } = useApi();
-  const { data: websites, isLoading } = useQuery({
-    queryKey: ['websites:me', { query }],
-    queryFn: () => get('/me/websites', { query, pageSize: 5 }),
-  });
-  const { data: website } = useQuery({
-    queryKey: ['websites', { selectedId }],
-    queryFn: () => get(`/websites/${selectedId}`),
-    enabled: !!selectedId,
-  });
+
+  const { data: website } = useWebsite(selectedId as string);
+
+  const queryResult = useWebsites({ teamId, userId }, { query, pageSize: 5 });
 
   const renderValue = () => {
     return website?.name;
@@ -46,7 +43,7 @@ export function WebsiteSelect({
   return (
     <Dropdown
       menuProps={{ className: styles.dropdown }}
-      items={websites?.data}
+      items={queryResult?.result?.data as any[]}
       value={selectedId as string}
       renderValue={renderValue}
       renderEmpty={renderEmpty}
@@ -55,7 +52,7 @@ export function WebsiteSelect({
       placeholder={formatMessage(labels.selectWebsite)}
       allowSearch={true}
       onSearch={handleSearch}
-      isLoading={isLoading}
+      isLoading={queryResult.query.isLoading}
     >
       {({ id, name }) => <Item key={id}>{name}</Item>}
     </Dropdown>