Emojis order 271

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);
 
@@ -60,6 +63,16 @@ function EmojiPicker({
           <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)}

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,31 +13,62 @@ export default function EmojiQuestionBlock({
   pack,
   questionIndex,
 }: EmojiQuestionBlockProps) {
-  const { handleAddingNewOption, handleOptionChange, handleOptionRemove } =
-    useSurveyCreatorContext();
+  const {
+    handleAddingNewOption,
+    handleOptionChange,
+    handleOptionRemove,
+    onDragEmojiEnd,
+  } = useSurveyCreatorContext();
 
   return (
     <div
-      className="mb-3 mt-1"
       style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, 58px)',
+        display: 'flex',
         justifyContent: 'space-between',
-        gridGap: '8px',
+        flexGrow: '1',
       }}
     >
-      {pack.map((emote, idx) => (
-        <EmojiPicker
-          key={emote}
-          index={idx}
-          pickedEmoji={emote}
-          questionIndex={questionIndex}
-          onEmotePick={handleOptionChange}
-          onEmoteRemove={
-            pack.length > MIN_EMOJIS ? handleOptionRemove : undefined
-          }
-        />
-      ))}
+      <DragDropContext
+        onDragEnd={(result) => onDragEmojiEnd(result, questionIndex)}
+      >
+        <Droppable droppableId="droppable-emoji" direction="horizontal">
+          {(provided, snapshot) => (
+            <div
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+              className={clsx('flex flex-wrap', snapshot.isDraggingOver && '')}
+            >
+              {pack.map((emote, index) => (
+                <Draggable key={emote} draggableId={emote} index={index}>
+                  {(provided, snapshot) => (
+                    <div
+                      className={clsx('mb-3 mr-5', snapshot.isDragging && '')}
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      style={provided.draggableProps.style}
+                    >
+                      <EmojiPicker
+                        key={emote}
+                        index={index}
+                        pickedEmoji={emote}
+                        questionIndex={questionIndex}
+                        onEmotePick={handleOptionChange}
+                        onEmoteRemove={
+                          pack.length > MIN_EMOJIS
+                            ? handleOptionRemove
+                            : undefined
+                        }
+                        dragHandleProps={provided.dragHandleProps}
+                      />
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
       {pack.length < MAX_EMOJIS && (
         <EmojiPicker
           questionIndex={questionIndex}

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}

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,
   };
 };