api ulandi

src/pages/news/ui/News.tsx

@@ -1,7 +1,5 @@
 "use client";
-import { fakeNewsData } from "@/pages/news/lib/data";
-import type { NewsAll } from "@/pages/news/lib/type";
-import formatDate from "@/shared/lib/formatDate";
+import { getAllNews } from "@/pages/news/lib/api";
 import { Badge } from "@/shared/ui/badge";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
@@ -12,42 +10,44 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
+import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
-import { Calendar, Edit, FolderOpen, PlusCircle, Trash2 } from "lucide-react";
+import { Edit, FolderOpen, PlusCircle, Trash2 } from "lucide-react";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 const News = () => {
-  const [newsList, setNewsList] = useState<NewsAll[]>(fakeNewsData);
-  const loading = false;
-  const error = null;
+  const { t } = useTranslation();
   const [deleteId, setDeleteId] = useState<number | null>(null);
   const navigate = useNavigate();
+  const {
+    data: allNews,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["all_news"],
+    queryFn: () => getAllNews({ page: 1, page_size: 2 }),
+  });
 
-  const confirmDelete = () => {
-    if (deleteId !== null) {
-      setNewsList((prev) => prev.filter((t) => t.id !== deleteId));
-      setDeleteId(null);
-    }
-  };
+  const confirmDelete = () => {};
 
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="min-h-screen bg-gray-900 w-full text-white flex justify-center items-center">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
-          <p className="text-lg">Yuklanmoqda...</p>
+          <p className="text-lg">{t("Yuklanmoqda...")}</p>
         </div>
       </div>
     );
   }
 
-  if (error) {
+  if (isError) {
     return (
       <div className="min-h-screen bg-gray-900 w-full text-white flex justify-center items-center">
         <div className="text-center">
-          <p className="text-xl text-red-400">{error}</p>
-          <Button className="mt-4">Qayta urinish</Button>
+          <Button className="mt-4">{t("Qayta urinish")}</Button>
         </div>
       </div>
     );
@@ -58,9 +58,10 @@ const News = () => {
       {/* Header */}
       <div className="flex justify-between items-center mb-8 w-[90%] mx-auto">
         <div>
-          <h1 className="text-4xl font-bold mb-2">Yangiliklar</h1>
+          <h1 className="text-4xl font-bold mb-2">{t("Yangiliklar")}</h1>
           <p className="text-gray-400">
-            Jami {newsList.length} ta yangilik mavjud
+            {t("Jami")} {allNews?.data.data.total_items}{" "}
+            {t("ta yangilik mavjud")}
           </p>
         </div>
         <Button
@@ -68,7 +69,7 @@ const News = () => {
           className="flex items-center gap-2 cursor-pointer bg-blue-600 hover:bg-blue-700 text-white"
         >
           <PlusCircle size={18} />
-          Yangilik qo'shish
+          {t("Yangilik qo'shish")}
         </Button>
       </div>
 
@@ -76,12 +77,12 @@ const News = () => {
       <div
         className={clsx(
           "gap-6 w-[90%] mx-auto",
-          newsList.length === 0
+          allNews?.data.data.total_items === 0
             ? "flex justify-center items-center min-h-[60vh]"
-            : "grid md:grid-cols-2 lg:grid-cols-3",
+            : "grid md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3",
         )}
       >
-        {newsList.length === 0 ? (
+        {allNews?.data.data.total_items === 0 ? (
           <div className="text-center py-12">
             <div className="mb-6">
               <div className="w-24 h-24 bg-neutral-800 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -89,20 +90,20 @@ const News = () => {
               </div>
             </div>
             <p className="text-2xl text-gray-400 mb-2 font-semibold">
-              Hozircha yangilik yo'q
+              {t("Hozircha yangilik yo'q")}
             </p>
             <p className="text-gray-500 mb-6">
-              Birinchi yangilikni qo'shib boshlang
+              {t("Birinchi yangilikni qo'shishni boshlang")}
             </p>
             <Button
               onClick={() => navigate("/news/add")}
               className="flex items-center gap-2 mx-auto bg-blue-600 hover:bg-blue-700 text-white"
             >
-              <PlusCircle size={18} /> Yangilik qo'shish
+              <PlusCircle size={18} /> {t("Yangilik qo'shish")}
             </Button>
           </div>
         ) : (
-          newsList.map((item) => (
+          allNews?.data.data.results.map((item) => (
             <Card
               key={item.id}
               className="overflow-hidden bg-neutral-900 hover:bg-neutral-800 transition-all duration-300 border border-neutral-800 hover:border-neutral-700 group"
@@ -111,7 +112,7 @@ const News = () => {
               <div className="relative h-48 overflow-hidden">
                 <img
                   src={item.image}
-                  alt={item.short_title}
+                  alt={item.title}
                   className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   onError={(e) => {
                     e.currentTarget.src =
@@ -131,25 +132,26 @@ const News = () => {
               <div className="p-4 space-y-3">
                 {/* Title */}
                 <h2 className="text-xl font-bold line-clamp-2 group-hover:text-blue-400 transition-colors">
-                  {item.short_title}
+                  {item.title}
                 </h2>
 
                 {/* Short Text */}
                 <p className="text-sm text-gray-400 line-clamp-3 leading-relaxed">
-                  {item.short_text}
+                  {item.text}
                 </p>
 
                 {/* Date */}
                 <div className="flex items-center gap-2 text-xs text-gray-500">
-                  <Calendar size={14} />
-                  <span>{formatDate.format(item.created, "DD.MM.YYYY")}</span>
+                  <span>{item.is_public}</span>
                 </div>
 
                 {/* Slug */}
                 <div className="pt-2 border-t border-neutral-800">
-                  <code className="text-xs text-gray-500 bg-neutral-800 px-2 py-1 rounded">
-                    /{item.slug}
-                  </code>
+                  {item.tag?.map((e) => (
+                    <code className="text-xs text-gray-500 bg-neutral-800 px-2 py-1 rounded">
+                      /{e.name}
+                    </code>
+                  ))}
                 </div>
 
                 {/* Actions */}
@@ -161,7 +163,7 @@ const News = () => {
                     className="hover:bg-neutral-700 hover:text-blue-400"
                   >
                     <Edit size={16} className="mr-1" />
-                    Tahrirlash
+                    {t("Tahrirlash")}
                   </Button>
                   <Button
                     size="sm"
@@ -170,7 +172,7 @@ const News = () => {
                     className="hover:bg-red-700"
                   >
                     <Trash2 size={16} className="mr-1" />
-                    O'chirish
+                    {t("O'chirish")}
                   </Button>
                 </div>
               </div>
@@ -183,22 +185,23 @@ const News = () => {
         <DialogContent className="sm:max-w-[425px] bg-gray-900">
           <DialogHeader>
             <DialogTitle className="text-xl">
-              Yangilikni o'chirishni tasdiqlang
+              {t("Yangilikni o'chirishni tasdiqlang")}
             </DialogTitle>
           </DialogHeader>
           <div className="py-4">
             <p className="text-muted-foreground">
-              Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga
-              qaytarib bo'lmaydi.
+              {t(
+                "Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga qaytarib bo'lmaydi.",
+              )}
             </p>
           </div>
           <DialogFooter className="gap-4 flex">
             <Button variant="outline" onClick={() => setDeleteId(null)}>
-              Bekor qilish
+              {t("Bekor qilish")}
             </Button>
             <Button variant="destructive" onClick={confirmDelete}>
               <Trash2 className="w-4 h-4 mr-2" />
-              O'chirish
+              {t("O'chirish")}
             </Button>
           </DialogFooter>
         </DialogContent>