diff --git a/packages/pl-fe/src/actions/conversations.ts b/packages/pl-fe/src/actions/conversations.ts index b7b1b7c9e..d4e866a14 100644 --- a/packages/pl-fe/src/actions/conversations.ts +++ b/packages/pl-fe/src/actions/conversations.ts @@ -40,20 +40,20 @@ const markConversationRead = (conversationId: string) => (dispatch: AppDispatch, const expandConversations = (expand = true) => (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; const state = getState(); + if (state.conversations.isLoading) return; + + const hasMore = state.conversations.hasMore; + if (expand && !hasMore) return; dispatch(expandConversationsRequest()); - const isLoadingRecent = !!state.conversations.next; - - if (isLoadingRecent && !expand) return; - return (state.conversations.next?.() || getClient(state).timelines.getConversations()) .then(response => { dispatch(importEntities({ accounts: response.items.reduce((aggr: Array, item) => aggr.concat(item.accounts), []), statuses: response.items.map((item) => item.last_status), })); - dispatch(expandConversationsSuccess(response.items, response.next, isLoadingRecent)); + dispatch(expandConversationsSuccess(response.items, response.next, expand)); }) .catch(err => dispatch(expandConversationsFail(err))); }; diff --git a/packages/pl-fe/src/components/ui/input.tsx b/packages/pl-fe/src/components/ui/input.tsx index 97a81111a..6d3bb9d1e 100644 --- a/packages/pl-fe/src/components/ui/input.tsx +++ b/packages/pl-fe/src/components/ui/input.tsx @@ -17,7 +17,7 @@ const messages = defineMessages({ /** Possible theme names for an Input. */ type InputThemes = 'normal' | 'search' | 'transparent' -interface IInput extends Pick, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id' | 'lang'> { +interface IInput extends Pick, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'onMouseDown' | 'style' | 'id' | 'lang'> { /** Put the cursor into the input on mount. */ autoFocus?: boolean; /** The initial text in the input. */ diff --git a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx index 9ef86b1ea..13a115896 100644 --- a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx +++ b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx @@ -1,5 +1,5 @@ -import debounce from 'lodash/debounce'; -import React, { useRef } from 'react'; +import { debounce } from '@tanstack/react-pacer/debouncer'; +import React, { useCallback, useRef } from 'react'; import { FormattedMessage } from 'react-intl'; import { expandConversations } from 'pl-fe/actions/conversations'; @@ -18,7 +18,7 @@ const ConversationsList: React.FC = () => { const conversations = useAppSelector((state) => state.conversations.items); const isLoading = useAppSelector((state) => state.conversations.isLoading); - const hasMore = useAppSelector((state) => !!state.conversations.next); + const hasMore = useAppSelector((state) => state.conversations.hasMore); const getCurrentIndex = (id: string) => conversations.findIndex(x => x.id === id); @@ -32,9 +32,9 @@ const ConversationsList: React.FC = () => { selectChild(elementIndex, ref, document.getElementById('direct-list') || undefined, conversations.length); }; - const handleLoadOlder = debounce(() => { + const handleLoadOlder = useCallback(debounce(() => { if (hasMore) dispatch(expandConversations()); - }, 300, { leading: true }); + }, { wait: 300, leading: true }), [hasMore]); return ( = ({ index, va value={value.name} onChange={handleChange('name')} placeholder={index === 0 ? intl.formatMessage(messages.firstMetaFieldLabel) : intl.formatMessage(messages.metaFieldLabel)} + onFocus={(e) => { + const field: HTMLElement | null = e.target.closest('[draggable=true]'); + if (field) field.draggable = false; + }} + onBlur={(e) => { + const field: HTMLElement | null = e.target.closest('[draggable=false]'); + if (field) field.draggable = true; + }} /> = ({ index, va value={value.value} onChange={handleChange('value')} placeholder={intl.formatMessage(messages.metaFieldContent)} + onFocus={(e) => { + const field: HTMLElement | null = e.target.closest('[draggable=true]'); + if (field) field.draggable = false; + }} + onBlur={(e) => { + const field: HTMLElement | null = e.target.closest('[draggable=false]'); + if (field) field.draggable = true; + }} /> ); diff --git a/packages/pl-fe/src/reducers/conversations.ts b/packages/pl-fe/src/reducers/conversations.ts index 4d2aa7daf..5851206db 100644 --- a/packages/pl-fe/src/reducers/conversations.ts +++ b/packages/pl-fe/src/reducers/conversations.ts @@ -79,10 +79,7 @@ const expandNormalizedConversations = (state: State, conversations: Conversation }); } - if (!next && !isLoadingRecent) { - state.hasMore = false; - } - + state.hasMore = !next; state.next = next; state.isLoading = false; };