choose api added

2024-10-11 19:17:05 +05:00 · 2024-10-11 19:17:05 +05:00 · 5530489d41
parent 229e3de2f2
commit 5530489d41
4 changed files with 102 additions and 31 deletions
--- a/app/(prizes)/prizes/[user_id]/page.tsx
+++ b/app/(prizes)/prizes/[user_id]/page.tsx
@ -3,6 +3,8 @@ import PrizeCard from '@/components/prizes/PrizeCard';
 import { useState } from 'react';
 import axios from 'axios';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { GiftsType } from '@/typings/gifts/gifts.type';
+import { useRouter } from 'next/navigation';

 // Define the expected shape of the fetched data
 interface Prize {
@ -14,29 +16,43 @@ interface Prize {
 const PrizesPage = ({ params }: { params: { user_id: string } }) => {
  const [selectedPrize, setSelectedPrize] = useState<null | number>(null);
  const queryClient = useQueryClient();
+  const router = useRouter();

  // Fetching data using TanStack Query
-  const { data, isLoading, error } = useQuery<Prize[], Error>(
-    [`gifts-${params.user_id}`, params.user_id], // Query key using user_id
+  const { data, isLoading, error } = useQuery<GiftsType, Error>(
+    [`gifts-${params.user_id}`, params.user_id, selectedPrize], // 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
-      initialData: () => queryClient.getQueryData([`gifts-${params.user_id}`]),
+      // Handle error with onError callback to trigger the redirect
+      onError: () => {
+        router.push('/prizes/auth');
+      },
    },
  );

-  if (isLoading) return <p>Loading...</p>;
-  if (error) return <p>Error loading prizes: {error.message}</p>;
+  if (isLoading)
+    return (
+      <div className="flex justify-center items-center h-full text-heading2 leading-heading2 font-medium min-h-[50vh]">
+        Loading...
+      </div>
+    );
+
+  // Log the error to the console, even if redirecting
+  if (error) {
+    console.error('Error loading prizes:', error.message);
+    return null; // Return null since the redirect will occur
+  }

  return (
    <div className="flex flex-col gap-[32px] md:gap-[64px] items-center">
      <header className="flex flex-col gap-[24px]">
        <div className="flex flex-col gap-[8px] max-w-[639px] w-full">
          <h1 className="text-lightOnSurface text-heading1 leading-heading1 md:text-display1 md:leading-display1 tracking-[-1%] text-center font-medium">
-            Список подарков
+            {data.data.title}
          </h1>
          <p className="text-center text-textSmall leading-textSmall md:text-textBase md:leading-textBase tracking-[-1%] text-lightOnSurface">
            Поздравляю с победой в викторине! Вы стали победителем и получаете возможность выбрать
@ -49,9 +65,9 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
          Есть вопросы? Обратись XYXYXY!
        </p>
      </header>
-      <div className="flex flex-col gap-[24px] md:gap-[16px] items-center max-w-[832px]">
-        {data.length > 0 &&
-          data.map((prize, i) => (
+      <div className="flex flex-col gap-[24px] md:gap-[16px] items-center max-w-[832px] w-full">
+        {data.data.gifts &&
+          data.data.gifts.map((prize, i) => (
            <PrizeCard
              key={prize.id}
              variant={
@ -62,7 +78,9 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => {
                  : 'disabled'
              }
              setSelectedPrize={setSelectedPrize}
-              prizeId={prize.id}
+              id={prize.id}
+              code={params.user_id}
+              {...prize}
            />
          ))}
      </div>
--- a/components/prizes/PrizeCard.tsx
+++ b/components/prizes/PrizeCard.tsx
@ -10,53 +10,98 @@ import {
  DialogTitle,
  DialogTrigger,
 } from '@/components/ui/dialog';
-import { Button } from 'react-day-picker';
-import { Dispatch, SetStateAction } from 'react';
-import { ClassNames } from '@emotion/react';
+import { Dispatch, SetStateAction, useState } from 'react';
+import axios from 'axios';
+import { useMutation } from '@tanstack/react-query';

 interface IProps {
  variant: 'default' | 'selected' | 'disabled';
-  prizeId: number;
  setSelectedPrize: Dispatch<SetStateAction<null | number>>;
  className?: string;
+  code: string;
+  title: string;
+  description: string;
+  image: null | string;
+  id: number;
 }

-const PrizeCard = ({ variant, prizeId, setSelectedPrize, className }: IProps) => {
+const PrizeCard = ({
+  variant,
+  setSelectedPrize,
+  code,
+  id,
+  title,
+  description,
+  image,
+  className,
+}: IProps) => {
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [dialogTitle, setDialogTitle] = useState<string>('Успешно');
+
+  // TanStack Query mutation for the API request
+  const choosePrizeMutation = useMutation({
+    mutationFn: () =>
+      axios.post(`https://sms.turkmentv.gov.tm/api/gifts/${id}/choose`, {
+        code,
+      }),
+    onSuccess: () => {
+      // Set the selected prize on successful API request
+      setSelectedPrize(id);
+      setDialogTitle('Успешно');
+      setDialogOpen(true); // Open the dialog on success
+    },
+    onError: () => {
+      // Set the dialog title to "Ошибка" on error
+      setDialogTitle('Ошибка');
+      setDialogOpen(true); // Open the dialog on error
+    },
+  });
+
+  const handleDialogTriggerClick = () => {
+    choosePrizeMutation.mutate();
+  };
+
  return (
    <div
      className={cn(
-        'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden',
+        'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden w-full',
        className,
        {
          'opacity-50': variant === 'disabled',
        },
      )}>
      <div className="flex-1 overflow-hidden md:h-full h-[186px]">
-        <Image width={416} height={248} src="/prize.jpg" alt="prize" className="h-full w-full" />
+        <Image
+          width={416}
+          height={248}
+          src={image ? image : '/prize.jpg'}
+          alt="prize"
+          className="h-full w-full"
+        />
      </div>
      <div className="flex-1 p-[16px] flex flex-col gap-[16px]">
        <h2 className="text-heading5 leading-heading5 -tracking-[-1%] font-medium text-lightOnSurface">
-          Новый Cadillac Escalade 2025 Premium Luxury Platinun
+          {title}
        </h2>
        <p className="text-textSmall leading-textSmall -tracking-[-1%] text-lightOnSurfaceVariant">
-          Это роскошный полноразмерный SUV, представленный американским производителем Cadillac.
-          Этот автомобиль отличается высоким уровнем комфорта, стиля и технологий.{' '}
+          {description}
        </p>
        {variant === 'default' ? (
-          <Dialog>
-            <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]">
-              Выбрать
+          <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>{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]"
-                    onClick={() => setSelectedPrize(prizeId)}>
+                  <button className="px-[24px] py-[10px] w-full text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]">
                    Закрыть
                  </button>
                </DialogClose>
--- a/components/prizes/SmsForm.tsx
+++ b/components/prizes/SmsForm.tsx
@ -4,11 +4,9 @@ import React, { useState, useEffect, FormEvent } from 'react';
 import axios from 'axios';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
+import { GiftsType } from '@/typings/gifts/gifts.type';

 // Define the expected shape of the API response
-interface GiftResponse {
-  data: any; // Replace 'any' with the actual data type if known
-}

 const SmsForm: React.FC = () => {
  const [inputValue, setInputValue] = useState<string>('');
@ -17,7 +15,7 @@ const SmsForm: React.FC = () => {
  const router = useRouter();

  // TanStack Query mutation for the API request
-  const mutation = useMutation<GiftResponse, Error, string>({
+  const mutation = useMutation<GiftsType, Error, string>({
    mutationKey: [`gifts-${inputValue}`], // Using the dynamic query key
    mutationFn: (code: string) => axios.get(`https://sms.turkmentv.gov.tm/api/gifts/${code}`),
    onSuccess: (data) => {
--- a/typings/gifts/gifts.type.ts
+++ b/typings/gifts/gifts.type.ts
@ -0,0 +1,10 @@
+export interface GiftsType {
+  data: Data;
+}
+
+export interface Data {
+  id: number;
+  title: string;
+  image: null;
+  gifts: any[];
+}