Skip to content

Commit

Permalink
(FE) Document Creation within Workspace Document Name (#81)
Browse files Browse the repository at this point in the history
* Add create note button

* Implement create modal

* Implement create document
  • Loading branch information
devleejb authored Jan 22, 2024
1 parent 315f2b3 commit 08c0eb5
Showing 11 changed files with 276 additions and 16 deletions.
117 changes: 112 additions & 5 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
@@ -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",
5 changes: 5 additions & 0 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
33 changes: 33 additions & 0 deletions frontend/src/components/drawers/WorkspaceDrawer.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
60 changes: 60 additions & 0 deletions frontend/src/components/modals/CreateModal.tsx
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 0 additions & 5 deletions frontend/src/hooks/api/types/document.d.ts
Original file line number Diff line number Diff line change
@@ -7,8 +7,3 @@ export class Document {
createdAt: Date;
updatedAt: Date;
}

export class GetWorkspaceDocumentListResponse {
cursor: string | null;
documents: Array<Workspace>;
}
6 changes: 6 additions & 0 deletions frontend/src/hooks/api/types/workspace.d.ts
Original file line number Diff line number Diff line change
@@ -12,3 +12,9 @@ export class GetWorkspaceListResponse {
cursor: string | null;
workspaces: Array<Workspace>;
}

export class CreateWorkspaceRequest {
title: string;
}

export class CreateWorkspaceResponse extends Workspace {}
12 changes: 12 additions & 0 deletions frontend/src/hooks/api/types/workspaceDocument.d.ts
Original file line number Diff line number Diff line change
@@ -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 {}
19 changes: 17 additions & 2 deletions frontend/src/hooks/api/workspace.ts
Original file line number Diff line number Diff line change
@@ -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;
},
});
};
Loading

0 comments on commit 08c0eb5

Please sign in to comment.