page icon emoji picker

apps/client/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@mantine/core": "^7.2.2",
     "@mantine/form": "^7.2.2",
     "@mantine/hooks": "^7.2.2",
@@ -20,6 +22,7 @@
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
+    "emoji-mart": "^5.5.2",
     "jotai": "^2.5.1",
     "jotai-optics": "^0.3.1",
     "js-cookie": "^3.0.5",

apps/client/src/components/emoji-picker.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+import { ActionIcon, Popover } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+
+export interface EmojiPickerInterface {
+  onEmojiSelect: (emoji: any) => void;
+  icon: ReactNode;
+}
+
+function EmojiPicker({ onEmojiSelect, icon }: EmojiPickerInterface) {
+  const [opened, handlers] = useDisclosure(false);
+
+  const handleEmojiSelect = (emoji) => {
+    onEmojiSelect(emoji);
+    handlers.close();
+  };
+
+  return (
+    <Popover
+      opened={opened}
+      onClose={handlers.close}
+      width={200}
+      position="bottom"
+    >
+      <Popover.Target>
+        <ActionIcon color="gray" variant="transparent" onClick={handlers.toggle}>
+          {icon}
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown bg="000" style={{ border: "none" }}>
+        <Picker data={data} onEmojiSelect={handleEmojiSelect} />
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+
+export default EmojiPicker;

apps/client/src/features/page/queries/page-query.ts

@@ -1,25 +1,38 @@
-import { useMutation, useQuery, UseQueryResult, useQueryClient } from '@tanstack/react-query';
+import {
+  useMutation,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
 import {
   createPage,
   deletePage,
   getPageById,
+  getPages,
   getRecentChanges,
   updatePage,
-} from '@/features/page/services/page-service';
-import { IPage } from '@/features/page/types/page.types';
-import { notifications } from '@mantine/notifications';
+} from "@/features/page/services/page-service";
+import { IPage } from "@/features/page/types/page.types";
+import { notifications } from "@mantine/notifications";
 
-const RECENT_CHANGES_KEY = ['recentChanges'];
+const RECENT_CHANGES_KEY = ["recentChanges"];
 
 export function usePageQuery(pageId: string): UseQueryResult<IPage, Error> {
   return useQuery({
-    queryKey: ['pages', pageId],
+    queryKey: ["pages", pageId],
     queryFn: () => getPageById(pageId),
     enabled: !!pageId,
     staleTime: 5 * 60 * 1000,
   });
 }
 
+export function useGetPagesQuery(): UseQueryResult<IPage[], Error> {
+  return useQuery({
+    queryKey: ["pages"],
+    queryFn: () => getPages(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
 export function useRecentChangesQuery(): UseQueryResult<IPage[], Error> {
   return useQuery({
     queryKey: RECENT_CHANGES_KEY,
@@ -31,17 +44,14 @@ export function useRecentChangesQuery(): UseQueryResult<IPage[], Error> {
 export function useCreatePageMutation() {
   return useMutation<IPage, Error, Partial<IPage>>({
     mutationFn: (data) => createPage(data),
+    onSuccess: (data) => {},
   });
 }
 
 export function useUpdatePageMutation() {
-  const queryClient = useQueryClient();
-
   return useMutation<IPage, Error, Partial<IPage>>({
     mutationFn: (data) => updatePage(data),
-    onSuccess: (data) => {
-      queryClient.setQueryData(['pages', data.id], data);
-    },
+    onSuccess: (data) => {},
   });
 }
 
@@ -49,7 +59,7 @@ export function useDeletePageMutation() {
   return useMutation({
     mutationFn: (pageId: string) => deletePage(pageId),
     onSuccess: () => {
-      notifications.show({ message: 'Page deleted successfully' });
+      notifications.show({ message: "Page deleted successfully" });
     },
   });
 }

apps/client/src/features/page/tree/page-tree.tsx

@@ -23,24 +23,28 @@ import { FillFlexParent } from './components/fill-flex-parent';
 import { TreeNode } from './types';
 import { treeApiAtom } from './atoms/tree-api-atom';
 import { usePersistence } from '@/features/page/tree/hooks/use-persistence';
-import { getPages } from '@/features/page/services/page-service';
 import useWorkspacePageOrder from '@/features/page/tree/hooks/use-workspace-page-order';
 import { useNavigate, useParams } from 'react-router-dom';
-import { convertToTree } from '@/features/page/tree/utils';
+import { convertToTree, updateTreeNodeIcon } from '@/features/page/tree/utils';
+import { useGetPagesQuery, useUpdatePageMutation } from '@/features/page/queries/page-query';
+import EmojiPicker from '@/components/emoji-picker';
+import { treeDataAtom } from '@/features/page/tree/atoms/tree-data-atom';
 
 export default function PageTree() {
   const { data, setData, controllers } = usePersistence<TreeApi<TreeNode>>();
   const [tree, setTree] = useAtom<TreeApi<TreeNode>>(treeApiAtom);
   const { data: pageOrderData } = useWorkspacePageOrder();
+  const { data: pagesData, isLoading } = useGetPagesQuery();
   const rootElement = useRef<HTMLDivElement>();
   const { pageId } = useParams();
 
   const fetchAndSetTreeData = async () => {
     if (pageOrderData?.childrenIds) {
       try {
-        const pages = await getPages();
-        const treeData = convertToTree(pages, pageOrderData.childrenIds);
-        setData(treeData);
+        if (!isLoading) {
+          const treeData = convertToTree(pagesData, pageOrderData.childrenIds);
+          setData(treeData);
+        }
       } catch (err) {
         console.error('Error fetching tree data: ', err);
       }
@@ -49,7 +53,7 @@ export default function PageTree() {
 
   useEffect(() => {
     fetchAndSetTreeData();
-  }, [pageOrderData?.childrenIds]);
+  }, [pageOrderData?.childrenIds, isLoading]);
 
   useEffect(() => {
     setTimeout(() => {
@@ -87,11 +91,28 @@ export default function PageTree() {
 
 function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
   const navigate = useNavigate();
+  const updatePageMutation = useUpdatePageMutation();
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
 
   const handleClick = () => {
     navigate(`/p/${node.id}`);
   };
 
+  const handleUpdateNodeIcon = (nodeId, newIcon) => {
+    const updatedTreeData = updateTreeNodeIcon(treeData, nodeId, newIcon);
+    setTreeData(updatedTreeData);
+  };
+
+  const handleEmojiIconClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  const handleEmojiSelect = (emoji) => {
+    handleUpdateNodeIcon(node.id, emoji.native);
+    updatePageMutation.mutateAsync({ id: node.id, icon: emoji.native });
+  };
+
   if (node.willReceiveDrop && node.isClosed) {
     setTimeout(() => {
       if (node.state.willReceiveDrop) node.open();
@@ -108,7 +129,13 @@ function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
       >
         <PageArrow node={node} />
 
-        <IconFileDescription size="18px" style={{ marginRight: '4px' }} />
+        <div onClick={handleEmojiIconClick} style={{ marginRight: '4px' }}>
+          <EmojiPicker onEmojiSelect={handleEmojiSelect} icon={
+            node.data.icon ? node.data.icon :
+              <IconFileDescription size="18px"  />
+
+          }/>
+        </div>
 
         <span className={classes.text}>
           {node.isEditing ? (

apps/client/src/features/page/tree/utils/index.ts

@@ -60,3 +60,15 @@ export const updateTreeNodeName = (nodes: TreeNode[], nodeId: string, newName: s
     return node;
   });
 };
+
+export const updateTreeNodeIcon = (nodes: TreeNode[], nodeId: string, newIcon: string): TreeNode[] => {
+  return nodes.map(node => {
+    if (node.id === nodeId) {
+      return { ...node, icon: newIcon };
+    }
+    if (node.children && node.children.length > 0) {
+      return { ...node, children: updateTreeNodeIcon(node.children, nodeId, newIcon) };
+    }
+    return node;
+  });
+};