Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

fix: Moved Web Chat log item keys outside of component #7319

Merged
hatpick merged 2 commits into from
Apr 23, 2021
Merged

fix: Moved Web Chat log item keys outside of component #7319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f2366c
Moved Web Chat log item keys outside of component
tonyanziano Apr 23, 2021
5a60ebf
Merge branch 'main' into toanzian/react-key-fix
tonyanziano Apr 23, 2021
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
5 changes: 2 additions & 3 deletions ...es/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatActivityLogItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,21 @@ const renderActivityArrow = (activity) => {
};

type WebChatActivityLogItemProps = {
index: number;
item: ConversationActivityTrafficItem;
isSelected?: boolean;
onClickTraffic: (data: WebChatInspectionData) => void;
};

export const WebChatActivityLogItem: React.FC<WebChatActivityLogItemProps> = (props) => {
const { index, item, isSelected = false, onClickTraffic } = props;
const { item, isSelected = false, onClickTraffic } = props;
const { appLocale } = useRecoilValue(userSettingsState);

const onClick = useCallback(() => {
onClickTraffic({ item });
}, [item, onClickTraffic]);

return (
<span key={`webchat-activity-item-${index}`} css={[clickable, hoverItem(isSelected), logItem]} onClick={onClick}>
<span css={[clickable, hoverItem(isSelected), logItem]} onClick={onClick}>
{renderTimeStamp(item.timestamp, appLocale)}
{renderActivityArrow(item.activity)}
<span css={clickableSegment}>{item.activity.type || 'unknown'}</span>
Expand Down
6 changes: 3 additions & 3 deletions ...ackages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
case 'activity':
return (
<WebChatActivityLogItem
index={index}
key={`webchat-activity-item-${index}`}
isSelected={itemIsSelected(item, inspectionData)}
item={item}
onClickTraffic={onClickTraffic}
Expand All @@ -144,7 +144,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
case 'network':
return (
<WebChatNetworkLogItem
index={index}
key={`webchat-network-item-${index}`}
isSelected={itemIsSelected(item, inspectionData)}
item={item}
onClickTraffic={onClickTraffic}
Expand All @@ -154,7 +154,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
case 'networkError':
return (
<WebChatNetworkLogItem
index={index}
key={`webchat-network-item-${index}`}
isSelected={itemIsSelected(item, inspectionData)}
item={item}
onClickTraffic={onClickTraffic}
Expand Down
5 changes: 2 additions & 3 deletions ...ges/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatNetworkLogItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,13 @@ const redErrorText = css`
`;

type WebChatNetworkLogItemProps = {
index: number;
item: ConversationNetworkTrafficItem | ConversationNetworkErrorItem;
isSelected?: boolean;
onClickTraffic: (data: WebChatInspectionData) => void;
};

export const WebChatNetworkLogItem: React.FC<WebChatNetworkLogItemProps> = (props) => {
const { index, item, isSelected = false, onClickTraffic } = props;
const { item, isSelected = false, onClickTraffic } = props;
const { appLocale } = useRecoilValue(userSettingsState);
const onClickRequest = useCallback(() => {
onClickTraffic({ item, mode: 'request' });
Expand All @@ -49,7 +48,7 @@ export const WebChatNetworkLogItem: React.FC<WebChatNetworkLogItemProps> = (prop
) : null;

return (
<div key={`webchat-network-item-${index}`} css={[logItem, hoverItem(isSelected), networkItem]}>
<div css={[logItem, hoverItem(isSelected), networkItem]}>
<span>
{renderTimeStamp(item.timestamp, appLocale)}
<span css={[clickableSegment]} onClick={onClickRequest}>
Expand Down