gifts finished

2024-10-14 18:41:39 +05:00 · 2024-10-14 18:41:39 +05:00 · 087d03442e
parent 5530489d41
commit 087d03442e
5 changed files with 76 additions and 147 deletions
--- a/app/(prizes)/prizes/[user_id]/page.tsx
+++ b/app/(prizes)/prizes/[user_id]/page.tsx
@ -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');
--- a/components/MobileMenu.tsx
+++ b/components/MobileMenu.tsx
@ -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>
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@ -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>
--- a/components/prizes/PrizeCard.tsx
+++ b/components/prizes/PrizeCard.tsx
@ -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,28 +102,40 @@ const PrizeCard = ({
        <p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
          {description}
        </p>
+
        {variant === 'default' ? (
-          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-            <DialogTrigger
-              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}
-              disabled={choosePrizeMutation.isLoading}>
-              {choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'}
-            </DialogTrigger>
-            <DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]">
-              <DialogHeader className="flex flex-col gap-[8px]">
-                <DialogTitle>{dialogTitle}</DialogTitle>
-                <DialogDescription>Все прошло успешно!</DialogDescription>
-              </DialogHeader>
-              <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]">
-                    Закрыть
+          <>
+            {/* 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={handleDialogOpen}
+                    disabled={choosePrizeMutation.isLoading}>
+                    {choosePrizeMutation.isLoading ? 'Loading...' : 'Выбрать'}
                  </button>
-                </DialogClose>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+                </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>
+                  </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]">
+                          Закрыть
+                        </button>
+                      </DialogClose>
+                    </DialogFooter>
+                  )}
+                </DialogContent>
+              </Dialog>
+            </div>
+          </>
        ) : variant === 'disabled' ? (
          <button
            disabled
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@ -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,
-};