From 03c4fa5ded9ee9b619cd9f9f476097c2214db90d Mon Sep 17 00:00:00 2001
From: LeeJongBeom <52884648+devleejb@users.noreply.github.com>
Date: Fri, 19 Jan 2024 17:13:22 +0900
Subject: [PATCH] (FE) Add Retrieving a Workspace (#73)

* Add retrieving a workspace

* Fix lint
---
 .../components/drawers/WorkspaceDrawer.tsx    | 22 ++++++++++++++++++
 frontend/src/hooks/api/types/workspace.d.ts   |  8 +++++++
 frontend/src/hooks/api/workspace.ts           | 23 +++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 frontend/src/hooks/api/types/workspace.d.ts
 create mode 100644 frontend/src/hooks/api/workspace.ts

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
 		>
+			<ListItem disablePadding>
+				<ListItemButton>
+					<ListItemText
+						primary={workspace?.title}
+						primaryTypographyProps={{
+							variant: "subtitle1",
+							noWrap: true,
+						}}
+					/>
+					<ListItemSecondaryAction>
+						<IconButton>
+							<KeyboardArrowDownIcon />
+						</IconButton>
+					</ListItemSecondaryAction>
+				</ListItemButton>
+			</ListItem>
 			<Box sx={{ mt: "auto" }}>
 				<Divider />
 				<ListItem disablePadding>
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<GetWorkspaceResponse>(`/workspaces/${workspaceId}`);
+			return res.data;
+		},
+		meta: {
+			errorMessage: "This is a non-existent or unauthorized Workspace.",
+		},
+	});
+
+	return query;
+};