Refator/sorts dropdown (#1568)

* WIP

* Fixed lint

* Ok for sorts

* Fixed on dropdown toggle

* Fix lint

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -15,31 +15,28 @@ import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/Drop
 type OwnProps = {
   buttonComponents: JSX.Element | JSX.Element[];
   dropdownComponents: JSX.Element | JSX.Element[];
-  dropdownKey: string;
+  dropdownId: string;
   hotkey?: {
     key: Keys;
     scope: string;
   };
   dropdownHotkeyScope?: HotkeyScope;
   dropdownPlacement?: Placement;
-  onDropdownToggle?: (isDropdownOpen: boolean) => void;
 };
 
 export function DropdownButton({
   buttonComponents,
   dropdownComponents,
-  dropdownKey,
+  dropdownId,
   hotkey,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
-  onDropdownToggle,
 }: OwnProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
     useDropdownButton({
-      key: dropdownKey,
-      onDropdownToggle,
+      dropdownId,
     });
 
   const { refs, floatingStyles } = useFloating({
@@ -63,7 +60,7 @@ export function DropdownButton({
   const [dropdownButtonCustomHotkeyScope, setDropdownButtonCustomHotkeyScope] =
     useRecoilScopedFamilyState(
       dropdownButtonCustomHotkeyScopeScopedFamilyState,
-      dropdownKey,
+      dropdownId,
       DropdownRecoilScopeContext,
     );
 

front/src/modules/ui/dropdown/hooks/useDropdownButton.ts

@@ -5,14 +5,7 @@ import { dropdownButtonCustomHotkeyScopeScopedFamilyState } from '../states/drop
 import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
 import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
 
-// TODO: have a more explicit name than key
-export function useDropdownButton({
-  key,
-  onDropdownToggle,
-}: {
-  key: string;
-  onDropdownToggle?: (isDropdownButtonOpen: boolean) => void;
-}) {
+export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -21,20 +14,19 @@ export function useDropdownButton({
   const [isDropdownButtonOpen, setIsDropdownButtonOpen] =
     useRecoilScopedFamilyState(
       isDropdownButtonOpenScopedFamilyState,
-      key,
+      dropdownId,
       DropdownRecoilScopeContext,
     );
 
   const [dropdownButtonCustomHotkeyScope] = useRecoilScopedFamilyState(
     dropdownButtonCustomHotkeyScopeScopedFamilyState,
-    key,
+    dropdownId,
     DropdownRecoilScopeContext,
   );
 
   function closeDropdownButton() {
     goBackToPreviousHotkeyScope();
     setIsDropdownButtonOpen(false);
-    onDropdownToggle?.(false);
   }
 
   function openDropdownButton() {
@@ -46,7 +38,6 @@ export function useDropdownButton({
         dropdownButtonCustomHotkeyScope.customScopes,
       );
     }
-    onDropdownToggle?.(true);
   }
 
   function toggleDropdownButton() {
@@ -55,7 +46,6 @@ export function useDropdownButton({
     } else {
       openDropdownButton();
     }
-    onDropdownToggle?.(isDropdownButtonOpen);
   }
 
   return {