(FE) Add Retrieving a Workspace (#73)

* Add retrieving a workspace

* Fix lint

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>

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 {}

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;
+};