Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Delete Quest button added #911

Closed
wants to merge 3 commits into from
Closed

Delete Quest button added #911

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b28c5e
Delete Quest button added
GradleD Oct 27, 2024
5a285bb
Update page.tsx
GradleD Oct 27, 2024
a276c39
Update page.tsx
GradleD Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 116 additions & 95 deletions app/admin/quests/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,54 +17,48 @@ import homePagestyles from "@styles/Home.module.css";
import { a11yProps } from "@components/UI/tabs/a11y";
import { CustomTabPanel } from "@components/UI/tabs/customTab";
import { Tab, Tabs } from "@mui/material";

import Loading from "@app/loading";

export default function Page() {
const router = useRouter();
const [user, setUser] = useState("");
const { address } = useAccount();
const [loading, setLoading] = useState<boolean>(true);
const { showNotification } = useNotification();
const [tabIndex, setTabIndex] = React.useState(0);

const [quests, setQuests] = useState<[QuestDocument]>([QuestDefault]);
const [user, setUser] = useState<string>("");
const [tabIndex, setTabIndex] = useState<number>(0);
const [quests, setQuests] = useState<QuestDocument[]>([QuestDefault]);

useEffect(() => {
const tokenExpiryTime = getExpireTimeFromJwt();
if (!tokenExpiryTime || tokenExpiryTime < new Date().getTime()) {
router.push("/admin");
}
}, []);
}, [router]);

const fetchQuests = useCallback(async () => {
setLoading(true);
try {
setLoading(true);
const res = await AdminService.getQuests();
setQuests(res);
setLoading(false);
} catch (error) {
showNotification("Error while fetching quests", "error");
console.log("Error while fetching quests", error);
console.error("Error fetching quests", error);
} finally {
setLoading(false);
}
}, []);
}, [showNotification]);

const handleCreateQuest = useCallback(() => {
router.push("/admin/quests/create");
}, []);
}, [router]);

useEffect(() => {
const currentUser = getUserFromJwt();
if (!currentUser) return;

if (currentUser === "super_user") {
setUser("Admin");
} else {
setUser(currentUser);
if (currentUser) {
setUser(currentUser === "super_user" ? "Admin" : currentUser);
fetchQuests();
}

fetchQuests();
}, [address]);
}, [fetchQuests, address]);

const handleChangeTab = useCallback(
(event: React.SyntheticEvent, newValue: number) => {
Expand All @@ -73,17 +67,47 @@ export default function Page() {
[]
);

const deleteQuest = useCallback(
async (questId: string) => {
if (!questId || typeof questId !== "string") {
showNotification("Invalid quest ID", "error");
return;
}

if (!window.confirm("Are you sure you want to delete this quest? This action cannot be undone.")) {
return;
}

setLoading(true);
try {
const response = await AdminService.deleteQuest(questId);
if (!response.success) {
throw new Error("Failed to delete quest");
}

setQuests((prevQuests) => prevQuests.filter((quest) => quest.id !== questId));
showNotification("Quest deleted successfully", "success");
} catch (error) {
showNotification("Error deleting quest", "error");
console.error("Error deleting quest", error);
} finally {
setLoading(false);
}
},
[showNotification]
);

return (
<div className="flex flex-col w-full pt-28 g-8">
<div className={styles.backButton}>
<BackButton onClick={() => router.back()} />
</div>
<div className={styles.screenContainer}>
<div className={styles.questsBanner}>
<div className=" text-center sm:text-left">
<div className="text-center sm:text-left">
<p>{user}</p>
<p className={styles.questListHeading}>Your quests</p>
<p>{quests?.length} quests</p>
<p>{quests.length} quests</p>
</div>
<div>
<Button onClick={handleCreateQuest}>
Expand All @@ -94,88 +118,85 @@ export default function Page() {
<Loading isLoading={loading} loadingType="skeleton">
<section className={homePagestyles.section}>
<div className="w-full">
<div>
<Tabs
style={{
borderBottom: "0.5px solid rgba(224, 224, 224, 0.3)",
<Tabs
style={{ borderBottom: "0.5px solid rgba(224, 224, 224, 0.3)" }}
className="pb-4"
value={tabIndex}
onChange={handleChangeTab}
aria-label="quests and collections tabs"
indicatorColor="secondary"
>
<Tab
disableRipple
sx={{
borderRadius: "10px",
padding: "0px 12px",
textTransform: "none",
fontWeight: "600",
fontSize: "12px",
fontFamily: "Sora",
minHeight: "32px",
}}
label="Enabled"
{...a11yProps(0)}
/>
<Tab
disableRipple
sx={{
borderRadius: "10px",
padding: "0px 12px",
textTransform: "none",
fontWeight: "600",
fontSize: "12px",
fontFamily: "Sora",
minHeight: "32px",
}}
className="pb-4"
value={tabIndex}
onChange={handleChangeTab}
aria-label="quests and collectons tabs"
indicatorColor="secondary"
>
<Tab
disableRipple
sx={{
borderRadius: "10px",
padding: "0px 12px 0px 12px",
textTransform: "none",
fontWeight: "600",
fontSize: "12px",
fontFamily: "Sora",
minHeight: "32px",
}}
label={`Enabled`}
{...a11yProps(0)}
/>
<Tab
disableRipple
sx={{
borderRadius: "10px",
padding: "0px 12px 0px 12px",
textTransform: "none",
fontWeight: "600",
fontSize: "12px",
fontFamily: "Sora",
minHeight: "32px",
}}
label={`Disabled`}
{...a11yProps(1)}
/>
</Tabs>
</div>
label="Disabled"
{...a11yProps(1)}
/>
</Tabs>

<CustomTabPanel value={tabIndex} index={0}>
<div className="flex flex-wrap gap-10 justify-center lg:justify-start">
{quests?.map((quest) => {
if (!quest.disabled) {
return (
<Quest
key={quest.id}
title={quest.title_card}
onClick={() =>
router.push(`/admin/quests/dashboard/${quest.id}`)
}
imgSrc={quest.img_card}
reward={quest.disabled ? "Disabled" : "Active"}
id={quest.id}
/>
);
}
})}
{quests.map(
(quest) =>
!quest.disabled && (
<div key={quest.id} className="quest-item">
<Quest
title={quest.title_card}
onClick={() => router.push(`/admin/quests/dashboard/${quest.id}`)}
imgSrc={quest.img_card}
reward="Active"
/>
<Button onClick={() => deleteQuest(quest.id)}>
<p>Delete Quest</p>
</Button>
</div>
)
)}
</div>
</CustomTabPanel>

<CustomTabPanel value={tabIndex} index={1}>
<div className="flex flex-wrap gap-10 justify-center lg:justify-start">
{quests?.map((quest) => {
if (quest.disabled) {
return (
<Quest
key={quest.id}
title={quest.title_card}
onClick={() =>
router.push(`/admin/quests/dashboard/${quest.id}`)
}
imgSrc={quest.img_card}
reward={quest.disabled ? "Disabled" : "Active"}
id={quest.id}
/>
);
}
})}
{quests.map(
(quest) =>
quest.disabled && (
<div key={quest.id} className="quest-item">
<Quest
title={quest.title_card}
onClick={() => router.push(`/admin/quests/dashboard/${quest.id}`)}
imgSrc={quest.img_card}
reward="Disabled"
/>
<Button onClick={() => deleteQuest(quest.id)}>
<p>Delete Quest</p>
</Button>
</div>
)
)}
</div>
</CustomTabPanel>
<CustomTabPanel value={tabIndex} index={2}></CustomTabPanel>
</div>
</section>
</Loading>
Expand Down