Merge pull request #277 from NIAEFEUP/fix/reorder-options-not-working

fix: broken logic in setting and determining the current selected option
NIAEFEUP · Sep 2, 2024 · b937e67 · b937e67
2 parents bf4404c + 2595074
commit b937e67
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/src/components/planner/sidebar/OptionsController.tsx b/src/components/planner/sidebar/OptionsController.tsx
@@ -10,24 +10,29 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../
  * Each option can be selected by clicking on it
  */
 const OptionsController = () => {
-  const { multipleOptions, setMultipleOptions, selectedOption, setSelectedOption } = useContext(MultipleOptionsContext);
+  const { multipleOptions, selectedOption, setSelectedOption, setMultipleOptions } = useContext(MultipleOptionsContext);
 
   return (
     <ReactSortable
       className="m-y-2 flex flex-row justify-center gap-2 overflow-x-auto py-2 text-center w-full lg:justify-start"
       list={multipleOptions}
-      setList={setMultipleOptions}
+      setList={(newMultipleOptions) => {
+        const prevId = multipleOptions[selectedOption].id;
+        setMultipleOptions(newMultipleOptions);
+        if (newMultipleOptions[selectedOption].id !== prevId) {
+          setSelectedOption(newMultipleOptions.findIndex((currentOption) => currentOption.id === prevId));
+        }
+      }
+      }
       group="groupName"
       animation={200}
       delay={2}
       multiDrag
     >
       {multipleOptions.map((option: Option) => (
         <OptionButton
-          key={option.id}
+          key={multipleOptions.findIndex((currentOption) => currentOption.id === option.id)}
           option={option}
-          selectedOption={selectedOption}
-          setSelectedOption={setSelectedOption}
         />
       ))}
     </ReactSortable>
@@ -36,23 +41,25 @@ const OptionsController = () => {
 
 type Props = {
   option: Option
-  selectedOption: number
-  setSelectedOption: (id: number) => void
 }
 
-const OptionButton = ({ option, selectedOption, setSelectedOption }: Props) => {
+const OptionButton = ({ option }: Props) => {
+  const { multipleOptions, selectedOption, setSelectedOption } = useContext(MultipleOptionsContext);
+
   return (
     <TooltipProvider delayDuration={300}>
       <Tooltip>
         <TooltipTrigger
           onClick={() => {
-            setSelectedOption(option.id)
+            setSelectedOption(multipleOptions.findIndex((currentOption) => currentOption.id === option.id));
           }}
           className={`
             group relative box-border flex aspect-square h-10 w-15 cursor-pointer flex-col
             items-center justify-center rounded-md border-2 border-transparent p-2
             dark:shadow hover:dark:border-primary/50
-            ${selectedOption === option.id ? 'bg-primary/75 dark:bg-primary/50' : 'bg-lightish dark:bg-darkish'}
+            ${multipleOptions[selectedOption].id === option.id
+              ? 'bg-primary/75 dark:bg-primary/50'
+              : 'bg-lightish dark:bg-darkish'}
             `}
         >
           <div

diff --git a/src/components/planner/sidebar/SelectedOptionController.tsx b/src/components/planner/sidebar/SelectedOptionController.tsx
@@ -46,14 +46,10 @@ const SelectedOptionController = ({
     input.current.scrollLeft = 0
   }
 
-  const getOptionById = (id: number) => {
-    return multipleOptions.find((elem) => elem.id === id)
-  }
-
-  const [optionName, setOptionName] = useState(multipleOptions.find((elem) => elem.id === selectedOption).name ?? '');
+  const [optionName, setOptionName] = useState(multipleOptions[selectedOption].name ?? '');
 
   useEffect(() => {
-    setOptionName(multipleOptions.find((elem) => elem.id === selectedOption).name)
+    setOptionName(multipleOptions[selectedOption].name)
   }, [selectedOption, multipleOptions])
 
   const renameOptionName = (event) => {
@@ -62,7 +58,7 @@ const SelectedOptionController = ({
     event.target.value = newName
     setMultipleOptions((prevMultipleOptions) => {
       const updatedMultipleOptions = prevMultipleOptions.map((item) =>
-        item.id === selectedOption ? { ...item, name: newName } : item
+        item.id === multipleOptions[selectedOption].id ? { ...item, name: newName } : item
       )
       return updatedMultipleOptions;
     })
@@ -71,7 +67,7 @@ const SelectedOptionController = ({
   const changeOptionIcon = (newIcon) => {
     setMultipleOptions((prevMultipleOptions) => {
       const updatedMultipleOptions = prevMultipleOptions.map((item) =>
-        item.id === selectedOption ? { ...item, icon: newIcon } : item
+        item.id === multipleOptions[selectedOption].id ? { ...item, icon: newIcon } : item
       )
       return updatedMultipleOptions;
     })
@@ -83,7 +79,7 @@ const SelectedOptionController = ({
         <Popover open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>
           <PopoverTrigger className="aspect-square h-10 w-15 rounded-md p-1 px-2 text-xl bg-lightish dark:bg-darkish border border-slate-200 dark:border-slate-800">
             <img
-              src={getOptionById(selectedOption)?.icon}
+              src={multipleOptions[selectedOption]?.icon}
               alt={multipleOptions[selectedOption].name}
             />
           </PopoverTrigger>