Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DO NOT MERGE] Combination of 3 PR's #2724

Closed
wants to merge 31 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
a6577d8
CW-some-stream-disappear Optimized FeedItem component. FIxed conditio…
MeyerPV Aug 1, 2024
0e0bde0
CW-some-stream-disappear Fixed Render fewer hooks issue
MeyerPV Aug 5, 2024
c14a3be
CW-some-stream-disappear Added names to components for better debugging
MeyerPV Aug 6, 2024
b90ebbf
CW-some-stream-disappear Added commonId related logic for Feed
MeyerPV Aug 7, 2024
e0e046c
CW-mobile-performance Added memoization for ProjectFeedItem
MeyerPV Aug 8, 2024
795445b
CW-mobile-performance Added memoization for FeedCard
MeyerPV Aug 8, 2024
66c84cf
CW-mobile-performance Added useMemo for lastMessages and menuItems
MeyerPV Aug 8, 2024
5c9a860
CW-mobile-performance Added memo for CommonFeed
MeyerPV Aug 8, 2024
c6cbf9d
CW-mobile-performance Fix type issue
MeyerPV Aug 8, 2024
5e0d1c5
CW-mobile-performance Optimize FeedLayout
MeyerPV Aug 8, 2024
c38e291
CW-mobile-performance Added memo for TreeItemTrigger and useMenuItems
MeyerPV Aug 8, 2024
a5d19af
CW-mobile-performance Fix TreeItemTrigger component
MeyerPV Aug 9, 2024
fb6414d
CW-mobile-performance Optimize components
MeyerPV Aug 9, 2024
51142e5
CW-mobile-perfromance Remove unnecessary libraries
MeyerPV Aug 12, 2024
d7792d4
CW-mobile-performance Fix jest config
MeyerPV Aug 12, 2024
d9aa6e8
CW-mobile-performance Fix words func call
MeyerPV Aug 12, 2024
9fecc76
CW-mobile-performance Fix eslint
MeyerPV Aug 12, 2024
8b4d4af
CW-mobile-performance Added lodash-es types
MeyerPV Aug 12, 2024
dbcf4b6
Revert "CW-mobile-performance Added lodash-es types"
MeyerPV Aug 12, 2024
218e362
Revert "CW-mobile-performance Fix eslint"
MeyerPV Aug 12, 2024
5813f1b
Revert "CW-mobile-performance Fix words func call"
MeyerPV Aug 12, 2024
9d245d0
Revert "CW-mobile-performance Fix jest config"
MeyerPV Aug 12, 2024
2be85e8
Revert "CW-mobile-perfromance Remove unnecessary libraries"
MeyerPV Aug 12, 2024
cd759f1
CW-firebase-messaging-for-web Added push notification config for web
MeyerPV Aug 14, 2024
6b7537e
CW-firebase-messaging-for-web Update settings
MeyerPV Aug 15, 2024
92e2dfc
CW-firebase-messaging-for-web Updated config
MeyerPV Aug 15, 2024
a71b7ca
CW-firebase-messaging-for-web Fixed env issue for service worker
MeyerPV Aug 16, 2024
f18787b
Merge branch 'CW-mobile-performance' into CW-latest-PRs
MeyerPV Aug 16, 2024
6e5e07d
Merge branch 'CW-firebase-messaging-for-web' into CW-latest-PRs
MeyerPV Aug 16, 2024
63c89a7
Merge branch 'CW-some-stream-disappear' into CW-latest-PRs
MeyerPV Aug 16, 2024
de573f6
CW-latest-PRs Fix service worker name
MeyerPV Aug 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
CW-mobile-performance Added memoization for FeedCard
MeyerPV committed Aug 8, 2024
commit 795445be654785fa1870abfbf4e4d46b65fda2d0
141 changes: 91 additions & 50 deletions src/pages/common/components/FeedCard/FeedCard.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,8 @@ import React, {
forwardRef,
useImperativeHandle,
PropsWithChildren,
useCallback,
useMemo,
} from "react";
import { useCollapse } from "react-collapsed";
import classNames from "classnames";
@@ -106,11 +108,11 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
});
const containerRef = useRef<HTMLDivElement>(null);

const toggleExpanding = () => {
const toggleExpanding = useCallback(() => {
if (setExpandedFeedItemId) {
setExpandedFeedItemId(isExpanded ? null : feedItemId);
}
};
}, [setExpandedFeedItemId, isExpanded, feedItemId]);

const scrollToTargetTop = (
headerOffset: number,
@@ -140,7 +142,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
}
};

const scrollToTargetAdjusted = () => {
const scrollToTargetAdjusted = useCallback(() => {
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
@@ -192,7 +194,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
});
}
}, COLLAPSE_DURATION + EXTRA_WAITING_TIME_FOR_TIMEOUT);
};
}, [isTabletView]);

useEffect(() => {
if (isExpanded && containerRef?.current) {
@@ -203,63 +205,102 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
clearTimeout(scrollTimeoutRef.current);
scrollTimeoutRef.current = null;
}
}, [isExpanded]);
}, [isExpanded, scrollToTargetAdjusted]);

const handleClick = () => {
const handleClick = useCallback(() => {
onClick?.();

if (!isTabletView && isActive) {
toggleExpanding();
}
};
}, [onClick, isTabletView, isActive, toggleExpanding]);

const handleExpand: MouseEventHandler = (event) => {
event.stopPropagation();
toggleExpanding();
};
const handleExpand: MouseEventHandler = useCallback(
(event) => {
event.stopPropagation();
toggleExpanding();
},
[toggleExpanding],
);

useImperativeHandle(
ref,
() => ({
itemId: feedItemId,
scrollToItem: scrollToTargetAdjusted,
}),
[feedItemId, scrollToTargetAdjusted],
);

useImperativeHandle(ref, () => ({
itemId: feedItemId,
scrollToItem: scrollToTargetAdjusted,
}));
const feedItemBaseContent = useMemo(() => {
return renderFeedItemBaseContent?.({
lastActivity,
unreadMessages,
isMobileView: isTabletView,
isActive,
isExpanded,
canBeExpanded,
onClick: handleClick,
onExpand: handleExpand,
title,
lastMessage: !isLoading ? lastMessage : undefined,
menuItems,
commonName,
commonId,
image,
imageAlt,
isProject,
isPinned,
isFollowing,
type,
seenOnce,
seen,
ownerId,
discussionPredefinedType,
hasFiles,
hasImages,
hasUnseenMention,
notion,
originalCommonIdForLinking,
linkedCommonIds,
});
}, [
lastActivity,
unreadMessages,
isTabletView,
isActive,
isExpanded,
canBeExpanded,
handleClick,
handleExpand,
title,
lastMessage,
isLoading,
menuItems,
commonName,
commonId,
image,
imageAlt,
isProject,
isPinned,
isFollowing,
type,
seenOnce,
seen,
ownerId,
discussionPredefinedType,
hasFiles,
hasImages,
hasUnseenMention,
notion,
originalCommonIdForLinking,
linkedCommonIds,
renderFeedItemBaseContent,
]);

return (
<div ref={containerRef}>
{!isPreviewMode && (
<div {...getToggleProps()}>
{renderFeedItemBaseContent?.({
lastActivity,
unreadMessages,
isMobileView: isTabletView,
isActive,
isExpanded,
canBeExpanded,
onClick: handleClick,
onExpand: handleExpand,
title,
lastMessage: !isLoading ? lastMessage : undefined,
menuItems,
commonName,
commonId,
image,
imageAlt,
isProject,
isPinned,
isFollowing,
type,
seenOnce,
seen,
ownerId,
discussionPredefinedType,
hasFiles,
hasImages,
hasUnseenMention,
notion,
originalCommonIdForLinking,
linkedCommonIds,
})}
</div>
)}
{!isPreviewMode && <div {...getToggleProps()}>{feedItemBaseContent}</div>}
<div {...getCollapseProps()}>
<CommonCard
className={classNames(