Convert `dropdown_menu` state to Typescript (#25585)

pull/2426/head
Renaud Chaput 2023-09-22 18:18:46 +02:00 committed by GitHub
parent b93ffb74bb
commit 4b7bc1f07c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 69 additions and 41 deletions

View File

@ -1,10 +0,0 @@
export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';
export function openDropdownMenu(id, keyboard, scroll_key) {
return { type: DROPDOWN_MENU_OPEN, id, keyboard, scroll_key };
}
export function closeDropdownMenu(id) {
return { type: DROPDOWN_MENU_CLOSE, id };
}

View File

@ -0,0 +1,11 @@
import { createAction } from '@reduxjs/toolkit';
export const openDropdownMenu = createAction<{
id: string;
keyboard: boolean;
scrollKey: string;
}>('dropdownMenu/open');
export const closeDropdownMenu = createAction<{ id: string }>(
'dropdownMenu/close',
);

View File

@ -4,9 +4,14 @@ import { openDropdownMenu, closeDropdownMenu } from 'mastodon/actions/dropdown_m
import { fetchHistory } from 'mastodon/actions/history'; import { fetchHistory } from 'mastodon/actions/history';
import DropdownMenu from 'mastodon/components/dropdown_menu'; import DropdownMenu from 'mastodon/components/dropdown_menu';
/**
*
* @param {import('mastodon/store').RootState} state
* @param {*} props
*/
const mapStateToProps = (state, { statusId }) => ({ const mapStateToProps = (state, { statusId }) => ({
openDropdownId: state.getIn(['dropdown_menu', 'openId']), openDropdownId: state.dropdownMenu.openId,
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']), openedViaKeyboard: state.dropdownMenu.keyboard,
items: state.getIn(['history', statusId, 'items']), items: state.getIn(['history', statusId, 'items']),
loading: state.getIn(['history', statusId, 'loading']), loading: state.getIn(['history', statusId, 'loading']),
}); });
@ -15,11 +20,11 @@ const mapDispatchToProps = (dispatch, { statusId }) => ({
onOpen (id, onItemClick, keyboard) { onOpen (id, onItemClick, keyboard) {
dispatch(fetchHistory(statusId)); dispatch(fetchHistory(statusId));
dispatch(openDropdownMenu(id, keyboard)); dispatch(openDropdownMenu({ id, keyboard }));
}, },
onClose (id) { onClose (id) {
dispatch(closeDropdownMenu(id)); dispatch(closeDropdownMenu({ id }));
}, },
}); });

View File

@ -23,9 +23,14 @@ const MOUSE_IDLE_DELAY = 300;
const listenerOptions = supportsPassiveEvents ? { passive: true } : false; const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
/**
*
* @param {import('mastodon/store').RootState} state
* @param {*} props
*/
const mapStateToProps = (state, { scrollKey }) => { const mapStateToProps = (state, { scrollKey }) => {
return { return {
preventScroll: scrollKey === state.getIn(['dropdown_menu', 'scroll_key']), preventScroll: scrollKey === state.dropdownMenu.scrollKey,
}; };
}; };

View File

@ -7,9 +7,12 @@ import { openModal, closeModal } from '../actions/modal';
import DropdownMenu from '../components/dropdown_menu'; import DropdownMenu from '../components/dropdown_menu';
import { isUserTouching } from '../is_mobile'; import { isUserTouching } from '../is_mobile';
/**
* @param {import('mastodon/store').RootState} state
*/
const mapStateToProps = state => ({ const mapStateToProps = state => ({
openDropdownId: state.getIn(['dropdown_menu', 'openId']), openDropdownId: state.dropdownMenu.openId,
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']), openedViaKeyboard: state.dropdownMenu.keyboard,
}); });
const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
@ -25,7 +28,7 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
actions: items, actions: items,
onClick: onItemClick, onClick: onItemClick,
}, },
}) : openDropdownMenu(id, keyboard, scrollKey)); }) : openDropdownMenu({ id, keyboard, scrollKey }));
}, },
onClose(id) { onClose(id) {
@ -33,7 +36,7 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
modalType: 'ACTIONS', modalType: 'ACTIONS',
ignoreFocus: false, ignoreFocus: false,
})); }));
dispatch(closeDropdownMenu(id)); dispatch(closeDropdownMenu({ id }));
}, },
}); });

View File

@ -79,7 +79,7 @@ const mapStateToProps = state => ({
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0, hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0, hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4, canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null, dropdownMenuIsOpen: state.dropdownMenu.openId !== null,
firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION, firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
username: state.getIn(['accounts', me, 'username']), username: state.getIn(['accounts', me, 'username']),
}); });

View File

@ -1,19 +0,0 @@
import Immutable from 'immutable';
import {
DROPDOWN_MENU_OPEN,
DROPDOWN_MENU_CLOSE,
} from '../actions/dropdown_menu';
const initialState = Immutable.Map({ openId: null, keyboard: false, scroll_key: null });
export default function dropdownMenu(state = initialState, action) {
switch (action.type) {
case DROPDOWN_MENU_OPEN:
return state.merge({ openId: action.id, keyboard: action.keyboard, scroll_key: action.scroll_key });
case DROPDOWN_MENU_CLOSE:
return state.get('openId') === action.id ? state.set('openId', null).set('scroll_key', null) : state;
default:
return state;
}
}

View File

@ -0,0 +1,33 @@
import { createReducer } from '@reduxjs/toolkit';
import { closeDropdownMenu, openDropdownMenu } from '../actions/dropdown_menu';
interface DropdownMenuState {
openId: string | null;
keyboard: boolean;
scrollKey: string | null;
}
const initialState: DropdownMenuState = {
openId: null,
keyboard: false,
scrollKey: null,
};
export const dropdownMenuReducer = createReducer(initialState, (builder) => {
builder
.addCase(
openDropdownMenu,
(state, { payload: { id, keyboard, scrollKey } }) => {
state.openId = id;
state.keyboard = keyboard;
state.scrollKey = scrollKey;
},
)
.addCase(closeDropdownMenu, (state, { payload: { id } }) => {
if (state.openId === id) {
state.openId = null;
state.scrollKey = null;
}
});
});

View File

@ -15,7 +15,7 @@ import contexts from './contexts';
import conversations from './conversations'; import conversations from './conversations';
import custom_emojis from './custom_emojis'; import custom_emojis from './custom_emojis';
import domain_lists from './domain_lists'; import domain_lists from './domain_lists';
import dropdown_menu from './dropdown_menu'; import { dropdownMenuReducer } from './dropdown_menu';
import filters from './filters'; import filters from './filters';
import followed_tags from './followed_tags'; import followed_tags from './followed_tags';
import height_cache from './height_cache'; import height_cache from './height_cache';
@ -46,7 +46,7 @@ import user_lists from './user_lists';
const reducers = { const reducers = {
announcements, announcements,
dropdown_menu, dropdownMenu: dropdownMenuReducer,
timelines, timelines,
meta, meta,
alerts, alerts,