(FE) Document Creation within Workspace Document Name (#81)

* Add create note button

* Implement create modal

* Implement create document

frontend/package.json

@@ -18,8 +18,9 @@
 		"@emotion/react": "^11.11.3",
 		"@emotion/styled": "^11.11.0",
 		"@fontsource/roboto": "^5.0.8",
-		"@mui/icons-material": "^5.15.4",
+		"@mui/icons-material": "^5.15.5",
 		"@mui/material": "^5.15.3",
+		"@mui/x-date-pickers": "^6.19.0",
 		"@react-hook/window-size": "^3.1.1",
 		"@reduxjs/toolkit": "^2.0.1",
 		"@swc/helpers": "^0.5.3",
@@ -38,6 +39,8 @@
 		"randomcolor": "^0.6.2",
 		"react": "^17.0.0 || ^18.0.0",
 		"react-dom": "^17.0.0 || ^18.0.0",
+		"react-hook-form": "^7.49.3",
+		"react-hook-form-mui": "^7.0.0-beta.0",
 		"react-infinite-scroller": "^1.2.6",
 		"react-redux": "^9.0.4",
 		"react-resizable-layout": "^0.7.2",

frontend/src/App.tsx

@@ -22,6 +22,11 @@ function App() {
 		const defaultMode = prefersDarkMode ? "dark" : "light";
 
 		return createTheme({
+			typography: {
+				button: {
+					textTransform: "none",
+				},
+			},
 			palette: {
 				mode: config.theme == "default" ? defaultMode : config.theme,
 			},

frontend/src/components/drawers/WorkspaceDrawer.tsx

@@ -1,6 +1,7 @@
 import {
 	Avatar,
 	Box,
+	Button,
 	Divider,
 	Drawer,
 	IconButton,
@@ -20,17 +21,22 @@ import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import WorkspaceListPopover from "../popovers/WorkspaceListPopover";
+import AddIcon from "@mui/icons-material/Add";
+import CreateModal from "../modals/CreateModal";
+import { useCreateDocumentMutation } from "../../hooks/api/workspaceDocument";
 
 const DRAWER_WIDTH = 240;
 
 function WorkspaceDrawer() {
 	const params = useParams();
 	const userStore = useSelector(selectUser);
 	const { data: workspace } = useGetWorkspaceQuery(params.workspaceSlug);
+	const { mutateAsync: createDocument } = useCreateDocumentMutation(workspace?.id || "");
 	const [profileAnchorEl, setProfileAnchorEl] = useState<(EventTarget & Element) | null>(null);
 	const [workspaceListAnchorEl, setWorkspaceListAnchorEl] = useState<
 		(EventTarget & Element) | null
 	>(null);
+	const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
 
 	const handleOpenProfilePopover: MouseEventHandler = (event) => {
 		setProfileAnchorEl(event.currentTarget);
@@ -48,6 +54,14 @@ function WorkspaceDrawer() {
 		setWorkspaceListAnchorEl(null);
 	};
 
+	const handleCreateWorkspace = async (data: { title: string }) => {
+		await createDocument(data);
+	};
+
+	const handleCreateWorkspaceModalOpen = () => {
+		setCreateWorkspaceModalOpen((prev) => !prev);
+	};
+
 	return (
 		<Drawer
 			sx={{
@@ -89,6 +103,19 @@ function WorkspaceDrawer() {
 				/>
 			</ListItem>
 			<Divider />
+			<ListItem>
+				<Button
+					variant="contained"
+					startIcon={<AddIcon />}
+					sx={{
+						width: 1,
+					}}
+					onClick={handleCreateWorkspaceModalOpen}
+				>
+					New Note
+				</Button>
+			</ListItem>
+			<Divider />
 			<Box sx={{ mt: "auto" }}>
 				<Divider />
 				<ListItem disablePadding>
@@ -108,6 +135,12 @@ function WorkspaceDrawer() {
 					/>
 				</ListItem>
 			</Box>
+			<CreateModal
+				open={createWorkspaceModalOpen}
+				title="Note"
+				onSuccess={handleCreateWorkspace}
+				onClose={handleCreateWorkspaceModalOpen}
+			/>
 		</Drawer>
 	);
 }

frontend/src/components/modals/CreateModal.tsx

@@ -0,0 +1,60 @@
+import { Button, FormControl, Modal, ModalProps, Paper, Stack, Typography } from "@mui/material";
+import { FormContainer, TextFieldElement } from "react-hook-form-mui";
+
+interface CreateRequest {
+	title: string;
+}
+
+interface CreateModalProps extends Omit<ModalProps, "children"> {
+	title: string;
+	onSuccess: (data: CreateRequest) => Promise<void>;
+}
+
+function CreateModal(props: CreateModalProps) {
+	const { title, onSuccess, ...modalProps } = props;
+
+	const handleCreate = async (data: CreateRequest) => {
+		await onSuccess(data);
+		modalProps?.onClose?.(new Event("Close Modal"), "escapeKeyDown");
+	};
+
+	return (
+		<Modal disableAutoFocus {...modalProps}>
+			<Paper
+				sx={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					p: 4,
+					width: 400,
+				}}
+			>
+				<Stack gap={4}>
+					<Typography variant="h5">Create New {title}</Typography>
+					<FormControl>
+						<FormContainer defaultValues={{ title: "" }} onSuccess={handleCreate}>
+							<Stack gap={4} alignItems="flex-end">
+								<TextFieldElement
+									variant="standard"
+									name="title"
+									label="Title of new note"
+									required
+									fullWidth
+									inputProps={{
+										maxLength: 255,
+									}}
+								/>
+								<Button type="submit" variant="contained" size="large">
+									OK
+								</Button>
+							</Stack>
+						</FormContainer>
+					</FormControl>
+				</Stack>
+			</Paper>
+		</Modal>
+	);
+}
+
+export default CreateModal;

frontend/src/hooks/api/types/document.d.ts

@@ -7,8 +7,3 @@ export class Document {
 	createdAt: Date;
 	updatedAt: Date;
 }
-
-export class GetWorkspaceDocumentListResponse {
-	cursor: string | null;
-	documents: Array<Workspace>;
-}

frontend/src/hooks/api/types/workspace.d.ts

@@ -12,3 +12,9 @@ export class GetWorkspaceListResponse {
 	cursor: string | null;
 	workspaces: Array<Workspace>;
 }
+
+export class CreateWorkspaceRequest {
+	title: string;
+}
+
+export class CreateWorkspaceResponse extends Workspace {}

frontend/src/hooks/api/types/workspaceDocument.d.ts

@@ -0,0 +1,12 @@
+import { Document } from "./document";
+
+export class GetWorkspaceDocumentListResponse {
+	cursor: string | null;
+	documents: Array<Document>;
+}
+
+export class CreateDocumentRequest {
+	title: string;
+}
+
+export class CreateDocumentResponse extends Document {}

frontend/src/hooks/api/workspace.ts

@@ -1,6 +1,11 @@
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { GetWorkspaceListResponse, GetWorkspaceResponse } from "./types/workspace";
+import {
+	CreateWorkspaceRequest,
+	CreateWorkspaceResponse,
+	GetWorkspaceListResponse,
+	GetWorkspaceResponse,
+} from "./types/workspace";
 
 export const generateGetWorkspaceQueryKey = (workspaceId: string) => {
 	return ["workspaces", workspaceId];
@@ -44,3 +49,13 @@ export const useGetWorkspaceListQuery = () => {
 
 	return query;
 };
+
+export const useCreateWorkspaceMutation = () => {
+	return useMutation({
+		mutationFn: async (data: CreateWorkspaceRequest) => {
+			const res = await axios.post<CreateWorkspaceResponse>("/workspaces", data);
+
+			return res.data;
+		},
+	});
+};