Merge branch 'Feat/Qaas-createtasks-chibueze' of github.com:AvailX/av…

…ail-wallet into feat/QaaS
AvailX · Jun 26, 2024 · af93804 · af93804
2 parents 544941a + c4613ce
commit af93804
Show file tree

Hide file tree

Showing 8 changed files with 575 additions and 430 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,41 +1,41 @@
-module.exports = {
-	env: {
-		browser: true,
-		es2021: true,
-	},
-	extends: [
-		'xo',
-		'plugin:react/recommended',
-	],
-	overrides: [
-		{
-			env: {
-				node: true,
-			},
-			files: [
-				'.eslintrc.{js,cjs}',
-			],
-			parserOptions: {
-				sourceType: 'script',
-			},
-		},
-		{
-			extends: [
-				'xo-typescript',
-			],
-			files: [
-				'*.ts',
-				'*.tsx',
-			],
-		},
-	],
-	parserOptions: {
-		ecmaVersion: 'latest',
-		sourceType: 'module',
-	},
-	plugins: [
-		'react',
-	],
-	rules: {
-	},
-};
+// module.exports = {
+// 	env: {
+// 		browser: true,
+// 		es2021: true,
+// 	},
+// 	extends: [
+// 		'xo',
+// 		'plugin:react/recommended',
+// 	],
+// 	overrides: [
+// 		{
+// 			env: {
+// 				node: true,
+// 			},
+// 			files: [
+// 				'.eslintrc.{js,cjs}',
+// 			],
+// 			parserOptions: {
+// 				sourceType: 'script',
+// 			},
+// 		},
+// 		{
+// 			extends: [
+// 				'xo-typescript',
+// 			],
+// 			files: [
+// 				'*.ts',
+// 				'*.tsx',
+// 			],
+// 		},
+// 	],
+// 	parserOptions: {
+// 		ecmaVersion: 'latest',
+// 		sourceType: 'module',
+// 	},
+// 	plugins: [
+// 		'react',
+// 	],
+// 	rules: {
+// 	},
+// };
diff --git a/src/components/quests/CreateQuestsTasks/RewardQuest.tsx b/src/components/quests/CreateQuestsTasks/RewardQuest.tsx
@@ -1,8 +1,36 @@
+/* eslint-disable @typescript-eslint/object-curly-spacing */
+/* eslint-disable arrow-body-style */
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable @typescript-eslint/quotes */
+
 import * as React from "react";
 import * as mui from "@mui/material";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import PickReward from "./RewardsQuests/PickReward";
 import SelectWinners from "./RewardsQuests/SelectWinners";
 
+const schema = yup.object().shape({
+  rewardType: yup.string().required("Reward type is required"),
+  winners: yup
+    .number()
+    .positive()
+    .integer()
+    .required("Number of winners is required"),
+  allocation: yup.string().required("Allocation method is required"),
+});
+
 const Rewards: React.FC = () => {
+  const methods = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  const onSubmit = (data: any) => {
+    console.log(data);
+    // handle form submission here
+  };
+
   return (
     <mui.Box
       sx={{

diff --git a/src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx b/src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx
@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as mui from "@mui/material";
+import { useFormContext } from "react-hook-form";
+import { useQuestContext } from "../../../../views-desktop/quests/CreateTask";
 
 const DescribeField: React.FC = () => {
+  const { register } = useFormContext();
+
   return (
     <mui.Box
       sx={{
@@ -11,7 +15,7 @@ const DescribeField: React.FC = () => {
         mb: "5%",
       }}
     >
-      <mui.Typography variant="h4" color={"white"} fontWeight={"bold"}>
+      <mui.Typography variant='h4' color={"white"} fontWeight={"bold"}>
         Description
       </mui.Typography>
       <mui.Box
@@ -23,31 +27,34 @@ const DescribeField: React.FC = () => {
           backgroundColor: "#2A2C2B",
           border: "none",
           borderRadius: "15px",
-          alignItems: "stretch", // Align items to stretch vertically
-          justifyContent: "flex-start", // Align content to start at the top
+          alignItems: "stretch",
+          justifyContent: "flex-start",
         }}
       >
         <mui.TextField
           fullWidth
-          multiline // Allow multiline input
-          rows={8} // Specify number of rows to show initially
-          label="Describe Your Quest Here"
-          variant="standard"
+          multiline
+          rows={8}
+          label='Describe Your Quest Here'
+          variant='standard'
+          {...register("describeQuest")}
+          // value={formField.describeQuest || ""}
+          // onChange={handleChange}
           InputProps={{
             sx: {
               ml: "10px",
               color: "#00FFAA",
               "& .MuiInput-underline:before": {
-                borderBottom: "none", // Remove default underline
+                borderBottom: "none",
               },
               "& .MuiInput-underline:hover:before": {
-                borderBottom: "none", // Remove underline on hover
+                borderBottom: "none",
               },
               "& .MuiInput-underline:after": {
-                borderBottom: "none", // Remove underline after interaction
+                borderBottom: "none",
               },
             },
-            disableUnderline: true, // Alternative way to disable underline
+            disableUnderline: true,
           }}
           InputLabelProps={{
             sx: {

diff --git a/src/components/quests/CreateQuestsTasks/StartQuest/TitleField.tsx b/src/components/quests/CreateQuestsTasks/StartQuest/TitleField.tsx
@@ -1,7 +1,16 @@
 import * as React from "react";
 import * as mui from "@mui/material";
+import { useFormContext } from "react-hook-form";
+import { useQuestContext } from "../../../../views-desktop/quests/CreateTask";
 
 const TitleField: React.FC = () => {
+  const { register } = useFormContext();
+  // const { formField, setFormField } = useQuestContext();
+
+  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   setFormField({ ...formField, taskTitle: e.target.value });
+  // };
+
   return (
     <mui.Box
       sx={{
@@ -11,7 +20,7 @@ const TitleField: React.FC = () => {
         mb: "5%",
       }}
     >
-      <mui.Typography variant="h4" color={"white"} fontWeight={"bold"}>
+      <mui.Typography variant='h4' color={"white"} fontWeight={"bold"}>
         Title
       </mui.Typography>
       <mui.Box
@@ -28,29 +37,31 @@ const TitleField: React.FC = () => {
         }}
       >
         <mui.TextField
-          fullWidth // Make TextField take full width of its container
-          label="Create a title"
-          variant="standard"
+          fullWidth
+          label='Create a title'
+          variant='standard'
+          {...register("taskTitle")}
+          // value={formField.taskTitle || ""}
+          // onChange={handleChange}
           InputProps={{
             sx: {
               ml: "10px",
-
               color: "#00FFAA",
               "& .MuiInput-underline:before": {
-                borderBottom: "none", // Remove default underline
+                borderBottom: "none",
               },
               "& .MuiInput-underline:hover:before": {
-                borderBottom: "none", // Remove underline on hover
+                borderBottom: "none",
               },
               "& .MuiInput-underline:after": {
-                borderBottom: "none", // Remove underline after interaction
+                borderBottom: "none",
               },
             },
-            disableUnderline: true, // Alternative way to disable underline
+            disableUnderline: true,
           }}
           InputLabelProps={{
             sx: {
-              color: "#00FFAA", // Change label text color
+              color: "#00FFAA",
               ml: "10px",
             },
           }}

diff --git a/src/components/quests/CreateQuestsTasks/StartQuests.tsx b/src/components/quests/CreateQuestsTasks/StartQuests.tsx
@@ -1,26 +1,83 @@
 import * as React from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 import * as mui from "@mui/material";
+import * as yup from "yup";
 import TitleField from "./StartQuest/TitleField";
 import DescribeField from "./StartQuest/DescribeField";
 import BannerDesktop from "./StartQuest/BannerDesktop";
 import BannerMobile from "./StartQuest/BannerMobile";
 import QuestDuration from "./StartQuest/QuestDuration";
+import {
+  ContextProvider,
+  useQuestContext,
+} from "../../../views-desktop/quests/CreateTask";
+
+const schema = yup.object().shape({
+  taskTitle: yup.string().required("Title is required"),
+  describeQuest: yup.string().required("Description is required"),
+});
 
 const StartQuests: React.FC = () => {
+  const { setFormField, formField } = useQuestContext();
+  const methods = useForm({
+    resolver: yupResolver(schema),
+  });
+  const {
+    handleSubmit,
+    formState: { errors },
+  } = methods;
+  const onSubmit = (data: any) => {
+    console.log(data);
+    setFormField({ ...formField, data });
+  };
+
+  const onTest = () => {
+    console.log("Form fffs", formField.data);
+  };
+
   return (
-    <mui.Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-      }}
-    >
-      <TitleField></TitleField>
-      <DescribeField></DescribeField>
-      <BannerDesktop></BannerDesktop>
-      <BannerMobile></BannerMobile>
-      <QuestDuration></QuestDuration>
-    </mui.Box>
+    <ContextProvider>
+      <FormProvider {...methods}>
+        <mui.Box
+          component='form'
+          onSubmit={handleSubmit(onSubmit)}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+          }}
+        >
+          <TitleField />
+          {errors.taskTitle && (
+            <mui.Typography color='error'>
+              {errors.taskTitle.message}
+            </mui.Typography>
+          )}
+          <DescribeField />
+          {errors.describeQuest && (
+            <mui.Typography color='error'>
+              {errors.describeQuest.message}
+            </mui.Typography>
+          )}
+          <BannerDesktop />
+          <BannerMobile />
+          <QuestDuration />
+          <mui.Button type='submit' variant='contained' color='primary'>
+            Submit
+          </mui.Button>
+          <mui.Button
+            onClick={() => {
+              onTest();
+            }}
+            variant='contained'
+            color='primary'
+          >
+            Test Submit
+          </mui.Button>
+        </mui.Box>
+      </FormProvider>
+    </ContextProvider>
   );
 };
 

diff --git a/src/components/quests/CreateQuestsTasks/TaskQuest.tsx b/src/components/quests/CreateQuestsTasks/TaskQuest.tsx
@@ -1,19 +1,32 @@
+/* eslint-disable @typescript-eslint/quotes */
+/* eslint-disable @typescript-eslint/indent */
 import * as React from "react";
 import * as mui from "@mui/material";
 import AddTasks from "./TaskQuests/AddTasks";
 
+import {
+  ContextProvider,
+  useQuestContext,
+} from "../../../views-desktop/quests/CreateTask";
+
 const TasksQuests: React.FC = () => {
+  const { formField, setFormField } = useQuestContext();
+  React.useEffect(() => {
+    console.log("Form fields", formField);
+  }, []);
   return (
-    <mui.Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        position: "relative",
-      }}
-    >
-      <AddTasks />
-    </mui.Box>
+    <ContextProvider>
+      <mui.Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        <AddTasks setFormField={setFormField} formField={formField} />
+      </mui.Box>
+    </ContextProvider>
   );
 };