Skip to content

Commit

Permalink
Fix: Resolve issues on the landing page for improved functionality (#270
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@Prince-Kid
Prince-Kid authored Nov 28, 2024
1 parent bfc3646 commit 8e50e92
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 65 deletions.
9 changes: 5 additions & 4 deletions src/components/home/Blogs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import { toast } from 'react-toastify';
lastname: string;
}
interface Blog {
comments: number;
likes: number;
reactions: { id: string }[];
comments: { id: string }[];
likes: { id: string }[];
id: string;
title: string;
content: string;
Expand Down Expand Up @@ -43,10 +44,10 @@ const BlogCard = ({ blog }: { blog: Blog }) => (
: "Unknown Date"}
</span>
<span className="flex flex-row gap-1 items-center">
<CiHeart size={20} className="dark:text-green" /> {blog.likes || 0}
<CiHeart size={20} className="dark:text-green" /> {blog.reactions.length || 0}
</span>
<span className="flex flex-row gap-1 items-center">
<FaCommentDots size={20} className="dark:text-green" /> {blog.comments || 0}
<FaCommentDots size={20} className="dark:text-green" /> {blog.comments.length || 0}
</span>
</div>
</div>
Expand Down
124 changes: 66 additions & 58 deletions src/pages/Blogs/Blogs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FaRegThumbsUp, FaCommentDots, FaUser, FaCalendar } from 'react-icons/fa
import { CiHeart } from "react-icons/ci";
import { toast } from "react-toastify";
import Header from "../../components/home/Header";
import Footer from "../../components/home/Footer";
import { fetchAllBlogs, Blog } from "../../redux/actions/blogsActions";
import { Link } from "react-router-dom";

Expand Down Expand Up @@ -56,67 +57,74 @@ const Blogs: React.FC = () => {
</div>
</div>
) : blogs.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
{blogs.map((blog) => (
<div
key={blog.id}
className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300"
>
<img
src={blog.coverImage}
alt={blog.title}
className="w-full h-40 object-cover mb-4"
/>
<div className="p-3">
<div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-3">
<span className="font-semibold flex flex-row gap-2 items-center">
<FaUser size={20} className='dark:text-green' /> {blog.author.firstname}
</span>
<span className="ml-2 flex flex-row gap-2 items-center">
<span className="ml-2 flex flex-row gap-2 items-center">
<FaCalendar size={20} className="dark:text-green" />
{blog.created_at
? new Date(Number(blog.created_at)).toLocaleDateString()
: "Unknown Date"}
</span>
</span>
<span className='flex flex-row gap-1 items-center'>
<CiHeart size={20} className='dark:text-green' /> {blog.likes || 0}
</span>
<span className='flex flex-row gap-1 items-center'>
<FaCommentDots size={20} className='dark:text-green' /> {blog.comments || 0}
</span>
</div>
</div>
<><div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
{blogs.map((blog) => (
<div
key={blog.id}
className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300"
>
<img
src={blog.coverImage}
alt={blog.title}
className="w-full h-40 object-cover mb-4" />
<div className="p-3">
<div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-3">
<span className="font-semibold flex flex-row gap-2 items-center">
<FaUser size={20} className='dark:text-green' /> {blog.author.firstname}
</span>
<span className="ml-2 flex flex-row gap-2 items-center">
<span className="ml-2 flex flex-row gap-2 items-center">
<FaCalendar size={20} className="dark:text-green" />
{blog.created_at
? new Date(Number(blog.created_at)).toLocaleDateString()
: "Unknown Date"}
</span>
</span>
<span className='flex flex-row gap-1 items-center'>
<CiHeart size={20} className='dark:text-green' /> {blog.reactions.length || 0}
</span>
<span className='flex flex-row gap-1 items-center'>
<FaCommentDots size={20} className='dark:text-green' /> {blog.comments.length || 0}
</span>
</div>
</div>
</div>
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
{blog.content.substring(0, 150)}...
</p>
<div className="flex flex-wrap gap-2 mt-3">
{blog.tags.map((tag) => (
<span
key={tag}
onClick={() => setSelectedTag(tag)}
className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
>
#{tag}
</span>
))}
</div>
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
Read More →
</Link>
</div>
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
{blog.content.substring(0, 150)}...
</p>
<div className="flex flex-wrap gap-2 mt-3">
{blog.tags.map((tag) => (
<span
key={tag}
onClick={() => setSelectedTag(tag)}
className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
>
#{tag}
</span>
))}
</div>
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
Read More →
</Link>
</div>
</div>
))}
</div>
))}
</div><Footer /></>
) : (
<div className="text-center text-gray-600 dark:text-gray-300">
No blogs available.
</div>
<div className="flex flex-col justify-center items-center h-screen text-center dark:bg-dark-bg bg-white px-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-16 h-16 text-gray-500 mb-4"
>
<path d="M12 2a10 10 0 11-10 10A10 10 0 0112 2zm5 11H7a1 1 0 000 2h10a1 1 0 000-2zm-1-4a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z" />
</svg>
<p className="text-lg text-gray-500 dark:text-gray-300">No blogs available at the moment. Check back later!</p>
</div>
)}
</div>
</section>
Expand Down
9 changes: 6 additions & 3 deletions src/redux/actions/blogsActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ export interface Author {
lastname: string;
}
export interface Blog {
comments: number;
likes: number;
comments: { id: string }[];
likes: { id: string }[];
reactions: { id: string }[];
id: string;
title: string;
content: string;
Expand Down Expand Up @@ -40,6 +41,9 @@ export const fetchAllBlogs = async (tag?: string): Promise<Blog[]> => {
likes {
id
}
reactions {
id
}
comments {
id
}
Expand All @@ -62,7 +66,6 @@ export const fetchAllBlogs = async (tag?: string): Promise<Blog[]> => {

if (response.data.errors) {
console.error("GraphQL errors:", JSON.stringify(response.data.errors, null, 2));
toast.error("Error fetching blogs");
return [];
}

Expand Down

0 comments on commit 8e50e92

Please sign in to comment.