fix: refresh connect atoms on token change (#15933)

* added dropdown

* change comment

* fix: added types

---------

Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

packages/platform/examples/base/package.json

@@ -14,7 +14,8 @@
     "next": "14.0.4",
     "prisma": "^5.7.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-select": "^5.8.0"
   },
   "devDependencies": {
     "@types/node": "^20.3.1",

packages/platform/examples/base/src/pages/_app.tsx

@@ -1,14 +1,17 @@
+import type { Data } from "@/pages/api/get-managed-users";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { Poppins } from "next/font/google";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import Select from "react-select";
 
 import { CalProvider, BookerEmbed } from "@calcom/atoms";
 import "@calcom/atoms/globals.min.css";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
+type TUser = Data["users"][0];
 
 function generateRandomEmail() {
   const localPartLength = 10;
@@ -27,14 +30,26 @@ export default function App({ Component, pageProps }: AppProps) {
   const [accessToken, setAccessToken] = useState("");
   const [email, setUserEmail] = useState("");
   const [username, setUsername] = useState("");
+  const [selectedUser, setSelectedUser] = useState<TUser | null>(null);
+  const [options, setOptions] = useState([]);
+
   const router = useRouter();
   const pathname = usePathname();
+  useEffect(() => {
+    fetch("/api/get-managed-users", {
+      method: "get",
+    }).then(async (res) => {
+      const data = await res.json();
+      setOptions(
+        data.users.map((item: Data["users"][0]) => ({ ...item, value: item.id, label: item.username }))
+      );
+    });
+  }, []);
 
   useEffect(() => {
     const randomEmail = generateRandomEmail();
     fetch("/api/managed-user", {
       method: "POST",
-
       body: JSON.stringify({ email: randomEmail }),
     }).then(async (res) => {
       const data = await res.json();
@@ -43,8 +58,19 @@ export default function App({ Component, pageProps }: AppProps) {
       setUsername(data.username);
     });
   }, []);
+  useEffect(() => {
+    if (!!selectedUser) {
+      setAccessToken(selectedUser.accessToken);
+      setUserEmail(selectedUser.email);
+      setUsername(selectedUser.username);
+    }
+  }, [selectedUser]);
+
   return (
     <div className={`${poppins.className} text-black`}>
+      {options.length > 0 && (
+        <Select defaultValue={selectedUser} onChange={setSelectedUser} options={options} />
+      )}
       <CalProvider
         accessToken={accessToken}
         // eslint-disable-next-line turbo/no-undeclared-env-vars

packages/platform/examples/base/src/pages/api/get-managed-users.ts

@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import prisma from "../../lib/prismaClient";
+
+export type Data = {
+  users: {
+    email: string;
+    username: string;
+    id: number | null;
+    accessToken: string;
+  }[];
+};
+
+// example endpoint to endpoint to fetch managed users
+export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+  const existingUsers = await prisma.user.findMany({ orderBy: { createdAt: "desc" } });
+  if (existingUsers && existingUsers.length > 2) {
+    return res.status(200).json({
+      users: existingUsers.map((item) => ({
+        id: item.calcomUserId,
+        email: item.email,
+        username: item.calcomUsername ?? "",
+        accessToken: item.accessToken ?? "",
+      })),
+    });
+  }
+  return res.status(400).json({ users: [] });
+}