Skip to content

Commit

Permalink
Merge pull request #389 from kleros/fix(archon)/code-smells
Browse files Browse the repository at this point in the history 
fix(web): some code smells
  • Loading branch information
@alcercu
alcercu authored Nov 10, 2023
2 parents 7b0cadf + 1a5bd16 commit 53655e9
Show file tree
Hide file tree
Showing 6 changed files with 227 additions and 175 deletions.
18 changes: 9 additions & 9 deletions src/bootstrap/dataloader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@ import { displaySubgraph } from "./subgraph";

const getURIProtocol = (uri) => {
const uriParts = uri.replace(":", "").split("/");
switch (uri.substr(0, 1)) {
case "/":
return uriParts[1];
default:
return uriParts[0];
}
return uri.startsWith("/") ? uriParts[1] : uriParts[0];
};

const getHttpUri = (uri) => {
Expand Down Expand Up @@ -169,13 +164,18 @@ const funcs = {
}
},
async loadPolicy(URI) {
URI = `https://ipfs.kleros.io${URI.startsWith("/ipfs/") ? URI : `/ipfs/${URI}`}`;
if (!URI) {
console.error("No URI provided");
return;
}
const prefix = URI.startsWith("/ipfs/") ? "" : "/ipfs/";
const policyURL = `https://ipfs.kleros.io${prefix}${URI}`;

try {
const res = await axios.get(URI);
const res = await axios.get(policyURL);

if (res.status !== 200)
throw new Error(`HTTP Error: Unable to fetch file at ${URI}. Returned status code ${res.status}`);
throw new Error(`HTTP Error: Unable to fetch file at ${policyURL}. Returned status code ${res.status}`);

return res.data;
} catch {
Expand Down
4 changes: 2 additions & 2 deletions src/components/case-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,12 +213,12 @@ const CaseCard = ({ ID, draws }) => {
title={
<>
<Scales style={{ marginRight: "5px" }} />
<StyledHeaderText>{metaEvidence && metaEvidence.category}</StyledHeaderText>
<StyledHeaderText>{metaEvidence?.category}</StyledHeaderText>
</>
}
>
<div>
<CaseTitleBox>{metaEvidence && metaEvidence.title}</CaseTitleBox>
<CaseTitleBox>{metaEvidence?.title}</CaseTitleBox>
<RewardBox>
<Row>
<IconCol md={8} xs={8}>
Expand Down
282 changes: 156 additions & 126 deletions src/components/case-details-card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,118 @@ const JustificationBox = ({ onChange, justification }) => {
return <StyledInputTextArea onChange={onChange} placeholder={placeholder} value={justification} />;
};

const getVotingStatus = (disputePeriod, votesData, hiddenVotes) => {
if (disputePeriod === "0") {
return "Waiting for evidence.";
} else if (disputePeriod === "1") {
return !votesData.committed
? "You did not commit your vote yet."
: "You committed your vote. You will be able to reveal your vote when the period ends.";
} else if (hiddenVotes) {
return votesData.committed
? "You did not reveal your vote yet."
: "You did not commit a vote in the previous period. You cannot vote anymore.";
} else {
return "You did not cast a vote.";
}
};

const VoteOptions = ({ metaEvidence, votesData, complexRuling, setComplexRuling, onVoteClick, disabledDate }) => {
const isSingleSelect = metaEvidence.rulingOptions.type === "single-select";
const isMultipleSelect = metaEvidence.rulingOptions.type === "multiple-select";
const isDateTime = metaEvidence.rulingOptions.type === "datetime";

let inputComponent;

if (isMultipleSelect) {
inputComponent = (
<div style={{ paddingTop: "1rem" }}>
<Checkbox.Group
disabled={!votesData.canVote}
name="ruling"
onChange={setComplexRuling}
options={metaEvidence.rulingOptions.titles?.slice(0, 255)}
value={complexRuling}
/>
</div>
);
} else if (isDateTime) {
inputComponent = (
<DatePicker
disabled={!votesData.canVote}
disabledDate={disabledDate}
onChange={setComplexRuling}
size="large"
showTime
value={complexRuling}
/>
);
} else if (isSingleSelect) {
inputComponent = metaEvidence.rulingOptions.titles?.slice(0, 2 ** 256 - 1).map((title, index) => (
<StyledButton
disabled={!votesData.canVote}
id={index + 1}
key={title}
onClick={onVoteClick}
size="large"
type="primary"
>
{title}
</StyledButton>
));
} else {
inputComponent = (
<InputNumber
disabled={!votesData.canVote}
max={Number(
realitioLibQuestionFormatter
.maxNumber({
decimals: metaEvidence.rulingOptions.precision,
type: metaEvidence.rulingOptions.type,
})
.minus(1)
)}
min={Number(
realitioLibQuestionFormatter.minNumber({
decimals: metaEvidence.rulingOptions.precision,
type: metaEvidence.rulingOptions.type,
})
)}
onChange={setComplexRuling}
precision={metaEvidence.rulingOptions.precision}
size="large"
value={complexRuling}
/>
);
}

return (
<StyledButtonsDiv>
{inputComponent}
{isSingleSelect ? null : (
<StyledButton disabled={!votesData.canVote || !complexRuling} onClick={onVoteClick} size="large" type="primary">
Submit
</StyledButton>
)}
</StyledButtonsDiv>
);
};

const RevealVoteButton = ({ onRevealClick, votesData, dispute }) => {
return (
<StyledButtonsDiv>
<StyledButton
onClick={onRevealClick}
size="large"
type="primary"
disabled={!votesData.canVote || dispute.period !== "2"}
>
Reveal Vote
</StyledButton>
</StyledButtonsDiv>
);
};

export default function CaseDetailsCard({ ID }) {
const { drizzle, useCacheCall, useCacheSend } = useDrizzle();
const drizzleState = useDrizzleState((drizzleState) => ({
Expand Down Expand Up @@ -220,11 +332,9 @@ export default function CaseDetailsCard({ ID }) {
let choice;
const typeSwitch =
id !== "0" &&
!Object.keys(
metaEvidence.rulingOptions && metaEvidence.rulingOptions.reserved ? metaEvidence.rulingOptions.reserved : {}
).includes(id) &&
metaEvidence.rulingOptions &&
metaEvidence.rulingOptions.type;
!Object.keys(metaEvidence.rulingOptions?.reserved ?? {}).includes(id) &&
metaEvidence.rulingOptions?.type;

switch (typeSwitch) {
case "multiple-select":
choice = metaEvidence.rulingOptions.titles
Expand Down Expand Up @@ -389,24 +499,8 @@ export default function CaseDetailsCard({ ID }) {
<SecondaryActionText>Waiting for the vote result.</SecondaryActionText>
) : null}
</>
) : dispute.period === "0" ? (
"Waiting for evidence."
) : dispute.period === "1" ? (
!votesData.committed ? (
"You did not commit your vote yet."
) : (
<small>
You committed your vote. You will be able to reveal your vote when the period ends.
</small>
)
) : subcourts[subcourts.length - 1].hiddenVotes ? (
votesData.committed ? (
"You did not reveal your vote yet."
) : (
"You did not commit a vote in the previous period. You cannot vote anymore."
)
) : (
"You did not cast a vote."
getVotingStatus(dispute.period, votesData, subcourts[subcourts.length - 1].hiddenVotes)
)}
</>
) : (
Expand Down Expand Up @@ -470,93 +564,16 @@ export default function CaseDetailsCard({ ID }) {
)}
{Number(dispute.period) < 3 && !votesData.voted && metaEvidence.rulingOptions ? (
votesData.committed && committedVote !== undefined ? (
<StyledButtonsDiv>
<StyledButton
onClick={onRevealClick}
size="large"
type="primary"
disabled={!votesData.canVote || dispute.period !== "2"}
>
Reveal Vote
</StyledButton>
</StyledButtonsDiv>
<RevealVoteButton onRevealClick={onRevealClick} votesData={votesData} dispute={dispute} />
) : (
<>
{metaEvidence.rulingOptions.type !== "single-select" && (
<StyledButtonsDiv>
{metaEvidence.rulingOptions.type === "multiple-select" ? (
<div style={{ paddingTop: "1rem" }}>
<Checkbox.Group
disabled={!votesData.canVote}
name="ruling"
onChange={setComplexRuling}
options={
metaEvidence.rulingOptions.titles && metaEvidence.rulingOptions.titles.slice(0, 255)
}
value={complexRuling}
/>
</div>
) : metaEvidence.rulingOptions.type === "datetime" ? (
<DatePicker
disabled={!votesData.canVote}
disabledDate={disabledDate}
onChange={setComplexRuling}
size="large"
showTime
value={complexRuling}
/>
) : (
<InputNumber
disabled={!votesData.canVote}
max={Number(
realitioLibQuestionFormatter
.maxNumber({
decimals: metaEvidence.rulingOptions.precision,
type: metaEvidence.rulingOptions.type,
})
.minus(1)
)}
min={Number(
realitioLibQuestionFormatter.minNumber({
decimals: metaEvidence.rulingOptions.precision,
type: metaEvidence.rulingOptions.type,
})
)}
onChange={setComplexRuling}
precision={metaEvidence.rulingOptions.precision}
size="large"
value={complexRuling}
/>
)}
</StyledButtonsDiv>
)}
<StyledButtonsDiv>
{metaEvidence.rulingOptions.type === "single-select" ? (
metaEvidence.rulingOptions.titles &&
metaEvidence.rulingOptions.titles.slice(0, 2 ** 256 - 1).map((t, i) => (
<StyledButton
disabled={!votesData.canVote}
id={i + 1}
key={t}
onClick={onVoteClick}
size="large"
type="primary"
>
{t}
</StyledButton>
))
) : (
<StyledButton
disabled={!votesData.canVote || !complexRuling}
onClick={onVoteClick}
size="large"
type="primary"
>
Submit
</StyledButton>
)}
</StyledButtonsDiv>
</>
<VoteOptions
metaEvidence={metaEvidence}
votesData={votesData}
complexRuling={complexRuling}
setComplexRuling={setComplexRuling}
onVoteClick={onVoteClick}
disabledDate={disabledDate}
/>
)
) : null}
</StyledActionsDiv>
Expand All @@ -575,23 +592,21 @@ export default function CaseDetailsCard({ ID }) {
) : null}
</div>

{metaEvidence.rulingOptions &&
metaEvidence.rulingOptions.reserved &&
Object.entries(metaEvidence.rulingOptions.reserved).map(([ruling, title]) => (
<div key={ruling} style={{ marginTop: "32px" }}>
{Number(dispute.period) < "3" && !votesData.voted ? (
<Button
disabled={!votesData.canVote}
ghost={votesData.canVote}
id={ruling}
onClick={onVoteClick}
size="large"
>
{title}
</Button>
) : null}
</div>
))}
{Object.entries(metaEvidence.rulingOptions?.reserved ?? {}).map(([ruling, title]) => (
<div key={ruling} style={{ marginTop: "32px" }}>
{Number(dispute.period) < "3" && !votesData.voted ? (
<Button
disabled={!votesData.canVote}
ghost={votesData.canVote}
id={ruling}
onClick={onVoteClick}
size="large"
>
{title}
</Button>
) : null}
</div>
))}
</StyledDiv>
</>
) : (
Expand All @@ -609,7 +624,7 @@ export default function CaseDetailsCard({ ID }) {
loading={!metaEvidence}
title={
<>
{metaEvidence && metaEvidence.title}
{metaEvidence?.title}
{subcourts && <StyledBreadcrumbs breadcrumbs={subcourts.map((s) => s.name)} />}
</>
}
Expand Down Expand Up @@ -770,6 +785,21 @@ CaseDetailsCard.propTypes = {
ID: PropTypes.string.isRequired,
};

VoteOptions.propTypes = {
disabledDate: PropTypes.func,
metaEvidence: PropTypes.object,
votesData: PropTypes.object,
onVoteClick: PropTypes.func,
setComplexRuling: PropTypes.func,
complexRuling: PropTypes.any,
};

RevealVoteButton.propTypes = {
dispute: PropTypes.object,
onRevealClick: PropTypes.func,
votesData: PropTypes.object,
};

JustificationBox.propTypes = {
onChange: PropTypes.func,
justification: PropTypes.string,
Expand Down
2 changes: 1 addition & 1 deletion src/components/case-round-history.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function CaseRoundHistory({ ID, dispute, ruling }) {
return justs.reduce(
(acc, j) => {
const vote = call("KlerosLiquid", "getVote", ID, i, j.voteID);
if (vote && vote.voted) acc[acc.length > vote.choice ? vote.choice : acc.length - 1].push(j.justification);
if (vote?.voted) acc[acc.length > vote.choice ? vote.choice : acc.length - 1].push(j.justification);
return acc;
},
[...new Array(2 + (metaEvidence.rulingOptions?.titles?.length || 0))].map(() => [])
Expand Down
Loading

0 comments on commit 53655e9

Please sign in to comment.