Skip to content

Commit

Permalink
chore: save work done
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChibuezeSamObisike
ChibuezeSamObisike committed Jun 27, 2024
1 parent af93804 commit 1d34558
Show file tree
Hide file tree
Showing 11 changed files with 1,173 additions and 995 deletions.
727 changes: 367 additions & 360 deletions src/components/quests/CreateQuests/CreateQuests.tsx
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/components/quests/CreateQuestsTasks/RewardQuest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
});
Expand All @@ -40,7 +40,7 @@ const Rewards: React.FC = () => {
position: "relative",
}}
>
<SelectWinners />
<SelectWinners campaignId={campaignId} />
</mui.Box>
);
};
Expand Down
205 changes: 126 additions & 79 deletions src/components/quests/CreateQuestsTasks/RewardsQuests/SelectWinners.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<mui.Box sx={{ width: "100%" }}>
<mui.Stack spacing={2}>
<mui.Stack direction="column" spacing={0}>
<mui.Typography color="#fff" fontSize="15px" fontWeight={200}>
<mui.Stack direction='column' spacing={0}>
<mui.Typography
color='#fff'
fontSize='15px'
sx={{ mb: 1 }}
fontWeight={200}
>
Reward Collection Name
</mui.Typography>
<mui.TextField
value={rewardName}
onChange={(e) => setRewardName(e.target.value)}
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
<Controller
name='rewardName'
control={control}
render={({ field }) => (
<mui.TextField
{...field}
error={!!errors.rewardName}
helperText={errors.rewardName ? errors.rewardName.message : ""}
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
/>
)}
/>
</mui.Stack>
<mui.Stack direction="column" spacing={0}>
<mui.Typography color="#fff" fontSize="15px" fontWeight={200}>
<mui.Stack direction='column' spacing={0}>
<mui.Typography
color='#fff'
fontSize='15px'
sx={{ mb: 1 }}
fontWeight={200}
>
Reward Amount
</mui.Typography>
<mui.TextField
name="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
// optional
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
<Controller
name='username'
control={control}
render={({ field }) => (
<mui.TextField
{...field}
error={!!errors.username}
helperText={errors.username ? errors.username.message : ""}
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
/>
)}
/>
</mui.Stack>
<mui.Stack direction="column" spacing={0}>
<mui.Stack direction='column' spacing={0}>
<InputLabel
id="demo-simple-select-helper-label"
id='mechanism-label'
sx={{
color: "#fff",
fontSize: "15px",
fontWeight: "200",
mb: 1,
}}
>
Mechanism
</InputLabel>
<Select
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={mechanism}
onChange={(e) => setMechanism(e.target.value)}
sx={{
bgcolor: "#2A2C2B",
borderRadius: "10px",
color: "#fff",
fontSize: "15px",
fontWeight: "200",
}}
// sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>FCFS</MenuItem>
<MenuItem value={2}>Leaderboard</MenuItem>
<MenuItem value={3}>LuckyDraw</MenuItem>
</Select>
</mui.Stack>
<mui.Stack direction="row" spacing={1}>
<mui.TextField
fullWidth
label="Expires On"
type="date"
value={expiresOn}
onChange={(e) => setExpiresOn(e.target.value)}
InputLabelProps={{ shrink: true, style: { color: "white" } }}
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
<Controller
name='mechanism'
control={control}
render={({ field }) => (
<Select
{...field}
labelId='mechanism-label'
id='mechanism'
sx={{
bgcolor: "#2A2C2B",
border: "1px solid #2e9368",
color: "#fff",
fontSize: "15px",
fontWeight: "200",
}}
>
<MenuItem value=''>
<em>None</em>
</MenuItem>
<MenuItem value='FCFS'>FCFS</MenuItem>
<MenuItem value='Leaderboard'>Leaderboard</MenuItem>
<MenuItem value='LuckyDraw'>LuckyDraw</MenuItem>
</Select>
)}
/>
{/* to be automated */}
<mui.TextField
fullWidth
label="created On"
type="date"
InputLabelProps={{ shrink: true, style: { color: "white" } }}
value={createdOn}
disabled
{errors.mechanism && (
<mui.Typography color='error' fontSize='12px'>
{errors.mechanism.message}
</mui.Typography>
)}
</mui.Stack>
<mui.Stack direction='column' spacing={1}>
<InputLabel
id='expiresOn-label'
sx={{
bgcolor: "#2A2C2B",
borderRadius: "10px",
color: "#fff",
fontSize: "15px",
fontWeight: "200",
mb: 1,
}}
/>
</mui.Stack>

<mui.Stack direction="column" spacing={0}>
<mui.TextField
label="Campiagn ID"
disabled
InputLabelProps={{ shrink: true, style: { color: "white" } }}
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
>
Expires On
</InputLabel>
<Controller
name='expiresOn'
control={control}
render={({ field }) => (
<mui.TextField
{...field}
type='date'
error={!!errors.expiresOn}
helperText={errors.expiresOn ? errors.expiresOn.message : ""}
InputLabelProps={{ shrink: true, style: { color: "white" } }}
sx={{ bgcolor: "#2A2C2B", borderRadius: "10px" }}
/>
)}
/>
</mui.Stack>
</mui.Stack>
<mui.Button sx={{ color: "fff" }} onClick={handleLaunch}>
<mui.Button
fullWidth
sx={{ color: "fff", textTransform: "inherit", mt: 3 }}
variant='contained'
onClick={handleSubmit(onSubmit)}
>
Launch
</mui.Button>
</mui.Box>
Expand Down
46 changes: 10 additions & 36 deletions src/components/quests/CreateQuestsTasks/StartQuest/BannerDesktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@ 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 (
<mui.Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
mb: "5%",
mt: 2,
}}
>
<mui.Box
Expand All @@ -18,48 +22,18 @@ const BannerDesktop: React.FC = () => {
flexDirection: "row",
}}
>
<mui.Typography variant="h4" color={"white"} fontWeight={"bold"}>
<mui.Typography variant='h4' mb={2} color={"white"} fontWeight={"bold"}>
Banner -
</mui.Typography>
<mui.Typography variant="h4" color={"white"}>
<mui.Typography variant='h4' color={"white"}>
{" "}
&nbsp; Desktop
</mui.Typography>
</mui.Box>
<mui.Box
sx={{
display: "flex",
flexDirection: "column",
height: "200px",
width: "100%",
backgroundColor: "#2A2C2B",
border: "none",
borderRadius: "15px",
alignItems: "center",
justifyContent: "center",
overflow: "hidden",
position: "relative",
}}
>
<mui.Typography color={"white"}>
Recommended Size 1920 x 1080
</mui.Typography>
<ImageOutlinedIcon
sx={{ color: "white", marginTop: "10px", fontSize: "60px" }}
/>
<mui.Box
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: "15px",
border: "1px dashed white",
pointerEvents: "none",
}}
/>
</mui.Box>
<mui.TextField
{...register("desktopUrl")}
placeholder='Kindly put in URL'
/>
</mui.Box>
);
};
Expand Down
10 changes: 5 additions & 5 deletions src/components/quests/CreateQuestsTasks/StartQuest/DescribeField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
Loading

0 comments on commit 1d34558

Please sign in to comment.