fix(front,back) Добавил на бек выгрузку категорий, начало разработки shop

backend/handlers/item_handlers.go

@@ -88,3 +88,16 @@ func DeleteItem(c *gin.Context) {
 
 	c.JSON(http.StatusOK, gin.H{"message": "Товар успешно удален"})
 }
+
+func GetCategories(c *gin.Context) {
+	var item models.Item
+	var categories []string
+
+	err := database.DB.Model(&item).Where("category IS NOT NULL AND category != ''").Distinct().Pluck("category", &categories).Error
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, categories)
+}

backend/main.go

@@ -44,6 +44,7 @@ func main() {
 			protected.DELETE("/items/:id", handlers.DeleteItem)
 			protected.PATCH("/items/:id", handlers.UpdateItem)
 			protected.POST("/items", handlers.AddItem)
+			protected.GET("/getCategories", handlers.GetCategories)
 		}
 
 		admin := protected.Group("/")

frontend/src/api/index.js

@@ -36,3 +36,5 @@ export const updateItem = (id, itemData) =>
   axios.patch(`${API_URL}/items/${id}`, itemData);
 
 export const deleteItem = (id) => axios.delete(`${API_URL}/items/${id}`);
+
+export const getAllCategories = () => axios.get(`${API_URL}/getCategory`)

frontend/src/pages/About.jsx

@@ -1,6 +1,18 @@
 import PageLayout from "../components/PageLayout";
+import { useState, useEffect } from "react"
+import * as api from '../api/index'
 
 export default function Shop() {
+
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    pa
+  })
+
+
+
   return (
     <PageLayout>
       <main className="px-16 grow w-full">

frontend/src/pages/Shop.jsx

@@ -1,14 +1,38 @@
 import PageLayout from "../components/PageLayout";
+import * as api from "../api/index";
+import { useState, useEffect } from "react";
 
 export default function Shop() {
+  const [items, setItems] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [activeCategory, setActiveCategory] = useState("all");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([api.getAllItems(), api.getAllCategories()])
+      .then((itemsRes, categoriesRes) => {
+        setItems(itemsRes.data);
+        setCategories(categoriesRes.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Ошибка при загрузке товара", err);
+        setLoading(false);
+      });
+  }, []);
+
+  const filteredItems =
+    activeCategory === "all"
+      ? items
+      : items.fitler(
+        (item) =>
+          item.category?.toLowerCase() === activeCategory.toLowerCase(),
+      );
+
   return (
     <PageLayout>
       <main className="px-16 grow w-full">
-        <div className="flex flex-row text-white">
+        <div className="flex flex-row text-white"></div>
-          <div className="text-4xl flex-col">
-            <h1 className="uppercase">fish fish</h1>
-          </div>
-        </div>
       </main>
     </PageLayout>
   );