Merge pull request #1340 from kleros/refactor(web)/case-details-overview

refactor(web): case details overview file too big

Author: alcercu

web/src/pages/Cases/CaseDetails/Overview.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

@@ -0,0 +1,79 @@
+import React from "react";
+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;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: calc(16px + (20 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875)
+    calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-top: 16px;
+  background-color: ${({ theme }) => theme.mediumBlue};
+
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+      justify-content: space-between;
+    `
+  )};
+`;
+
+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;
+`;
+
+const StyledPolicyIcon = styled(PolicyIcon)`
+  width: 16px;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+const LinkContainer = styled.div`
+  display: flex;
+  gap: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+interface IPolicies {
+  disputePolicyURI?: string;
+  courtId?: string;
+}
+
+export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId }) => {
+  return (
+    <ShadeArea>
+      <StyledP>Make sure you read and understand the Policies</StyledP>
+      <LinkContainer>
+        {isUndefined(disputePolicyURI) ? null : (
+          <StyledA href={`${IPFS_GATEWAY}${disputePolicyURI}`} target="_blank" rel="noreferrer">
+            <StyledPolicyIcon />
+            Dispute Policy
+          </StyledA>
+        )}
+        {isUndefined(courtId) ? null : (
+          <StyledA href={`#/courts/${courtId}/purpose?section=description`}>
+            <StyledPolicyIcon />
+            Court Policy
+          </StyledA>
+        )}
+      </LinkContainer>
+    </ShadeArea>
+  );
+};