Skip to content

S
sweepstake
Commit 330ac706 by Arjun Jhukal
Options

updated the fixes for the loading delay replaced the button with link to enforce prefetching

parent 262351f4
Showing with 115 additions and 182 deletions
src/components/organism/Sidebar/AdminSidebar/index.tsx
import { PATH } from '@/routes/PATH'; "use client";
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
import { ArrowSwapHorizontal, Game, Notification, Paperclip2, Setting, Setting2, StatusUp, UserSearch } from '@wandersonalwes/iconsax-react' import { PATH } from "@/routes/PATH";
import { usePathname, useRouter } from 'next/navigation' import Link from "next/link";
import React from 'react' import {
List,
ListItem,
ListItemIcon,
ListItemText,
} from "@mui/material";
import {
ArrowSwapHorizontal,
Game,
Notification,
Paperclip2,
Setting2,
StatusUp,
UserSearch,
} from "@wandersonalwes/iconsax-react";
import { usePathname } from "next/navigation";
import React from "react";
export default function AdminMenu({ open }: { open: boolean }) { export default function AdminMenu({ open }: { open: boolean }) {
const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
return (
<List>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
pathname === "/" ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.DASHBOARD.ROOT) }} const menuItems = [
> {
<ListItemIcon className={open ? "expanded" : "collapsed"}> label: "Dashboard",
<StatusUp /> icon: <StatusUp size={18} />,
</ListItemIcon> href: PATH.DASHBOARD.ROOT,
<ListItemText active: pathname === PATH.DASHBOARD.ROOT,
primary="Dashboard" },
className={open ? "expanded" : "collapsed"} {
/> label: "Transactions",
</ListItemButton> icon: <ArrowSwapHorizontal size={18} />,
</ListItem> href: PATH.ADMIN.TRANSACTIONS.ROOT,
<ListItem> active: pathname.startsWith(PATH.ADMIN.TRANSACTIONS.ROOT),
<ListItemButton },
className={[ {
open ? "expanded" : "collapsed", label: "Games",
pathname === "/transactions" ? "active" : "" icon: <Game size={18} />,
].join(" ")} href: PATH.ADMIN.GAMES.ROOT,
active: [
onClick={() => { router.push(PATH.ADMIN.TRANSACTIONS.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<ArrowSwapHorizontal />
</ListItemIcon>
<ListItemText
primary="Transactions"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT, PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT, PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game" "/edit-game",
].some(path => pathname.startsWith(path)) ? "active" : "" ].some((p) => pathname.startsWith(p)),
].join(" ")} },
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }} {
label: "Players",
> icon: <UserSearch size={18} />,
<ListItemIcon className={open ? "expanded" : "collapsed"}> href: PATH.ADMIN.PLAYERS.ROOT,
<Game /> active: [
</ListItemIcon>
<ListItemText
primary="Games"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.PLAYERS.ROOT, PATH.ADMIN.PLAYERS.ROOT,
PATH.ADMIN.PLAYERS.ADD_PLAYER.ROOT, PATH.ADMIN.PLAYERS.ADD_PLAYER.ROOT,
"/edit-player" "/edit-player",
].some(path => pathname.startsWith(path)) ? "active" : "" ].some((p) => pathname.startsWith(p)),
].join(" ")} },
onClick={() => { router.push(PATH.ADMIN.PLAYERS.ROOT) }} {
label: "Menus",
> icon: <Paperclip2 size={18} />,
<ListItemIcon className={open ? "expanded" : "collapsed"}> href: PATH.ADMIN.MENUS.ROOT,
<UserSearch /> active: pathname.startsWith(PATH.ADMIN.MENUS.ROOT),
</ListItemIcon> },
<ListItemText {
primary="Players" label: "Pages",
className={open ? "expanded" : "collapsed"} icon: <Paperclip2 size={18} />,
/> href: PATH.ADMIN.PAGES.ROOT,
</ListItemButton> active: pathname.startsWith(PATH.ADMIN.PAGES.ROOT),
</ListItem> },
<ListItem> {
<ListItemButton label: "Notifications",
className={[ icon: <Notification size={18} />,
open ? "expanded" : "collapsed", href: PATH.ADMIN.NOTIFICATIONS.ROOT,
[ active: pathname.startsWith(PATH.ADMIN.NOTIFICATIONS.ROOT),
PATH.ADMIN.MENUS.ROOT, },
].some(path => pathname.startsWith(path)) ? "active" : "" {
].join(" ")} label: "Settings",
onClick={() => { router.push(PATH.ADMIN.MENUS.ROOT) }} icon: <Setting2 size={18} />,
href: PATH.ADMIN.SETTINGS.ROOT,
> active: pathname.startsWith(PATH.ADMIN.SETTINGS.ROOT),
<ListItemIcon className={open ? "expanded" : "collapsed"}> },
<Paperclip2 /> ];
</ListItemIcon>
<ListItemText
primary="Menus"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.PAGES.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.PAGES.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<Paperclip2 />
</ListItemIcon>
<ListItemText
primary="Pages"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.NOTIFICATIONS.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.NOTIFICATIONS.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<Notification />
</ListItemIcon>
<ListItemText
primary="Notifications"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.SETTINGS.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.SETTINGS.ROOT) }}
return (
<List>
{menuItems.map(({ label, icon, href, active }, idx) => (
<ListItem key={idx}>
<Link
href={href}
className={`flex gap-2 items-center px-4 py-2 ${open ? "expanded" : "collapsed"
} ${active ? "active__menu" : ""}`}
> >
<ListItemIcon className={open ? "expanded" : "collapsed"}> <ListItemIcon className={open ? "expanded" : "collapsed"}>
<Setting2 /> {icon}
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="Settings" primary={label}
className={open ? "expanded" : "collapsed"} className={open ? "expanded" : "collapsed"}
/> />
</ListItemButton> </Link>
</ListItem> </ListItem>
{/* <ListItem> ))}
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.SETTINGS.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.SETTINGS.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<Setting2 />
</ListItemIcon>
<ListItemText
primary="Packs"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem> */}
</List> </List>
) );
} }
src/components/pages/dashboard/adminDashboard/settings/SiteSetting.tsx
...@@ -16,6 +16,18 @@ export default function SiteSetting() { ...@@ -16,6 +16,18 @@ export default function SiteSetting() {
const [updateSetting, { isLoading }] = useUpdateSettingMutation(); const [updateSetting, { isLoading }] = useUpdateSettingMutation();
const { data } = useGetSettingsQuery(); const { data } = useGetSettingsQuery();
const [serverFiles, setServerFiles] = React.useState({
favicon: data?.data?.favicon || "",
logo: data?.data?.logo || ""
})
React.useEffect(() => {
setServerFiles({
favicon: data?.data?.favicon || "",
logo: data?.data?.logo || ""
})
}, [data]);
const formik = useFormik({ const formik = useFormik({
initialValues: data ? { initialValues: data ? {
site_name: data?.data?.site_name, site_name: data?.data?.site_name,
...@@ -31,13 +43,13 @@ export default function SiteSetting() { ...@@ -31,13 +43,13 @@ export default function SiteSetting() {
enableReinitialize: true, enableReinitialize: true,
validationSchema: Yup.object({ validationSchema: Yup.object({
favicon: Yup.mixed().required("Favicon is required"), favicon: Yup.mixed().required("Favicon is required"),
logo: Yup.mixed().required("Logo is required"), // logo: Yup.mixed().required("Logo is required"),
site_name: Yup.string().required("Website title is required"), site_name: Yup.string().required("Website title is required"),
unique_selling_points: Yup.array().of( unique_selling_points: Yup.array().of(
Yup.object({ Yup.object({
title: Yup.string().required("USP title is required"), title: Yup.string().required("USP title is required"),
description: Yup.string().required("USP description is required"), description: Yup.string().required("USP description is required"),
icon: Yup.mixed().required("USP icon is required"), // icon: Yup.mixed().required("USP icon is required"),
}) })
), ),
}), }),
...@@ -49,10 +61,10 @@ export default function SiteSetting() { ...@@ -49,10 +61,10 @@ export default function SiteSetting() {
if (values.logo) formData.append("logo", values.logo); if (values.logo) formData.append("logo", values.logo);
if (data?.data?.logo) { if (data?.data?.logo) {
formData.append("logo_url", data.data.logo) formData.append("logo_url", serverFiles.logo)
} }
if (data?.data?.favicon) { if (data?.data?.favicon) {
formData.append("logo_url", data.data.favicon) formData.append("favicon_url", serverFiles.favicon)
} }
formData.append("site_name", values.site_name); formData.append("site_name", values.site_name);
...@@ -104,6 +116,13 @@ export default function SiteSetting() { ...@@ -104,6 +116,13 @@ export default function SiteSetting() {
formik.setFieldValue("unique_selling_points", updated); formik.setFieldValue("unique_selling_points", updated);
}; };
const handleServerFileRemoval = (field: "favicon" | "logo", fileUrl?: string) => {
setServerFiles((prev) => ({
...prev,
[field]: fileUrl,
}));
};
return ( return (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
{/* Site Setting */} {/* Site Setting */}
...@@ -140,7 +159,8 @@ export default function SiteSetting() { ...@@ -140,7 +159,8 @@ export default function SiteSetting() {
value={formik.values.favicon || null} value={formik.values.favicon || null}
onChange={(file: File | File[] | null) => formik.setFieldValue("favicon", file)} onChange={(file: File | File[] | null) => formik.setFieldValue("favicon", file)}
onBlur={() => formik.setFieldTouched("favicon", true)} onBlur={() => formik.setFieldTouched("favicon", true)}
serverFile={!formik.values.favicon ? data?.data?.favicon : ""} serverFile={!formik.values.favicon ? serverFiles?.favicon : ""}
onRemoveServerFile={() => handleServerFileRemoval("favicon", "")}
/> />
<span className="error"> <span className="error">
{formik.touched.favicon && formik.errors.favicon ? formik.errors.favicon : ""} {formik.touched.favicon && formik.errors.favicon ? formik.errors.favicon : ""}
...@@ -155,7 +175,8 @@ export default function SiteSetting() { ...@@ -155,7 +175,8 @@ export default function SiteSetting() {
value={formik.values.logo || null} value={formik.values.logo || null}
onChange={(file: File | File[] | null) => formik.setFieldValue("logo", file)} onChange={(file: File | File[] | null) => formik.setFieldValue("logo", file)}
onBlur={() => formik.setFieldTouched("logo", true)} onBlur={() => formik.setFieldTouched("logo", true)}
serverFile={!formik.values.logo ? data?.data?.logo : ""} serverFile={!formik.values.logo ? serverFiles?.logo : ""}
onRemoveServerFile={() => handleServerFileRemoval("logo", "")}
/> />
<span className="error"> <span className="error">
{formik.touched.logo && formik.errors.logo ? formik.errors.logo : ""} {formik.touched.logo && formik.errors.logo ? formik.errors.logo : ""}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment