diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3b53150..6b5b48b 100644 --- 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 index 16e7e49..0484e60 100644 --- 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 ( { + const { register } = useFormContext(); + return ( { mb: "5%", }} > - + Description { 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", }} > { + const { register } = useFormContext(); + // const { formField, setFormField } = useQuestContext(); + + // const handleChange = (e: React.ChangeEvent) => { + // setFormField({ ...formField, taskTitle: e.target.value }); + // }; + return ( { mb: "5%", }} > - + Title { }} > { + 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 ( - - - - - - - + + + + + {errors.taskTitle && ( + + {errors.taskTitle.message} + + )} + + {errors.describeQuest && ( + + {errors.describeQuest.message} + + )} + + + + + Submit + + { + onTest(); + }} + variant='contained' + color='primary' + > + Test Submit + + + + ); }; diff --git a/src/components/quests/CreateQuestsTasks/TaskQuest.tsx b/src/components/quests/CreateQuestsTasks/TaskQuest.tsx index f8701b0..35cee64 100644 --- 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 ( - - - + + + + + ); }; diff --git a/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx b/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx index 8c90f11..02469fb 100644 --- a/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx +++ b/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx @@ -57,7 +57,7 @@ type DataObject = { dapp_url: string; }; -const AddTasks: React.FC = () => { +const AddTasks: React.FC = ({ setFormField, formField }: any) => { const { control, handleSubmit, @@ -112,301 +112,302 @@ const AddTasks: React.FC = () => { JSON.stringify(reorderKeys(data?.tasks as Partial[])) ); - // try { - // const time = new Date(); - // const response = await createQuest( - // JSON.stringify(data.tasks), - // ); - // console.log("Quest Created:", response); - // } catch (error) { - // console.error("Quest Creation Failed", error); - // } + setFormField({ task: { ...data?.tasks }, formField }); }; return ( - + + -
- - - Add Tasks - - + + + Add Tasks + + - - {fields.map((field, index) => ( -
- + {fields.map((field, index) => ( +
- - Tasks {index + 1} - - {index !== 0 && ( - { - remove(index); - }} - variant='outlined' + - Delete - - )} - - ( - - )} - /> - ( - - )} - /> - ( - - - Transaction - - + {index !== 0 && ( + { + remove(index); }} + variant='outlined' + > + Delete + + )} + + ( + + )} + /> + ( + + )} + /> + ( + - True - False - - - {errors.tasks?.[index]?.transaction - ? errors?.tasks?.[index]?.transaction?.message - : ""} - - - )} - /> + + Transaction + + + True + False + + + {errors.tasks?.[index]?.transaction + ? errors?.tasks?.[index]?.transaction?.message + : ""} + + + )} + /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> -
- ))} + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> +
+ ))} -
+
- { - append({ - title: "", - description: "", - transaction: "", - program_id: "", - function_id: "", - dapp_url: "", - points: 0, - }); - }} - > - Add new - - - Submit - + { + append({ + title: "", + description: "", + transaction: "", + program_id: "", + function_id: "", + dapp_url: "", + points: 0, + }); + }} + > + Add new + + + Submit + + - -
- + + + ); }; diff --git a/src/views-desktop/quests/CreateTask.tsx b/src/views-desktop/quests/CreateTask.tsx index aa2c23c..08ecb04 100644 --- a/src/views-desktop/quests/CreateTask.tsx +++ b/src/views-desktop/quests/CreateTask.tsx @@ -14,6 +14,32 @@ import RewardsQuests from "../../../src/components/quests/CreateQuestsTasks/Rewa import { AddQuestTasksProps, Campaign} from "../../../src/types/quests/quest_types"; import { useLocation } from "react-router-dom"; +type QuestContextType = { + formField: any; + setFormField: React.Dispatch>; +}; + +const QuestContext = React.createContext( + undefined +); +export const ContextProvider: React.FC<{ children: any }> = ({ children }) => { + const [formField, setFormField] = React.useState({}); + return ( + + {children} + + ); +}; + +export const useQuestContext = (): QuestContextType => { + const context = React.useContext(QuestContext); + if (context === undefined) { + throw new Error("useQuestContext must be used within a ContextProvider"); + } + + return context; +}; + const CreateTasks: React.FC = () => { const {campaign} = useLocation().state as AddQuestTasksProps; @@ -27,100 +53,102 @@ const CreateTasks: React.FC = () => { return ( - + - } - iconPosition="start" - label="Start" + handleChange(event, 0)} - /> - - } - iconPosition="start" - label="Task" - sx={{ - backgroundColor: tabValue === 1 ? "#238363" : "#0D3C2C", - color: "#00FFAA", - "&.Mui-selected": { + > + } + iconPosition='start' + label='Start' + sx={{ + backgroundColor: tabValue === 0 ? "#238363" : "#0D3C2C", color: "#00FFAA", - }, - flexGrow: 1, - padding: 1, - margin: 1, - borderRadius: 2, - minHeight: "auto", - }} - onClick={(event) => handleChange(event, 1)} - /> - - } - iconPosition="start" - label="Rewards" - sx={{ - backgroundColor: tabValue === 2 ? "#238363" : "#0D3C2C", - color: "#00FFAA", - "&.Mui-selected": { + "&.Mui-selected": { + color: "#00FFAA", + }, + flexGrow: 1, + padding: 1, + margin: 1, + borderRadius: 2, + minHeight: "auto", + }} + onClick={(event) => handleChange(event, 0)} + /> + + } + iconPosition='start' + label='Task' + sx={{ + backgroundColor: tabValue === 1 ? "#238363" : "#0D3C2C", color: "#00FFAA", - }, - flexGrow: 1, - padding: 1, - margin: 1, - borderRadius: 2, - minHeight: "auto", - minWidth: "auto", - }} - onClick={(event) => handleChange(event, 2)} - /> - + "&.Mui-selected": { + color: "#00FFAA", + }, + flexGrow: 1, + padding: 1, + margin: 1, + borderRadius: 2, + minHeight: "auto", + }} + onClick={(event) => handleChange(event, 1)} + /> + + } + iconPosition='start' + label='Rewards' + sx={{ + backgroundColor: tabValue === 2 ? "#238363" : "#0D3C2C", + color: "#00FFAA", + "&.Mui-selected": { + color: "#00FFAA", + }, + flexGrow: 1, + padding: 1, + margin: 1, + borderRadius: 2, + minHeight: "auto", + minWidth: "auto", + }} + onClick={(event) => handleChange(event, 2)} + /> + - - {tabValue === 0 && } - {tabValue === 1 && } - {tabValue === 2 && } + + {tabValue === 0 && } + {tabValue === 1 && } + {tabValue === 2 && } + - + ); };