Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gifts finished

This commit is contained in:
Kakabay 2024-10-14 18:41:39 +05:00
parent 5530489d41
commit 087d03442e
5 changed files with 76 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/(prizes)/prizes/[user_id]/page.tsx
View File

@ -20,13 +20,12 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
// Fetching data using TanStack Query
const { data, isLoading, error } = useQuery<GiftsType, Error>(
[`gifts-${params.user_id}`, params.user_id, selectedPrize], // Query key using user_id
[`gifts-${params.user_id}`, params.user_id], // Query key using user_id
() =>
axios
.get(`https://sms.turkmentv.gov.tm/api/gifts/${params.user_id}`)
.then((response) => response.data),
{
staleTime: 60000, // Cache data for 1 minute
// Handle error with onError callback to trigger the redirect
onError: () => {
router.push('/prizes/auth');

11
components/MobileMenu.tsx
View File

@ -153,6 +153,7 @@ const MobileMenu = () => {
<Link
href={'/vote'}
className="block text-2xl text-white transition-all font-roboto font-bold "
style={path.includes('vote') ? { color: '#FFAB48' } : {}}
onClick={() => {
setDropDownOpened(false);
onClickCloseBurgerHandler();
@ -168,6 +169,16 @@ const MobileMenu = () => {
}}>
TV market
</Link>
<Link
href={'/prizes/auth'}
className="block text-2xl text-white transition-all font-roboto font-bold"
style={path.includes('prizes') ? { color: '#FFAB48' } : {}}
onClick={() => {
setDropDownOpened(false);
onClickCloseBurgerHandler();
}}>
Sowgatlar
</Link>
</div>
</div>
</li>

10
components/Nav.tsx
View File

@ -107,7 +107,7 @@ const Nav = () => {
</svg>
<div
className={`absolute top-10 left-1/2 -translate-x-1/2 bg-[#353598] flex flex-col gap-4 p-[24px] rounded-[8px] transition-all duration-300 w-[150px] ${
className={`absolute top-10 left-1/2 -translate-x-1/2 bg-[#353598] flex flex-col gap-4 p-[24px] rounded-[8px] transition-all duration-300 w-[160px] ${
dropDownOpened
? 'opacity-100 translate-y-0 pointer-events-auto'
: ' opacity-0 translate-y-2 pointer-events-none'
@ -136,9 +136,17 @@ const Nav = () => {
<Link
href={'/sms/sign_up'}
className="block min-w-fit text-lg text-white transition-all font-roboto font-bold"
style={path.includes('/sms/sign_up') ? { color: '#FFAB48' } : {}}
onClick={() => setDropDownOpened(false)}>
SMS ulgamy
</Link>
<Link
href={'/prizes/auth'}
className="block min-w-fit text-lg text-white transition-all font-roboto font-bold"
style={path.includes('/prizes/auth') ? { color: '#FFAB48' } : {}}
onClick={() => setDropDownOpened(false)}>
Sowgatlar
</Link>
</div>
</div>
</li>

50
components/prizes/PrizeCard.tsx
View File

@ -36,7 +36,9 @@ const PrizeCard = ({
className,
}: IProps) => {
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
const [dialogTitle, setDialogTitle] = useState<string>('Успешно');
const [dialogTitle, setDialogTitle] = useState<string>('Выберите приз');
const [dialogDescription, setDialogDescription] = useState<string>('Загрузка...');
const [isSuccess, setIsSuccess] = useState<boolean>(false);
// TanStack Query mutation for the API request
const choosePrizeMutation = useMutation({
@ -45,22 +47,36 @@ const PrizeCard = ({
code,
}),
onSuccess: () => {
// Set the selected prize on successful API request
setSelectedPrize(id);
setDialogTitle('Успешно');
setDialogOpen(true); // Open the dialog on success
setDialogDescription('Приз успешно выбран.');
setIsSuccess(true); // Mark as success so we can handle setting the prize when dialog closes
},
onError: () => {
// Set the dialog title to "Ошибка" on error
setDialogTitle('Ошибка');
setDialogOpen(true); // Open the dialog on error
setDialogDescription('Произошла ошибка, попробуйте еще раз.');
setIsSuccess(false); // Reset on error
},
});
const handleDialogTriggerClick = () => {
const handleDialogOpen = () => {
// Reset the dialog to show the loading state
setDialogTitle('Загрузка...');
setDialogDescription('Пожалуйста подождите');
setIsSuccess(false); // Reset success state before opening
// Trigger the mutation when the dialog opens
choosePrizeMutation.mutate();
};
const handleDialogClose = (open: boolean) => {
setDialogOpen(open);
// Check if the dialog was closed and if the mutation was successful
if (!open && isSuccess) {
setSelectedPrize(id); // Set the selected prize when the dialog closes after success
}
};
return (
<div
className={cn(
@ -86,19 +102,28 @@ const PrizeCard = ({
<p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
{description}
</p>
{variant === 'default' ? (
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogTrigger
<>
{/* DialogTrigger to open the dialog */}
<div>
<Dialog open={dialogOpen} onOpenChange={handleDialogClose}>
<DialogTrigger asChild>
<button
className="px-[24px] py-[10px] w-full md:w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]"
onClick={handleDialogTriggerClick}
onClick={handleDialogOpen}
disabled={choosePrizeMutation.isLoading}>
{choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'}
</button>
</DialogTrigger>
{/* DialogContent that shows loading or response */}
<DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]">
<DialogHeader className="flex flex-col gap-[8px]">
<DialogTitle>{dialogTitle}</DialogTitle>
<DialogDescription>Все прошло успешно!</DialogDescription>
<DialogDescription>{dialogDescription}</DialogDescription>
</DialogHeader>
{dialogTitle !== 'Загрузка...' && (
<DialogFooter>
<DialogClose asChild>
<button className="px-[24px] py-[10px] w-full text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]">
@ -106,8 +131,11 @@ const PrizeCard = ({
</button>
</DialogClose>
</DialogFooter>
)}
</DialogContent>
</Dialog>
</div>
</>
) : variant === 'disabled' ? (
<button
disabled

117
components/ui/alert-dialog.tsx
View File

@ -1,117 +0,0 @@
'use client';
import * as React from 'react';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
import { cn } from '@/lib/utils';
import { buttonVariants } from '@/components/ui/button';
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlay = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className,
)}
{...props}
ref={ref}
/>
));
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-lightSurfaceContainer p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
className,
)}
{...props}
/>
</AlertDialogPortal>
));
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
);
AlertDialogHeader.displayName = 'AlertDialogHeader';
const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...props}
/>
);
AlertDialogFooter.displayName = 'AlertDialogFooter';
const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn('text-lg font-semibold', className)}
{...props}
/>
));
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
));
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(buttonVariants({ variant: 'outline' }), '', className)}
{...props}
/>
));
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
};