Merge pull request #33 from Quest-Protocol/create_quest

Quest Steps

questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx

@@ -1,71 +1,110 @@
-// import StepOne from "./StepOne";
-// const { StepOne } = require("bos.questverse.near/newQuestComponents.StepOne");
-
 const { fetch_step_one_data } = VM.require(
-  "/*__@appAccount__*//widget/data.data_stepOne"
+  "bos.questverse.near/widget/data.data_stepOne"
+);
+const { fetch_step_two_data } = VM.require(
+  "bos.questverse.near/widget/data.data_stepTwo"
+);
+const { fetch_step_three_data } = VM.require(
+  "bos.questverse.near/widget/data.data_stepThree"
 );
 const stepOneData = fetch_step_one_data();
-// const {stepOneData, stepTwoData} = VM.require("bos.questverse.near/module/data_all"); I can do it like this
-// const { StepOne } = require("./bos.questverse.near/newQuestComponents.StepTwo");
+const stepTwoData = fetch_step_two_data();
+const stepThreeData = fetch_step_three_data();
+
+const totalSteps = 5;
 
 State.init({
   step: 1,
-  formData: {
-    //STEP 1
-    selectedCurrency: "",
-    selectedOption: "",
-    selectedFields: [],
-    //STEP 2
-    // audienceGroups: [],
 
-    //STEP 3
+  //STEP 1
+  inputs: {},
+  //STEP 2
+  masterList: [],
+  allowedList: [],
+  excludedList: [],
+
+  //STEP 3
+  rewardNetwork: "",
+  rewardToken: "",
+  tokensAllocated: 0,
+  rewardAmount: "",
 
+  //STEP 4
+  date_start: "",
+  date_end: "",
 
-    //
-  },
+  //step5
 });
 
-function handleNext(data) {
+const handleNext = (data) => {
   State.update({
-    formData: { ...state.formData, ...data },
+    // update here
     step: state.step + 1,
   });
-}
+};
 
-function handlePrevious() {
+const handlePrevious = () => {
   State.update({
-    step: state.step + 1,
+    step: state.step - 1,
   });
-}
+};
 
-function renderStep() {
-  switch (step) {
+const renderStep = () => {
+  switch (state.step) {
     case 1:
       return (
         <Widget
-          src={"/*__@appAccount__*//widget/components.createQuestSteps.stepOne"}
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepOne"}
           props={{
             data: stepOneData,
-            onNext: handleNext,
+            onNext: (data) => handleNext(data),
           }}
         />
       );
     case 2:
-      return <StepTwo onNext={handleNext} />;
-    // case 3:
-    //   return <StepThree data={} onNext={handleNext} onPrevious={handlePrevious} />;
-    default:
       return (
         <Widget
-          src={"/*__@appAccount__*//widget/components.createQuestSteps.stepOne"}
+          src={"bos.questverse.near/widget/newQuestComponents.stepTwo"}
           props={{
-            data: stepOneData,
-            onNext: handleNext,
+            data: stepTwoData,
+            onNext: (data) => handleNext(data),
           }}
         />
       );
+    case 3:
+      return (
+        <Widget
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepThree"}
+          props={{
+            data: stepThreeData,
+            onNext: (data) => handleNext(data),
+          }}
+        />
+      );
+
+    case 4:
+      return (
+        <Widget
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepFour"}
+          props={{
+            onNext: (data) => handleNext(data),
+          }}
+        />
+      );
+    case 5:
+      return (
+        <Widget
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepFive"}
+          props={{
+            data: state.formData,
+            onNext: (data) => handleNext(data),
+          }}
+        />
+      );
+    default:
+      return "Error In Form";
   }
-}
+};
 
 return (
   <div>
@@ -78,25 +117,10 @@ return (
       </button>
     )}
 
+    {state.step !== 5 && (
+      <button onClick={() => handleNext(state.formData)}>Next</button>
+    )}
+
     {state.step === totalSteps && <button type="submit">Submit</button>}
   </div>
 );
-
-//I wanted to pass in all JSON configs here
-
-
-
-/**
- *
- * JSON -> Functions w req
- *
- *
- */
-
-
-
-/**
- *
- *
- * CREATE QUEST
- */

questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx

@@ -0,0 +1,30 @@
+// State.init({
+//   isChecked: false,
+//   isSubmitEnabled: false,
+// });
+
+// const handleCheckboxChange = (event) => {
+//   console.log(event.target.checked);
+//   State.update({
+//     isChecked: event.target.checked,
+//     isSubmitEnabled: true,
+//   });
+// };
+
+// const handleSubmit = () => {
+//   if (state.isChecked) {
+//     console.log("Form submitted!");
+//   } else {
+//     console.log("Checkbox must be checked to submit.");
+//   }
+// };
+
+const FORM_DATA = props.data;
+console.log(FORM_DATA)
+return (
+  <div className="stepFive">
+    <h2>Review</h2>
+    <small>Please review following Information</small>
+
+  </div>
+);

questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx

@@ -0,0 +1,56 @@
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  return [year, month, day].join("-");
+}
+
+const TODAY = formatDate(new Date());
+const DAY_IN_SECONDS = 24 * 60 * 60 * 1000;
+const ONE_WEEK = DAY_IN_SECONDS * 7;
+
+const setStartDate = (e) => {
+  State.update({
+    date_start: e.target.value,
+  });
+};
+
+const setEndDate = (e) => {
+  State.update({
+    date_end: e.target.value,
+  });
+};
+
+State.init({
+  date_start: formatDate(new Date(Date.now() + DAY_IN_SECONDS)),
+  date_end: formatDate(new Date(Date.now() + ONE_WEEK)),
+});
+
+return (
+  <div className="stepFour">
+    <div>
+      <h2>Quest Duration</h2>
+      <small>Please choose your quest start and end date.</small>
+
+      <input
+        aria-label="Quest Start Date"
+        type="date"
+        value={state.date_start}
+        onChange={(e) => {
+          setStartDate(e);
+        }}
+        min={TODAY}
+      />
+
+      <input
+        aria-label="Quest End Date"
+        type="date"
+        value={state.date_end}
+        onChange={(e) => {
+          setEndDate(e);
+        }}
+        min={TODAY}
+      />
+    </div>
+  </div>
+);