diff --git a/frontend/src/components/drawers/WorkspaceDrawer.tsx b/frontend/src/components/drawers/WorkspaceDrawer.tsx
index b9e90845..8d295062 100644
--- a/frontend/src/components/drawers/WorkspaceDrawer.tsx
+++ b/frontend/src/components/drawers/WorkspaceDrawer.tsx
@@ -3,6 +3,7 @@ import {
Box,
Divider,
Drawer,
+ IconButton,
ListItem,
ListItemAvatar,
ListItemButton,
@@ -14,11 +15,16 @@ import { useSelector } from "react-redux";
import { selectUser } from "../../store/userSlice";
import { MouseEventHandler, useState } from "react";
import ProfilePopover from "../common/ProfilePopover";
+import { useParams } from "react-router-dom";
+import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
const DRAWER_WIDTH = 240;
function WorkspaceDrawer() {
+ const params = useParams();
const userStore = useSelector(selectUser);
+ const { data: workspace } = useGetWorkspaceQuery(params.workspaceId);
const [profileAnchorEl, setProfileAnchorEl] = useState<(EventTarget & Element) | null>(null);
const handleOpenProfilePopover: MouseEventHandler = (event) => {
@@ -43,6 +49,22 @@ function WorkspaceDrawer() {
anchor="left"
open
>
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/hooks/api/types/workspace.d.ts b/frontend/src/hooks/api/types/workspace.d.ts
new file mode 100644
index 00000000..50e2f9ca
--- /dev/null
+++ b/frontend/src/hooks/api/types/workspace.d.ts
@@ -0,0 +1,8 @@
+export interface Workspace {
+ id: string;
+ title: string;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+export class GetWorkspaceResponse extends Workspace {}
diff --git a/frontend/src/hooks/api/workspace.ts b/frontend/src/hooks/api/workspace.ts
new file mode 100644
index 00000000..880d8888
--- /dev/null
+++ b/frontend/src/hooks/api/workspace.ts
@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { GetWorkspaceResponse } from "./types/workspace";
+
+export const generateGetWorkspaceQueryKey = (workspaceId: string) => {
+ return ["workspaces", workspaceId];
+};
+
+export const useGetWorkspaceQuery = (workspaceId?: string) => {
+ const query = useQuery({
+ queryKey: generateGetWorkspaceQueryKey(workspaceId || ""),
+ enabled: Boolean(workspaceId),
+ queryFn: async () => {
+ const res = await axios.get(`/workspaces/${workspaceId}`);
+ return res.data;
+ },
+ meta: {
+ errorMessage: "This is a non-existent or unauthorized Workspace.",
+ },
+ });
+
+ return query;
+};