Move dropdown menu to zustand

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/actions/dropdown-menu.ts

@@ -1,12 +0,0 @@
-const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
-const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';
-
-const openDropdownMenu = () => ({ type: DROPDOWN_MENU_OPEN });
-const closeDropdownMenu = () => ({ type: DROPDOWN_MENU_CLOSE });
-
-export {
-  DROPDOWN_MENU_OPEN,
-  DROPDOWN_MENU_CLOSE,
-  openDropdownMenu,
-  closeDropdownMenu,
-};

packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx

@@ -4,10 +4,8 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'pl-fe/actions/dropdown-menu';
-import { useAppDispatch } from 'pl-fe/hooks';
 import { userTouching } from 'pl-fe/is-mobile';
-import { useModalsStore } from 'pl-fe/stores';
+import { useDropdownMenuStore, useModalsStore } from 'pl-fe/stores';
 
 import { HStack, IconButton, Portal } from '../ui';
 
@@ -189,7 +187,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     title = 'Menu',
   } = props;
 
-  const dispatch = useAppDispatch();
+  const { openDropdownMenu, closeDropdownMenu } = useDropdownMenuStore();
   const { openModal, closeModal } = useModalsStore();
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -239,7 +237,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
         content: <DropdownMenuContent handleClose={handleClose} items={items} component={component} touchscreen />,
       });
     } else {
-      dispatch(openDropdownMenu());
+      openDropdownMenu();
       setIsOpen(true);
     }
 
@@ -259,16 +257,6 @@ const DropdownMenu = (props: IDropdownMenu) => {
     }
   };
 
-  const closeDropdownMenu = () => {
-    dispatch((dispatch, getState) => {
-      const isOpenRedux = getState().dropdown_menu.isOpen;
-
-      if (isOpenRedux) {
-        dispatch(closeDropdownMenuRedux());
-      }
-    });
-  };
-
   const handleKeyPress: React.EventHandler<React.KeyboardEvent<HTMLButtonElement>> = (event) => {
     switch (event.key) {
       case ' ':

packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx

@@ -4,10 +4,9 @@ import React, { Suspense } from 'react';
 import { toggleStatusReport } from 'pl-fe/actions/reports';
 import StatusContent from 'pl-fe/components/status-content';
 import { Stack, Toggle } from 'pl-fe/components/ui';
+import { MediaGallery, Video, Audio } from 'pl-fe/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
-import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
-
 interface IStatusCheckBox {
   id: string;
   disabled?: boolean;

packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx

@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeReportBlock, changeReportForward } from 'pl-fe/actions/reports';
 import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'pl-fe/components/ui';
-import StatusCheckBox from 'pl-fe/features/report/components/status-check-box';
+import StatusCheckBox from 'pl-fe/features/ui/components/modals/report-modal/components/status-check-box';
 import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks';
 import { getDomain } from 'pl-fe/utils/accounts';
 

packages/pl-fe/src/features/ui/index.tsx

@@ -137,6 +137,7 @@ import { WrappedRoute } from './util/react-router-helpers';
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import 'pl-fe/components/status';
+import { useDropdownMenuStore } from 'pl-fe/stores';
 
 interface ISwitchingColumnsArea {
   children: React.ReactNode;
@@ -351,7 +352,7 @@ const UI: React.FC<IUI> = ({ children }) => {
   const features = useFeatures();
   const vapidKey = useAppSelector(state => getVapidKey(state));
 
-  const dropdownMenuIsOpen = useAppSelector(state => state.dropdown_menu.isOpen);
+  const { isOpen: dropdownMenuIsOpen } = useDropdownMenuStore();
   const standalone = useAppSelector(isStandalone);
 
   const { isDragging } = useDraggedFiles(node);

packages/pl-fe/src/reducers/dropdown-menu.test.ts

@@ -1,9 +0,0 @@
-import reducer from './dropdown-menu';
-
-describe('dropdown_menu reducer', () => {
-  it('should return the initial state', () => {
-    expect(reducer(undefined, {} as any).toJS()).toEqual({
-      isOpen: false,
-    });
-  });
-});

packages/pl-fe/src/reducers/dropdown-menu.ts

@@ -1,24 +0,0 @@
-import { Record as ImmutableRecord } from 'immutable';
-
-import { DROPDOWN_MENU_OPEN, DROPDOWN_MENU_CLOSE } from '../actions/dropdown-menu';
-
-import type { AnyAction } from 'redux';
-
-const ReducerRecord = ImmutableRecord({
-  isOpen: false,
-});
-
-type State = ReturnType<typeof ReducerRecord>;
-
-const dropdownMenu = (state: State = ReducerRecord(), action: AnyAction) => {
-  switch (action.type) {
-    case DROPDOWN_MENU_OPEN:
-      return state.set('isOpen', true);
-    case DROPDOWN_MENU_CLOSE:
-      return state.set('isOpen', false);
-    default:
-      return state;
-  }
-};
-
-export { dropdownMenu as default };

packages/pl-fe/src/reducers/index.ts

@@ -18,7 +18,6 @@ import conversations from './conversations';
 import custom_emojis from './custom-emojis';
 import domain_lists from './domain-lists';
 import draft_statuses from './draft-statuses';
-import dropdown_menu from './dropdown-menu';
 import filters from './filters';
 import followed_tags from './followed-tags';
 import history from './history';
@@ -68,7 +67,6 @@ const reducers = {
   custom_emojis,
   domain_lists,
   draft_statuses,
-  dropdown_menu,
   entities,
   filters,
   followed_tags,

packages/pl-fe/src/reducers/reports.ts

@@ -17,14 +17,17 @@ import {
 import type { AnyAction } from 'redux';
 
 const NewReportRecord = ImmutableRecord({
-  isSubmitting: false,
   entityType: '' as ReportableEntities,
   account_id: null as string | null,
+
   status_ids: ImmutableSet<string>(),
   comment: '',
   forward: false,
-  block: false,
   rule_ids: ImmutableSet<string>(),
+
+  block: false,
+
+  isSubmitting: false,
 });
 
 const ReducerRecord = ImmutableRecord({

packages/pl-fe/src/stores/dropdown-menu.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+type State = {
+  isOpen: boolean;
+  openDropdownMenu: () => void;
+  closeDropdownMenu: () => void;
+}
+
+const useDropdownMenuStore = create<State>((set) => ({
+  isOpen: false,
+  openDropdownMenu: () => set({ isOpen: true }),
+  closeDropdownMenu: () => set({ isOpen: false }),
+}));
+
+export { useDropdownMenuStore };
+

packages/pl-fe/src/stores/index.ts

@@ -1 +1,2 @@
+export { useDropdownMenuStore } from './dropdown-menu';
 export { useModalsStore } from './modals';