From 2d6de9d159acfbdd0db0101adc4ca94a1ff40ddf Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Thu, 23 Nov 2023 16:37:04 +0530 Subject: [PATCH 1/2] refactor(web): case details overview file too big --- web/src/pages/Cases/CaseDetails/Overview.tsx | 203 ------------------ .../CaseDetails/Overview/DisputeBasicInfo.tsx | 66 ++++++ .../Cases/CaseDetails/Overview/Policies.tsx | 76 +++++++ .../Cases/CaseDetails/Overview/index.tsx | 87 ++++++++ 4 files changed, 229 insertions(+), 203 deletions(-) delete mode 100644 web/src/pages/Cases/CaseDetails/Overview.tsx create mode 100644 web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx create mode 100644 web/src/pages/Cases/CaseDetails/Overview/Policies.tsx create mode 100644 web/src/pages/Cases/CaseDetails/Overview/index.tsx diff --git a/web/src/pages/Cases/CaseDetails/Overview.tsx b/web/src/pages/Cases/CaseDetails/Overview.tsx deleted file mode 100644 index d3eb7f2e7..000000000 --- a/web/src/pages/Cases/CaseDetails/Overview.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { useParams } from "react-router-dom"; -import ReactMarkdown from "react-markdown"; -import { formatEther } from "viem"; -import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; -import { useDisputeTemplate } from "queries/useDisputeTemplate"; -import { useCourtPolicy } from "queries/useCourtPolicy"; -import { isUndefined } from "utils/index"; -import { Periods } from "consts/periods"; -import { IPFS_GATEWAY } from "consts/index"; -import PolicyIcon from "svgs/icons/policy.svg"; -import { StyledSkeleton } from "components/StyledSkeleton"; -import DisputeInfo from "components/DisputeCard/DisputeInfo"; -import Verdict from "components/Verdict/index"; -import { useVotingHistory } from "hooks/queries/useVotingHistory"; -import { getLocalRounds } from "utils/getLocalRounds"; - -const Container = styled.div` - width: 100%; - height: auto; - display: flex; - 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 QuestionAndDescription = styled.div` - display: flex; - flex-direction: column; - > * { - margin: 0px; - } -`; - -const VotingOptions = styled(QuestionAndDescription)` - display: flex; - flex-direction: column; - gap: 8px; -`; - -const Answers = styled.div` - display: flex; - flex-direction: column; - - span { - margin: 0px; - display: flex; - gap: 8px; - } -`; - -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}; - > p { - margin-top: 0; - margin-bottom: 16px; - ${landscapeStyle( - () => css` - margin-bottom: 0; - ` - )}; - } - - ${landscapeStyle( - () => css` - flex-direction: row; - justify-content: space-between; - ` - )}; -`; - -const StyledA = styled.a` - display: flex; - align-items: center; - gap: 4px; - > svg { - width: 16px; - fill: ${({ theme }) => theme.primaryBlue}; - } -`; - -const LinkContainer = styled.div` - display: flex; - gap: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); -`; - -const Divider = styled.hr` - display: flex; - border: none; - height: 1px; - background-color: ${({ theme }) => theme.stroke}; - margin: 0; -`; - -const StyledP = styled.p` - font-size: 14px; - color: ${({ theme }) => theme.primaryBlue}; -`; - -interface IOverview { - arbitrable?: `0x${string}`; - courtID?: string; - currentPeriodIndex: number; -} - -const Overview: React.FC = ({ arbitrable, courtID, currentPeriodIndex }) => { - const { id } = useParams(); - const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable); - const { data: disputeDetails } = useDisputeDetailsQuery(id); - const { data: courtPolicy } = useCourtPolicy(courtID); - const { data: votingHistory } = useVotingHistory(id); - const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute); - const courtName = courtPolicy?.name; - const court = disputeDetails?.dispute?.court; - const rewards = court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined; - const category = disputeTemplate ? disputeTemplate.category : undefined; - - return ( - <> - -

- {isUndefined(disputeTemplate) ? ( - - ) : ( - disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate" - )} -

- - {disputeTemplate?.question} - {disputeTemplate?.description} - - {disputeTemplate?.frontendUrl && ( - - Go to arbitrable - - )} - - {disputeTemplate &&

Voting Options

} - - {disputeTemplate?.answers?.map((answer: { title: string; description: string }, i: number) => ( - - Option {i + 1}: - - - ))} - - - - {currentPeriodIndex !== Periods.evidence && ( - <> - - - - )} - - - - - Make sure you read and understand the Policies - - {disputeTemplate?.policyURI && ( - - - Dispute Policy - - )} - {courtPolicy && ( - - - Court Policy - - )} - - - - ); -}; - -export default Overview; diff --git a/web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx b/web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx new file mode 100644 index 000000000..f4a0e983c --- /dev/null +++ b/web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import ReactMarkdown from "react-markdown"; +import styled from "styled-components"; +import { StyledSkeleton } from "components/StyledSkeleton"; +import { isUndefined } from "utils/index"; + +const QuestionAndDescription = styled.div` + display: flex; + flex-direction: column; + > * { + margin: 0px; + } +`; + +const VotingOptions = styled(QuestionAndDescription)` + display: flex; + flex-direction: column; + gap: 8px; +`; + +const Answers = styled.div` + display: flex; + flex-direction: column; + + span { + margin: 0px; + display: flex; + gap: 8px; + } +`; + +export const DisputeBasicInfo: React.FC = ({ disputeTemplate }) => { + return ( + <> +

+ {isUndefined(disputeTemplate) ? ( + + ) : ( + disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate" + )} +

+ + + {disputeTemplate?.question} + {disputeTemplate?.description} + + + {disputeTemplate?.frontendUrl && ( + + Go to arbitrable + + )} + + {disputeTemplate &&

Voting Options

} + + {disputeTemplate?.answers?.map((answer: { title: string; description: string }, i: number) => ( + + Option {i + 1}: + + + ))} + + + + ); +}; diff --git a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx new file mode 100644 index 000000000..940f17a79 --- /dev/null +++ b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx @@ -0,0 +1,76 @@ +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"; + +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}; + > p { + font-size: 14px; + margin-top: 0; + margin-bottom: 16px; + color: ${({ theme }) => theme.primaryBlue}; + ${landscapeStyle( + () => css` + margin-bottom: 0; + ` + )}; + } + + ${landscapeStyle( + () => css` + flex-direction: row; + justify-content: space-between; + ` + )}; +`; + +const StyledA = styled.a` + display: flex; + align-items: center; + gap: 4px; + > svg { + 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?: number; +} + +export const Policies: React.FC = ({ disputePolicyURI, courtId }) => { + return ( + +

Make sure you read and understand the Policies

+ + {disputePolicyURI && ( + + + Dispute Policy + + )} + {courtId && ( + + + Court Policy + + )} + + + ); +}; diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx new file mode 100644 index 000000000..8817fe2b2 --- /dev/null +++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import styled from "styled-components"; +import { useParams } from "react-router-dom"; +import { formatEther } from "viem"; +import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; +import { useDisputeTemplate } from "queries/useDisputeTemplate"; +import { useCourtPolicy } from "queries/useCourtPolicy"; +import { Periods } from "consts/periods"; + +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 { Policies } from "./Policies"; + +const Container = styled.div` + width: 100%; + height: auto; + display: flex; + 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` + display: flex; + border: none; + height: 1px; + background-color: ${({ theme }) => theme.stroke}; + margin: 0; +`; + +interface IOverview { + arbitrable?: `0x${string}`; + courtID?: string; + currentPeriodIndex: number; +} + +const Overview: React.FC = ({ arbitrable, courtID, currentPeriodIndex }) => { + const { id } = useParams(); + const { data: disputeTemplate } = useDisputeTemplate(id, arbitrable); + const { data: disputeDetails } = useDisputeDetailsQuery(id); + const { data: courtPolicy } = useCourtPolicy(courtID); + const { data: votingHistory } = useVotingHistory(id); + const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute); + const courtName = courtPolicy?.name; + const court = disputeDetails?.dispute?.court; + const rewards = court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined; + const category = disputeTemplate?.category ?? undefined; + + return ( + <> + + + + + {currentPeriodIndex !== Periods.evidence && ( + <> + + + + )} + + + + + + ); +}; + +export default Overview; From a0a583ce2f82712b60d7362acd9bdb9aa5dbfe3f Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 24 Nov 2023 17:16:34 +0530 Subject: [PATCH 2/2] refactor(web): resolve suggestions --- .../CaseDetails/Overview/DisputeBasicInfo.tsx | 66 ------------- .../CaseDetails/Overview/DisputeContext.tsx | 98 +++++++++++++++++++ .../Cases/CaseDetails/Overview/Policies.tsx | 45 +++++---- .../Cases/CaseDetails/Overview/index.tsx | 19 ++-- 4 files changed, 128 insertions(+), 100 deletions(-) delete mode 100644 web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx create mode 100644 web/src/pages/Cases/CaseDetails/Overview/DisputeContext.tsx diff --git a/web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx b/web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx deleted file mode 100644 index f4a0e983c..000000000 --- a/web/src/pages/Cases/CaseDetails/Overview/DisputeBasicInfo.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from "react"; -import ReactMarkdown from "react-markdown"; -import styled from "styled-components"; -import { StyledSkeleton } from "components/StyledSkeleton"; -import { isUndefined } from "utils/index"; - -const QuestionAndDescription = styled.div` - display: flex; - flex-direction: column; - > * { - margin: 0px; - } -`; - -const VotingOptions = styled(QuestionAndDescription)` - display: flex; - flex-direction: column; - gap: 8px; -`; - -const Answers = styled.div` - display: flex; - flex-direction: column; - - span { - margin: 0px; - display: flex; - gap: 8px; - } -`; - -export const DisputeBasicInfo: React.FC = ({ disputeTemplate }) => { - return ( - <> -

- {isUndefined(disputeTemplate) ? ( - - ) : ( - disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate" - )} -

- - - {disputeTemplate?.question} - {disputeTemplate?.description} - - - {disputeTemplate?.frontendUrl && ( - - Go to arbitrable - - )} - - {disputeTemplate &&

Voting Options

} - - {disputeTemplate?.answers?.map((answer: { title: string; description: string }, i: number) => ( - - Option {i + 1}: - - - ))} - - - - ); -}; diff --git a/web/src/pages/Cases/CaseDetails/Overview/DisputeContext.tsx b/web/src/pages/Cases/CaseDetails/Overview/DisputeContext.tsx new file mode 100644 index 000000000..f1367755c --- /dev/null +++ b/web/src/pages/Cases/CaseDetails/Overview/DisputeContext.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 = ({ disputeTemplate }) => { + return ( + <> + + {isUndefined(disputeTemplate) ? ( + + ) : ( + disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate" + )} + + + + {disputeTemplate?.question} + {disputeTemplate?.description} + + + {isUndefined(disputeTemplate?.frontendUrl) ? null : ( + + Go to arbitrable + + )} + + {isUndefined(disputeTemplate) ? null :

Voting Options

} + + {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => ( + + Option {i + 1}: + + + ))} + + + + ); +}; diff --git a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx b/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx index 940f17a79..f9b4c35ff 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/Policies.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/Policies.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 = ({ disputePolicyURI, courtId }) => { return ( -

Make sure you read and understand the Policies

+ Make sure you read and understand the Policies - {disputePolicyURI && ( + {isUndefined(disputePolicyURI) ? null : ( - + Dispute Policy )} - {courtId && ( + {isUndefined(courtId) ? null : ( - + Court Policy )} diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx index 8817fe2b2..4c5154335 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/index.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 = ({ 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 ( <> - + {currentPeriodIndex !== Periods.evidence && ( @@ -79,7 +72,7 @@ const Overview: React.FC = ({ arbitrable, courtID, currentPeriodIndex {...{ rewards, category }} /> - + ); };