From 4737c04f18d18d32b3e8611a818d99d9cfbb0b65 Mon Sep 17 00:00:00 2001
From: DevDaniloFerrari <daniloferrari2000@hotmail.com>
Date: Mon, 29 Jan 2024 11:59:15 -0300
Subject: [PATCH 1/4] logic to move emojis

---
 .../components/EmojiPicker/EmojiPicker.tsx    | 17 +++-
 .../EmojiQuestionBlock/EmojiQuestionBlock.tsx | 82 ++++++++++++++-----
 .../createSurveyManager.ts                    | 25 ++++++
 3 files changed, 102 insertions(+), 22 deletions(-)

diff --git a/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
index 00c222e7..e6be7180 100644
--- a/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
@@ -6,6 +6,7 @@ import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
 import Picker from '@emoji-mart/react';
 import Emoji from 'features/surveys/components/Emoji/Emoji';
 import { EmojiObject } from 'features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiObject';
+import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
 interface EmojiPickerProps {
   index?: number;
@@ -24,6 +25,7 @@ interface EmojiPickerProps {
   ) => void;
   onEmoteRemove?: (idx: number, questionIndex: number) => void;
   questionIndex: number;
+  dragHandleProps?: DraggableProvidedDragHandleProps | null | undefined;
 }
 
 function EmojiPicker({
@@ -34,6 +36,7 @@ function EmojiPicker({
   onEmoteAdd,
   onEmoteRemove,
   questionIndex,
+  dragHandleProps,
 }: EmojiPickerProps) {
   const [displayPicker, setDisplayPicker] = useState(false);
 
@@ -55,11 +58,23 @@ function EmojiPicker({
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         {!addEmoji ? (
-          <Emoji size={28} shortcodes={pickedEmoji || ''} />
+          <div className=''>
+            <Emoji size={28} shortcodes={pickedEmoji || ''} />
+            <div
+              className="flex rounded-md border bg-zinc-50 p-3 shadow-sm transition hover:scale-95"
+              {...dragHandleProps}
+              style={{
+                height: '10px'
+              }}
+            >
+              move
+            </div>
+          </div>
         ) : (
           <PlusSmIcon className="w-[22px]" />
         )}
       </button>
+
       {onEmoteRemove && (
         <Button
           onClick={() => onEmoteRemove(index, questionIndex)}
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
index f2e1bc50..8e6757af 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
@@ -1,6 +1,8 @@
 import EmojiPicker from 'features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker';
 import { MAX_EMOJIS, MIN_EMOJIS } from 'shared/constants/emojisConfig';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import clsx from 'clsx';
 
 interface EmojiQuestionBlockProps {
   pack: string[];
@@ -11,8 +13,12 @@ export default function EmojiQuestionBlock({
   pack,
   questionIndex,
 }: EmojiQuestionBlockProps) {
-  const { handleAddingNewOption, handleOptionChange, handleOptionRemove } =
-    useSurveyCreatorContext();
+  const {
+    handleAddingNewOption,
+    handleOptionChange,
+    handleOptionRemove,
+    onDragEmojiEnd,
+  } = useSurveyCreatorContext();
 
   return (
     <div
@@ -24,25 +30,59 @@ export default function EmojiQuestionBlock({
         gridGap: '8px',
       }}
     >
-      {pack.map((emote, idx) => (
-        <EmojiPicker
-          key={emote}
-          index={idx}
-          pickedEmoji={emote}
-          questionIndex={questionIndex}
-          onEmotePick={handleOptionChange}
-          onEmoteRemove={
-            pack.length > MIN_EMOJIS ? handleOptionRemove : undefined
-          }
-        />
-      ))}
-      {pack.length < MAX_EMOJIS && (
-        <EmojiPicker
-          questionIndex={questionIndex}
-          addEmoji={true}
-          onEmoteAdd={handleAddingNewOption}
-        />
-      )}
+      <DragDropContext
+        onDragEnd={(result) => onDragEmojiEnd(result, questionIndex)}
+      >
+        <Droppable droppableId="droppable">
+          {(provided, snapshot) => (
+            <div
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+              className={clsx(snapshot.isDraggingOver && '')}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: '50px'
+              }}
+            >
+              {pack.map((emote, idx) => (
+                <Draggable key={emote} draggableId={emote} index={idx}>
+                  {(provided, snapshot) => (
+                    <div
+                      className={clsx('mb-3', snapshot.isDragging && '')}
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      style={provided.draggableProps.style}
+                    >
+                      <EmojiPicker
+                        key={emote}
+                        index={idx}
+                        pickedEmoji={emote}
+                        questionIndex={questionIndex}
+                        onEmotePick={handleOptionChange}
+                        onEmoteRemove={
+                          pack.length > MIN_EMOJIS
+                            ? handleOptionRemove
+                            : undefined
+                        }
+                        dragHandleProps={provided.dragHandleProps}
+                      />
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+            </div>
+          )}
+        </Droppable>
+
+        {pack.length < MAX_EMOJIS && (
+          <EmojiPicker
+            questionIndex={questionIndex}
+            addEmoji={true}
+            onEmoteAdd={handleAddingNewOption}
+          />
+        )}
+      </DragDropContext>
     </div>
   );
 }
diff --git a/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
index 96fedbed..41152c6e 100644
--- a/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
+++ b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
@@ -337,6 +337,30 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
     reorderQuestion(result.source.index, result.destination.index);
   };
 
+  const reorderEmoji = (
+    startIndex: number,
+    endIndex: number,
+    questionIndex: number
+  ) => {
+    const newOrderedEmojis = questions[questionIndex].options || [];
+
+    const [removed] = newOrderedEmojis.splice(startIndex, 1);
+    newOrderedEmojis.splice(endIndex, 0, removed);
+
+    const copyQuestions = questions;
+    copyQuestions[questionIndex].options = newOrderedEmojis;
+
+    setQuestions(copyQuestions);
+  };
+
+  const onDragEmojiEnd = (result: DropResult, questionIndex: number) => {
+    if (!result.destination) {
+      return;
+    }
+
+    reorderEmoji(result.source.index, result.destination.index, questionIndex);
+  };
+
   return {
     title,
     error,
@@ -361,6 +385,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
     confirmEditSurvey,
     discardChanges,
     onDragQuestionEnd,
+    onDragEmojiEnd,
   };
 };
 

From 42e61de40c7c1da36f50ba4d2e81c32023b921ba Mon Sep 17 00:00:00 2001
From: DevDaniloFerrari <daniloferrari2000@hotmail.com>
Date: Sat, 3 Feb 2024 16:15:01 -0300
Subject: [PATCH 2/4] adjust droppable styles

---
 .../components/EmojiPicker/EmojiPicker.tsx    | 22 +++++------
 .../EmojiQuestionBlock/EmojiQuestionBlock.tsx | 37 ++++++++-----------
 .../QuestionsSection/QuestionsSection.tsx     |  2 +-
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
index e6be7180..e01d749e 100644
--- a/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
@@ -58,23 +58,21 @@ function EmojiPicker({
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         {!addEmoji ? (
-          <div className=''>
-            <Emoji size={28} shortcodes={pickedEmoji || ''} />
-            <div
-              className="flex rounded-md border bg-zinc-50 p-3 shadow-sm transition hover:scale-95"
-              {...dragHandleProps}
-              style={{
-                height: '10px'
-              }}
-            >
-              move
-            </div>
-          </div>
+          <Emoji size={28} shortcodes={pickedEmoji || ''} />
         ) : (
           <PlusSmIcon className="w-[22px]" />
         )}
       </button>
 
+      {!addEmoji && (
+        <div
+          className="mt-1 w-14 cursor-pointer rounded-md border bg-zinc-50 shadow-sm hover:scale-95"
+          {...dragHandleProps}
+        >
+          m
+        </div>
+      )}
+
       {onEmoteRemove && (
         <Button
           onClick={() => onEmoteRemove(index, questionIndex)}
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
index 8e6757af..02a0ae76 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
@@ -22,31 +22,24 @@ export default function EmojiQuestionBlock({
 
   return (
     <div
-      className="mb-3 mt-1"
       style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, 58px)',
+        display: 'flex',
         justifyContent: 'space-between',
-        gridGap: '8px',
+        flexGrow: '1',
       }}
     >
       <DragDropContext
         onDragEnd={(result) => onDragEmojiEnd(result, questionIndex)}
       >
-        <Droppable droppableId="droppable">
+        <Droppable droppableId="droppable-emoji" direction="horizontal">
           {(provided, snapshot) => (
             <div
               {...provided.droppableProps}
               ref={provided.innerRef}
-              className={clsx(snapshot.isDraggingOver && '')}
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                gap: '50px'
-              }}
+              className={clsx('flex', snapshot.isDraggingOver && '')}
             >
-              {pack.map((emote, idx) => (
-                <Draggable key={emote} draggableId={emote} index={idx}>
+              {pack.map((emote, index) => (
+                <Draggable key={emote} draggableId={emote} index={index}>
                   {(provided, snapshot) => (
                     <div
                       className={clsx('mb-3', snapshot.isDragging && '')}
@@ -56,7 +49,7 @@ export default function EmojiQuestionBlock({
                     >
                       <EmojiPicker
                         key={emote}
-                        index={idx}
+                        index={index}
                         pickedEmoji={emote}
                         questionIndex={questionIndex}
                         onEmotePick={handleOptionChange}
@@ -71,18 +64,18 @@ export default function EmojiQuestionBlock({
                   )}
                 </Draggable>
               ))}
+              {provided.placeholder}
             </div>
           )}
         </Droppable>
-
-        {pack.length < MAX_EMOJIS && (
-          <EmojiPicker
-            questionIndex={questionIndex}
-            addEmoji={true}
-            onEmoteAdd={handleAddingNewOption}
-          />
-        )}
       </DragDropContext>
+      {pack.length < MAX_EMOJIS && (
+        <EmojiPicker
+          questionIndex={questionIndex}
+          addEmoji={true}
+          onEmoteAdd={handleAddingNewOption}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
index d91c5d53..aa87cb30 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
@@ -22,7 +22,7 @@ export default function QuestionsSection() {
 
       <DragDropContext onDragEnd={onDragQuestionEnd}>
         {isBrowser ? (
-          <Droppable droppableId="droppable">
+          <Droppable droppableId="droppable-question">
             {(provided, snapshot) => (
               <div
                 {...provided.droppableProps}

From a77f9446db26cb1f99d0d20c489700351ed5a506 Mon Sep 17 00:00:00 2001
From: DevDaniloFerrari <daniloferrari2000@hotmail.com>
Date: Sat, 3 Feb 2024 16:33:16 -0300
Subject: [PATCH 3/4] fix mr

---
 .../QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
index 02a0ae76..f9b8e1c8 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
@@ -42,7 +42,7 @@ export default function EmojiQuestionBlock({
                 <Draggable key={emote} draggableId={emote} index={index}>
                   {(provided, snapshot) => (
                     <div
-                      className={clsx('mb-3', snapshot.isDragging && '')}
+                      className={clsx('mb-3 mr-5', snapshot.isDragging && '')}
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       style={provided.draggableProps.style}

From 084ac2a094f9f1ebed80c309278340abbc1fcc56 Mon Sep 17 00:00:00 2001
From: DevDaniloFerrari <daniloferrari2000@hotmail.com>
Date: Sat, 3 Feb 2024 16:46:07 -0300
Subject: [PATCH 4/4] fix mobile style

---
 .../QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
index f9b8e1c8..59f7789f 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
@@ -36,7 +36,7 @@ export default function EmojiQuestionBlock({
             <div
               {...provided.droppableProps}
               ref={provided.innerRef}
-              className={clsx('flex', snapshot.isDraggingOver && '')}
+              className={clsx('flex flex-wrap', snapshot.isDraggingOver && '')}
             >
               {pack.map((emote, index) => (
                 <Draggable key={emote} draggableId={emote} index={index}>