From 340de94a5db005ac8260269e3de9460bfcbecf11 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Fri, 24 Apr 2026 16:37:32 +0530
Subject: [PATCH] add blogs from backend in the homepage after city selected

---
 src/Redux/Store.tsx                 |  7 ++-
 src/Redux/services/blogs.service.ts | 28 +++++++++
 src/components/MelbourneBlogs.tsx   | 89 +++++++++++++++++++----------
 3 files changed, 93 insertions(+), 31 deletions(-)
 create mode 100644 src/Redux/services/blogs.service.ts

diff --git a/src/Redux/Store.tsx b/src/Redux/Store.tsx
index 363baba..2f46957 100644
--- a/src/Redux/Store.tsx
+++ b/src/Redux/Store.tsx
@@ -5,6 +5,7 @@ import { authApi } from "./services/auth.service";
 import { profileApi } from "./services/profile.service";
 import { cardsApi } from "./services/cards.service";
 import { itineraryApi } from "./services/itinerary.service";
+import { blogsApi } from "./services/blogs.service";
 
 export const store = configureStore({
   reducer: {
@@ -13,7 +14,8 @@ export const store = configureStore({
     [authApi.reducerPath]: authApi.reducer,
     [profileApi.reducerPath]: profileApi.reducer,
     [cardsApi.reducerPath]:cardsApi.reducer,
-    [itineraryApi.reducerPath]:itineraryApi.reducer
+    [itineraryApi.reducerPath]:itineraryApi.reducer,
+    [blogsApi.reducerPath]:blogsApi.reducer
 
   },
 
@@ -24,7 +26,8 @@ export const store = configureStore({
       authApi.middleware,
       profileApi.middleware,
       cardsApi.middleware,
-      itineraryApi.middleware
+      itineraryApi.middleware,
+      blogsApi.middleware
     ),
 });
 export type RootState = ReturnType<typeof store.getState>;
diff --git a/src/Redux/services/blogs.service.ts b/src/Redux/services/blogs.service.ts
new file mode 100644
index 0000000..bcc2a40
--- /dev/null
+++ b/src/Redux/services/blogs.service.ts
@@ -0,0 +1,28 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { baseQuery } from "../baseQuery";
+
+export const blogsApi = createApi({
+  reducerPath: 'blogsApi',
+    baseQuery,
+  endpoints: (builder) => ({
+
+   getBlogsForCity: builder.query({
+      // cityId is required, others optional
+      query: ({ cityId, categoryId }) => {
+        const params = new URLSearchParams();
+
+        // required
+        params.append('cityXid', cityId);
+
+        // optional
+        if (categoryId) params.append('categoryXid', categoryId);
+
+        return `/website/list/blogs?${params.toString()}`;
+      },
+    }),
+
+
+  }),
+});
+
+export const { useGetBlogsForCityQuery } = blogsApi;
\ No newline at end of file
diff --git a/src/components/MelbourneBlogs.tsx b/src/components/MelbourneBlogs.tsx
index 1be345a..4f6fff6 100644
--- a/src/components/MelbourneBlogs.tsx
+++ b/src/components/MelbourneBlogs.tsx
@@ -2,8 +2,9 @@ import { motion } from 'motion/react';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { Calendar, Clock, User, ArrowRight, Coffee, Camera, MapPin, Star } from 'lucide-react';
 import { Button } from './ui/button';
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useNavigate } from 'react-router-dom';
+import { useGetBlogsForCityQuery } from '../Redux/services/blogs.service';
 
 const blogPosts = [
   {
@@ -93,10 +94,22 @@ export function MelbourneBlogs() {
 
   const sectionRef = useRef(null);
   const navigate = useNavigate();
+  const cityId = localStorage.getItem('cityId');
+  const [categoryId, setCategoryId] = useState("");
+  const { data: blogsData, error, isLoading } = useGetBlogsForCityQuery({ cityId, categoryId });
   const featuredPost = blogPosts.find(post => post.featured);
   const regularPosts = blogPosts.filter(post => !post.featured);
 
   const cityName = localStorage.getItem('cityName');
+  const baseUrl = import.meta.env.VITE_BASE_URL;
+
+  const blogss = blogsData?.blogs ?? [];
+  const categoriess = blogsData?.categories ?? []
+
+  const handleCategoryClick = (id: string) => {
+    // toggle logic: if already selected, reset to empty
+    setCategoryId(prev => (prev === id ? "" : id));
+  };
 
   return (
     <section
@@ -145,29 +158,42 @@ export function MelbourneBlogs() {
           viewport={{ once: true }}
           className="flex flex-wrap justify-center gap-3 mb-16"
         >
-          {categories.map((category, index) => (
+          <motion.button
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => setCategoryId("")}
+            className={`cursor-pointer px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group 
+      ${categoryId === "" ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-white text-gray-700"}`}
+          >
+            <span className="flex items-center gap-2">All</span>
+          </motion.button>
+
+          {categoriess.map((category: any, index) => (
             <motion.button
-              key={category.name}
+              key={category.id}
               initial={{ opacity: 0, scale: 0.9 }}
               whileInView={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.4, delay: 0.2 + index * 0.05 }}
               viewport={{ once: true }}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className={`px-6 py-3 rounded-full bg-gradient-to-r ${category.color} text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300 group`}
+              onClick={() => handleCategoryClick(category.id)}
+              className={`cursor-pointer px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group 
+        ${categoryId === category.id ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-white text-gray-700"}`}
             >
               <span className="flex items-center gap-2">
-                {category.name}
-                <span className="text-xs bg-white/20 px-2 py-1 rounded-full group-hover:bg-white/30 transition-colors duration-200">
-                  {category.count}
-                </span>
+                {category.categoryName}
               </span>
             </motion.button>
           ))}
         </motion.div>
 
+
         {/* Featured Post */}
-        {featuredPost && (
+        {/* {featuredPost && (
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -177,13 +203,13 @@ export function MelbourneBlogs() {
           >
 
           </motion.div>
-        )}
+        )} */}
 
         {/* Regular Blog Posts Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {regularPosts.map((post, index) => (
+          {blogss && blogss?.map((blog: any, index) => (
             <motion.article
-              key={post.id}
+              key={blog.id}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
@@ -193,47 +219,52 @@ export function MelbourneBlogs() {
               {/* Post Image */}
               <div className="relative overflow-hidden h-48">
                 <ImageWithFallback
-                  src={post.image}
-                  alt={post.title}
+                  src={`${baseUrl}${blog?.coverImage}`}
+                  alt={blog?.blogTitle}
                   className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
 
                 {/* Category Badge */}
                 <div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
-                  {post.category}
+                  {blog?.category?.categoryName}
                 </div>
               </div>
 
               {/* Post Content */}
               <div className="p-6 flex-1 flex flex-col justify-between">
                 <div className="flex items-center gap-3 text-xs text-gray-500 mb-3">
-                  <div className="flex items-center gap-1">
+                  {/* <div className="flex items-center gap-1">
                     <User className="w-3 h-3" />
-                    {post.author}
-                  </div>
+                    {blog?.author}
+                  </div> */}
                   <div className="flex items-center gap-1">
                     <Calendar className="w-3 h-3" />
-                    {post.date}
+                    {blog?.createdAt && new Date(blog.createdAt).toLocaleDateString(
+                      'en-US',
+                      { month: 'short', day: 'numeric', year: 'numeric' }
+                    )}
                   </div>
                   <div className="flex items-center gap-1">
                     <Clock className="w-3 h-3" />
-                    {post.readTime}
+                    5 min read
                   </div>
                 </div>
 
                 <div className="flex-1 flex flex-col">
                   <h3 className="font-merchant text-xl font-semibold text-gray-900 mb-3 leading-tight group-hover:text-primary transition-colors duration-200 line-clamp-2">
-                    {post.title}
+                    {blog?.blogTitle}
                   </h3>
 
-                  <p className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3">
-                    {post.excerpt}
-                  </p>
+                  <p
+                    className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3"
+                    dangerouslySetInnerHTML={{ __html: blog?.content }}
+                  />
+
 
                   {/* Tags */}
-                  <div className="flex flex-wrap gap-1 mb-4">
-                    {post.tags.slice(0, 2).map((tag, tagIndex) => (
+                  {/* <div className="flex flex-wrap gap-1 mb-4">
+                    {blog?.tags?.slice(0, 2).map((tag, tagIndex) => (
                       <span
                         key={tagIndex}
                         className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium"
@@ -241,12 +272,12 @@ export function MelbourneBlogs() {
                         {tag}
                       </span>
                     ))}
-                    {post.tags.length > 2 && (
+                    {blog?.tags?.length > 2 && (
                       <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">
-                        +{post.tags.length - 2}
+                        +{blog?.tags?.length - 2}
                       </span>
                     )}
-                  </div>
+                  </div> */}
                 </div>
 
                 <div className="flex items-center justify-between mt-auto">