Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#283 Improve blog card to be clickable #278

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
+128 −85
Open

#283 Improve blog card to be clickable #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f06c7e
fix: Enhance landing page and implement navigations
Prince-Kid Nov 29, 2024
be61fc5
fix(#283): hide reactions and comments for unauthenticated users
Prince-Kid Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions src/components/home/AboutUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,31 @@ const AboutUs = () => {
</div>


<div className="flex flex-wrap gap-6 items-center px-10 ">
<div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
<GrResources size={40} className='dark:text-white'/>
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Guidance</h3>
<p className='text-black-600 dark:text-white'>
Get expert guidance every step of the way. From applying to tracking your progress,
our team is here to help you succeed and reach your full potential.
<div className="flex flex-wrap justify-center gap-4 p-4">
<div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
<GrResources size={40} className="dark:text-white" />
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Guidance</h3>
<p className="text-black-600 dark:text-white">
Get expert guidance every step of the way. From applying to tracking your progress, our team is here to help you succeed and reach your full potential.
</p>
</div>
<div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
<FaUsers size={40} className='dark:text-white' />
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Community</h3>
<p className='text-black-600 dark:text-white'>
Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
<div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
<FaUsers size={40} className="dark:text-white" />
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Community</h3>
<p className="text-black-600 dark:text-white">
Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
</p>
</div>
<div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
<GrDocumentPerformance size={35} className='dark:text-white ' />
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Tools and Resources</h3>
<p className='text-black-600 dark:text-white'>
Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top </p>
<div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
<GrDocumentPerformance size={35} className="dark:text-white" />
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Tools and Resources</h3>
<p className="text-black-600 dark:text-white">
Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top.
</p>
</div>

</div>


</div>
)
}
Expand Down
15 changes: 10 additions & 5 deletions src/components/home/Blogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { Link } from 'react-router-dom';
import { fetchAllBlogs } from '../../redux/actions/blogsActions';
import { toast } from 'react-toastify';



interface Author {
id: string;
email: string;
Expand All @@ -28,10 +30,14 @@ import { toast } from 'react-toastify';
}



const BlogCard = ({ blog }: { blog: 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">
<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" >
<Link to={`/blogs/${blog.id}`}>
<img src={blog.coverImage} alt={blog.title} className="w-full h-40 object-cover mb-4" />
</Link>
<div className="p-3">
<Link to={`/blogs/${blog.id}`}>
<div className="flex justify-between text-sm mb-4 items-center">
<div className="flex flex-wrap items-center gap-3">
<span className="font-semibold flex flex-row gap-2 items-center">
Expand All @@ -51,14 +57,13 @@ const BlogCard = ({ blog }: { blog: Blog }) => (
</span>
</div>
</div>

</Link>
<Link to={`/blogs/${blog.id}`}>
<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}
</p>
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
Read More →
</Link>
</Link>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useNotifications } from "../../utils/Notifications";
import { useAdminNotifications } from "../../hooks/useAdminNotifications";
const logo = require("../../assets/logo.svg").default;
const LogoWhite: string = require("../../assets/logoWhite.svg").default;
const profilePlaceholder = require("../../assets/avatar.png").default;
const profilePlaceholder = require("../../assets/default-image.jpg").default;

const Header = () => {
const [isNavOpen, setIsNavOpen] = useState(false);
Expand All @@ -21,7 +21,7 @@ const Header = () => {
const accessToken = localStorage.getItem("access_token");
const isLoggedIn = Boolean(accessToken);
//@ts-ignore
const user = isLoggedIn ? jwtDecode(accessToken)?.profile || profilePlaceholder : profilePlaceholder;
const user = isLoggedIn ? jwtDecode(accessToken)?.data.picture || profilePlaceholder : profilePlaceholder;

const roleName = localStorage.getItem("roleName");

Expand Down
4 changes: 2 additions & 2 deletions src/components/profileDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ function ProfileDropdown({
>
<>{t("Preferences")}</>
</Link>
{/* <Link
<Link
onClick={handleShowProfileDropdown}
to={destination()}
className="font-semibold text-gray-600 dark:text-black px-4 py-2 pb-4 hover:bg-gray-600 hover:text-gray-200 dark:hover:bg-gray-300 dark:hover:text-gray-900"
>
<>{t("Dashboard")}</>
</Link> */}
</Link>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/sidebar/navHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import jwtDecode from "jwt-decode";
import { useNotifications } from "../../utils/Notifications";
import { useAdminNotifications } from "../../hooks/useAdminNotifications";
const logo: string = require("../../assets/logo.svg").default;
const profile: string = require("../../assets/avatar.png").default;
const profile: string = require("../../assets/default-image.jpg").default;
const LogoWhite: string = require("../../assets/logoWhite.svg").default;
import {destination} from '../../utils/utils'
import SearchBar from "../../components/SearchBar";
Expand Down Expand Up @@ -85,7 +85,7 @@ function NavBar() {
const userDestination = destination();
const access_token = localStorage.getItem("access_token");
//@ts-ignore
const user = access_token ? jwtDecode(access_token)?.profile || profile : profile;
const user = access_token ? jwtDecode(access_token)?.picture || profile : profile;

const roleName = localStorage.getItem("roleName");
const [nav, setNav] = useState(false);
Expand Down
118 changes: 64 additions & 54 deletions src/pages/Blogs/Blogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,62 +57,71 @@ 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">
<>
<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>
</div>
<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"
>
<Link to={`/blogs/${blog.id}`}>
<img
src={blog.coverImage}
alt={blog.title}
className="w-full h-40 object-cover mb-4"
/>
</Link>
<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">
<Link to={`/blogs/${blog.id}`}>
<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">
<FaCalendar size={20} className="dark:text-green" />
{blog.created_at
? new Date(Number(blog.created_at)).toLocaleDateString()
: "Unknown Date"}
</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>
</Link>
</div>
</div>
<Link to={`/blogs/${blog.id}`}>
<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>
</Link>
<div className="flex flex-wrap gap-2 mt-3">
{blog.tags.map((tag) => (
<span
key={tag}
onClick={(e) => {
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>
</div>

</div>

))}
</div><Footer /></>
</div>

</>
) : (
<div className="flex flex-col justify-center items-center h-screen text-center dark:bg-dark-bg bg-white px-6">
<svg
Expand All @@ -127,6 +136,7 @@ const Blogs: React.FC = () => {
</div>
)}
</div>
<Footer />
</section>
);
};
Expand Down
32 changes: 30 additions & 2 deletions src/pages/Blogs/singleBlog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,36 @@ const SingleBlogView = () => {
)}
</div>
</div>
{id && <BlogReaction blogId={id} />}
{id && <BlogComment blogId={id} />}
{
userId ? (
<>
{id && <BlogReaction blogId={id} />}
{id && <BlogComment blogId={id} />}
</>
):(
<div className="py-4">
<p className="text-sm dark:text-slate-300">
Please{" "}
<a
href="/"
className="text-green hover:text-green-700"
>
log in
</a>{" "}
or{" "}
<a
href="/"
className="text-green hover:text-green-700"
>
create an account
</a>{" "}
to like or comment.
</p>
</div>

)
}

{topArticles && topArticles.length > 0 ? (
<div className='mt-10'>
<h1>Related Articles</h1>
Expand Down
Loading