diff --git a/packages/pl-fe/src/actions/dropdown-menu.ts b/packages/pl-fe/src/actions/dropdown-menu.ts deleted file mode 100644 index cad73f364..000000000 --- a/packages/pl-fe/src/actions/dropdown-menu.ts +++ /dev/null @@ -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, -}; diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx index 567d72b56..b4d5e1799 100644 --- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx +++ b/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(false); @@ -239,7 +237,7 @@ const DropdownMenu = (props: IDropdownMenu) => { content: , }); } 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> = (event) => { switch (event.key) { case ' ': diff --git a/packages/pl-fe/src/features/report/components/status-check-box.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx similarity index 96% rename from packages/pl-fe/src/features/report/components/status-check-box.tsx rename to packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx index 3c88333d2..bfdfa68a1 100644 --- a/packages/pl-fe/src/features/report/components/status-check-box.tsx +++ b/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; diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx index 72e4982bd..dcf0c86c6 100644 --- a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx +++ b/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'; diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 4799d25f4..a1893cf42 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/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 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 = ({ 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); diff --git a/packages/pl-fe/src/reducers/dropdown-menu.test.ts b/packages/pl-fe/src/reducers/dropdown-menu.test.ts deleted file mode 100644 index 0706edf20..000000000 --- a/packages/pl-fe/src/reducers/dropdown-menu.test.ts +++ /dev/null @@ -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, - }); - }); -}); diff --git a/packages/pl-fe/src/reducers/dropdown-menu.ts b/packages/pl-fe/src/reducers/dropdown-menu.ts deleted file mode 100644 index 17e80318c..000000000 --- a/packages/pl-fe/src/reducers/dropdown-menu.ts +++ /dev/null @@ -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; - -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 }; diff --git a/packages/pl-fe/src/reducers/index.ts b/packages/pl-fe/src/reducers/index.ts index 3a3b0e0e0..05b16be11 100644 --- a/packages/pl-fe/src/reducers/index.ts +++ b/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, diff --git a/packages/pl-fe/src/reducers/reports.ts b/packages/pl-fe/src/reducers/reports.ts index 5ec4212be..7c909e5f4 100644 --- a/packages/pl-fe/src/reducers/reports.ts +++ b/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(), comment: '', forward: false, - block: false, rule_ids: ImmutableSet(), + + block: false, + + isSubmitting: false, }); const ReducerRecord = ImmutableRecord({ diff --git a/packages/pl-fe/src/stores/dropdown-menu.ts b/packages/pl-fe/src/stores/dropdown-menu.ts new file mode 100644 index 000000000..bb55c6f78 --- /dev/null +++ b/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((set) => ({ + isOpen: false, + openDropdownMenu: () => set({ isOpen: true }), + closeDropdownMenu: () => set({ isOpen: false }), +})); + +export { useDropdownMenuStore }; + diff --git a/packages/pl-fe/src/stores/index.ts b/packages/pl-fe/src/stores/index.ts index 04def8f74..98096eb5e 100644 --- a/packages/pl-fe/src/stores/index.ts +++ b/packages/pl-fe/src/stores/index.ts @@ -1 +1,2 @@ +export { useDropdownMenuStore } from './dropdown-menu'; export { useModalsStore } from './modals';