Use auth.availableTeams endpoint for workspace switching (#4585)

app/actions/definitions/teams.tsx

@@ -2,42 +2,46 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { stringToColor } from "@shared/utils/color";
+import RootStore from "~/stores/RootStore";
 import TeamNew from "~/scenes/TeamNew";
 import TeamLogo from "~/components/TeamLogo";
 import { createAction } from "~/actions";
-import { loadSessionsFromCookie } from "~/hooks/useSessions";
 import { TeamSection } from "../sections";
 
-export const switchTeamList = getSessions().map((session) => {
-  return createAction({
-    name: session.name,
-    section: TeamSection,
-    keywords: "change switch workspace organization team",
-    icon: () => (
-      <StyledTeamLogo
-        alt={session.name}
-        model={{
-          initial: session.name[0],
-          avatarUrl: session.logoUrl,
-          id: session.teamId,
-          color: stringToColor(session.teamId),
-        }}
-        size={24}
-      />
-    ),
-    visible: ({ currentTeamId }) => currentTeamId !== session.teamId,
-    perform: () => (window.location.href = session.url),
-  });
-});
+export const createTeamsList = ({ stores }: { stores: RootStore }) => {
+  return (
+    stores.auth.availableTeams?.map((session) =>
+      createAction({
+        name: session.name,
+        section: TeamSection,
+        keywords: "change switch workspace organization team",
+        icon: () => (
+          <StyledTeamLogo
+            alt={session.name}
+            model={{
+              initial: session.name[0],
+              avatarUrl: session.avatarUrl,
+              id: session.id,
+              color: stringToColor(session.id),
+            }}
+            size={24}
+          />
+        ),
+        visible: ({ currentTeamId }) => currentTeamId !== session.id,
+        perform: () => (window.location.href = session.url),
+      })
+    ) ?? []
+  );
+};
 
-const switchTeam = createAction({
+export const switchTeam = createAction({
   name: ({ t }) => t("Switch workspace"),
   placeholder: ({ t }) => t("Select a workspace"),
   keywords: "change switch workspace organization team",
   section: TeamSection,
-  visible: ({ currentTeamId }) =>
-    getSessions({ exclude: currentTeamId }).length > 0,
-  children: switchTeamList,
+  visible: ({ stores }) =>
+    !!stores.auth.availableTeams && stores.auth.availableTeams?.length > 1,
+  children: createTeamsList,
 });
 
 export const createTeam = createAction({
@@ -60,14 +64,6 @@ export const createTeam = createAction({
   },
 });
 
-function getSessions(params?: { exclude?: string }) {
-  const sessions = loadSessionsFromCookie();
-  const otherSessions = sessions.filter(
-    (session) => session.teamId !== params?.exclude
-  );
-  return otherSessions;
-}
-
 const StyledTeamLogo = styled(TeamLogo)`
   border-radius: 2px;
   border: 0;