pl-fe: idk why it works

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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<Account>, 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)));
 };

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<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id' | 'lang'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, '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. */

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 (
     <ScrollableList

packages/pl-fe/src/pages/settings/edit-profile.tsx

@@ -170,6 +170,14 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ 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;
+        }}
       />
       <Input
         type='text'
@@ -177,6 +185,14 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ 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;
+        }}
       />
     </HStack>
   );

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;
 };