Skip to content

Commit 28f26bd

Browse files
fix(web): memoized FieldItems & fixed typo
1 parent 3b4884d commit 28f26bd

File tree

2 files changed

+17
-13
lines changed

2 files changed

+17
-13
lines changed

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
5252
`};
5353
`;
5454

55-
const StyledFeild = styled(Field)`
55+
const StyledField = styled(Field)`
5656
max-width: 100%;
5757
label {
5858
&.value {
@@ -86,12 +86,12 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
8686
<Container>
8787
{court && courtId && isOverview && (
8888
<CourtBranchFieldContainer>
89-
<StyledFeild icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
89+
<StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
9090
</CourtBranchFieldContainer>
9191
)}
9292
<RestOfFieldsContainer {...{ isOverview }}>
9393
{fieldItems.map((item) =>
94-
item.display ? <StyledFeild key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
94+
item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
9595
)}
9696
</RestOfFieldsContainer>
9797
{showLabels ? <CardLabel disputeId={disputeID} round={round - 1} /> : null}

web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useMemo } from "react";
22
import styled from "styled-components";
33

44
import { responsiveSize } from "styles/responsiveSize";
@@ -34,24 +34,28 @@ const StyledField = styled(Field)<{ style?: string }>`
3434
${({ style }) => style ?? ""}
3535
`;
3636

37-
const truncateText = (text, limit) => {
38-
if (text.length > limit) {
37+
const truncateText = (text: string, limit: number) => {
38+
if (text && text.length > limit) {
3939
return text.substring(0, limit) + "...";
4040
}
4141
return text;
4242
};
4343

4444
type IDisputeInfoList = { fieldItems: FieldItem[] } & IDisputeInfo;
4545
const DisputeInfoList: React.FC<IDisputeInfoList> = ({ fieldItems, showLabels, disputeID, round }) => {
46+
const FieldItems = useMemo(
47+
() =>
48+
fieldItems.map((item) =>
49+
item.display ? (
50+
<StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList />
51+
) : null
52+
),
53+
[fieldItems]
54+
);
55+
4656
return (
4757
<Container isLabel={showLabels}>
48-
<RestOfFieldsContainer>
49-
{fieldItems.map((item) =>
50-
item.display ? (
51-
<StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList />
52-
) : null
53-
)}
54-
</RestOfFieldsContainer>
58+
<RestOfFieldsContainer>{FieldItems}</RestOfFieldsContainer>
5559
{showLabels ? <CardLabel disputeId={disputeID} round={round - 1} isList /> : null}
5660
</Container>
5761
);

0 commit comments

Comments
 (0)