From dd838260c1e5ac3796b0fc5771270578fe8fc243 Mon Sep 17 00:00:00 2001 From: amritBskt Date: Tue, 14 Jan 2025 16:43:14 +0530 Subject: [PATCH 1/3] feat: Added API calls for featuredHostels and Blogs section in main page --- Frontend/react/src/components/BlogCard.js | 19 +++++---- Frontend/react/src/components/Blogs.js | 2 +- .../react/src/components/FeaturedHostels.js | 41 ++++++++++++++++++- Frontend/react/src/components/HostelCard.js | 8 ++-- 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/Frontend/react/src/components/BlogCard.js b/Frontend/react/src/components/BlogCard.js index c7a9799..7e67631 100644 --- a/Frontend/react/src/components/BlogCard.js +++ b/Frontend/react/src/components/BlogCard.js @@ -1,20 +1,21 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; +// import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; const BlogCard = ( {blog} ) => { - const navigate = useNavigate(); - const handleCardClick = () => { - // console.log(blog.id); - navigate(`/blog/${blog.id}`); - } + // const navigate = useNavigate(); + // const handleCardClick = () => { + // // console.log(blog.id); + // navigate(`/blog/${blog.id}`); + // } console.log(blog.image); return ( -
+
{blog.title}

{blog.title}

-

{blog.content}

- Read More +

{blog.summary}

+ Read More
); diff --git a/Frontend/react/src/components/Blogs.js b/Frontend/react/src/components/Blogs.js index 66146e1..aaf9461 100644 --- a/Frontend/react/src/components/Blogs.js +++ b/Frontend/react/src/components/Blogs.js @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import axios from 'axios'; -import blogs from '../data/blogs.json'; +// import blogs from '../data/blogs.json'; import BlogCard from "./BlogCard"; import { Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; diff --git a/Frontend/react/src/components/FeaturedHostels.js b/Frontend/react/src/components/FeaturedHostels.js index 06c264f..8eca576 100644 --- a/Frontend/react/src/components/FeaturedHostels.js +++ b/Frontend/react/src/components/FeaturedHostels.js @@ -1,7 +1,8 @@ import React from 'react'; import HostelCard from './HostelCard'; import '../style.css'; -import hostels from '../data/hostels.json'; +// import hostels from '../data/hostels.json'; +import {useState, useEffect} from 'react'; import { Pagination, Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -11,6 +12,42 @@ import 'swiper/css/navigation'; const FeaturedHostels = () => { + const [featured, setFeatured]=useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const fetchFeaturedHostels = async () => { + setLoading(true); + setError(null); + + // const payload = {}; + + try { + const response = await fetch('http://127.0.0.1:8000/api/hostels/', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + // body: JSON.stringify(payload), + }); + if (!response.ok) { + throw new Error('Failed to fetch hostels. Please try again.'); + } + + const data = await response.json(); + setFeatured(data.hostels); + // console.log(featured); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchFeaturedHostels(); + }, []); + return (

Featured Hostels

@@ -36,7 +73,7 @@ const FeaturedHostels = () => { }} modules={[Pagination, Navigation]} > - {hostels.filter(hostel => hostel.isFeatured).map((hostel, index) => ( + {featured.filter(hostel => !hostel.isFeatured).map((hostel, index) => ( - {isFeatured &&
Featured
} + {!isFeatured &&
Featured
} {name}
{name}
@@ -18,8 +18,10 @@ const HostelCard = ({ id, image, name, isFeatured, rating, location, price, gend
{location}
-
Rs. {price}
-
{gender} Hostel
+ {/*
Rs. {price}
*/} +
+ {gender === 0 ? 'Girls Hostel' : 'Boys Hostel'} +
); From 2dd295daf41d1b3c23a7fd50a133d99058999149 Mon Sep 17 00:00:00 2001 From: amritBskt Date: Wed, 15 Jan 2025 00:30:16 +0530 Subject: [PATCH 2/3] feat: integrated blogDetail page with API --- Frontend/react/src/components/BlogDetail.js | 54 +++++++++++++++++++-- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/Frontend/react/src/components/BlogDetail.js b/Frontend/react/src/components/BlogDetail.js index 679a630..f23e935 100644 --- a/Frontend/react/src/components/BlogDetail.js +++ b/Frontend/react/src/components/BlogDetail.js @@ -1,15 +1,59 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import axios from 'axios'; import { useParams } from 'react-router-dom'; -import blogs from "../data/blogs.json"; +// import blogs from "../data/blogs.json"; import { Link } from 'react-router-dom'; -const Blog = () => { +const Blog = () => { + const [blogs, setBlogs] = useState([]); // State to store blogs + const [isLoading, setIsLoading] = useState(true); // State to show loading indicator + const [error, setError] = useState(null); // State to handle errors const { id } = useParams(); + useEffect(() => { + + // Fetch blogs from the Django backend + const fetchBlogs = async () => { + try { + const response = await axios.get('http://127.0.0.1:8000/api/blogs/'); // Update with your backend URL + setBlogs(response.data.blogs); // Set blogs data + console.log(response.data.blogs); + setIsLoading(false); // Loading done + } catch (err) { + console.error("Error fetching blogs:", err); + setError("Failed to load blogs. Please try again later."); + setIsLoading(false); + } + }; + + fetchBlogs(); + }, []); + + if (isLoading) { + return
Loading blogs...
; // Loading indicator + } + + if (error) { + return
{error}
; // Error message + } + + + const blog = blogs.find(blog => blog.id === Number(id)); + const formattedDate = new Date(blog.date).toLocaleString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + }); + const mostViewedBlogs = blogs.filter(blog => blog.id !== Number(id)).sort((a, b) => b.views - a.views).slice(0,5); + + // console.log(mostViewedBlogs); return (
@@ -18,7 +62,7 @@ const Blog = () => {

{blog.title}

- {blog.date} + {formattedDate} {blog.views} Views @@ -31,7 +75,7 @@ const Blog = () => { {/* {blog.hooks.map((hook, index) => (

{hook}

))} */} - {blog.content.map((paragraph, index) => ( + {blog.content.split('\n').map((paragraph, index) => (

{paragraph}

))}
From 67a31a8a0ac25e462eb0898e498b1cc156985a3a Mon Sep 17 00:00:00 2001 From: amritBskt Date: Wed, 15 Jan 2025 00:37:45 +0530 Subject: [PATCH 3/3] chore: added navigation logic for cityCards --- Frontend/react/src/components/CityCard.js | 8 ++++---- Frontend/react/src/components/TopCities.js | 4 +++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/Frontend/react/src/components/CityCard.js b/Frontend/react/src/components/CityCard.js index 450365b..219f861 100644 --- a/Frontend/react/src/components/CityCard.js +++ b/Frontend/react/src/components/CityCard.js @@ -2,10 +2,10 @@ import React from 'react'; import axios from 'axios'; const CityCard = ({ name, image, description, onClick }) => { - axios - .get('http://localhost:8000/api/hostels/') - .then((response) => console.log(response.data)) - .catch((error) => console.error('Error:', error)); + // axios + // .get('http://localhost:8000/api/hostels/') + // .then((response) => console.log(response.data)) + // .catch((error) => console.error('Error:', error)); return (
diff --git a/Frontend/react/src/components/TopCities.js b/Frontend/react/src/components/TopCities.js index 3ff3ba9..e687ac7 100644 --- a/Frontend/react/src/components/TopCities.js +++ b/Frontend/react/src/components/TopCities.js @@ -1,17 +1,19 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import CityCard from './CityCard'; import topCitiesData from '../data/topcities.json'; const TopCities = () => { const [showAll, setShowAll] = useState(false); + const navigate = useNavigate(); const toggleCityRows = () => { setShowAll(!showAll); }; const goToDetails = (city) => { - // Implement navigation logic here console.log(`Navigating to details of ${city}`); + navigate(`/search-results?location=${city}&lat=${0}&lon=${0}`); }; return (