From 4cb7a56f65cc1a351eb52ad90e7ca85b0b9a89a5 Mon Sep 17 00:00:00 2001 From: Philipinho <16838612+Philipinho@users.noreply.github.com> Date: Thu, 9 Nov 2023 16:52:34 +0000 Subject: [PATCH] feat: comments * create comment * reply to comment thread * edit comment * delete comment * resolve comment --- client/package.json | 23 +-- client/src/components/aside/aside.tsx | 11 ++ client/src/components/layouts/header.tsx | 6 +- .../src/components/layouts/shell.module.css | 2 + client/src/components/layouts/shell.tsx | 9 +- .../components/navbar/atoms/sidebar-atom.ts | 5 +- .../features/comment/atoms/comment-atom.ts | 17 +++ client/src/features/comment/comments.tsx | 34 +++++ .../comment/components/comment-actions.tsx | 16 +++ .../comment/components/comment-dialog.tsx | 99 +++++++++++++ .../comment/components/comment-editor.tsx | 52 +++++++ .../comment/components/comment-list-item.tsx | 111 ++++++++++++++ .../comment/components/comment-list.tsx | 96 +++++++++++++ .../comment/components/comment-menu.tsx | 45 ++++++ .../comment/components/comment.module.css | 45 ++++++ .../comment/components/resolve-comment.tsx | 49 +++++++ .../src/features/comment/hooks/use-comment.ts | 64 +++++++++ .../comment/services/comment-service.ts | 31 ++++ .../features/comment/types/comment.types.ts | 31 ++++ client/src/features/comment/utils.ts | 19 +++ .../src/features/editor/atoms/editorAtom.ts | 4 + .../components/bubble-menu/bubble-menu.tsx | 33 ++++- client/src/features/editor/editor.tsx | 103 +++++++------ client/src/features/editor/extensions.ts | 61 ++++++++ .../extensions/comment/comment-decoration.ts | 35 +++++ .../editor/extensions/comment/comment.ts | 136 ++++++++++++++++++ client/src/features/editor/styles/core.css | 4 + .../page/hooks/{usePage.ts => use-page.ts} | 9 -- .../page/tree/hooks/use-persistence.ts | 2 +- client/src/features/page/tree/page-tree.tsx | 2 +- client/src/lib/time-ago.ts | 5 + client/src/main.tsx | 3 + client/src/pages/page/page.tsx | 2 +- server/src/core/comment/comment.controller.ts | 75 ++++++++++ server/src/core/comment/comment.module.ts | 22 +++ .../src/core/comment/comment.service.spec.ts | 18 +++ server/src/core/comment/comment.service.ts | 122 ++++++++++++++++ server/src/core/comment/dto/comments.input.ts | 11 ++ .../core/comment/dto/create-comment.dto.ts | 21 +++ .../core/comment/dto/resolve-comment.dto.ts | 9 ++ .../core/comment/dto/update-comment.dto.ts | 9 ++ .../core/comment/entities/comment.entity.ts | 82 +++++++++++ .../repositories/comment.repository.ts | 14 ++ server/src/core/core.module.ts | 2 + server/src/core/page/entities/page.entity.ts | 6 +- .../core/page/repositories/page.repository.ts | 1 - server/src/core/page/services/page.service.ts | 7 + server/src/core/user/entities/user.entity.ts | 6 +- .../workspace/entities/workspace.entity.ts | 4 + 49 files changed, 1486 insertions(+), 87 deletions(-) create mode 100644 client/src/components/aside/aside.tsx create mode 100644 client/src/features/comment/atoms/comment-atom.ts create mode 100644 client/src/features/comment/comments.tsx create mode 100644 client/src/features/comment/components/comment-actions.tsx create mode 100644 client/src/features/comment/components/comment-dialog.tsx create mode 100644 client/src/features/comment/components/comment-editor.tsx create mode 100644 client/src/features/comment/components/comment-list-item.tsx create mode 100644 client/src/features/comment/components/comment-list.tsx create mode 100644 client/src/features/comment/components/comment-menu.tsx create mode 100644 client/src/features/comment/components/comment.module.css create mode 100644 client/src/features/comment/components/resolve-comment.tsx create mode 100644 client/src/features/comment/hooks/use-comment.ts create mode 100644 client/src/features/comment/services/comment-service.ts create mode 100644 client/src/features/comment/types/comment.types.ts create mode 100644 client/src/features/comment/utils.ts create mode 100644 client/src/features/editor/atoms/editorAtom.ts create mode 100644 client/src/features/editor/extensions.ts create mode 100644 client/src/features/editor/extensions/comment/comment-decoration.ts create mode 100644 client/src/features/editor/extensions/comment/comment.ts rename client/src/features/page/hooks/{usePage.ts => use-page.ts} (77%) create mode 100644 client/src/lib/time-ago.ts create mode 100644 server/src/core/comment/comment.controller.ts create mode 100644 server/src/core/comment/comment.module.ts create mode 100644 server/src/core/comment/comment.service.spec.ts create mode 100644 server/src/core/comment/comment.service.ts create mode 100644 server/src/core/comment/dto/comments.input.ts create mode 100644 server/src/core/comment/dto/create-comment.dto.ts create mode 100644 server/src/core/comment/dto/resolve-comment.dto.ts create mode 100644 server/src/core/comment/dto/update-comment.dto.ts create mode 100644 server/src/core/comment/entities/comment.entity.ts create mode 100644 server/src/core/comment/repositories/comment.repository.ts diff --git a/client/package.json b/client/package.json index f9b85864..35d4a927 100644 --- a/client/package.json +++ b/client/package.json @@ -10,13 +10,13 @@ }, "dependencies": { "@hocuspocus/provider": "^2.7.1", - "@mantine/core": "^7.1.5", - "@mantine/form": "^7.1.5", - "@mantine/hooks": "^7.1.5", - "@mantine/spotlight": "^7.1.5", - "@tabler/icons-react": "^2.39.0", + "@mantine/core": "^7.2.1", + "@mantine/form": "^7.2.1", + "@mantine/hooks": "^7.2.1", + "@mantine/modals": "^7.2.1", + "@mantine/spotlight": "^7.2.1", + "@tabler/icons-react": "^2.40.0", "@tanstack/react-query": "^4.36.1", - "@tanstack/react-table": "^8.10.7", "@tiptap/extension-code-block": "^2.1.12", "@tiptap/extension-collaboration": "^2.1.12", "@tiptap/extension-collaboration-cursor": "^2.1.12", @@ -42,20 +42,21 @@ "@tiptap/react": "^2.1.12", "@tiptap/starter-kit": "^2.1.12", "@tiptap/suggestion": "^2.1.12", - "axios": "^1.5.1", + "axios": "^1.6.0", "clsx": "^2.0.0", - "jotai": "^2.4.3", + "date-fns": "^2.30.0", + "jotai": "^2.5.1", "jotai-optics": "^0.3.1", "js-cookie": "^3.0.5", "react": "^18.2.0", "react-arborist": "^3.2.0", "react-dom": "^18.2.0", "react-hot-toast": "^2.4.1", - "react-router-dom": "^6.17.0", + "react-router-dom": "^6.18.0", "socket.io-client": "^4.7.2", "tippy.js": "^6.3.7", "uuid": "^9.0.1", - "y-indexeddb": "^9.0.11", + "y-indexeddb": "^9.0.12", "yjs": "^13.6.8", "zod": "^3.22.4" }, @@ -64,7 +65,7 @@ "@types/node": "20.8.6", "@types/react": "^18.2.29", "@types/react-dom": "^18.2.14", - "@types/uuid": "^9.0.6", + "@types/uuid": "^9.0.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", diff --git a/client/src/components/aside/aside.tsx b/client/src/components/aside/aside.tsx new file mode 100644 index 00000000..3c8bfe87 --- /dev/null +++ b/client/src/components/aside/aside.tsx @@ -0,0 +1,11 @@ +import React, { Suspense } from 'react'; + +const Comments = React.lazy(() => import('@/features/comment/comments')); + +export default function Aside() { + return ( + Loading comments...}> + + + ); +} diff --git a/client/src/components/layouts/header.tsx b/client/src/components/layouts/header.tsx index 00664a49..5b173db9 100644 --- a/client/src/components/layouts/header.tsx +++ b/client/src/components/layouts/header.tsx @@ -1,5 +1,4 @@ import { - Group, ActionIcon, Menu, Button, @@ -13,6 +12,7 @@ import { IconLock, IconShare, IconTrash, + IconMessage, } from '@tabler/icons-react'; import React from 'react'; @@ -23,6 +23,10 @@ export default function Header() { Share + + + + ); diff --git a/client/src/components/layouts/shell.module.css b/client/src/components/layouts/shell.module.css index d3b72f96..bd3fd558 100644 --- a/client/src/components/layouts/shell.module.css +++ b/client/src/components/layouts/shell.module.css @@ -7,6 +7,8 @@ } .aside { + background: var(--mantine-color-gray-light); + [data-layout='alt'] & { --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px)); --_section-height: var( diff --git a/client/src/components/layouts/shell.tsx b/client/src/components/layouts/shell.tsx index b5356f4b..2c689a4d 100644 --- a/client/src/components/layouts/shell.tsx +++ b/client/src/components/layouts/shell.tsx @@ -1,4 +1,4 @@ -import { desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom'; +import { desktopAsideAtom, desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom'; import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar'; import { Navbar } from '@/components/navbar/navbar'; import { ActionIcon, UnstyledButton, ActionIconGroup, AppShell, Avatar, Burger, Group } from '@mantine/core'; @@ -8,11 +8,13 @@ import { useAtom } from 'jotai'; import classes from './shell.module.css'; import Header from '@/components/layouts/header'; import Breadcrumb from '@/components/layouts/components/breadcrumb'; +import Aside from '@/components/aside/aside'; export default function Shell({ children }: { children: React.ReactNode }) { const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(); const [desktopOpened] = useAtom(desktopSidebarAtom); const toggleDesktop = useToggleSidebar(desktopSidebarAtom); + const [desktopAsideOpened] = useAtom(desktopAsideAtom); return ( - {children} - TODO +