diff --git a/src/components/quests/CreateQuests/CreateQuests.tsx b/src/components/quests/CreateQuests/CreateQuests.tsx index 1cd9312..be320a0 100644 --- a/src/components/quests/CreateQuests/CreateQuests.tsx +++ b/src/components/quests/CreateQuests/CreateQuests.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/padding-line-between-statements */ -import * as React from 'react'; -import * as mui from '@mui/material'; +import * as React from "react"; +import * as mui from "@mui/material"; // Components import Layout from "../../../views-desktop/reusable/layout"; @@ -14,345 +14,348 @@ import CreateQuestsCard from "./CreateQuestsCard"; // Types import { - type CampaignDetailPageProps, - campaign, - quests, - Campaign, + type CampaignDetailPageProps, + campaign, + quests, + Campaign, questsEmpty, -} from '../../../types/quests/quest_types'; +} from "../../../types/quests/quest_types"; // Typography -import { BodyText500 } from '../../../components/typography/typography'; +import { BodyText500 } from "../../../components/typography/typography"; // Hooks -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from "react-router-dom"; // Alerts -import { SuccessAlert, ErrorAlert } from '../../../components/snackbars/alerts'; -import ProfileImage from './CreateProfilePicture'; -import { set } from 'date-fns'; -import { createCampaign } from '../../../services/quests/quests'; -import { ForkLeft } from '@mui/icons-material'; -import ScanReAuthDialog from '../../../components/dialogs/reauth'; +import { SuccessAlert, ErrorAlert } from "../../../components/snackbars/alerts"; +import ProfileImage from "./CreateProfilePicture"; +import { set } from "date-fns"; +import { createCampaign } from "../../../services/quests/quests"; +import { ForkLeft } from "@mui/icons-material"; +import ScanReAuthDialog from "../../../components/dialogs/reauth"; const CreateQuests: React.FC = () => { - const location = useLocation(); - const state = location.state as CampaignDetailPageProps | undefined; - const navigate = useNavigate(); - const [defaultCoverImage, setDefaultCoverImage] = React.useState(''); - const [defaultProfileImage, setDefaultProfileImage] = React.useState(''); + const location = useLocation(); + const state = location.state as CampaignDetailPageProps | undefined; + const navigate = useNavigate(); + const [defaultCoverImage, setDefaultCoverImage] = React.useState(""); + const [defaultProfileImage, setDefaultProfileImage] = React.useState(""); const [reAuthDialogOpen, setReAuthDialogOpen] = React.useState(false); - const [returnCampaign, setReturnCampaign] = React.useState(); - // Helper function to convert hex to RGBA - const hexToRGBA = (hex: string, alpha: number) => { - const r = parseInt(hex.slice(1, 3), 16); - const g = parseInt(hex.slice(3, 5), 16); - const b = parseInt(hex.slice(5, 7), 16); - - return `rgba(${r}, ${g}, ${b}, ${alpha})`; - }; - const [newCampaignName, setNewCampaignName] = React.useState("Project Title"); - const [isEditingName, setIsEditingName] = React.useState(false); - const [newCampaignBio, setNewCampaignBio] = React.useState("Project Bio"); - const [isEditingBio, setIsEditingBio] = React.useState(false); - const [newCoverImage, setNewCoverImage] = React.useState( - campaign[0].bg_image || "" - ); - const [newPPImage, setNewPPImage] = React.useState( - campaign[0].profile_image || "" - ); - const [isEditingCover, setIsEditingCover] = React.useState(false); - const [isEditingPP, setIsEditingPP] = React.useState(false); - const [coverImageError, setCoverImageError] = React.useState(false); - const [ppImageError, setPPImageError] = React.useState(false); - const [success, setSuccess] = React.useState(false); - const [error, setError] = React.useState(false); - const [message, setMessage] = React.useState("Your changes have been saved"); - const [projectImage, setProjectImage] = React.useState( - campaign[0].profile_image || "" - ); - const [projectTitle, setProjectTitle] = React.useState("Project Title"); // New state for project title - const [projectName, setProjectName] = React.useState("Campaign Name"); // Separate state for project name - const [boxImage, setBoxImage] = React.useState( - "https://i.imgur.com/IzWdTWR.png" - ); - // const [title, setTitle] = React.useState("Disruptors"); - // const [subtitle, setSubtitle] = React.useState( - // "Avail - Your Gateway to Privacy" - // ); - const [description, setDescription] = React.useState<{ - part1: string; - main: string; - part2: string; - }>({ part1: "Complete Weekly", main: "Quests", part2: "Win Disruptors" }); - const [color, setColor] = React.useState("#00FFAA"); - - const handleSaveNameClick = (newString: string) => { - setNewCampaignName(newString); - setSuccess(true); - setIsEditingName(false); - }; - - const handleEditNameClick = () => { - setIsEditingName(true); - }; - - const handleSaveBioClick = (newBio: string) => { - console.log('Your change has been saved!'); - setSuccess(true); - setNewCampaignBio(newBio); // Ensure the state update triggers re-render - setIsEditingBio(false); - }; - - const handleEditBioClick = () => { - setIsEditingBio(true); - }; - - const handleSaveCoverClick = (imageLink: string) => { - console.log(defaultCoverImage); - if (isValidUrl(imageLink)) { - console.log('Your change has been saved!'); - setMessage('Your image url has been saved!'); - setSuccess(true); - setNewCoverImage(imageLink); // Update the cover image state - setIsEditingCover(false); - setDefaultCoverImage(imageLink); - } else { - setCoverImageError(true); - } - console.log(defaultCoverImage); - - }; - - const handleSavePPClick = (imageLink: string) => { - if (isValidUrl(imageLink)) { - console.log('Your profile picture url has been saved!'); - setMessage('Your profile picture url has been saved!'); - setSuccess(true); - setNewPPImage(imageLink); - setIsEditingPP(false); - setDefaultProfileImage(imageLink); - setPPImageError(false); - } else { - setPPImageError(true); - } - }; - - const handleEditCoverClick = () => { - setIsEditingCover(true); - }; - - const handleEditPPClick = () => { - setIsEditingPP(true); - }; - - var isValidUrl = (url: string): boolean => { - try { - new URL(url); - console.log('This is the true'); - return true; - } catch (error) { - console.log('This is the false'); - console.log(error); - - return false; - } - }; - - const handleCampaignNameChange = ( - event: React.ChangeEvent - ) => { - setNewCampaignName(event.target.value); - console.log(event.target.value); - }; - - - - const handleCampaignBioChange = ( - event: React.ChangeEvent - ) => { - setNewCampaignBio(event.target.value); - }; - - const handleCoverImageChange = ( - event: React.ChangeEvent - ) => { - setNewCoverImage(event.target.value); - }; - - const handlePPImageChange = (event: React.ChangeEvent) => { - setNewPPImage(event.target.value); - }; - - - - const handleCreateCampaign = () => { - console.log('Create Campaign Clicked'); - console.log('Name:', newCampaignName); - console.log('Bio:', newCampaignBio); - console.log('Cover Image:', defaultCoverImage); - console.log('Profile Image:', defaultProfileImage); - console.log('Box Image:', boxImage); - console.log('Description:', description); - console.log('Color:', color); - - createCampaign( - newCampaignName, - newCampaignBio, - description.part1, - description.main, - description.part2, - 'TEST', - boxImage, - defaultCoverImage, - defaultProfileImage, - color, - 'avail', - 'https://i.imgur.com/vVySQ4o.png', - ).then(campaign => { - console.log('Campaign Created:', campaign); - setReturnCampaign(campaign); - setSuccess(true); - setMessage('Campaign Created'); - const testCampaignDetailPage: CampaignDetailPageProps = { - campaign, - quests: questsEmpty, - }; - navigate('/quests', {state: testCampaignDetailPage}); - }).catch(err => { - console.log(err); - if (err.error_type.toString() === 'Unauthorized') { - // eslint-disable-next-line no-warning-comments - // TODO - Re-authenticate and fix execution on re-auth (Bala) - - console.log('Unauthorized, re auth'); - - setReAuthDialogOpen(true); - } else { - setError(true); - setMessage(`Campaign Creation Failed: ${err.external_msg}`); - } - }); - }; - const handleSaveProjectImage = (newImageUrl: string) => { - setProjectImage(newImageUrl); - }; - - const handleSaveProjectName = (newName: string) => { - setProjectName(newName); - }; - - const handleSaveProjectTitle = (newTitle: string) => { - setProjectTitle(newTitle); - }; - - return ( - - - - - - - - - - - {/* Edit Cover Component */} - - - - - - {/* Project's Title Component */} - - - {/* Project's Bio Component */} - - {/* (); + // Helper function to convert hex to RGBA + const hexToRGBA = (hex: string, alpha: number) => { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + }; + const [newCampaignName, setNewCampaignName] = React.useState("Project Title"); + const [isEditingName, setIsEditingName] = React.useState(false); + const [newCampaignBio, setNewCampaignBio] = React.useState("Project Bio"); + const [isEditingBio, setIsEditingBio] = React.useState(false); + const [newCoverImage, setNewCoverImage] = React.useState( + campaign[0].bg_image || "" + ); + const [newPPImage, setNewPPImage] = React.useState( + campaign[0].profile_image || "" + ); + const [isEditingCover, setIsEditingCover] = React.useState(false); + const [isEditingPP, setIsEditingPP] = React.useState(false); + const [coverImageError, setCoverImageError] = React.useState(false); + const [ppImageError, setPPImageError] = React.useState(false); + const [success, setSuccess] = React.useState(false); + const [error, setError] = React.useState(false); + const [message, setMessage] = React.useState("Your changes have been saved"); + const [projectImage, setProjectImage] = React.useState( + campaign[0].profile_image || "" + ); + const [projectTitle, setProjectTitle] = React.useState("Project Title"); // New state for project title + const [projectName, setProjectName] = React.useState("Campaign Name"); // Separate state for project name + const [boxImage, setBoxImage] = React.useState( + "https://i.imgur.com/IzWdTWR.png" + ); + // const [title, setTitle] = React.useState("Disruptors"); + // const [subtitle, setSubtitle] = React.useState( + // "Avail - Your Gateway to Privacy" + // ); + const [description, setDescription] = React.useState<{ + part1: string; + main: string; + part2: string; + }>({ part1: "Complete Weekly", main: "Quests", part2: "Win Disruptors" }); + const [color, setColor] = React.useState("#00FFAA"); + + const handleSaveNameClick = (newString: string) => { + setNewCampaignName(newString); + setSuccess(true); + setIsEditingName(false); + }; + + const handleEditNameClick = () => { + setIsEditingName(true); + }; + + const handleSaveBioClick = (newBio: string) => { + console.log("Your change has been saved!"); + setSuccess(true); + setNewCampaignBio(newBio); // Ensure the state update triggers re-render + setIsEditingBio(false); + }; + + const handleEditBioClick = () => { + setIsEditingBio(true); + }; + + const handleSaveCoverClick = (imageLink: string) => { + console.log(defaultCoverImage); + if (isValidUrl(imageLink)) { + console.log("Your change has been saved!"); + setMessage("Your image url has been saved!"); + setSuccess(true); + setNewCoverImage(imageLink); // Update the cover image state + setIsEditingCover(false); + setDefaultCoverImage(imageLink); + } else { + setCoverImageError(true); + } + console.log(defaultCoverImage); + }; + + const handleSavePPClick = (imageLink: string) => { + if (isValidUrl(imageLink)) { + console.log("Your profile picture url has been saved!"); + setMessage("Your profile picture url has been saved!"); + setSuccess(true); + setNewPPImage(imageLink); + setIsEditingPP(false); + setDefaultProfileImage(imageLink); + setPPImageError(false); + } else { + setPPImageError(true); + } + }; + + const handleEditCoverClick = () => { + setIsEditingCover(true); + }; + + const handleEditPPClick = () => { + setIsEditingPP(true); + }; + + var isValidUrl = (url: string): boolean => { + try { + new URL(url); + console.log("This is the true"); + return true; + } catch (error) { + console.log("This is the false"); + console.log(error); + + return false; + } + }; + + const handleCampaignNameChange = ( + event: React.ChangeEvent + ) => { + setNewCampaignName(event.target.value); + console.log(event.target.value); + }; + + const handleCampaignBioChange = ( + event: React.ChangeEvent + ) => { + setNewCampaignBio(event.target.value); + }; + + const handleCoverImageChange = ( + event: React.ChangeEvent + ) => { + setNewCoverImage(event.target.value); + }; + + const handlePPImageChange = (event: React.ChangeEvent) => { + setNewPPImage(event.target.value); + }; + + const handleCreateCampaign = () => { + console.log("Create Campaign Clicked"); + console.log("Name:", newCampaignName); + console.log("Bio:", newCampaignBio); + console.log("Cover Image:", defaultCoverImage); + console.log("Profile Image:", defaultProfileImage); + console.log("Box Image:", boxImage); + console.log("Description:", description); + console.log("Color:", color); + + const testCampaignDetailPage: CampaignDetailPageProps = { + campaign: campaign[0], + quests: questsEmpty, + }; + navigate("/quests", { state: testCampaignDetailPage }); + + // createCampaign( + // newCampaignName, + // newCampaignBio, + // description.part1, + // description.main, + // description.part2, + // "TEST", + // boxImage, + // defaultCoverImage, + // defaultProfileImage, + // color, + // "avail", + // "https://i.imgur.com/vVySQ4o.png" + // ) + // .then((campaign) => { + // console.log("Campaign Created:", campaign); + // setReturnCampaign(campaign); + // setSuccess(true); + // setMessage("Campaign Created"); + // const testCampaignDetailPage: CampaignDetailPageProps = { + // campaign, + // quests: questsEmpty, + // }; + // navigate("/quests", { state: testCampaignDetailPage }); + // }) + // .catch((err) => { + // console.log(err); + // if (err.error_type.toString() === "Unauthorized") { + // // eslint-disable-next-line no-warning-comments + // // TODO - Re-authenticate and fix execution on re-auth (Bala) + + // console.log("Unauthorized, re auth"); + + // setReAuthDialogOpen(true); + // } else { + // setError(true); + // setMessage(`Campaign Creation Failed: ${err.external_msg}`); + // } + // }); + }; + const handleSaveProjectImage = (newImageUrl: string) => { + setProjectImage(newImageUrl); + }; + + const handleSaveProjectName = (newName: string) => { + setProjectName(newName); + }; + + const handleSaveProjectTitle = (newTitle: string) => { + setProjectTitle(newTitle); + }; + + return ( + + + + + + + + + + {/* Edit Cover Component */} + + + + + + {/* Project's Title Component */} + + + {/* Project's Bio Component */} + + {/* */} - - - - - + + + + + Create Campaign - - - {/* + + {/* { Add a Quest */} - - - - - - - - + + + + + + THIS IS HOW YOUR CAMPAIGN WILL LOOK IN THE QUESTS PAGE - - - + {/* ReAuth Dialog */} - { - setReAuthDialogOpen(false); - }} /> - - - ); + { + setReAuthDialogOpen(false); + }} + /> + + + ); }; export default CreateQuests; diff --git a/src/components/quests/CreateQuestsTasks/RewardQuest.tsx b/src/components/quests/CreateQuestsTasks/RewardQuest.tsx index 0484e60..01f5282 100644 --- a/src/components/quests/CreateQuestsTasks/RewardQuest.tsx +++ b/src/components/quests/CreateQuestsTasks/RewardQuest.tsx @@ -21,7 +21,7 @@ const schema = yup.object().shape({ allocation: yup.string().required("Allocation method is required"), }); -const Rewards: React.FC = () => { +const Rewards: React.FC<{ campaignId: string }> = ({ campaignId }) => { const methods = useForm({ resolver: yupResolver(schema), }); @@ -40,7 +40,7 @@ const Rewards: React.FC = () => { position: "relative", }} > - + ); }; diff --git a/src/components/quests/CreateQuestsTasks/RewardsQuests/SelectWinners.tsx b/src/components/quests/CreateQuestsTasks/RewardsQuests/SelectWinners.tsx index 3ce7821..4b8d48e 100644 --- a/src/components/quests/CreateQuestsTasks/RewardsQuests/SelectWinners.tsx +++ b/src/components/quests/CreateQuestsTasks/RewardsQuests/SelectWinners.tsx @@ -3,121 +3,168 @@ import { useState } from "react"; import * as mui from "@mui/material"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; -import FormControl from "@mui/material/FormControl"; -import Select, { SelectChangeEvent } from "@mui/material/Select"; +import Select from "@mui/material/Select"; +import { useForm, Controller, FieldValues } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import * as yup from "yup"; + +import { useQuestContext } from "../../../../views-desktop/quests/CreateTask"; + +// Define the validation schema using Yup +const schema = yup.object().shape({ + rewardName: yup.string().required("Reward Collection Name is required"), + username: yup.string().required("Reward Amount is required"), + mechanism: yup.string().required("Mechanism is required"), + expiresOn: yup.date().required("Expires On is required"), +}); + +const SelectWinners: React.FC<{ campaignId: string }> = ({ campaignId }) => { + const { + control, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(schema), + }); + + const { formField, setFormField } = useQuestContext(); -const SelectWinners: React.FC = () => { - const [rewardName, setRewardName] = useState(""); - const [username, setUsername] = useState(""); - const [mechanism, setMechanism] = useState(""); - const [expiresOn, setExpiresOn] = useState(""); const [createdOn, setCreatedOn] = useState( new Date().toISOString().slice(0, 10) ); - const handleLaunch = () => { - console.log("Reward Collection Name:", rewardName); - console.log("Reward Amount:", username); - console.log("Mechanism:", mechanism); - console.log("Expires On:", expiresOn); + + const onSubmit = (data: FieldValues) => { + console.log("Form Data:", data); console.log("Created On:", createdOn); + + setFormField({ ...formField, data, createdOn }); + console.log("Form field", formField); }; return ( - - + + Reward Collection Name - setRewardName(e.target.value)} - sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }} + ( + + )} /> - - + + Reward Amount - setUsername(e.target.value)} - // optional - sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }} + ( + + )} /> - + Mechanism - - - - setExpiresOn(e.target.value)} - InputLabelProps={{ shrink: true, style: { color: "white" } }} - sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }} + ( + + )} /> - {/* to be automated */} - + {errors.mechanism.message} + + )} + + + - - - - + Expires On + + ( + + )} /> - + Launch diff --git a/src/components/quests/CreateQuestsTasks/StartQuest/BannerDesktop.tsx b/src/components/quests/CreateQuestsTasks/StartQuest/BannerDesktop.tsx index 1290ec9..79cb065 100644 --- a/src/components/quests/CreateQuestsTasks/StartQuest/BannerDesktop.tsx +++ b/src/components/quests/CreateQuestsTasks/StartQuest/BannerDesktop.tsx @@ -2,7 +2,10 @@ import * as React from "react"; import * as mui from "@mui/material"; import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined"; +import { useFormContext } from "react-hook-form"; + const BannerDesktop: React.FC = () => { + const { register } = useFormContext(); return ( { flexDirection: "column", width: "100%", mb: "5%", + mt: 2, }} > { flexDirection: "row", }} > - + Banner - - + {" "}   Desktop - - - Recommended Size 1920 x 1080 - - - - + ); }; diff --git a/src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx b/src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx index 6f93d3c..8b2cc2f 100644 --- a/src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx +++ b/src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx @@ -24,8 +24,8 @@ const DescribeField: React.FC = () => { flexDirection: "column", height: "200px", width: "100%", - backgroundColor: "#2A2C2B", - border: "none", + // backgroundColor: "#2A2C2B", + // border: "none", borderRadius: "15px", alignItems: "stretch", justifyContent: "flex-start", @@ -35,14 +35,14 @@ const DescribeField: React.FC = () => { fullWidth multiline rows={8} - label='Describe Your Quest Here' - variant='standard' + placeholder='Describe Your Quest Here' + sx={{ mt: 1 }} + // variant='standard' {...register("describeQuest")} // value={formField.describeQuest || ""} // onChange={handleChange} InputProps={{ sx: { - ml: "10px", color: "#00FFAA", "& .MuiInput-underline:before": { borderBottom: "none", diff --git a/src/components/quests/CreateQuestsTasks/StartQuest/TitleField.tsx b/src/components/quests/CreateQuestsTasks/StartQuest/TitleField.tsx index feb2818..de4926c 100644 --- a/src/components/quests/CreateQuestsTasks/StartQuest/TitleField.tsx +++ b/src/components/quests/CreateQuestsTasks/StartQuest/TitleField.tsx @@ -28,7 +28,7 @@ const TitleField: React.FC = () => { display: "flex", height: "50px", width: "100%", - backgroundColor: "#2A2C2B", + // backgroundColor: "#2A2C2B", border: "none", borderRadius: "15px", alignItems: "center", @@ -38,23 +38,23 @@ const TitleField: React.FC = () => { > { +const StartQuests: React.FC<{ handleNext: () => void }> = ({ + handleNext, +}: { + handleNext: () => void; +}) => { const { setFormField, formField } = useQuestContext(); const methods = useForm({ resolver: yupResolver(schema), @@ -30,6 +41,7 @@ const StartQuests: React.FC = () => { const onSubmit = (data: any) => { console.log(data); setFormField({ ...formField, data }); + handleNext(); }; const onTest = () => { @@ -61,20 +73,16 @@ const StartQuests: React.FC = () => { )} - + {errors.desktopUrl && ( + + {errors.desktopUrl.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 35cee64..5e0f616 100644 --- a/src/components/quests/CreateQuestsTasks/TaskQuest.tsx +++ b/src/components/quests/CreateQuestsTasks/TaskQuest.tsx @@ -9,11 +9,12 @@ import { useQuestContext, } from "../../../views-desktop/quests/CreateTask"; -const TasksQuests: React.FC = () => { +const TasksQuests: React.FC<{ handleNext: () => void }> = ({ + handleNext, +}: { + handleNext: () => void; +}) => { const { formField, setFormField } = useQuestContext(); - React.useEffect(() => { - console.log("Form fields", formField); - }, []); return ( { position: "relative", }} > - + ); diff --git a/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx b/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx index 02469fb..279fdee 100644 --- a/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx +++ b/src/components/quests/CreateQuestsTasks/TaskQuests/AddTasks.tsx @@ -57,7 +57,11 @@ type DataObject = { dapp_url: string; }; -const AddTasks: React.FC = ({ setFormField, formField }: any) => { +const AddTasks: React.FC<{ props: any }> = ({ + setFormField, + formField, + handleNext, +}: any) => { const { control, handleSubmit, @@ -113,6 +117,7 @@ const AddTasks: React.FC = ({ setFormField, formField }: any) => { ); setFormField({ task: { ...data?.tasks }, formField }); + handleNext(); }; return ( @@ -124,289 +129,232 @@ const AddTasks: React.FC = ({ setFormField, formField }: any) => { > Hello world box - -
- - - Add Tasks - - + + Add Tasks + + - - {fields.map((field, index) => ( -
+ {fields.map((field, index) => ( +
+ - - + {index !== 0 && ( + { + remove(index); + }} + variant='outlined' > - Tasks {index + 1} - - {index !== 0 && ( - { - remove(index); + Delete + + )} + + ( + + )} + /> + ( + + )} + /> + ( + + + Transaction + + - Delete - - )} - - ( - - )} - /> - ( - - )} - /> - ( - - - Transaction - - - True - False - - - {errors.tasks?.[index]?.transaction - ? errors?.tasks?.[index]?.transaction?.message - : ""} - - - )} - /> + 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 08ecb04..60dde91 100644 --- a/src/views-desktop/quests/CreateTask.tsx +++ b/src/views-desktop/quests/CreateTask.tsx @@ -11,7 +11,10 @@ import SideMenu from "../../components/sidebar"; import StartQuests from "../../components/quests/CreateQuestsTasks/StartQuests"; import TasksQuests from "../../../src/components/quests/CreateQuestsTasks/TaskQuest"; import RewardsQuests from "../../../src/components/quests/CreateQuestsTasks/RewardQuest"; -import { AddQuestTasksProps, Campaign} from "../../../src/types/quests/quest_types"; +import { + AddQuestTasksProps, + Campaign, +} from "../../../src/types/quests/quest_types"; import { useLocation } from "react-router-dom"; type QuestContextType = { @@ -41,115 +44,185 @@ export const useQuestContext = (): QuestContextType => { }; const CreateTasks: React.FC = () => { - const {campaign} = useLocation().state as AddQuestTasksProps; + const { campaign } = useLocation().state as AddQuestTasksProps; const [tabValue, setTabValue] = useState(0); - const handleChange = (event: React.SyntheticEvent, newValue: number) => { + const handleChange = (newValue: number) => { setTabValue(newValue); }; console.log(campaign.id); 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(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(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(2)} + /> + - - {tabValue === 0 && } - {tabValue === 1 && } - {tabValue === 2 && } + + {tabValue === 0 && ( + { + handleChange(1); + }} + /> + )} + {tabValue === 1 && ( + { + handleChange(2); + }} + /> + )} + {tabValue === 2 && } + - - - + + + ); }; diff --git a/src/views-desktop/quests/quests.tsx b/src/views-desktop/quests/quests.tsx index b696eee..8ad28e3 100644 --- a/src/views-desktop/quests/quests.tsx +++ b/src/views-desktop/quests/quests.tsx @@ -1,151 +1,267 @@ -import * as React from 'react'; -import * as mui from '@mui/material'; +import * as React from "react"; +import * as mui from "@mui/material"; // Components -import Layout from '../reusable/layout'; -import SideMenu from '../../components/sidebar'; -import QuestBox from '../../components/quests/quest'; -import TaskDrawer from '../../components/quests/tasks_drawer'; +import Layout from "../reusable/layout"; +import SideMenu from "../../components/sidebar"; +import QuestBox from "../../components/quests/quest"; +import TaskDrawer from "../../components/quests/tasks_drawer"; import ConfirmDialog from "../../components/quests/CreateQuests/ConfirmDialog"; -import { AddQuestTasksProps, Campaign} from "../../../src/types/quests/quest_types"; -import ScanReAuthDialog from '../../components/dialogs/reauth'; +import { + AddQuestTasksProps, + Campaign, + campaign, +} from "../../../src/types/quests/quest_types"; +import ScanReAuthDialog from "../../components/dialogs/reauth"; // Types -import {type CampaignDetailPageProps} from '../../types/quests/quest_types'; -import {type Quest} from '../../types/quests/quest_types'; +import { type CampaignDetailPageProps } from "../../types/quests/quest_types"; +import { type Quest } from "../../types/quests/quest_types"; // Images -import verified from '../../assets/icons/verified.svg'; +import verified from "../../assets/icons/verified.svg"; // Typography -import {BodyText500} from '../../components/typography/typography'; +import { BodyText500 } from "../../components/typography/typography"; // Services -import {deleteCampaign, isQuestCompleted} from '../../services/quests/quests'; +import { deleteCampaign, isQuestCompleted } from "../../services/quests/quests"; // Hooks -import {useLocation, useNavigate} from 'react-router-dom'; +import { useLocation, useNavigate } from "react-router-dom"; // Alerts -import {SuccessAlert, ErrorAlert} from '../../components/snackbars/alerts'; -import { get } from 'http'; -import { get_address } from '../../services/storage/persistent'; +import { SuccessAlert, ErrorAlert } from "../../components/snackbars/alerts"; +import { get } from "http"; +import { get_address } from "../../services/storage/persistent"; const Quests: React.FC = () => { - const {campaign, quests} = useLocation().state as CampaignDetailPageProps; - const [quest, setQuest] = React.useState(); - const [openTasks, setOpenTasks] = React.useState(false); - const [questCompleted, setQuestCompleted] = React.useState(false); - const navigate = useNavigate(); - const [openDialog, setOpenDialog] = React.useState(false); - const [reAuthDialogOpen, setReAuthDialogOpen] = React.useState(false); - - - - const [success, setSuccess] = React.useState(false); - const [error, setError] = React.useState(false); - const [message, setMessage] = React.useState(''); - const [ownerAddr, setOwnerAddr] = React.useState(''); - - const mdsx = mui.useMediaQuery('(min-width:850px)'); - const md = mui.useMediaQuery('(min-width:950px)'); - const mdlg = mui.useMediaQuery('(min-width:1150px)'); - const lgsx = mui.useMediaQuery('(min-width:1550px)'); - const lg = mui.useMediaQuery('(min-width:1750px)'); - const lgxl = mui.useMediaQuery('(min-width:1950px)'); - const address = get_address().then(res => { - setOwnerAddr(res); - }); - - const campaignId = campaign.id; - const campaignDetails: AddQuestTasksProps = { - campaign, - }; - const handleAddQuest = () => { - navigate('/create-tasks', { state: campaignDetails }); - }; - const handleDeleteCampaign = () => { - deleteCampaign(campaign.id).then(res => { - console.log(res); - navigate('/campaigns'); - }).catch(err => { - if (err.error_type.toString() === 'Unauthorized') { - // eslint-disable-next-line no-warning-comments - // TODO - Re-authenticate and fix execution on re-auth (Bala) - - console.log('Unauthorized, re auth'); - - setReAuthDialogOpen(true); - } else { - setError(true); - setMessage(`Error deleting campaign: ${err.external_msg}`,); - } - console.log(err); - }); - }; - const handleDeleteConfirmation = () =>{ - setOpenDialog(true); - }; - return ( - - - - - {setOpenTasks(false)}} quest={quest} /> - - - - - - - - - - {campaign.title} - {campaign.inner_description} - - {campaign.owner === ownerAddr && ( - - Add Quest - - )} - - - {campaign.owner === ownerAddr && ( - - Delete Campaign - - )} - - - - - {quests.map(quest => ( - - ))} - - setOpenDialog(false)} - onConfirm={handleDeleteCampaign} - title="Confirm Delete Campaign" - content="Are you sure you want to delete this campaign? This action is irreversible." - /> - {/* ReAuth Dialog */} - { - setReAuthDialogOpen(false); - }} /> - - - ); + const { campaign: campaign_state, quests } = useLocation() + .state as CampaignDetailPageProps; + const [quest, setQuest] = React.useState(); + const [openTasks, setOpenTasks] = React.useState(false); + const [questCompleted, setQuestCompleted] = React.useState(false); + const navigate = useNavigate(); + const [openDialog, setOpenDialog] = React.useState(false); + const [reAuthDialogOpen, setReAuthDialogOpen] = React.useState(false); + + const [success, setSuccess] = React.useState(false); + const [error, setError] = React.useState(false); + const [message, setMessage] = React.useState(""); + const [ownerAddr, setOwnerAddr] = React.useState(""); + + const mdsx = mui.useMediaQuery("(min-width:850px)"); + const md = mui.useMediaQuery("(min-width:950px)"); + const mdlg = mui.useMediaQuery("(min-width:1150px)"); + const lgsx = mui.useMediaQuery("(min-width:1550px)"); + const lg = mui.useMediaQuery("(min-width:1750px)"); + const lgxl = mui.useMediaQuery("(min-width:1950px)"); + const address = get_address().then((res) => { + setOwnerAddr(res); + }); + + const campaignId = campaign_state.id; + const campaignDetails: AddQuestTasksProps = { + campaign: campaign_state, + }; + + const campaignDetailsDummy: AddQuestTasksProps = { + campaign: campaign[0], + }; + + const handleAddQuest = () => { + navigate("/create-tasks", { state: campaignDetails }); + }; + + const handleAddQuestDummy = () => { + navigate("/create-tasks", { state: campaignDetailsDummy }); + }; + const handleDeleteCampaign = () => { + deleteCampaign(campaign_state.id) + .then((res) => { + console.log(res); + navigate("/campaigns"); + }) + .catch((err) => { + if (err.error_type.toString() === "Unauthorized") { + // eslint-disable-next-line no-warning-comments + // TODO - Re-authenticate and fix execution on re-auth (Bala) + + console.log("Unauthorized, re auth"); + + setReAuthDialogOpen(true); + } else { + setError(true); + setMessage(`Error deleting campaign: ${err.external_msg}`); + } + console.log(err); + }); + }; + const handleDeleteConfirmation = () => { + setOpenDialog(true); + }; + return ( + + + + + { + setOpenTasks(false); + }} + quest={quest} + /> + + + + + + + + + + {campaign_state.title} + + + {campaign_state.inner_description} + + + + {campaign_state.owner === ownerAddr && ( + + Add Quest + + )} + + + {campaign_state.owner === ownerAddr && ( + + Delete Campaign + + )} + + + + + {quests.map((quest) => ( + + ))} + + setOpenDialog(false)} + onConfirm={handleDeleteCampaign} + title='Confirm Delete Campaign' + content='Are you sure you want to delete this campaign? This action is irreversible.' + /> + {/* ReAuth Dialog */} + { + setReAuthDialogOpen(false); + }} + /> + + + ); }; export default Quests; -