Convert dropdown_menu state to Typescript (#25585)
				
					
				
			This commit is contained in:
		
							parent
							
								
									b93ffb74bb
								
							
						
					
					
						commit
						4b7bc1f07c
					
				@ -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 };
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
							
								
								
									
										11
									
								
								app/javascript/mastodon/actions/dropdown_menu.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								app/javascript/mastodon/actions/dropdown_menu.ts
									
									
									
									
									
										Normal 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',
 | 
				
			||||||
 | 
					);
 | 
				
			||||||
@ -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 }));
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
				
			|||||||
@ -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,
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -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 }));
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -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']),
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
				
			|||||||
@ -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;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
							
								
								
									
										33
									
								
								app/javascript/mastodon/reducers/dropdown_menu.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										33
									
								
								app/javascript/mastodon/reducers/dropdown_menu.ts
									
									
									
									
									
										Normal 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;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
@ -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,
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user