refactor(web): resolve suggestions

Author: tractorss

web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import ReactMarkdown from "components/ReactMarkdown";
+import styled from "styled-components";
+import { StyledSkeleton } from "components/StyledSkeleton";
+import { isUndefined } from "utils/index";
+
+const StyledH1 = styled.h1`
+  margin: 0;
+`;
+
+const QuestionAndDescription = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledReactMarkDown = styled(ReactMarkdown)`
+  margin: 0px;
+`;
+
+const VotingOptions = styled(QuestionAndDescription)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const AnswersContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Answer = styled.div`
+  margin: 0px;
+  display: flex;
+  gap: 8px;
+`;
+
+interface IAnswer {
+  id?: string;
+  title: string;
+  description?: string;
+  reserved?: boolean;
+}
+
+interface IDisputeTemplate {
+  answers: IAnswer[];
+  arbitrableAddress: string;
+  arbitrableChainID: string;
+  arbitratorAddress: string;
+  arbitratorChainID: string;
+  category?: string;
+  description: string;
+  frontendUrl?: string;
+  lang?: string;
+  policyURI?: string;
+  question: string;
+  specification?: string;
+  title: string;
+}
+
+interface IDisputeContext {
+  disputeTemplate: IDisputeTemplate;
+}
+
+export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) => {
+  return (
+    <>
+      <StyledH1>
+        {isUndefined(disputeTemplate) ? (
+          <StyledSkeleton />
+        ) : (
+          disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate"
+        )}
+      </StyledH1>
+
+      <QuestionAndDescription>
+        <StyledReactMarkDown>{disputeTemplate?.question}</StyledReactMarkDown>
+        <StyledReactMarkDown>{disputeTemplate?.description}</StyledReactMarkDown>
+      </QuestionAndDescription>
+
+      {isUndefined(disputeTemplate?.frontendUrl) ? null : (
+        <a href={disputeTemplate?.frontendUrl} target="_blank" rel="noreferrer">
+          Go to arbitrable
+        </a>
+      )}
+      <VotingOptions>
+        {isUndefined(disputeTemplate) ? null : <h3>Voting Options</h3>}
+        <AnswersContainer>
+          {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => (
+            <Answer key={i}>
+              <small>Option {i + 1}:</small>
+              <label>{answer.title}</label>
+            </Answer>
+          ))}
+        </AnswersContainer>
+      </VotingOptions>
+    </>
+  );
+};

web/src/pages/Cases/CaseDetails/Overview/DisputeContext.tsx

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { IPFS_GATEWAY } from "consts/index";
 import PolicyIcon from "svgs/icons/policy.svg";
+import { isUndefined } from "utils/index";
 
 const ShadeArea = styled.div`
   display: flex;
@@ -13,17 +14,6 @@ const ShadeArea = styled.div`
     calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   margin-top: 16px;
   background-color: ${({ theme }) => theme.mediumBlue};
-  > p {
-    font-size: 14px;
-    margin-top: 0;
-    margin-bottom: 16px;
-    color: ${({ theme }) => theme.primaryBlue};
-    ${landscapeStyle(
-      () => css`
-        margin-bottom: 0;
-      `
-    )};
-  }
 
   ${landscapeStyle(
     () => css`
@@ -33,14 +23,27 @@ const ShadeArea = styled.div`
   )};
 `;
 
+const StyledP = styled.p`
+  font-size: 14px;
+  margin-top: 0;
+  margin-bottom: 16px;
+  color: ${({ theme }) => theme.primaryBlue};
+  ${landscapeStyle(
+    () => css`
+      margin-bottom: 0;
+    `
+  )};
+`;
+
 const StyledA = styled.a`
   display: flex;
   align-items: center;
   gap: 4px;
-  > svg {
-    width: 16px;
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
+`;
+
+const StyledPolicyIcon = styled(PolicyIcon)`
+  width: 16px;
+  fill: ${({ theme }) => theme.primaryBlue};
 `;
 
 const LinkContainer = styled.div`
@@ -50,23 +53,23 @@ const LinkContainer = styled.div`
 
 interface IPolicies {
   disputePolicyURI?: string;
-  courtId?: number;
+  courtId?: string;
 }
 
 export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId }) => {
   return (
     <ShadeArea>
-      <p>Make sure you read and understand the Policies</p>
+      <StyledP>Make sure you read and understand the Policies</StyledP>
       <LinkContainer>
-        {disputePolicyURI && (
+        {isUndefined(disputePolicyURI) ? null : (
           <StyledA href={`${IPFS_GATEWAY}${disputePolicyURI}`} target="_blank" rel="noreferrer">
-            <PolicyIcon />
+            <StyledPolicyIcon />
             Dispute Policy
           </StyledA>
         )}
-        {courtId && (
+        {isUndefined(courtId) ? null : (
           <StyledA href={`#/courts/${courtId}/purpose?section=description`}>
-            <PolicyIcon />
+            <StyledPolicyIcon />
             Court Policy
           </StyledA>
         )}

web/src/pages/Cases/CaseDetails/Overview/Policies.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { formatEther } from "viem";
@@ -11,7 +11,7 @@ import DisputeInfo from "components/DisputeCard/DisputeInfo";
 import Verdict from "components/Verdict/index";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
 import { getLocalRounds } from "utils/getLocalRounds";
-import { DisputeBasicInfo } from "./DisputeBasicInfo";
+import { DisputeContext } from "./DisputeContext";
 import { Policies } from "./Policies";
 
 const Container = styled.div`
@@ -21,17 +21,10 @@ const Container = styled.div`
   flex-direction: column;
   gap: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-
-  > h1 {
-    margin: 0;
-  }
-
-  > hr {
-    width: 100%;
-  }
 `;
 
 const Divider = styled.hr`
+  width: 100%;
   display: flex;
   border: none;
   height: 1px;
@@ -54,13 +47,13 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const courtName = courtPolicy?.name;
   const court = disputeDetails?.dispute?.court;
-  const rewards = court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined;
+  const rewards = useMemo(() => (court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined), [court]);
   const category = disputeTemplate?.category ?? undefined;
 
   return (
     <>
       <Container>
-        <DisputeBasicInfo disputeTemplate={disputeTemplate} />
+        <DisputeContext disputeTemplate={disputeTemplate} />
         <Divider />
 
         {currentPeriodIndex !== Periods.evidence && (
@@ -79,7 +72,7 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
           {...{ rewards, category }}
         />
       </Container>
-      <Policies disputePolicyURI={disputeTemplate?.policyURI} courtId={courtPolicy && court?.id} />
+      <Policies disputePolicyURI={disputeTemplate?.policyURI} courtId={courtID} />
     </>
   );
 };