shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch workspace

Browse Source
This commit is contained in:
Henry
2024-03-16 11:43:49 +00:00
parent 5f05d5ca84
commit aa590078de
4 changed files with 106 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/components/SideNavigation.tsx
View File

@@ -8,8 +8,7 @@ import settingsIcon from "~/app/assets/settings.json";
import ReactiveButton from "~/app/components/ReactiveButton";
import UserMenu from "~/app/components/UserMenu";
import { useWorkspace } from "~/app/providers/workspace";
import WorkspaceMenu from "~/app/components/WorkspaceMenu";
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">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-dark-400">
<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">
<WorkspaceMenu />
<ul role="list" className="space-y-1">
{navigation.map((item) => (
<li key={item.name}>
<ReactiveButton

8
src/app/components/UserMenu.tsx
View File

@@ -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">
<div className="flex">
<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 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

59
src/app/components/WorkspaceMenu.tsx Normal file
View File

@@ -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>
);
}

48
src/app/providers/workspace.tsx
View File

@@ -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(
({ workspace }) => (workspace.publicId = storedWorkspaceId),
const newData = data;
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>
);