Updated teams button.

src/components/hooks/queries/useTeams.ts

@@ -1,18 +1,15 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
-import useLogin from './useLogin';
 import useModified from '../useModified';
 
-export function useTeams(userId?: string) {
+export function useTeams(userId: string) {
   const { get } = useApi();
-  const { user } = useLogin();
-  const id = userId || user?.id;
   const { modified } = useModified(`teams`);
 
   return useFilterQuery({
-    queryKey: ['teams', { userId: id, modified }],
+    queryKey: ['teams', { userId, modified }],
     queryFn: (params: any) => {
-      return get(`/teams`, params);
+      return get(`/users/${userId}/teams`, params);
     },
   });
 }

src/components/hooks/queries/useWebsites.ts

@@ -13,9 +13,8 @@ export function useWebsites(
 
   return useFilterQuery({
     queryKey: ['websites', { userId, teamId, modified, ...params }],
-    queryFn: (data: any) => {
+    queryFn: () => {
       return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, {
-        ...data,
         ...params,
       });
     },

src/components/input/TeamsButton.tsx

@@ -2,25 +2,30 @@ 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 { useLogin, useMessages, useTeams } from 'components/hooks';
 import styles from './TeamsButton.module.css';
 
-export function TeamsButton({ teamId }: { teamId: string }) {
+export function TeamsButton({
+  teamId,
+  onChange,
+}: {
+  teamId: string;
+  onChange?: (value: string) => void;
+}) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
-  const { router } = useNavigation();
-  const team = user?.teams?.find(({ id }) => id === teamId);
-  const cloudMode = !!process.env.cloudMode;
+  const { result } = useTeams(user?.id);
+  const team = result?.data?.find(({ id }) => id === teamId);
 
   const handleSelect = (close: () => void, id: Key) => {
-    if (id !== user.id) {
-      router.push(cloudMode ? `${process.env.cloudUrl}/teams/${id}` : `/teams/${id}`);
-    } else {
-      router.push('/');
-    }
+    onChange?.(id as string);
     close();
   };
 
+  if (!result) {
+    return null;
+  }
+
   return (
     <PopupTrigger>
       <Button className={styles.button} variant="quiet">
@@ -40,7 +45,7 @@ export function TeamsButton({ teamId }: { teamId: string }) {
               </Flexbox>
             </Item>
             <div className={styles.heading}>{formatMessage(labels.team)}</div>
-            {user?.teams?.map(({ id, name }) => (
+            {result?.data?.map(({ id, name }) => (
               <Item key={id} className={classNames({ [styles.selected]: id === teamId })}>
                 <Flexbox gap={10} alignItems="center">
                   <Icon>