feat(web): add-multiple-voting-options-support

Author: tractorss

web/src/context/NewDisputeContext.tsx

@@ -34,7 +34,6 @@ export interface IDisputeTemplate {
 interface IDisputeData extends IDisputeTemplate {
   courtId: string;
   numberOfJurors: number;
-  numberOfRulingOptions: number;
   arbitrationCost?: string;
 }
 
@@ -53,7 +52,6 @@ interface INewDisputeContext {
 const initialDisputeData: IDisputeData = {
   courtId: "1",
   numberOfJurors: 3,
-  numberOfRulingOptions: 2,
   title: "",
   description: "",
   question: "",
@@ -85,7 +83,6 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
   const [isSubmittingCase, setIsSubmittingCase] = useState<boolean>(false);
   const [isPolicyUploading, setIsPolicyUploading] = useState<boolean>(false);
 
-  //TODO: reset data on submit or maybe page leave?
   useEffect(() => {
     localStorage.setItem("disputeData", JSON.stringify(disputeData));
   }, [disputeData]);

web/src/pages/Resolver/NavigationButtons/NextButton.tsx

@@ -14,9 +14,7 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
 
   //checks if each answer is filled in
   const areVotingOptionsFilled =
-    disputeData.question !== "" &&
-    disputeData.answers.every((answer) => answer.title !== "") &&
-    disputeData.answers.length === disputeData.numberOfRulingOptions;
+    disputeData.question !== "" && disputeData.answers.every((answer) => answer.title !== "");
 
   const isButtonDisabled =
     (location.pathname.includes("/resolver/title") && !disputeData.title) ||

web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx

@@ -28,7 +28,7 @@ const SubmitDisputeButton: React.FC = () => {
       prepareArbitratorExtradata(disputeData.courtId, disputeData.numberOfJurors, 1), //TODO: decide which dispute kit to use
       JSON.stringify(disputeTemplate),
       "TODO: mappings",
-      BigInt(disputeData.numberOfRulingOptions),
+      BigInt(disputeTemplate.answers.length),
     ],
     value: BigInt(disputeData.arbitrationCost ?? 0),
   });

web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+import PlusMinusField from "components/PlusMinusField";
+import LabeledInput from "components/LabeledInput";
+import { Answer, useNewDisputeContext } from "context/NewDisputeContext";
+
+const OptionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 84vw;
+
+  ${landscapeStyle(
+    () => css`
+      width: ${responsiveSize(442, 700, 900)};
+    `
+  )}
+`;
+
+const StyledPlusMinusField = styled(PlusMinusField)`
+  align-self: start;
+  margin: 24px 0px;
+`;
+
+const OptionsFields: React.FC = () => {
+  const { disputeData, setDisputeData } = useNewDisputeContext();
+
+  const updateOptions = (value: number) => {
+    let defaultAnswer: Answer = { title: "" };
+    let answers = disputeData.answers;
+
+    if (value < answers?.length) return setDisputeData({ ...disputeData, answers: answers.splice(0, value) });
+    if (value > answers?.length) return setDisputeData({ ...disputeData, answers: [...answers, defaultAnswer] });
+  };
+
+  const handleOptionWrite = (event: React.ChangeEvent<HTMLInputElement>, key: number) => {
+    let answers = disputeData.answers;
+    answers[key] = { ...answers[key], [event.target.name]: event.target.value };
+    setDisputeData({ ...disputeData, answers });
+  };
+  return (
+    <>
+      <OptionsContainer>
+        {disputeData.answers.map((answer, index) => (
+          <LabeledInput
+            name="title"
+            label={`Voting Option ${index + 1}`}
+            placeholder="eg. Pay 150 DAI"
+            key={index}
+            value={answer.title ?? ""}
+            onChange={(event) => handleOptionWrite(event, index)}
+          />
+        ))}
+      </OptionsContainer>
+      <StyledPlusMinusField currentValue={disputeData.answers?.length ?? 2} updateValue={updateOptions} minValue={2} />
+    </>
+  );
+};
+
+export default OptionsFields;

web/src/pages/Resolver/Parameters/VotingOptions.tsx renamed to web/src/pages/Resolver/Parameters/VotingOptions/index.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import Header from "pages/Resolver/Header";
 import styled, { css } from "styled-components";
-import NavigationButtons from "../NavigationButtons";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 import { AlertMessage } from "@kleros/ui-components-library";
 import LabeledInput from "components/LabeledInput";
-import { Answer, useNewDisputeContext } from "context/NewDisputeContext";
+import { useNewDisputeContext } from "context/NewDisputeContext";
+import NavigationButtons from "../../NavigationButtons";
+import OptionsFields from "./OptionsFields";
 
 const Container = styled.div`
   display: flex;
@@ -18,45 +19,26 @@ const QuestionField = styled(LabeledInput)`
   margin-bottom: 58px;
 `;
 
-const OptionsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  width: 84vw;
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(442, 700, 900)};
-    `
-  )}
-`;
-
 const AlertMessageContainer = styled.div`
   width: 84vw;
   ${landscapeStyle(
     () => css`
       width: ${responsiveSize(442, 700, 900)};
     `
   )}
-  margin-top: 24px;
+  margin-top: 16px;
   > div {
     width: 100%;
   }
 `;
+
 const VotingOptions: React.FC = () => {
   const { disputeData, setDisputeData } = useNewDisputeContext();
 
   const handleQuestionWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
     setDisputeData({ ...disputeData, question: event.target.value });
   };
 
-  //TODO: add description too and implement multiple options
-  const handleOptionWrite = (event: React.ChangeEvent<HTMLInputElement>, key: number) => {
-    let answers: Answer[] = disputeData.answers;
-    answers[key].title = event.target.value;
-    setDisputeData({ ...disputeData, answers });
-  };
-
   return (
     <Container>
       <Header text="Voting options" />
@@ -68,24 +50,7 @@ const VotingOptions: React.FC = () => {
         value={disputeData.question}
         onChange={handleQuestionWrite}
       />
-      {/* TODO: Add multi-vote support */}
-      <OptionsContainer>
-        <LabeledInput
-          label="Voting Option 1"
-          placeholder="eg. Pay 250 DAI"
-          key={0}
-          value={disputeData.answers[0]?.title ?? ""}
-          onChange={(event) => handleOptionWrite(event, 0)}
-        />
-        <LabeledInput
-          label="Voting Option 2"
-          placeholder="eg. Pay 150 DAI"
-          key={1}
-          value={disputeData.answers[1]?.title ?? ""}
-          onChange={(event) => handleOptionWrite(event, 1)}
-        />
-      </OptionsContainer>
-
+      <OptionsFields />
       <AlertMessageContainer>
         <AlertMessage
           title="Add the question and options jurors will see when voting"

web/src/pages/Resolver/index.tsx

@@ -7,7 +7,7 @@ import ConnectWallet from "components/ConnectWallet";
 import Timeline from "./Timeline";
 import HeroImage from "components/HeroImage";
 import Title from "./Briefing/Title";
-import { landscapeStyle } from "~src/styles/landscapeStyle";
+import { landscapeStyle } from "styles/landscapeStyle";
 import Description from "./Briefing/Description";
 import Court from "./Parameters/Court";
 import Category from "./Parameters/Category";