feat: switch workspace

src/app/components/SideNavigation.tsx

@@ -8,8 +8,7 @@ import settingsIcon from "~/app/assets/settings.json";
 
 import ReactiveButton from "~/app/components/ReactiveButton";
 import UserMenu from "~/app/components/UserMenu";
-
+import WorkspaceMenu from "~/app/components/WorkspaceMenu";
-import { useWorkspace } from "~/app/providers/workspace";
 
 interface SideNavigationProps {
   user: UserType;
@@ -22,7 +21,6 @@ interface UserType {
 
 export default function SideNavigation({ user }: SideNavigationProps) {
   const pathname = usePathname();
-  const { workspace } = useWorkspace();
 
   const navigation = [
     { name: "Boards", href: "/boards", icon: boardsIcon },
@@ -35,19 +33,10 @@ export default function SideNavigation({ user }: SideNavigationProps) {
   ];
 
   return (
-    <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-5 py-5">
+    <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
       <div>
-        <div className="-mx-2 mb-4 flex items-center rounded-[5px] p-1.5 hover:bg-dark-200">
+        <WorkspaceMenu />
-          <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-dark-400">
+        <ul role="list" className="space-y-1">
-            <span className="text-xs font-medium leading-none text-white">
-              {workspace?.name.charAt(0).toUpperCase()}
-            </span>
-          </span>
-          <span className="ml-2 text-sm font-medium text-dark-1000">
-            {workspace?.name}
-          </span>
-        </div>
-        <ul role="list" className="-mx-2 my-3 space-y-1">
           {navigation.map((item) => (
             <li key={item.name}>
               <ReactiveButton

src/app/components/UserMenu.tsx

@@ -15,7 +15,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
   return (
     <Menu as="div" className="relative inline-block w-full text-left">
       <div>
-        <Menu.Button className="-mx-2 flex items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
+        <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
           {imageUrl ? (
             <Image
               src={imageUrl ?? ""}
@@ -48,13 +48,13 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute bottom-[50px] right-[-10px] z-10 mt-2 w-[225px] origin-bottom-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="flex">
+          <div className="flex w-full">
             <Menu.Item>
               {() => (
                 <button
                   onClick={() => signOut({ callbackUrl: "/boards" })}
-                  className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                  className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
                 >
                   <HiOutlineLogout size={18} className="mr-2" />
                   Logout

src/app/components/WorkspaceMenu.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+
+import { useWorkspace } from "~/app/providers/workspace";
+
+export default function UserMenu() {
+  const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
+
+  return (
+    <Menu as="div" className="relative inline-block w-full pb-3 text-left">
+      <div>
+        <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-dark-200">
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
+            <span className="text-xs font-bold leading-none text-white">
+              {workspace?.name.charAt(0).toUpperCase()}
+            </span>
+          </span>
+          <span className="ml-2 text-sm font-bold text-dark-1000">
+            {workspace?.name}
+          </span>
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          {availableWorkspaces.map((availableWorkspace) => (
+            <div key={availableWorkspace.publicId} className="flex">
+              <Menu.Item>
+                <button
+                  onClick={() => switchWorkspace(availableWorkspace)}
+                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                >
+                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
+                    <span className="text-xs font-medium leading-none text-white">
+                      {availableWorkspace?.name.charAt(0).toUpperCase()}
+                    </span>
+                  </span>
+                  <span className="ml-2 text-xs font-medium text-dark-1000">
+                    {availableWorkspace?.name}
+                  </span>
+                </button>
+              </Menu.Item>
+            </div>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

src/app/providers/workspace.tsx

@@ -10,9 +10,12 @@ import React, {
 
 import { api } from "~/trpc/react";
 
+import { useRouter } from "next/navigation";
+
 interface WorkspaceContextProps {
   workspace: Workspace;
-  setWorkspace: React.Dispatch<React.SetStateAction<Workspace>>;
+  switchWorkspace: (_workspace: Workspace) => void;
+  availableWorkspaces: Workspace[];
 }
 
 interface Workspace {
@@ -20,11 +23,13 @@ interface Workspace {
   publicId: string;
 }
 
-const initialBoardData: Workspace = {
+const initialWorkspace: Workspace = {
   name: "",
   publicId: "",
 };
 
+const initialAvailableWorkspaces: Workspace[] = [];
+
 const WorkspaceContext = createContext<WorkspaceContextProps | undefined>(
   undefined,
 );
@@ -32,17 +37,43 @@ const WorkspaceContext = createContext<WorkspaceContextProps | undefined>(
 export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [workspace, setWorkspace] = useState<Workspace>(initialBoardData);
+  const router = useRouter();
+  const [workspace, setWorkspace] = useState<Workspace>(initialWorkspace);
+  const [availableWorkspaces, setAvailableWorkspaces] = useState<Workspace[]>(
+    initialAvailableWorkspaces,
+  );
 
   const { data } = api.workspace.all.useQuery();
 
+  console.log({ data });
+
+  const switchWorkspace = (_workspace: Workspace) => {
+    localStorage.setItem("workspacePublicId", _workspace.publicId);
+
+    setWorkspace(_workspace);
+
+    router.push(`/boards`);
+  };
+
   useEffect(() => {
+    if (!data) return;
+
     const storedWorkspaceId: string | null =
       localStorage.getItem("workspacePublicId");
 
+    if (data?.length) {
+      const workspaces = data.map(({ workspace }) => ({
+        publicId: workspace.publicId,
+        name: workspace.name,
+      }));
+
+      setAvailableWorkspaces(workspaces);
+    }
+
     if (storedWorkspaceId !== null) {
-      const selectedWorkspace = data?.find(
+      const newData = data;
-        ({ workspace }) => (workspace.publicId = storedWorkspaceId),
+      const selectedWorkspace = newData?.find(
+        ({ workspace }) => workspace.publicId === storedWorkspaceId,
       );
 
       if (!selectedWorkspace) return;
@@ -53,11 +84,8 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
       });
     } else {
       const primaryWorkspace = data?.[0]?.workspace;
-
       if (!primaryWorkspace) return;
-
       localStorage.setItem("workspacePublicId", primaryWorkspace?.publicId);
-
       setWorkspace({
         publicId: primaryWorkspace?.publicId,
         name: primaryWorkspace?.name,
@@ -66,7 +94,9 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   }, [data]);
 
   return (
-    <WorkspaceContext.Provider value={{ workspace, setWorkspace }}>
+    <WorkspaceContext.Provider
+      value={{ workspace, availableWorkspaces, switchWorkspace }}
+    >
       {children}
     </WorkspaceContext.Provider>
   );