From e0e5f7c43d1ef2a01ff0d244ffb8c5261b956766 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 22 Jan 2024 17:36:41 +0100
Subject: [PATCH] add emoji removal

---
 apps/client/src/components/emoji-picker.tsx   | 26 ++++++++++++++++---
 .../src/features/page/tree/page-tree.tsx      |  7 ++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/components/emoji-picker.tsx b/apps/client/src/components/emoji-picker.tsx
index e7bbef11..5011bc32 100644
--- a/apps/client/src/components/emoji-picker.tsx
+++ b/apps/client/src/components/emoji-picker.tsx
@@ -1,27 +1,34 @@
 import React, { ReactNode } from 'react';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { ActionIcon, Popover } from '@mantine/core';
+import { ActionIcon, Popover, Button, useMantineColorScheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
+  removeEmojiAction: () => void;
 }
 
-function EmojiPicker({ onEmojiSelect, icon }: EmojiPickerInterface) {
+function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInterface) {
   const [opened, handlers] = useDisclosure(false);
+  const { colorScheme } = useMantineColorScheme();
 
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
   };
 
+  const handleRemoveEmoji = () => {
+    removeEmojiAction();
+    handlers.close();
+  };
+
   return (
     <Popover
       opened={opened}
       onClose={handlers.close}
-      width={200}
+      width={332}
       position="bottom"
     >
       <Popover.Target>
@@ -30,7 +37,18 @@ function EmojiPicker({ onEmojiSelect, icon }: EmojiPickerInterface) {
         </ActionIcon>
       </Popover.Target>
       <Popover.Dropdown bg="000" style={{ border: "none" }}>
-        <Picker data={data} onEmojiSelect={handleEmojiSelect} />
+        <Picker data={data} onEmojiSelect={handleEmojiSelect}
+                perLine={8}
+                skinTonePosition='search'
+                theme={colorScheme}
+        />
+        <Button variant="default" color="gray"
+                size="xs"
+                style={{ position: 'absolute', zIndex: 2, bottom: '1rem', right: '1rem'}}
+                onClick={handleRemoveEmoji}>
+          Remove
+        </Button>
+
       </Popover.Dropdown>
     </Popover>
   );
diff --git a/apps/client/src/features/page/tree/page-tree.tsx b/apps/client/src/features/page/tree/page-tree.tsx
index 2713f9af..5d98a1e4 100644
--- a/apps/client/src/features/page/tree/page-tree.tsx
+++ b/apps/client/src/features/page/tree/page-tree.tsx
@@ -113,6 +113,11 @@ function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
     updatePageMutation.mutateAsync({ id: node.id, icon: emoji.native });
   };
 
+  const handleRemoveEmoji = () => {
+    handleUpdateNodeIcon(node.id, null);
+    updatePageMutation.mutateAsync({ id: node.id, icon: null });
+  };
+
   if (node.willReceiveDrop && node.isClosed) {
     setTimeout(() => {
       if (node.state.willReceiveDrop) node.open();
@@ -134,7 +139,7 @@ function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
             node.data.icon ? node.data.icon :
               <IconFileDescription size="18px"  />
 
-          }/>
+          } removeEmojiAction={handleRemoveEmoji}/>
         </div>
 
         <span className={classes.text}>