fix(web): memoized FieldItems & fixed typo

Author: nikhilverma360

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

@@ -52,7 +52,7 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
     `};
 `;
 
-const StyledFeild = styled(Field)`
+const StyledField = styled(Field)`
   max-width: 100%;
   label {
     &.value {
@@ -86,12 +86,12 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <StyledFeild icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>
         {fieldItems.map((item) =>
-          item.display ? <StyledFeild key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
+          item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null
         )}
       </RestOfFieldsContainer>
       {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} /> : null}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { responsiveSize } from "styles/responsiveSize";
@@ -34,24 +34,28 @@ const StyledField = styled(Field)<{ style?: string }>`
   ${({ style }) => style ?? ""}
 `;
 
-const truncateText = (text, limit) => {
-  if (text.length > limit) {
+const truncateText = (text: string, limit: number) => {
+  if (text && text.length > limit) {
     return text.substring(0, limit) + "...";
   }
   return text;
 };
 
 type IDisputeInfoList = { fieldItems: FieldItem[] } & IDisputeInfo;
 const DisputeInfoList: React.FC<IDisputeInfoList> = ({ fieldItems, showLabels, disputeID, round }) => {
+  const FieldItems = useMemo(
+    () =>
+      fieldItems.map((item) =>
+        item.display ? (
+          <StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList />
+        ) : null
+      ),
+    [fieldItems]
+  );
+
   return (
     <Container isLabel={showLabels}>
-      <RestOfFieldsContainer>
-        {fieldItems.map((item) =>
-          item.display ? (
-            <StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList />
-          ) : null
-        )}
-      </RestOfFieldsContainer>
+      <RestOfFieldsContainer>{FieldItems}</RestOfFieldsContainer>
       {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} isList /> : null}
     </Container>
   );