add blogs from backend in the homepage after city selected
This commit is contained in:
aryabenade
@@ -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>;
|
||||
|
||||
28
src/Redux/services/blogs.service.ts
Normal file
28
src/Redux/services/blogs.service.ts
Normal file
@@ -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;
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user