fix: major fixes around lists and request

src/hooks/use-conversation-list.ts

@@ -8,7 +8,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { useUserSettings } from '@zextras/carbonio-shell-ui';
-import { search } from '../store/actions';
+import { search } from '../store/actions/search';
 import { selectConversationsArray, selectFolderSearchStatus } from '../store/conversations-slice';
 import { Conversation } from '../types/conversation';
 import { StateType } from '../types/state';

src/hooks/use-message-list.ts

@@ -8,9 +8,9 @@ import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { search } from '../store/actions';
+import { selectFolderMsgSearchStatus, selectMessagesArray } from '../store/messages-slice';
 import { MailMessage } from '../types/mail-message';
 import { StateType } from '../types/state';
-import { selectFolderMsgSearchStatus, selectMessagesArray } from '../store/messages-slice';
 
 type RouteParams = {
 	folderId: string;
@@ -38,7 +38,5 @@ export const useMessageList = (): Array<Partial<MailMessage>> => {
 		}
 	}, [dispatch, folderId, folderMsgStatus, isLoading]);
 
-	const currentList = useMemo(() => filter(messages, ['parent', folderId]), [folderId, messages]);
-
-	return currentList;
+	return useMemo(() => filter(messages, ['parent', folderId]), [folderId, messages]);
 };

src/store/actions/search.ts

@@ -48,7 +48,7 @@ export const search = createAsyncThunk<FetchConversationsReturn, FetchConversati
 			query: queryPart.join(' ')
 		})) as SearchResponse;
 
-		if (types === 'conversation' && result.c) {
+		if (types === 'conversation') {
 			const conversations = map(result?.c ?? [], (obj) =>
 				normalizeConversation(obj)
 			) as unknown as Array<Conversation>;
@@ -77,7 +77,7 @@ export const search = createAsyncThunk<FetchConversationsReturn, FetchConversati
 				types
 			};
 		}
-		if (types === 'message' && result.m) {
+		if (types === 'message') {
 			return {
 				messages: reduce(
 					result.m ?? [],

src/store/conversations-slice.ts

@@ -17,10 +17,10 @@ import {
 	convAction,
 	ConvActionParameters,
 	ConvActionResult,
-	search,
-	FetchConversationsReturn,
 	getConv,
-	searchConv
+	searchConv,
+	search,
+	FetchConversationsReturn
 } from './actions';
 import {
 	handleAddMessagesInConversationReducer,
@@ -50,8 +50,12 @@ function fetchConversationsFulfilled(
 	state.status = payload?.hasMore ? 'hasMore' : 'complete';
 }
 
-function fetchConversationsRejected(state: ConversationsStateType): void {
+function fetchConversationsRejected(state: ConversationsStateType, { meta }: { meta: any }): void {
 	state.status = 'error';
+	state.searchedInFolder = {
+		...state.searchedInFolder,
+		[meta.arg.folderId]: 'incomplete'
+	};
 }
 
 function searchConvFulfilled(state: ConversationsStateType, { payload, meta }: any): void {

src/store/messages-slice.ts

@@ -9,15 +9,12 @@
 
 import { createSlice } from '@reduxjs/toolkit';
 import produce from 'immer';
-import { cloneDeep, filter, forEach, map, merge, uniqBy, valuesIn } from 'lodash';
+import { cloneDeep, forEach, merge } from 'lodash';
 import { normalizeMailMessageFromSoap } from '../normalizations/normalize-message';
-import { Conversation, ConvMessage } from '../types/conversation';
-import { IncompleteMessage, MailMessage } from '../types/mail-message';
+import { Conversation } from '../types/conversation';
+import { MailMessage } from '../types/mail-message';
 import { MsgMap, MsgStateType, StateType } from '../types/state';
-import { showNotification } from '../views/notifications';
 import {
-	convAction,
-	ConvActionResult,
 	search,
 	FetchConversationsReturn,
 	getConv,
@@ -39,11 +36,9 @@ function getMsgFulfilled(
 	{ payload }: { payload: MailMessage }
 ): void {
 	status[payload.id] = 'complete';
-	console.log('getMsg Fulfilled Before: ', cloneDeep(messages?.[payload.id]));
 	if (payload?.id) {
 		merge(messages?.[payload.id] ?? {}, { ...payload, isComplete: true });
 	}
-	console.log('getMsg Fulfilled After: ', cloneDeep(messages?.[payload.id]));
 }
 
 function fetchConversationsFulfilled(
@@ -75,7 +70,7 @@ function searchConvFulfilled(
 ): void {
 	forEach(payload.messages, (m) => {
 		// eslint-disable-next-line no-param-reassign
-		messages[m.id] = { ...m, isComplete: true };
+		messages[m.id] = { ...m, isComplete: false };
 		status[m.id] = 'complete';
 	});
 }

src/views/app-view.jsx

@@ -5,8 +5,10 @@
  */
 import React, { Suspense, lazy, useState, useEffect, useMemo } from 'react';
 import { Redirect, Switch, Route, useRouteMatch } from 'react-router-dom';
-import { setAppContext, Spinner, useUserSettings } from '@zextras/carbonio-shell-ui';
+import { FOLDERS, setAppContext, Spinner, useUserSettings } from '@zextras/carbonio-shell-ui';
 import { Container } from '@zextras/carbonio-design-system';
+import { useSelector } from 'react-redux';
+import { selectCurrentFolder } from '../store/conversations-slice';
 
 const LazyFolderView = lazy(() =>
 	import(/* webpackChunkName: "folder-panel-view" */ './app/folder-panel')
@@ -20,10 +22,13 @@ const AppView = () => {
 	const { path } = useRouteMatch();
 	const [count, setCount] = useState(0);
 	const { zimbraPrefGroupMailBy } = useUserSettings().prefs;
-
+	const currentFolderId = useSelector(selectCurrentFolder);
 	const isMessageView = useMemo(
-		() => (zimbraPrefGroupMailBy ? zimbraPrefGroupMailBy === 'message' : undefined),
-		[zimbraPrefGroupMailBy]
+		() =>
+			zimbraPrefGroupMailBy
+				? zimbraPrefGroupMailBy === 'message' || currentFolderId === FOLDERS.DRAFTS
+				: undefined,
+		[currentFolderId, zimbraPrefGroupMailBy]
 	);
 
 	useEffect(() => {

src/views/app/folder-panel.jsx

@@ -5,7 +5,7 @@
  */
 /* eslint-disable no-nested-ternary */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { FOLDERS, useAppContext } from '@zextras/carbonio-shell-ui';

src/views/app/folder-panel/conversation-list.jsx

@@ -18,14 +18,19 @@ import styled from 'styled-components';
 import { find, map, reduce } from 'lodash';
 import { useAppContext } from '@zextras/carbonio-shell-ui';
 import { useTranslation } from 'react-i18next';
-import { selectConversationStatus, selectFolder } from '../../../store/conversations-slice';
+import {
+	selectConversationStatus,
+	selectFolder,
+	selectFolderSearchStatus
+} from '../../../store/conversations-slice';
 import ConversationListItem from './lists-item/conversation-list-item';
 import { search } from '../../../store/actions';
 import SelectPanelActions from '../../../ui-actions/select-panel-action';
 import { Breadcrumbs } from './breadcrumbs';
 import { useSelection } from '../../../hooks/useSelection';
 import { handleKeyboardShortcuts } from '../../../hooks/keyboard-shortcuts';
 import { useConversationListItems } from '../../../hooks/use-conversation-list';
+import ShimmerList from '../../search/shimmer-list';
 
 const DragImageContainer = styled.div`
 	position: absolute;
@@ -70,6 +75,7 @@ const ConversationList = () => {
 	const [t] = useTranslation();
 	const createSnackbar = useContext(SnackbarManagerContext);
 	const status = useSelector(selectConversationStatus);
+	const conversationListStatus = useSelector((store) => selectFolderSearchStatus(store, folderId));
 
 	const { selected, isSelecting, toggle, deselectAll } = useSelection(folderId, setCount);
 	const folder = useSelector((state) => selectFolder(state, folderId));
@@ -136,42 +142,48 @@ const ConversationList = () => {
 			) : (
 				<Breadcrumbs folderPath={folder?.path.substring(1)} itemsCount={folder?.itemsCount} />
 			)}
-			<Divider color="gray2" />
-			{conversations?.length === 0 ? (
-				<Container>
-					<Padding top="medium">
-						<Text
-							color="gray1"
-							overflow="break-word"
-							size="small"
-							style={{ whiteSpace: 'pre-line', textAlign: 'center', paddingTop: '32px' }}
-						>
-							{displayerTitle}
-						</Text>
-					</Padding>
-				</Container>
+			{conversationListStatus === 'complete' ? (
+				<>
+					<Divider color="gray2" />
+					{conversations?.length === 0 ? (
+						<Container>
+							<Padding top="medium">
+								<Text
+									color="gray1"
+									overflow="break-word"
+									size="small"
+									style={{ whiteSpace: 'pre-line', textAlign: 'center', paddingTop: '32px' }}
+								>
+									{displayerTitle}
+								</Text>
+							</Padding>
+						</Container>
+					) : (
+						<List
+							style={{ paddingBottom: '4px' }}
+							selected={selected}
+							active={itemId}
+							items={conversations}
+							itemProps={{
+								toggle,
+								// messages,
+								folderId,
+								setDraggedIds,
+								setIsDragging,
+								selectedItems: selected,
+								dragImageRef
+							}}
+							ItemComponent={ConversationListItem}
+							onListBottom={() => loadMore(conversations?.[(conversations?.length ?? 1) - 1]?.date)}
+						/>
+					)}
+					<DragImageContainer ref={dragImageRef}>
+						{isDragging && <DragItems conversations={conversations} draggedIds={draggedIds} />}
+					</DragImageContainer>
+				</>
 			) : (
-				<List
-					style={{ paddingBottom: '4px' }}
-					selected={selected}
-					active={itemId}
-					items={conversations}
-					itemProps={{
-						toggle,
-						// messages,
-						folderId,
-						setDraggedIds,
-						setIsDragging,
-						selectedItems: selected,
-						dragImageRef
-					}}
-					ItemComponent={ConversationListItem}
-					onListBottom={() => loadMore(conversations?.[(conversations?.length ?? 1) - 1]?.date)}
-				/>
+				<ShimmerList count={folder.itemsCount} />
 			)}
-			<DragImageContainer ref={dragImageRef}>
-				{isDragging && <DragItems conversations={conversations} draggedIds={draggedIds} />}
-			</DragImageContainer>
 		</>
 	);
 };

src/views/app/folder-panel/lists-item/conversation-list-item.jsx

@@ -50,7 +50,12 @@ function ConversationMessagesList({ conversationStatus, messages, folderId }) {
 		<>
 			{map(messages, (msg, index) => (
 				<React.Fragment key={msg.id}>
-					<MessageListItem item={msg} conversationId={msg.parent} folderId={folderId} />
+					<MessageListItem
+						item={msg}
+						conversationId={msg.parent}
+						folderId={folderId}
+						isConvChildren
+					/>
 				</React.Fragment>
 			))}
 		</>
@@ -160,7 +165,7 @@ export default function ConversationListItem({
 			e.preventDefault();
 			setOpen((currentlyOpen) => {
 				if (!currentlyOpen) {
-					dispatch(searchConv({ folderId, conversationId: item.id, fetch: '0' }));
+					dispatch(searchConv({ folderId, conversationId: item.id, fetch: 'all' }));
 				}
 				return !currentlyOpen;
 			});

src/views/app/folder-panel/lists-item/message-list-item.jsx

@@ -70,7 +70,8 @@ export default function MessageListItem({
 	setIsDragging,
 	selectedItems,
 	dragImageRef,
-	visible
+	visible,
+	isConvChildren
 }) {
 	const [t] = useTranslation();
 	const accounts = useUserAccounts();
@@ -127,10 +128,12 @@ export default function MessageListItem({
 		(e) => {
 			if (!e.isDefaultPrevented()) {
 				replaceHistory(`/folder/${folderId}/message/${item.id}`);
-				setMsgRead([item.id], false, t, dispatch).click();
+				if (!item.read) {
+					setMsgRead([item.id], false, t, dispatch).click();
+				}
 			}
 		},
-		[dispatch, folderId, t, item.id]
+		[folderId, item.id, item.read, t, dispatch]
 	);
 	const _onDoubleClick = useCallback(
 		(e) => {
@@ -163,7 +166,7 @@ export default function MessageListItem({
 			: { color: 'primary', weight: 'bold', badge: 'unread' };
 	}, [item.read]);
 
-	return draggedIds?.[item?.id] || visible || !isMessageView ? (
+	return draggedIds?.[item?.id] || visible || isConvChildren ? (
 		<Drag
 			type="message"
 			data={{ ...item, parentFolderId: folderId, selectedIDs: ids }}